@import url("https://fonts.googleapis.com/css2?family=Patua+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");@import url("https://fonts.googleapis.com/css2?family=Patua+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");body {
	margin: 0;
	padding: 0;
	font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1;
	margin: 0;
	scroll-behavior: smooth;
}

code {
	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.spin {
	animation: spin 0.6s infinite;
}

.hasPointer {
	cursor: pointer;
}
/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
@media screen and (min-width: 640px) {
  .container {
    max-width: 600px;
  }
}
@media screen and (min-width: 768px) {
  .container {
    max-width: 760px;
  }
}
@media screen and (min-width: 1024px) {
  .container {
    max-width: 1000px;
  }
}
@media screen and (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }
}
@media screen and (min-width: 1536px) {
  .container {
    max-width: 1440px;
  }
}

.home-section-header {
  font-size: 36px;
  font-weight: 500;
  text-align: center;
  font-family: "Poppins", "Noto Sans KR", sans-serif;
}
@media (max-width: 1024px) {
  .home-section-header {
    font-size: 28px;
  }
}

.section-scroll-offset {
  scroll-margin-top: 80px;
}

.homepage-section {
  padding-top: 40px;
  padding-bottom: 40px;
}.apply-color-state-container#apply-color-state-container-wrapper {
  display: flex;
  text-align: start;
}
.apply-color-state-container .emergency, .apply-color-state-container .checked_out {
  border: 3px dashed #951616;
}
.apply-color-state-container .high, .apply-color-state-container .seen_doctor {
  border: 3px dashed #FFA000;
}
.apply-color-state-container .normal, .apply-color-state-container .waiting_to_see_doctor {
  border: 3px dashed #3B946F;
}
.apply-color-state-container .discharged_by_doctor {
  border: 3px dashed #efb0ea;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.dropdown-component-wrapper .dropdown-container {
  position: relative;
  min-width: 150px;
  font-family: Arial, sans-serif;
  cursor: pointer;
}
.dropdown-component-wrapper .dropdown-container_label {
  font-weight: bold;
  line-height: 26px;
}
.dropdown-component-wrapper .dropdown-container_label sup {
  color: #b24d4d;
}
.dropdown-component-wrapper .dropdown-selected {
  display: flex;
  align-items: center;
  min-width: inherit;
  min-height: 46px;
  border: 1px solid rgba(128, 128, 128, 0.7);
  padding: 5px 10px;
  background-color: white;
  justify-content: space-between;
  border-radius: 8px;
}
.dropdown-component-wrapper .dropdown-selected:hover {
  cursor: pointer;
}
.dropdown-component-wrapper .dropdown-selected-is-valid {
  border: 2px solid #0492c2;
}
.dropdown-component-wrapper .selected-option-display {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dropdown-component-wrapper .dropdown-options-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border-radius: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 1000;
  border-top: none;
  border-bottom: 2px solid rgba(128, 128, 128, 0.7);
  border-left: 2px solid rgba(128, 128, 128, 0.7);
  border-right: 2px solid rgba(128, 128, 128, 0.7);
  max-height: 300px;
  overflow-y: auto;
  overflow-x: visible;
  min-width: 100%;
  width: fit-content;
}
.dropdown-component-wrapper .dropdown-options-wrapper .dropdown-option {
  padding: 10px;
  background-color: #fff;
  white-space: nowrap;
}
.dropdown-component-wrapper .dropdown-options-wrapper .dropdown-option:hover {
  color: #ffffff;
  background: #3f3d3d;
}
.dropdown-component-wrapper .dropdown-error {
  color: #b24d4d;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.input-field-container {
  display: flex;
  flex-flow: column;
  row-gap: 5px;
}
.input-field-container label {
  line-height: 28px;
  font-size: 14px;
  text-align: left;
}
.input-field-container label span {
  color: #b24d4d;
}
.input-field-container .input-wrapper {
  display: flex;
  flex-flow: row;
  position: relative;
  width: 100%;
  border-radius: 8px;
}
.input-field-container .input-wrapper .input-prefix {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  padding-left: 12px;
  top: 0;
  bottom: 0;
}
.input-field-container .input-wrapper .input-suffix {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
  top: 0;
  bottom: 0;
}
.input-field-container .input-wrapper .custom-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(128, 128, 128, 0.7);
  outline: none;
  padding: 12px 8px;
  min-height: 45px;
  font-size: 14px;
  line-height: 14px;
  ring: inset 0;
}
.input-field-container .input-wrapper .custom-input.plain-input {
  max-height: 45px;
}
.input-field-container .input-wrapper .custom-input::placeholder {
  color: rgba(128, 128, 128, 0.7);
}
@media (min-width: 640px) {
  .input-field-container .input-wrapper .custom-input {
    font-size: 14px;
    line-height: 24px;
  }
}
.input-field-container .input-wrapper .custom-input:focus-within {
  border: none;
  border-color: #0492c2;
  box-shadow: none;
  outline: 2px solid #0492c2;
}
.input-field-container .input-wrapper .custom-input.error {
  border-color: #b24d4d !important;
}
.input-field-container .input-wrapper .custom-input.error:focus-within {
  border-color: #b24d4d !important;
  outline-color: #b24d4d !important;
  box-shadow: none !important;
}
.input-field-container .input-error {
  font-size: 14px;
  color: #b24d4d;
  text-align: left;
  margin-top: 3px;
}

.input-field-wrapper {
  display: flex;
  flex-flow: column;
}

.format-input {
  height: 46px;
  line-height: 8px;
  padding: 5px 10px;
  border: 2px solid rgba(128, 128, 128, 0.7);
  outline: none;
  font-size: 16px;
}

.position-input-name-left {
  text-align: left;
  display: inline-block;
  width: 240px;
}

.input-success-icon-wrapper {
  display: flex;
  justify-content: flex-end;
  position: relative;
  top: 13px;
}

.input-success-icon,
.input-error-icon {
  position: absolute;
  display: flex;
  flex-flow: column;
  padding-right: 8px;
}

.input-success-icon {
  color: #0492c2;
}

.input-error-icon {
  color: #b24d4d;
}

.input-success {
  border-color: #0492c2 !important;
}

.input-error {
  color: #b24d4d !important;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.select-input-wrapper {
  position: relative;
  display: flex;
  flex-flow: column;
  row-gap: 5px;
}
.select-input-wrapper label {
  line-height: 28px;
  font-size: 14px;
  text-align: left;
}
.select-input-wrapper label span {
  color: #b24d4d;
}
.select-input-wrapper .select-input-button {
  background: transparent;
  width: 100%;
}
.select-input-wrapper .input-error {
  font-size: 14px;
  color: #b24d4d;
  text-align: left;
  margin-top: 3px;
}

.select-options {
  position: absolute;
  z-index: 999;
  margin-top: 4px;
  border-radius: 8px;
  background: #ffffff;
  padding: 5px 4px;
  width: var(--button-width);
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid rgba(128, 128, 128, 0.7);
}

.select-option {
  padding: 12px 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-direction: row;
  border-radius: 8px;
  line-height: 18px;
  font-size: 14px;
}
.select-option:hover {
  background: rgba(217, 217, 217, 0.3019607843);
}
.select-option.active {
  background-color: rgba(143, 136, 136, 0.4);
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.page-header {
  position: fixed;
  min-height: 100px;
  width: 100%;
  background-color: #e7e7e7;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 0;
}
.page-header.dashboard-header {
  border-bottom: 3px solid #0492c2;
  min-height: 80px;
  height: 85px;
  padding: 8px 0px;
}
.page-header.dashboard-header .page-header__container .logo img {
  width: 40px;
  height: 40px;
}
.page-header .page-header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  column-gap: 30px;
}
.page-header .page-header__container .logo {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-header .page-header__container .logo img {
  width: 40px;
  height: 40px;
  margin: 0 auto;
}
.page-header .page-header__container .logo span {
  font-weight: 500;
  color: #0492c2;
  padding-top: 10px;
}
.page-header .page-header__container .header-menu {
  display: flex;
  align-items: center;
  column-gap: 30px;
}
.page-header .page-header__container .header-menu.center-menu {
  justify-content: space-between;
  width: 100%;
}
.page-header .page-header__container .header-menu.center-menu ul {
  width: 100%;
  justify-content: space-between;
  padding: 0 30px;
}
.page-header .page-header__container .header-menu .hospital-logo-image {
  width: 50px;
  height: 50px;
}
.page-header .page-header__container .header-menu .hospital-logo-image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
@media screen and (max-width: 1024px) {
  .page-header .page-header__container .header-menu {
    display: none;
  }
}
.page-header .page-header__container .header-menu ul {
  display: flex;
  align-items: center;
  column-gap: 25px;
  list-style: none;
}
@media screen and (max-width: 1024px) {
  .page-header .page-header__container .header-menu ul {
    display: none;
  }
}
.page-header .page-header__container .header-menu ul li a {
  font-weight: 500;
  font-size: 16px;
}
.page-header .page-header__container .header-menu ul li:hover {
  color: #0492c2;
}
.page-header .page-header__container .header-menu ul li:hover::after :not(.active) {
  content: "";
  position: absolute;
  width: 100%;
  bottom: -9px;
  height: 2px;
  left: 0;
  background-color: #0492c2;
}
.page-header .page-header__container .header-menu ul li .active {
  color: #0492c2;
  font-weight: 700;
  border-image: linear-gradient(to left, #0492c2, #ffffff) 1;
  border-bottom: 2px solid;
  padding-bottom: 6px;
}
.page-header .page-header__container .header-menu .new-message-badge {
  background-color: green;
  color: white;
  font-size: 14px;
  font-weight: bold;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -25px;
  right: -20px;
}
.page-header .page-header__container .mobile-nav {
  display: none;
}
@media screen and (max-width: 1024px) {
  .page-header .page-header__container .mobile-nav {
    display: flex;
  }
}
.page-header .page-header__container .nav-hidden {
  display: none;
}
.page-header .page-header__container .mobile-menu-combo {
  position: absolute;
  right: 10px;
  top: 70px;
  background: #e7e7e7;
  transition: all 0.5s ease-out;
  border: 2px solid rgba(128, 128, 128, 0.5);
  height: fit-content;
  padding: 20px 20px;
  border-radius: 10px;
  width: 60%;
  display: flex;
  flex-direction: column;
  row-gap: 25px;
}
.page-header .page-header__container .mobile-menu-combo ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 25px;
  list-style: none;
}
.page-header .page-header__container .mobile-menu-combo ul li a {
  font-weight: 500;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.button-component button {
  border-radius: 10px;
  color: #ffffff;
  background-color: #0492c2;
  padding: 8px;
  line-height: 12px;
  min-width: 100px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-component button.plain {
  background-color: transparent;
  min-width: fit-content;
  padding: 8px;
  color: #3f3d3d;
}
.button-component button.plain:hover {
  background-color: rgba(162, 160, 160, 0.2);
}
.button-component button.secondary-outline {
  background-color: transparent;
  border: 1px solid #b5b5b5;
  color: #505050;
  min-width: fit-content;
}
.button-component button.secondary-outline:hover {
  background-color: rgba(162, 160, 160, 0.2);
}
.button-component button b {
  font-size: 14px;
  color: #ffffff;
}
@media screen and (min-width: 650px) {
  .button-component button {
    padding: 20px;
    min-width: 140px;
  }
  .button-component button b {
    font-size: 16px;
  }
}
.button-component button:hover {
  cursor: pointer;
  background-color: #63c5da;
}
.button-component button:disabled {
  cursor: unset;
  background-color: #e9e4e4;
}
.button-component i {
  position: relative;
  top: 2px;
}
.button-component .loading-spinner {
  width: 15px;
  height: 15px;
  display: inline-flex;
  padding: 0.5%;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #0492c2;
  border-radius: 50%;
  animation: spinner 1s linear infinite;
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.button-component-label {
  margin: 10px 0;
  font-size: 14px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.modal-overlay-2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 101;
  padding: 0 10px;
}
.modal-overlay-2 .modal-2 {
  position: relative;
  background-color: white;
  max-height: 90vh;
  border-radius: 10px;
  overflow-y: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  padding: 0px;
}
.modal-overlay-2 .modal-2--sm {
  width: 380px;
}
@media screen and (max-width: 400px) {
  .modal-overlay-2 .modal-2--sm {
    width: 100%;
  }
}
.modal-overlay-2 .modal-2--md {
  width: 440px;
}
@media screen and (max-width: 460px) {
  .modal-overlay-2 .modal-2--md {
    width: 100%;
  }
}
.modal-overlay-2 .modal-2--lg {
  width: 620px;
}
@media screen and (max-width: 640px) {
  .modal-overlay-2 .modal-2--lg {
    width: 100%;
  }
}
.modal-overlay-2 .modal-2--xl {
  width: 780px;
}
@media screen and (max-width: 800px) {
  .modal-overlay-2 .modal-2--xl {
    width: 100%;
  }
}
.modal-overlay-2 .modal-2--full {
  width: 100%;
}
.modal-overlay-2 .modal-2 .modal-header-2 {
  position: relative;
  padding: 1rem 1rem 0.5rem 1rem;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  /* used to style close modal button */
}
.modal-overlay-2 .modal-2 .modal-header-2 button {
  background-color: transparent;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  max-height: 35px;
  max-width: 35px;
}
.modal-overlay-2 .modal-2 .modal-header-2 button svg {
  width: 30px;
  height: 30px;
  color: black;
}
.modal-overlay-2 .modal-2 .modal-header-2 h2 {
  font-size: 18px;
}
.modal-overlay-2 .modal-2 .modal-content-2 {
  padding: 1rem 1rem;
  overflow-y: auto;
  max-height: calc(90vh - 60px);
}

@media print {
  .modal-2 {
    min-height: 100%;
    box-shadow: none;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.support-form-container {
  display: flex;
  align-items: center;
  margin: auto;
  gap: 15px;
  justify-content: center;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .support-form-container {
    flex-direction: row;
    align-items: flex-start;
    padding-top: 10px;
  }
}
.support-form-container_contactCard {
  background-color: #aac7d8;
  padding: 20px;
  border-radius: 8px;
  min-height: 325px;
  width: 300px;
  margin-top: 5px;
}
.support-form-container_contactCard h3 {
  text-align: center;
  margin-bottom: 60px;
}
.support-form-container_contactCard .support-form-container_contactItem {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
}
.support-form-container_contactCard .support-form-container_contactItem .support-form-container_icon {
  color: #333;
}
.support-form-container .support-form-item {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  width: 350px;
}
.support-form-container .support-form-item .support-form-container_btn-wrapper {
  display: flex;
  justify-content: end;
}
.support-form-container .support-form-item textarea {
  min-height: 200px !important;
}

.support-success-message-wrapper {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
  text-align: center;
  width: 70%;
  margin: auto;
  gap: 30px;
  padding: 25px;
}
.support-success-message-wrapper .greetings {
  color: #47b892;
}.toast-component-w .toast-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 5px solid;
  padding: 12px 16px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: #333;
  animation: slideIn 0.3s ease-out;
}
.toast-component-w .toast-wrapper.success {
  background-color: #e6ffed;
  border-color: #52c41a;
}
.toast-component-w .toast-wrapper.warning {
  background-color: #fffbe6;
  border-color: #faad14;
}
.toast-component-w .toast-wrapper.error {
  background-color: #fff1f0;
  border-color: #ff4d4f;
}
.toast-component-w .toast-wrapper .close-toast-button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  margin-left: 12px;
  color: inherit;
}
.toast-component-w .toast-wrapper span {
  line-height: 22px;
}
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.toast-component-w .toast-container-w {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 300px;
  z-index: 9999;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.app-wrapper {
  display: block;
  overflow-x: hidden;
  background-color: #e7e7e7;
}
@media screen and (max-width: 960px) {
  .app-wrapper {
    font-size: 9px;
  }
}
/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}
.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}
body,
html,
#root {
  height: 100%;
}
.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}
button,
input {
  border: none;
}
a {
  text-decoration: none;
  color: inherit;
}
* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}
html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}
.homepage-modal-wrapper .modal-overlay-2 .success_popup_green_text {
  display: none;
}
.homepage-modal-wrapper .modal-content-2 .msg {
  align-items: center;
  padding: 0;
}
.home-page-container {
  line-height: 1.5;
  font-family: "Poppins", "Noto Sans KR", sans-serif;
  max-width: 100vw;
}
.home-page-container_background-img {
  margin-bottom: 60px;
}
.home-page-container_headline-hero-img-w-text {
  display: flex;
  flex-flow: column;
}
@media screen and (min-width: 650px) {
  .home-page-container_headline-hero-img-w-text {
    max-width: 960px;
  }
}
.home-page-container h2 {
  font-weight: 500;
  text-align: center;
}
.home-page-container h2 span {
  font-weight: inherit;
  color: #0492c2;
}
.home-page-container h3 {
  font-weight: 600;
}
.home-page-container .base-img img {
  display: flex;
  justify-content: center;
  width: 100%;
}
.home-page-container #patient-reg {
  display: flex;
  margin: 30px 0;
  align-items: center;
  position: relative;
  width: 100%;
}
.home-page-container #patient-reg .reg {
  width: 100%;
}
.home-page-container #patient-reg .reg h3 {
  font-weight: bold;
  font-size: 22px;
}
.home-page-container #patient-reg .reg p {
  font-size: 18px;
}
.home-page-container #patient-reg .reg h3,
.home-page-container #patient-reg .reg p {
  line-height: 34px;
  text-align: justify;
}
@media screen and (max-width: 650px) {
  .home-page-container #patient-reg .reg h3,
  .home-page-container #patient-reg .reg p {
    padding-left: 5px;
    padding-right: 20px;
  }
}
.home-page-container #patient-reg .reg .button-pin {
  position: relative;
}
@media screen and (max-width: 650px) {
  .home-page-container #patient-reg .reg .button-pin {
    padding-left: 5px;
  }
}
.home-page-container #patient-reg .reg .button-pin .front-pin {
  position: absolute;
  margin-top: 40px;
}
.home-page-container #patient-reg .reg .text-pin {
  position: relative;
}
.home-page-container #patient-reg .reg .text-pin .back-pin {
  float: right;
  margin-top: -12px;
}
.home-page-container #patient-reg .reg h3,
.home-page-container #patient-reg .reg p,
.home-page-container #patient-reg .reg div {
  margin-top: 1rem;
}
.home-page-container #patient-reg .doc-section {
  width: 100%;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 960px) {
  .home-page-container #patient-reg .doc-section .doctorwoman {
    width: 30%;
  }
}
@media screen and (max-width: 960px) {
  .home-page-container #patient-reg {
    flex-direction: column-reverse;
  }
}
.home-page-container .about {
  display: flex;
  flex-flow: column;
  align-items: center;
  background-image: url("/assets/balls.png");
  background-repeat: no-repeat;
  background-size: 78%;
  background-position: center;
  margin-top: 2rem;
  position: relative;
  width: 100%;
  z-index: 1;
  min-height: 850px;
}
@media screen and (max-width: 650px) {
  .home-page-container .about {
    min-height: 700px;
  }
}
@media screen and (max-width: 480px) {
  .home-page-container .about {
    min-height: 800px;
  }
}
.home-page-container .about .about-health-pro-suite {
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 5px;
  max-width: 1338px;
  width: 100%;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4), -5px 5px 10px rgba(0, 0, 0, 0.4), 5px -5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(0, 0, 0, 0.4);
  margin-top: 2rem;
  text-align: justify;
}
@media screen and (max-width: 650px) {
  .home-page-container .about .about-health-pro-suite {
    box-shadow: none;
  }
}
.home-page-container .about .about-health-pro-suite:hover {
  transform: scale(0.98);
}
.home-page-container .about .about-health-pro-suite .ref-to-atrizult a {
  color: #0492c2;
  font-weight: bold;
  padding-right: 2px;
}
.home-page-container .about p {
  font-size: 18px;
  line-height: 34px;
  text-align: justify;
}
.home-page-container .about h2 {
  text-align: center;
  font-family: Patua One, sans-serif;
  font-size: 36px;
}
.home-page-container .about h2 span {
  color: #0492c2;
  font-size: inherit;
}
.home-page-container .about .about-health-pro-suite-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8.5rem;
  margin-top: 4rem;
  align-items: center;
}
@media screen and (max-width: 650px) {
  .home-page-container .about .about-health-pro-suite-wrapper {
    flex-wrap: nowrap;
    justify-content: flex-start;
    inline-size: 100%;
    margin-top: unset;
    gap: unset;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
  }
  .home-page-container .about .about-health-pro-suite-wrapper::-webkit-scrollbar {
    display: none;
    -webkit-appearance: none;
    scrollbar-width: none;
  }
}
.home-page-container .about .about-health-pro-suite-wrapper .about-health-pro-suite-all {
  background-color: #ffffff;
  text-align: center;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4), -5px 5px 10px rgba(0, 0, 0, 0.4), 5px -5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  flex: 0 0 320px;
  min-height: 400px;
}
.home-page-container .about .about-health-pro-suite-wrapper .about-health-pro-suite-all:hover {
  transform: scale(0.98);
}
.home-page-container .about .about-health-pro-suite-wrapper .about-health-pro-suite-all h3 {
  font-weight: 700;
  padding: 0.5rem 0;
}
.home-page-container .about .about-health-pro-suite-wrapper .about-health-pro-suite-all p {
  font-size: 16px;
  line-height: 32px;
  text-align: justify;
  hyphens: auto;
  padding: 5px 10px;
}
@media (max-width: 650px) {
  .home-page-container .about .about-health-pro-suite-wrapper .about-health-pro-suite-all {
    min-width: 100%;
  }
}
.home-page-container .about .indicators {
  position: absolute;
  margin-top: 1rem;
  bottom: 1rem;
  left: 50%;
  transform: translate(-50%);
  display: flex;
}
.home-page-container .about .indicators .indicator {
  display: none;
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  margin: 0 10px;
  cursor: pointer;
}
@media screen and (max-width: 650px) {
  .home-page-container .about .indicators .indicator {
    display: block;
  }
}
.home-page-container .about .indicators .active {
  background: #333;
}
.home-page-container .billing {
  margin-top: 2rem;
}
.home-page-container .billing .billing-info {
  text-align: center;
}
.home-page-container .billing .billing-info h3 {
  font-weight: bold;
  font-size: 22px;
}
.home-page-container .billing .billing-info p {
  font-size: 18px;
}
.home-page-container .billing .billing-info h3,
.home-page-container .billing .billing-info p {
  line-height: 34px;
  text-align: center;
}
.home-page-container .billing .billing-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6rem;
  justify-content: center;
  margin-bottom: 2rem;
}
@media screen and (max-width: 650px) {
  .home-page-container .billing .billing-cards {
    margin-bottom: 2rem;
    gap: unset;
  }
}
.home-page-container .billing .billing-cards .card {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  background-color: #ffffff;
  min-width: 240px;
  min-height: 382px;
  padding: 1rem;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4), -5px 5px 10px rgba(0, 0, 0, 0.4), 5px -5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(0, 0, 0, 0.4);
  border-radius: 7px;
}
@media screen and (max-width: 650px) {
  .home-page-container .billing .billing-cards .card {
    box-shadow: none;
  }
}
.home-page-container .billing .billing-cards .card:hover {
  transform: scale(0.98);
}
.home-page-container .billing .billing-cards .card .card-content {
  flex: 1 1;
}
.home-page-container .billing .billing-cards .card .card-content .card-name {
  font-weight: 700;
  line-height: 23.16px;
  color: #3f3d3d;
  text-transform: capitalize;
}
.home-page-container .billing .billing-cards .card .card-content .card-level {
  font-weight: 700;
  line-height: 41.7px;
  color: #3f3d3d;
  text-transform: capitalize;
}
.home-page-container .billing .billing-cards .card .card-content .card-condition {
  font-weight: 400;
  font-size: 14px;
  line-height: 23.16px;
  color: #3f3d3d;
  margin-bottom: 10px;
}
.home-page-container .billing .billing-cards .card .card-content ul {
  list-style: none;
}
.home-page-container .billing .billing-cards .card .card-content ul li {
  display: flex;
  gap: 5px;
  font-weight: 400;
  font-size: 12px;
  line-height: 16.22px;
  margin-bottom: 10px;
  color: black;
}
.home-page-container .billing .billing-cards .card .btn {
  background-color: #ffffff;
  color: #3f3d3d;
  width: 100%;
  border-radius: 7.72px;
  padding: 0.5rem 1rem;
  text-transform: capitalize;
  cursor: pointer;
}
.home-page-container .billing .billing-cards .card .btn-1 {
  border: 1px solid #f11348;
}
.home-page-container .billing .billing-cards .card .btn-2 {
  border: 1px solid #19f28a;
}
.home-page-container .billing .billing-cards .card .btn-3 {
  border: 1px solid #00b0ff;
}
.home-page-container .billing .billing-cards .card .btn-4 {
  border: 1px solid #ffa000;
}
.home-page-container .billing .billing-cards .card-1 {
  border: 1px solid #f11348;
}
.home-page-container .billing .billing-cards .card-2 {
  border: 1px solid #19f28a;
}
.home-page-container .billing .billing-cards .card-3 {
  border: 1px solid #00b0ff;
}
.home-page-container .billing .billing-cards .card-4 {
  border: 1px solid #ffa000;
}
.home-page-container .cntact-us {
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 100%;
  margin-top: 2rem;
  gap: 2rem;
}
.home-page-container .cntact-us h2 {
  text-align: center;
  font-family: Patua One, sans-serif;
  font-size: 36px;
}
.home-page-container .cntact-us h2 span {
  color: #0492c2;
  font-size: inherit;
}
@media screen and (max-width: 650px) {
  .home-page-container .cntact-us h2 {
    font-size: 30px;
  }
}
.home-page-container .cntact-us .form-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
}
@media screen and (max-width: 650px) {
  .home-page-container .cntact-us .form-item {
    justify-content: flex-start;
    width: 98%;
  }
}
.home-page-container .cntact-us .form-item .dropdown-component-container .dropdown-content-wrapper {
  position: relative;
}
.home-page-container .cntact-us .form-item .dropdown-component-container .options-wrapper {
  width: 100%;
}
.home-page-container .cntact-us .form-item .textarea .textarea-component-textarea-wrapper {
  width: 100%;
}
.home-page-container .cntact-us .form-item .textarea .textarea-component-textarea-wrapper textarea {
  min-width: 100%;
}
.home-page-container .cntact-us .form-item .custom-button {
  width: 100%;
  margin-top: 30px;
}
.home-page-container .cntact-us .form-item .custom-button .button-component button {
  width: 100%;
}
.map_and_contact_form {
  display: flex;
  width: 100%;
  gap: 2rem;
}
@media screen and (max-width: 650px) {
  .map_and_contact_form {
    flex-direction: column;
    align-items: center;
  }
}
.partnerSection {
  text-align: center;
  margin-top: 100px;
  background: #d8d8d8;
  padding: 5px 0px 40px 0px;
}
.partnerSection h2 {
  text-align: center;
  font-family: Patua One, sans-serif;
  font-size: 36px;
  margin-bottom: 10px;
}
.partnerSection h2 span {
  color: #0492c2;
  font-size: inherit;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

#banner .home-banner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  width: 100%;
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  padding-bottom: 40px;
}
@media screen and (max-width: 1024px) {
  #banner .home-banner {
    grid-template-columns: repeat(1, 1fr);
  }
}
#banner .home-banner .col-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 20px;
}
#banner .home-banner .col-1 h6 {
  font-weight: 400;
  font-size: 35px;
  font-family: Patua One, sans-serif;
  margin-top: 10px;
}
#banner .home-banner .col-1 h6 .lg {
  font-size: inherit;
  color: #0492c2;
}
@media screen and (min-width: 1024px) {
  #banner .home-banner .col-1 h6 {
    font-size: 45px;
    margin-top: 0px;
  }
}
#banner .home-banner .col-1 p {
  font-size: 16px;
  line-height: 32px;
}
#banner .home-banner .col-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
#banner .home-banner .col-2 img {
  width: 100%;
  max-height: 368px;
  object-fit: contain;
}
#banner .home-banner {
  position: relative;
  top: 15px;
}
@keyframes slideIn {
  0% {
    transform: translate(-100%);
    opacity: 0;
  }
  100% {
    transform: translate(0);
    opacity: 1;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.homepage-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 30px;
}
.homepage-features h2 {
  font-weight: 500;
  text-align: center;
}
.homepage-features h2 span {
  font-weight: inherit;
  color: #0492c2;
  font-size: inherit;
}
.homepage-features .features-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .homepage-features .features-content {
    flex-direction: column-reverse;
    display: flex;
    row-gap: 20px;
  }
}
.homepage-features .features-content .img-section img {
  margin-top: -40px;
  width: 60%;
}
@media screen and (max-width: 1024px) {
  .homepage-features .features-content .img-section img {
    margin-top: 0;
    width: 70%;
  }
}
@media screen and (max-width: 1024px) {
  .homepage-features .features-content .img-section {
    display: flex;
    justify-content: center;
  }
}
.homepage-features .features-content .info-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 25px;
}
.homepage-features .features-content .info-section .point-section {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}
.homepage-features .features-content .info-section .point-section .point {
  display: flex;
  flex-direction: row;
  column-gap: 15px;
}
.homepage-features .features-content .info-section .point-section .point .img-point {
  border: 2;
  border-color: #0492c2;
  border-style: solid;
  background-color: #ffffff;
  padding: 10px 5px;
  border-radius: 10px;
  width: 50px;
  max-width: 50px;
  height: 70px;
  max-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.homepage-features .features-content .info-section .point-section .point .img-point img {
  width: 40px;
  height: 40px;
}
/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}
.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}
body,
html,
#root {
  height: 100%;
}
.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}
button,
input {
  border: none;
}
a {
  text-decoration: none;
  color: inherit;
}
* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}
html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}
.feature_section_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  margin-top: 4rem;
  width: 100%;
}
@media (max-width: 960px) {
  .feature_section_wrapper {
    justify-content: center;
  }
}
.feature_section_wrapper .section_heading span {
  font-size: 36px;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0;
}
@media (max-width: 960px) {
  .feature_section_wrapper .section_heading span {
    font-size: 28px;
  }
}
.feature_section_wrapper .section_heading span:nth-of-type(odd) {
  color: #0492c2;
}
.feature_section_wrapper .section_content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 2rem;
}
.feature_section_wrapper .section_content_text-box p {
  margin-bottom: 15px;
}
.feature_section_wrapper .section_content * {
  font-size: 16px;
  line-height: 32px;
  text-align: justify;
  hyphens: auto;
}
@media (max-width: 960px) {
  .feature_section_wrapper .section_content {
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
  }
}
.feature_section_wrapper .section_content .section_image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature_section_wrapper .section_content .section_image img {
  max-width: 350px;
  min-height: 300px;
  object-fit: cover;
}
@media screen and (min-width: 960px) {
  .feature_section_wrapper .section_content .section_image img {
    min-width: 450px;
  }
}
.feature_section_wrapper .section_content > div {
  width: 50%;
  position: relative;
}
@media (max-width: 960px) {
  .feature_section_wrapper .section_content > div {
    width: 100%;
  }
}
.feature_section_wrapper .section_content > div .bg-circles {
  position: absolute;
  width: 70%;
  aspect-ratio: 395/420;
}
@media (max-width: 960px) {
  .feature_section_wrapper .section_content > div .bg-circles {
    width: 50%;
  }
}
.feature_section_wrapper .section_content > div img {
  position: relative;
  z-index: 1;
  border-radius: 18px;
  border: 0.29px solid rgba(128, 128, 128, 0.7);
}
.feature_section_wrapper ul {
  list-style-position: inside;
  padding-left: 15px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 10px 0;
}

@media (max-width: 1025px) {
  .carousel-container {
    width: 90vw;
  }
}
.carousel {
  display: flex;
  flex-direction: row;
  animation: scrollHorizontal 90s linear infinite;
  margin-top: 0;
  transition: all 0.3s ease;
  width: max-content;
}

.few-carousel-item {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.carousel.paused {
  animation-play-state: paused;
}

.logo-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 20px;
  transition: background-color 0.3s ease;
  padding: 10px;
  border-radius: 50%;
}
.logo-item:hover {
  background-color: #fff;
  cursor: pointer;
}

.logo-item .hospital-name {
  width: 70%;
  margin: auto;
  margin-bottom: 25px;
}
@media (max-width: 783px) {
  .logo-item .hospital-name {
    width: 90%;
    margin-bottom: 15px;
  }
}

.logo-item img {
  width: 111px;
  height: 111px;
  margin: 43px 70px 15px 70px;
}
@media (max-width: 783px) {
  .logo-item img {
    margin: 20px 40px 5px 40px;
  }
}

@keyframes scrollHorizontal {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.hospital-card .hospital-name {
  font-size: 1.6rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}
.hospital-card .hospital-address {
  font-size: 1rem;
  color: #555;
  margin-bottom: 10px;
}
.hospital-card .hospital-details {
  font-size: 1rem;
  color: #555;
  margin-bottom: 10px;
}
.hospital-card .hospital-email,
.hospital-card .hospital-phone {
  font-size: 0.9rem;
  margin-bottom: 5px;
}
.hospital-card .hospital-email a,
.hospital-card .hospital-phone a {
  color: #007BFF;
  text-decoration: none;
}
.hospital-card .hospital-email a:hover,
.hospital-card .hospital-phone a:hover {
  text-decoration: underline;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.team-section .team_members_section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.team-section .team_members_section h1 span {
  color: #0492c2;
  font-size: inherit;
}
.team-section .team_members_section .team_members_cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20px;
  row-gap: 30px;
  width: 100%;
  overflow: auto;
}
@media (max-width: 1024px) {
  .team-section .team_members_section .team_members_cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .team-section .team_members_section .team_members_cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .team-section .team_members_section .team_members_cards {
    grid-template-columns: repeat(1, 1fr);
  }
}
.team-section .team_members_section .team_members_cards div {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10px;
}
.team-section .team_members_section .team_members_cards div img {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: top;
  margin-bottom: 10px;
}
.team-section .team_members_section .team_members_cards div .team_member_card_name {
  font-weight: 500;
  text-align: center;
}
.team-section .team_members_section .team_members_cards div .team_member_card_position {
  font-weight: 600;
  text-align: center;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.contact-us {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 30px;
}
.contact-us h2 span {
  color: #0492c2;
  font-size: inherit;
}
.contact-us .map_and_contact_form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  gap: 2rem;
}
@media screen and (max-width: 1024px) {
  .contact-us .map_and_contact_form {
    grid-template-columns: repeat(1, 1fr);
  }
}
.contact-us .form-item {
  display: flex;
  flex-direction: column;
  margin: 10px 0;
  row-gap: 16px;
}
.contact-us .form-item button {
  width: 100%;
  margin-top: 10px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.success_popup_container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success_popup_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border: 0.745178px solid #000000;
  border-radius: 7.45178px;
  width: 61%;
  aspect-ratio: 589/364;
}
.success_popup_wrapper span {
  text-align: center;
}
@media (max-width: 650px) {
  .success_popup_wrapper {
    width: 100%;
  }
}

.success_popup_green_text {
  font-weight: 500;
  font-size: 17.8843px;
  line-height: 27px;
  color: #53bd8a;
}/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}

.leaflet-container {
	overflow: hidden;
	}

.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}

/* Prevents IE11 from highlighting tiles in blue */

.leaflet-tile::selection {
	background: transparent;
}

/* Safari renders non-retina tile on retina better with this, but Chrome is worse */

.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}

/* hack that prevents hw layers "stretching" when loading new tiles */

.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}

.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}

/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */

/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */

.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}

.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}

.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}

.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}

.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}

.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}

.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}

.leaflet-tile-loaded {
	visibility: inherit;
	}

.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}

/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */

.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }

.leaflet-overlay-pane { z-index: 400; }

.leaflet-shadow-pane  { z-index: 500; }

.leaflet-marker-pane  { z-index: 600; }

.leaflet-tooltip-pane   { z-index: 650; }

.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }

.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}

.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}

/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}

.leaflet-top {
	top: 0;
	}

.leaflet-right {
	right: 0;
	}

.leaflet-bottom {
	bottom: 0;
	}

.leaflet-left {
	left: 0;
	}

.leaflet-control {
	float: left;
	clear: both;
	}

.leaflet-right .leaflet-control {
	float: right;
	}

.leaflet-top .leaflet-control {
	margin-top: 10px;
	}

.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}

.leaflet-left .leaflet-control {
	margin-left: 10px;
	}

.leaflet-right .leaflet-control {
	margin-right: 10px;
	}

/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}

.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}

.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}

svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}

.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}

/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}

.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}

.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}

.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}

.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */

.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}

.leaflet-container a {
	color: #0078A8;
	}

.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}

/* general typography */

.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}

/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}

.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}

.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}

.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}

.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}

.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}

.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}

.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}

.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}

/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}

.leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAQAAAADQ4RFAAACf0lEQVR4AY1UM3gkARTePdvdoTxXKc+qTl3aU5U6b2Kbkz3Gtq3Zw6ziLGNPzrYx7946Tr6/ee/XeCQ4D3ykPtL5tHno4n0d/h3+xfuWHGLX81cn7r0iTNzjr7LrlxCqPtkbTQEHeqOrTy4Yyt3VCi/IOB0v7rVC7q45Q3Gr5K6jt+3Gl5nCoDD4MtO+j96Wu8atmhGqcNGHObuf8OM/x3AMx38+4Z2sPqzCxRFK2aF2e5Jol56XTLyggAMTL56XOMoS1W4pOyjUcGGQdZxU6qRh7B9Zp+PfpOFlqt0zyDZckPi1ttmIp03jX8gyJ8a/PG2yutpS/Vol7peZIbZcKBAEEheEIAgFbDkz5H6Zrkm2hVWGiXKiF4Ycw0RWKdtC16Q7qe3X4iOMxruonzegJzWaXFrU9utOSsLUmrc0YjeWYjCW4PDMADElpJSSQ0vQvA1Tm6/JlKnqFs1EGyZiFCqnRZTEJJJiKRYzVYzJck2Rm6P4iH+cmSY0YzimYa8l0EtTODFWhcMIMVqdsI2uiTvKmTisIDHJ3od5GILVhBCarCfVRmo4uTjkhrhzkiBV7SsaqS+TzrzM1qpGGUFt28pIySQHR6h7F6KSwGWm97ay+Z+ZqMcEjEWebE7wxCSQwpkhJqoZA5ivCdZDjJepuJ9IQjGGUmuXJdBFUygxVqVsxFsLMbDe8ZbDYVCGKxs+W080max1hFCarCfV+C1KATwcnvE9gRRuMP2prdbWGowm1KB1y+zwMMENkM755cJ2yPDtqhTI6ED1M/82yIDtC/4j4BijjeObflpO9I9MwXTCsSX8jWAFeHr05WoLTJ5G8IQVS/7vwR6ohirYM7f6HzYpogfS3R2OAAAAAElFTkSuQmCC);
	width: 36px;
	height: 36px;
	}

.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA0CAQAAABvcdNgAAAEsklEQVR4AWL4TydIhpZK1kpWOlg0w3ZXP6D2soBtG42jeI6ZmQTHzAxiTbSJsYLjO9HhP+WOmcuhciVnmHVQcJnp7DFvScowZorad/+V/fVzMdMT2g9Cv9guXGv/7pYOrXh2U+RRR3dSd9JRx6bIFc/ekqHI29JC6pJ5ZEh1yWkhkbcFeSjxgx3L2m1cb1C7bceyxA+CNjT/Ifff+/kDk2u/w/33/IeCMOSaWZ4glosqT3DNnNZQ7Cs58/3Ce5HL78iZH/vKVIaYlqzfdLu8Vi7dnvUbEza5Idt36tquZFldl6N5Z/POLof0XLK61mZCmJSWjVF9tEjUluu74IUXvgttuVIHE7YxSkaYhJZam7yiM9Pv82JYfl9nptxZaxMJE4YSPty+vF0+Y2up9d3wwijfjZbabqm/3bZ9ecKHsiGmRflnn1MW4pjHf9oLufyn2z3y1D6n8g8TZhxyzipLNPnAUpsOiuWimg52psrTZYnOWYNDTMuWBWa0tJb4rgq1UvmutpaYEbZlwU3CLJm/ayYjHW5/h7xWLn9Hh1vepDkyf7dE7MtT5LR4e7yYpHrkhOUpEfssBLq2pPhAqoSWKUkk7EDqkmK6RrCEzqDjhNDWNE+XSMvkJRDWlZTmCW0l0PHQGRZY5t1L83kT0Y3l2SItk5JAWHl2dCOBm+fPu3fo5/3v61RMCO9Jx2EEYYhb0rmNQMX/vm7gqOEJLcXTGw3CAuRNeyaPWwjR8PRqKQ1PDA/dpv+on9Shox52WFnx0KY8onHayrJzm87i5h9xGw/tfkev0jGsQizqezUKjk12hBMKJ4kbCqGPVNXudyyrShovGw5CgxsRICxF6aRmSjlBnHRzg7Gx8fKqEubI2rahQYdR1YgDIRQO7JvQyD52hoIQx0mxa0ODtW2Iozn1le2iIRdzwWewedyZzewidueOGqlsn1MvcnQpuVwLGG3/IR1hIKxCjelIDZ8ldqWz25jWAsnldEnK0Zxro19TGVb2ffIZEsIO89EIEDvKMPrzmBOQcKQ+rroye6NgRRxqR4U8EAkz0CL6uSGOm6KQCdWjvjRiSP1BPalCRS5iQYiEIvxuBMJEWgzSoHADcVMuN7IuqqTeyUPq22qFimFtxDyBBJEwNyt6TM88blFHao/6tWWhuuOM4SAK4EI4QmFHA+SEyWlp4EQoJ13cYGzMu7yszEIBOm2rVmHUNqwAIQabISNMRstmdhNWcFLsSm+0tjJH1MdRxO5Nx0WDMhCtgD6OKgZeljJqJKc9po8juskR9XN0Y1lZ3mWjLR9JCO1jRDMd0fpYC2VnvjBSEFg7wBENc0R9HFlb0xvF1+TBEpF68d+DHR6IOWVv2BECtxo46hOFUBd/APU57WIoEwJhIi2CdpyZX0m93BZicktMj1AS9dClteUFAUNUIEygRZCtik5zSxI9MubTBH1GOiHsiLJ3OCoSZkILa9PxiN0EbvhsAo8tdAf9Seepd36lGWHmtNANTv5Jd0z4QYyeo/UEJqxKRpg5LZx6btLPsOaEmdMyxYdlc8LMaJnikDlhclqmPiQnTEpLUIZEwkRagjYkEibQErwhkTAKCLQEbUgkzJQWc/0PstHHcfEdQ+UAAAAASUVORK5CYII=);
	background-size: 26px 26px;
	}

.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}

.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}

.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}

.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}

.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}

.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}

.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}

.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */

.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=);
	}

/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}

.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}

.leaflet-control-attribution a {
	text-decoration: none;
	}

.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}

.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}

.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}

.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}

.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}

.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}

.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}

.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}

/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}

.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}

.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}

.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}

.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}

.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}

.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}

.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}

.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}

.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}

/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}

/* Tooltip */

/* Base styles for the element that has a tooltip */

.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}

.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}

.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}

.leaflet-tooltip-top {
	margin-top: -6px;
}

.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}

.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}

.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}

.leaflet-tooltip-left {
	margin-left: -6px;
}

.leaflet-tooltip-right {
	margin-left: 6px;
}

.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}

.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}

.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

/********** Screen Sizes **********/

/*********** Colors *************/

/************ Width ************/

/********+*** Font size ***********/

/*********** font style ************/

/*********** margin and padding **********/

/*********** margin and padding **********/

/* top left */

/*********** global classes **************/

.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}

.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}

@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}

@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}

@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}

@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.map_component_wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  position: relative;
}

@media screen and (max-width: 650px) {
  .map_component_wrapper {
    width: 100%;
    align-items: center;
  }
}

.map_container {
  width: 100%;
  height: 90%;
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 650px) {
  .map_container {
    height: auto;
    aspect-ratio: 1/1;
  }
}

.atrizult_map_address {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 500;
  font-size: 17.6644px;
  line-height: 26px;
}

.google_map_activator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 100px;
  z-index: 2;
  cursor: pointer;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.error-notification-component {
  position: absolute;
  top: 60px;
  right: 10px;
  padding: 10px;
  z-index: 1;
}

.error-notification {
  margin-top: 50px;
  border: 1px solid red;
  border-radius: 5px;
  padding: 3px 5px;
  background-color: #ffffff;
}
.error-notification label {
  color: #b24d4d;
  font-size: 14px;
  height: fit-content;
  line-height: 22px;
}
@media screen and (min-width: 960px) {
  .error-notification {
    min-width: 300px;
  }
}

.error-notification-icon-label-wrapper {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 10px auto;
}
.error-notification-icon-label-wrapper button {
  line-height: 0;
  float: right;
  padding: 1%;
  cursor: pointer;
  position: relative;
  top: -12px;
}

.error-notification-component-back-btn {
  margin-top: 30px;
  text-align: center;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

#login-main {
  position: relative;
  display: flex;
}
#login-main a,
#login-main a:active,
#login-main a:hover,
#login-main a:visited {
  text-decoration: none;
  color: #0492c2;
}
#login-main a:hover,
#login-main a:active:hover,
#login-main a:hover:hover,
#login-main a:visited:hover {
  text-decoration: underline;
}
#login-main #form-container #active-form-tabs {
  max-width: 384px;
  margin: auto;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
}
#login-main #form-container #active-form-tabs .button {
  border: 2px solid gray;
  padding: 1rem 0.5rem;
  flex-grow: 1;
  border-width: 0 0 1px 0;
  background-color: transparent;
  text-align: center;
  text-decoration: none;
}
#login-main #form-container #active-form-tabs .active-form-tab {
  background-color: #0492c2;
  border: 2px solid rgb(6, 182, 212);
}
#login-main #form-container #active-form-tabs .active-form-tab.sign-up {
  border-width: 2px 2px 0 0;
}
#login-main #form-container #active-form-tabs .active-form-tab.login {
  color: white;
  border-width: 2px 0 0 2px;
}
#login-main #form-container #login-form {
  display: flex;
  flex-flow: column;
  gap: 10px;
  max-width: 384px;
  margin: 2.5rem auto auto auto;
}
#login-main #form-container #login-form .input-field-container {
  margin-top: 8px;
}
#login-main #form-container #login-form .button-component {
  margin-top: 25px;
  margin-bottom: 12px;
}
#login-main #form-container #login-form button,
#login-main #form-container #signup-form button {
  width: 100%;
  display: block;
  transition: 0.3s linear all;
}

.login-error-wrapper {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-around;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.auth-layout {
  display: flex;
  flex-direction: row;
  column-gap: 20px;
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .auth-layout {
    grid-template-columns: repeat(1, 1fr);
  }
}
.auth-layout .aside-section {
  display: flex;
  flex-direction: column;
  width: 40%;
  min-height: calc(100vh - 108px);
  border-right: 2px solid #0492c2;
  padding-top: 20px;
  row-gap: 30px;
}
@media screen and (max-width: 1024px) {
  .auth-layout .aside-section {
    display: none;
  }
}
.auth-layout .aside-section h1 {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2rem;
  text-align: center;
  margin-bottom: 10px;
}
.auth-layout .aside-section p {
  text-align: center;
}
.auth-layout .aside-section #carousel-container #carousel {
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  display: flex;
  overflow: auto;
  max-width: 384px;
  margin: auto;
}
.auth-layout .aside-section #carousel-container #carousel::-webkit-scrollbar {
  -webkit-appearance: none;
  height: 0;
  width: 0;
  overflow: scroll;
}
.auth-layout .aside-section #carousel-container #carousel .carousel-item {
  min-width: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.auth-layout .aside-section #carousel-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 1.5rem;
}
.auth-layout .aside-section #carousel-controls button {
  height: 10px;
  width: 20px;
  display: inline-block;
  border-radius: 50px;
  transition: 0.3s linear all;
  background-color: rgb(187, 196, 207);
}
.auth-layout .aside-section #carousel-controls button.active {
  background-color: rgb(100, 116, 139);
  border-radius: 50px;
  width: 2rem;
}
.auth-layout .form-section {
  width: 60%;
  min-height: calc(100vh - 108px);
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 1rem;
}
@media screen and (max-width: 1024px) {
  .auth-layout .form-section {
    width: 100%;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

#signup-main {
  display: flex;
}
#signup-main a,
#signup-main a:active,
#signup-main a:hover,
#signup-main a:visited {
  text-decoration: none;
  color: #0492c2;
}
#signup-main a:hover,
#signup-main a:active:hover,
#signup-main a:hover:hover,
#signup-main a:visited:hover {
  text-decoration: underline;
}
#signup-main #divider {
  width: 2px;
  height: 90%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #0492c2;
  left: 40%;
}
@media screen and (max-width: 840px) {
  #signup-main #divider {
    display: none;
  }
}

.signup-error-wrapper {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  right: 2rem;
  top: 1rem;
}
.signup-error-wrapper .error-notification-component {
  background-color: inherit;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

#verification-container {
  width: 60%;
}
#verification-container h2 {
  font-weight: 500;
  text-align: center;
  font-size: 1.5rem;
  padding: 1rem;
}
#verification-container #dashboard {
  height: 236px;
  background-color: #00b0ff;
  display: flex;
  justify-content: center;
  align-items: center;
}
#verification-container #dashboard ~ div {
  max-width: 558px;
  margin: auto;
  text-align: center;
  padding: 1rem;
}
#verification-container #dashboard ~ div h3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 1rem;
}
#verification-container #dashboard ~ div p {
  line-height: 1.5;
  margin-bottom: 2rem;
}
#verification-container #dashboard ~ div form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3rem;
}
#verification-container #dashboard ~ div form label {
  margin-bottom: 1rem;
}
#verification-container #dashboard ~ div form input {
  background-color: white;
  border-radius: 10px;
  padding: 8px;
  width: 100%;
  max-width: 220px;
  border: 1px solid black;
  margin: auto;
}
#verification-container #dashboard ~ div form button {
  min-width: 100%;
  color: white;
  max-width: 462px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 9px 0;
  flex-shrink: 1;
  border-radius: 10px;
  border: 1px solid #000;
  background-color: #197eab;
}
@media screen and (max-width: 840px) {
  #verification-container {
    width: 100%;
  }
}

.sign-up-email-verification {
  margin-top: 20px;
}
.sign-up-email-verification .button-component button {
  width: 100%;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.register-btn-wrapper {
  margin: 2rem auto auto auto;
  width: 100%;
}
.register-btn-wrapper .already-have-account {
  padding: 18px 0;
}

#form-container {
  width: 100%;
  padding: 1rem;
}
#form-container #active-form-tabs {
  max-width: 384px;
  margin: auto;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
}
#form-container #active-form-tabs .button {
  border: 2px solid gray;
  padding: 1rem 0.5rem;
  flex-grow: 1;
  border-width: 0 0 1px 0;
  background-color: transparent;
  text-align: center;
  text-decoration: none;
}
#form-container #active-form-tabs .active-form-tab {
  background-color: #0492c2;
  border: 2px solid rgb(6, 182, 212);
}
#form-container #active-form-tabs .active-form-tab.login {
  border-width: 2px 2px 0 0;
}
#form-container #active-form-tabs .active-form-tab.signup {
  color: white;
  border-width: 2px 2px 0 0;
}
#form-container #signup-form {
  display: flex;
  flex-flow: column;
  max-width: 384px;
  margin: 1rem auto auto auto;
}
#form-container #signup-form .input-field-container {
  margin: 8px 0;
}
#form-container #signup-form {
  /*.form-field {
  	position: relative;

  	input {
  		background-color: rgb(248 250 252);
  		display: block;
  		border: 1px solid black;
  		padding: 1rem 0.5rem;
  		border-radius: 6px;
  		width: 100%;

  		&:focus {
  			border: 2px solid rgb(6 182 212);
  			outline: none;
  		}
  	}

  	input.invalid {
  		border-color: red !important;
  	}

  	label {
  		position: absolute;
  		font-size: 10px;
  		color: rgb(113 113 122);
  		left: 1rem;
  		top: 0.5rem;
  		transition: 0.3s linear all;

  		&#phone-label {
  			top: 1.25rem;
  		}

  		sup {
  			color: red;
  		}
  	}

  	input:focus ~ label,
  	input:valid ~ label {
  		top: -1.75rem !important;
  		left: 0;
  		color: black;
  		font-size: 12px;
  	}

  	input:valid ~ #phone-label,
  	input:focus ~ #phone-label {
  		top: calc(-1rem - 2px) !important;
  	}
  }*/
}
#form-container #signup-form button {
  display: block;
  width: 100%;
  transition: 0.3s linear all;
}
@media screen and (max-width: 840px) {
  #form-container {
    width: 100%;
  }
}.show_password_wrapper {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.show_password_wrapper_reverse {
  flex-direction: row-reverse;
}

.show_password_text {
  max-width: 90%;
  line-height: 1.5rem;
}
.show_password_text a {
  font-weight: 600;
}

.show_password_unchecked {
  border: 1px solid #505050;
  border-radius: 0.25rem;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

#success-modal-container {
  padding-top: 80px;
  width: 60%;
  margin: auto;
}
#success-modal-container #success-modal {
  background-color: #0492c2;
  color: #ffffff;
  margin: auto;
  max-width: 400px;
  border-radius: 10px;
  border: 1px solid black;
  overflow: hidden;
}
#success-modal-container #success-modal div:first-child {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  justify-content: center;
  align-items: center;
  height: 175px;
  gap: 1.5rem;
}
#success-modal-container #success-modal div:first-child svg {
  font-size: 2rem;
}
#success-modal-container #success-modal div:nth-child(2) {
  background-color: #e7e7e7;
  color: #3f3d3d;
  padding: 10px;
}
#success-modal-container #success-modal div:nth-child(2) p {
  text-align: center;
  margin: 2rem auto;
  line-height: 26px;
}
#success-modal-container #success-modal div:nth-child(2) #continue-btn {
  padding: 10px;
  width: 100%;
  font-weight: 400;
  border: 1px solid #3f3d3d;
}
#success-modal-container h2 {
  margin-bottom: 3rem;
  text-align: center;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 1000;
}
.spinner-container label {
  margin-top: 10px;
  font-weight: bold;
  font-size: 20px;
  color: rgba(128, 128, 128, 0.7);
}

.loading-spinner {
  width: 120px;
  height: 120px;
  border: 16px solid #f3f3f3;
  border-top: 16px solid #0492c2;
  border-radius: 50%;
  animation: spinner 1s linear infinite;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.forget-password-wrapper {
  display: flex;
}

.validation-section {
  width: 100%;
}
@media screen and (max-width: 1024px) {
  .validation-section {
    width: 100%;
  }
}
.validation-section .forget-password-header {
  margin-top: 50px;
  text-align: center;
  color: #3f3d3d;
  line-height: 20px;
  font-size: 20px;
  font-weight: 600;
  font-family: "Poppins", "Noto Sans KR", sans-serif;
}
.validation-section .forget-password {
  display: grid;
  place-items: center;
  align-items: center;
}
@media screen and (max-width: 500px) {
  .validation-section .forget-password {
    width: 100%;
  }
}
.validation-section .forget-password .reset-instruction {
  margin-top: 30px;
  text-align: justify;
  font-size: 16px;
  line-height: 26px;
}
@media screen and (max-width: 414px) {
  .validation-section .forget-password .reset-instruction {
    margin-top: 50px;
  }
}
.validation-section .forget-password .create-instruction {
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
}
.validation-section .forget-password .set-password {
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -0.5px;
  margin-top: 30px;
}
@media screen and (max-width: 414px) {
  .validation-section .forget-password .set-password {
    margin-top: 50px;
  }
}
.validation-section .forget-password .input-field-container {
  width: 100%;
}
.validation-section .forget-password .reset-button-container #reset {
  margin-top: 15px;
  width: 100%;
}
.validation-section .forget-password-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 384px;
}
@media screen and (max-width: 500px) {
  .validation-section .forget-password-form {
    padding: 0 2rem;
    margin: 0 2rem;
    width: 100%;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.terms_and_policy_layout_wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 2rem;
}

.hide_content {
  display: flex;
}
@media (max-width: 960px) {
  .hide_content {
    display: none;
  }
}

.show_content {
  display: flex;
}

.terms_and_policy_layout_top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.terms_and_policy_layout_top p,
.terms_and_policy_layout_top p > span {
  font-size: 48px;
  font-weight: 500;
  line-height: 72px;
}
@media (max-width: 960px) {
  .terms_and_policy_layout_top p,
  .terms_and_policy_layout_top p > span {
    text-align: center;
    font-size: 24px;
    line-height: 36px;
  }
}
.terms_and_policy_layout_top p {
  color: #000;
}
.terms_and_policy_layout_top p span {
  color: #0492c2;
}
.terms_and_policy_layout_top .terms_and_policy_layout_last_updated {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.terms_and_policy_layout_blue_divider_horizontal {
  width: 100%;
  height: 43px;
  background: #00b0ff;
}

.terms_and_policy_layout_blue_divider_vertical {
  min-height: 100%;
  width: 43px;
  background: #00b0ff;
}
@media (max-width: 960px) {
  .terms_and_policy_layout_blue_divider_vertical {
    display: none;
  }
}

.terms_and_policy_layout_main_content {
  display: flex;
  position: relative;
}
.terms_and_policy_layout_main_content ol {
  list-style-type: decimal;
}

.terms_and_policy_layout_main_content_left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 66%;
  padding: 1rem 1rem 1rem 2rem;
  background-color: #fff;
  margin: 2rem 2rem 0 2rem;
}
@media (max-width: 960px) {
  .terms_and_policy_layout_main_content_left {
    width: 100%;
  }
}

.terms_and_policy_layout_main_content_right {
  flex-direction: column;
  gap: 1rem;
  width: 27%;
  padding: 1rem 1rem 1rem 2rem;
  background-color: #fff;
  margin: 2rem 2rem 0 2rem;
}
@media (max-width: 960px) {
  .terms_and_policy_layout_main_content_right {
    position: fixed;
    top: 30%;
    left: 0;
    width: calc(100vw - 4rem);
    z-index: 11;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4), -5px 5px 10px rgba(0, 0, 0, 0.4), 5px -5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(0, 0, 0, 0.4);
  }
}

.terms_and_policy_layout_content_title {
  font-size: 16px;
  line-height: 24px;
}

.bold_title {
  font-weight: 700;
}

.terms_and_policy_layout_list_item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.offset_style {
  padding-top: 65px;
  margin-top: -65px;
}

.terms_and_policy_layout_content_desc {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  line-height: 24px;
}
.terms_and_policy_layout_content_desc a {
  font-weight: 500;
}
.terms_and_policy_layout_content_desc a:hover {
  text-decoration: underline;
}
.terms_and_policy_layout_content_desc p {
  position: relative;
  z-index: 10;
}
.terms_and_policy_layout_content_desc ul {
  list-style-type: disc;
}

.terms_and_policy_layout_main_content_right_list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1rem;
}

.underline:hover {
  text-decoration: underline;
}

.terms_and_policy_layout_table_of_contents_btn {
  display: none;
}
@media screen and (max-width: 960px) {
  .terms_and_policy_layout_table_of_contents_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    gap: 5px;
    right: 1rem;
    top: 30%;
    background-color: white;
    padding: 0.5rem 1rem;
    box-shadow: 0 0 25px #c1c1c1;
    z-index: 20;
  }
  .terms_and_policy_layout_table_of_contents_btn:active {
    transform: scale(0.9);
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

@media screen and (max-width: 720px) {
  #privacy {
    overflow-x: hidden;
  }
}
#privacy main {
  margin-left: 325px;
  padding: 1rem;
}
@media screen and (max-width: 720px) {
  #privacy main {
    margin-left: 0;
    width: 100%;
  }
}
#privacy main header,
#privacy main section {
  max-width: 840px;
}
#privacy main header {
  margin-bottom: 3rem;
}
#privacy main header h1 {
  margin-bottom: 1.5rem;
}
#privacy main section {
  margin-bottom: 2rem;
}
#privacy main section h2 {
  margin-bottom: 0.3rem;
}
#privacy aside {
  position: fixed;
  top: 60px;
  bottom: 0;
  left: 0;
  max-width: 320px;
  width: 100vh;
  border-right: 2px solid gray;
  padding: 3rem 1rem;
  overflow-y: auto;
  overflow-x: hidden;
}
@media screen and (max-width: 720px) {
  #privacy aside {
    border: none;
    background-color: #e7e7e7;
  }
  #privacy aside.close {
    padding: 0;
    width: 0;
  }
}
#privacy aside h2 {
  margin-bottom: 2rem;
}
#privacy aside ol {
  list-style-position: inside;
}
#privacy aside ol li {
  margin-bottom: 1rem;
}
#privacy aside ol li a:hover {
  text-decoration: underline;
  font-weight: bold;
}
#privacy button {
  display: none;
}
@media screen and (max-width: 720px) {
  #privacy button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    gap: 5px;
    right: 1rem;
    top: 80px;
    background-color: white;
    padding: 0.5rem 1rem;
    box-shadow: 0 0 25px #c1c1c1;
  }
  #privacy button:active {
    transform: scale(0.9);
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.book-appointment-container {
  margin: 50px auto auto auto;
  padding: 0 50px;
  max-width: 850px;
}
@media screen and (max-width: 500px) {
  .book-appointment-container {
    padding: 0 20px;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.stepper-container {
  display: flex;
  align-items: flex-start;
  height: 80px;
}
@media screen and (max-width: 500px) {
  .stepper-container {
    height: 40px;
  }
}

.steps {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
  justify-content: space-between;
  position: relative;
}
.steps .step-title {
  position: absolute;
  bottom: -44px;
  font-size: 14px;
  line-height: 26px;
  display: flex;
  width: 189px;
  align-items: center;
  justify-content: center;
}
.steps .first-title {
  left: -40px;
}
.steps .last-title {
  right: -60px;
}
@media screen and (max-width: 960px) {
  .steps .step-title {
    font-size: 12px;
  }
}
@media screen and (max-width: 500px) {
  .steps .step-title {
    display: none;
  }
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #a2a0a0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #a2a0a0;
  background-color: #a2a0a0;
  z-index: 1;
}

.circle.active {
  background-color: #0492c2;
  color: #000000;
  border: 2px solid #0492c2;
  font-weight: bold;
}

.circle.completed {
  background-color: #0492c2;
  color: #000000;
  border: 2px solid #0492c2;
  font-weight: bold;
}

.label {
  margin-top: 8px;
  font-size: 14px;
  color: #a2a0a0;
}

.connecting-bar {
  height: 20px;
  width: -webkit-fill-available;
  background-color: #a2a0a0;
  margin: -10px;
}

.connecting-bar.completed {
  background-color: #0492c2;
  color: #ccc;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.appointment-page-wrapper {
  padding: 50px;
  background-color: #ffffff;
  margin: 30px auto;
}
.appointment-page-wrapper h3 {
  font-weight: 700;
  font-size: 18px;
  color: #191c1b;
  line-height: 26px;
  margin-bottom: 15px;
}
.appointment-page-wrapper p {
  font-weight: 700;
  font-size: 16px;
  color: #575a59;
  line-height: 26px;
  text-align: justify;
}
.appointment-page-wrapper .form-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin-top: 50px;
}
.appointment-page-wrapper .form-section .address-form-section {
  margin-top: 10px;
}
.appointment-page-wrapper .form-section .form-col {
  width: 300px;
}
.appointment-page-wrapper .buttons {
  margin-top: 100px;
  display: flex;
  justify-content: space-between;
}
.appointment-page-wrapper .buttons .next-btn {
  background-color: #0492c2;
  color: #fff;
}
.appointment-page-wrapper .buttons button {
  cursor: pointer;
  background-color: transparent;
}
.appointment-page-wrapper .buttons button:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}
@media screen and (max-width: 500px) {
  .appointment-page-wrapper {
    padding: 20px;
  }
  .appointment-page-wrapper .form-section .form-col {
    width: 100%;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.personal-info-wrapper {
  background-color: #ffffff;
  min-height: 358px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px;
  margin: 30px 0;
}
.personal-info-wrapper .form {
  display: flex;
  flex-wrap: wrap;
  margin: 30px 0px 0px 0px;
  justify-content: space-between;
  align-items: center;
  min-width: 675px;
}
.personal-info-wrapper .form .form-field {
  width: 45%;
}
.personal-info-wrapper .form-wrapper {
  display: flex;
  justify-content: center;
  margin: 25px 0px 0px 0px;
  justify-content: space-evenly;
}
.personal-info-wrapper .question-section {
  margin: 50px 0px 30px 0px;
  font-weight: 700;
  font-size: 14px;
  line-height: 20.27px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}
.personal-info-wrapper .buttons {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 40px;
}
.personal-info-wrapper .buttons .next-btn {
  background-color: #0492c2;
  color: #fff;
}
.personal-info-wrapper .buttons button {
  cursor: pointer;
  background-color: transparent;
}
.personal-info-wrapper .buttons button:disabled {
  background-color: #e9e4e4;
  cursor: not-allowed;
}
@media screen and (max-width: 769px) {
  .personal-info-wrapper .form {
    min-width: 570px;
  }
  .personal-info-wrapper .buttons {
    margin-top: 40px;
  }
}
@media screen and (max-width: 500px) {
  .personal-info-wrapper {
    padding: 20px;
  }
  .personal-info-wrapper .question-section {
    margin: 0px 0px 30px 0px;
  }
  .personal-info-wrapper .form {
    min-width: 346px;
    flex-wrap: wrap;
    margin: 0 0 10px 0;
  }
  .personal-info-wrapper .form .form-field {
    width: 100%;
  }
}
@media screen and (max-width: 378px) {
  .personal-info-wrapper .form {
    min-width: unset;
    width: 75vw;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.checkbox-component-layout {
  display: block;
}
.checkbox-component-layout .checkbox-container {
  display: flex;
  justify-content: left;
  align-items: center;
  column-gap: 10px;
  flex-direction: row;
}
.checkbox-component-layout .checkbox-container.flip {
  flex-direction: row-reverse;
}
.checkbox-component-layout .checkbox-container input[type=checkbox] {
  accent-color: #0492c2;
  cursor: pointer;
}
.checkbox-component-layout .checkbox-container .checkbox-text-container {
  display: flex;
  flex-flow: column;
  row-gap: 7px;
  padding-top: 1px;
}
.checkbox-component-layout .checkbox-container .checkbox-text-container label {
  font-size: 14px;
  line-height: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.checkbox-component-layout .checkbox-container .checkbox-text-container label:hover {
  color: rgba(86, 79, 79, 0.99);
}
@media screen and (min-width: 1024px) {
  .checkbox-component-layout .checkbox-container .checkbox-text-container label {
    font-size: 16px;
  }
}
.checkbox-component-layout .checkbox-container .checkbox-text-container .checkbox-description {
  font-size: 12px;
  line-height: 12px;
}
.checkbox-component-layout .checkbox-container .checkbox-text-container .input-error {
  font-size: 14px;
  color: #b24d4d;
  text-align: left;
}
.checkbox-component-layout_faint-checkbox {
  color: rgba(128, 128, 128, 0.5);
}
.checkbox-component-layout .format-checkbox {
  width: 20px;
  height: 20px;
}
.checkbox-component-layout .align-label-to-box {
  display: flex;
  flex-flow: column;
  padding: 5px;
  line-height: 12px;
}
.checkbox-component-layout .align-label-to-box:hover {
  color: rgba(86, 79, 79, 0.99);
}
.checkbox-component-layout .align-label-to-box b {
  font-size: 14px;
}
@media screen and (min-width: 960px) {
  .checkbox-component-layout .align-label-to-box b {
    font-size: 16px;
  }
}
.checkbox-component-layout .checkbox-container input[type=checkbox]:checked:after {
  width: 5px;
  height: 10px;
  border: solid #3f3d3d;
  border-width: 0 2px 2px 0;
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 6px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.info-card {
  background-color: #0492C2;
  color: #fff;
  border-radius: 6px;
  padding: 20px 40px;
  min-width: 675px;
}
.info-card ul {
  list-style: none;
  font-size: 14px;
  line-height: 20.27px;
  text-align: justify;
}
.info-card ul li {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.info-card ul li .title {
  width: 166px;
  font-weight: 700;
}
.info-card ul li .value {
  margin-left: 60px;
  font-weight: 500;
}
.info-card ul li .value, .info-card ul li .title {
  color: #FFF;
}
.info-card ul li .modify-btn {
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  font-family: "Poppins", "Noto Sans KR", sans-serif;
  background-color: transparent;
  border-radius: 10px;
  border: 2px solid #fff;
  color: #fff;
  padding: 5px 10px;
  margin-left: auto;
}
@media screen and (max-width: 769px) {
  .info-card {
    min-width: 570px;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 500px) {
  .info-card {
    padding: 20px;
    min-width: 346px;
  }
  .info-card .modify-btn {
    display: none;
  }
}
@media screen and (max-width: 378px) {
  .info-card {
    min-width: unset;
    width: 75vw;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.appointment-type-wrapper {
  background-color: #ffffff;
  min-height: 358px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px;
  margin: 30px 0;
}
.appointment-type-wrapper .form {
  display: flex;
  flex-wrap: wrap;
  margin: 50px 0px 0px 0px;
  justify-content: space-between;
  align-items: center;
  min-width: 675px;
}
.appointment-type-wrapper .form .form-field {
  width: 45%;
}
.appointment-type-wrapper .buttons {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 60px;
}
.appointment-type-wrapper .buttons .next-btn {
  background-color: #0492c2;
  color: #ffffff;
}
.appointment-type-wrapper .buttons button {
  cursor: pointer;
  background-color: transparent;
}
.appointment-type-wrapper .buttons button:disabled {
  background-color: #e9e4e4;
  cursor: not-allowed;
}
@media screen and (max-width: 769px) {
  .appointment-type-wrapper .form {
    min-width: 570px;
  }
}
@media screen and (max-width: 500px) {
  .appointment-type-wrapper {
    padding: 20px;
  }
  .appointment-type-wrapper .form {
    min-width: 346px;
    flex-wrap: wrap;
    margin: 0;
  }
  .appointment-type-wrapper .form .form-field {
    width: 100%;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 378px) {
  .appointment-type-wrapper .form {
    min-width: unset;
    width: 75vw;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.multi-select-input-wrapper {
  position: relative;
  display: flex;
  flex-flow: column;
  row-gap: 5px;
}
.multi-select-input-wrapper label {
  line-height: 28px;
  font-size: 14px;
  text-align: left;
}
.multi-select-input-wrapper label span {
  color: #b24d4d;
}
.multi-select-input-wrapper .multi-select-input-button {
  background: transparent;
  width: 100%;
}
.multi-select-input-wrapper .input-error {
  font-size: 14px;
  color: #b24d4d;
  text-align: left;
  margin-top: 3px;
}

.multi-select-options {
  position: absolute;
  z-index: 999;
  margin-top: 4px;
  border-radius: 8px;
  background: #ffffff;
  padding: 5px 4px;
  width: var(--button-width);
  max-height: 250px !important;
  overflow-y: auto;
  border: 1px solid rgba(128, 128, 128, 0.7);
}
.multi-select-options.with-search {
  padding-top: 0px !important;
}
.multi-select-options .search-container {
  position: sticky;
  top: 0px;
  padding: 8px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  z-index: 100;
}
.multi-select-options .tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.multi-select-options .tags-container .tag {
  padding: 6px 20px 6px 10px;
  background: #eff6ff;
  color: #0492c2;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}
.multi-select-options .tags-container .tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #0492c2;
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  transition: background-color 0.15s;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 50;
}
.multi-select-options .tags-container .tag-remove:hover {
  background: rgba(59, 130, 246, 0.1);
}

.search-icon {
  color: rgba(128, 128, 128, 0.5);
}

.multi-select-option {
  padding: 12px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  flex-direction: row;
  border-radius: 8px;
}
.multi-select-option:hover {
  background: rgba(217, 217, 217, 0.3019607843);
}
.multi-select-option.active {
  background-color: rgba(143, 136, 136, 0.4);
}
.multi-select-option span {
  line-height: 18px;
  font-size: 14px;
  white-space: nowrap;
  width: 90%;
  overflow: auto hidden;
}
.multi-select-option .option-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #0492c2;
}

.multi-select-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}
.multi-select-dropdown .label {
  margin-bottom: 5px;
  color: #191c1b;
}
.multi-select-dropdown .input-wrapper {
  position: relative;
}
.multi-select-dropdown .input-icon {
  position: absolute;
  top: 0;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.multi-select-dropdown .dropdown-content {
  display: block;
  position: absolute;
  background-color: #ffffff;
  border: 1px solid #e7e7e7;
  box-shadow: 0 8px 16px #000000;
  z-index: 1;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 0px;
  padding: 10px 0;
  border-radius: 5px;
}
.multi-select-dropdown .search-box {
  width: 100%;
  box-sizing: border-box;
  border-radius: 0px;
  margin-bottom: 10px;
  outline: none;
  min-width: 120px;
  min-height: 46px;
  border: 2px solid rgba(128, 128, 128, 0.5);
  padding: 5px 20px 5px 10px;
  background-color: #ffffff;
}
.multi-select-dropdown .search-box::placeholder {
  color: #e7e7e7;
}
.multi-select-dropdown .checkboxes {
  padding: 10px;
}
.multi-select-dropdown .checkbox-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.multi-select-dropdown .checkbox-item input {
  margin-right: 10px;
}
.multi-select-dropdown .selected-items {
  margin-top: 0px;
  display: flex;
  flex-wrap: wrap;
}
.multi-select-dropdown .selected-item {
  display: inline-block;
  padding: 5px 15px 5px 5px;
  background-color: #195671;
  margin-right: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  font-size: 10px;
  color: #ffffff;
  max-width: 95px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.multi-select-dropdown .selected-item .remove {
  margin-left: 5px;
  cursor: pointer;
  color: #ffffff;
  font-size: 12px;
  position: absolute;
  right: 2px;
  top: 3px;
}
.multi-select-dropdown {
  /* Styling for the dropdown when it's open */
}
.multi-select-dropdown .dropdown.open .dropdown-content {
  display: block;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.appointment-summary-page-wrapper {
  padding: 20px;
  background-color: #ffffff;
  margin: 30px 0;
  padding: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.appointment-summary-page-wrapper h3 {
  font-weight: 700;
  font-size: 18px;
  color: #191c1b;
  line-height: 26px;
  margin-bottom: 50px;
  margin-right: auto;
}
.appointment-summary-page-wrapper p {
  font-weight: 700;
  font-size: 16px;
  color: #575a59;
  line-height: 26px;
  text-align: justify;
}
.appointment-summary-page-wrapper .form-section {
  margin-top: 30px;
  min-width: 100%;
}
.appointment-summary-page-wrapper .form-section a {
  color: #0492c2;
}
.appointment-summary-page-wrapper .form-section .show_password_wrapper_reverse {
  justify-content: start;
}
@media screen and (max-width: 960px) {
  .appointment-summary-page-wrapper .form-section {
    min-width: unset;
  }
}
.appointment-summary-page-wrapper .buttons {
  margin-top: 100px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.appointment-summary-page-wrapper .buttons .next-btn {
  background-color: #0492c2;
  color: #ffffff;
}
.appointment-summary-page-wrapper .buttons button {
  cursor: pointer;
  background-color: transparent;
}
.appointment-summary-page-wrapper .buttons button:disabled {
  background-color: rgb(128, 128, 128);
  cursor: not-allowed;
}
@media screen and (max-width: 500px) {
  .appointment-summary-page-wrapper {
    padding: 20px;
  }
  .appointment-summary-page-wrapper .buttons {
    margin-top: 40px;
  }
}

.appointment-booked-wrapper {
  width: 572px;
  text-align: center;
  margin: 100px auto;
  border: 1px solid #000000;
  position: relative;
  padding: 20px;
  border-radius: 8px;
}
.appointment-booked-wrapper h3 {
  font-family: "Poppins", "Noto Sans KR", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #000000;
  margin: 20px 0px;
}
.appointment-booked-wrapper h1 {
  font-family: "Poppins", "Noto Sans KR", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  color: #53bd8a;
  margin: 20px 0px;
}
.appointment-booked-wrapper p {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20.27px;
  color: #575a59;
  margin: 20px 0px;
}
.appointment-booked-wrapper button {
  font-family: "Poppins", "Noto Sans KR", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22.36px;
  color: #ffffff;
  background-color: #0492c2;
  border-radius: 8px;
  padding: 8px 50px;
  margin: 20px 0px;
  cursor: pointer;
}
@media screen and (max-width: 500px) {
  .appointment-booked-wrapper {
    width: 90vw;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.date-input-wrapper {
  position: relative;
  display: flex;
  flex-flow: column;
  row-gap: 5px;
}
.date-input-wrapper label {
  line-height: 28px;
  font-size: 14px;
  text-align: left;
}
.date-input-wrapper label span {
  color: #b24d4d;
}
.date-input-wrapper .date-input-button {
  background: transparent;
  width: 100%;
}
.date-input-wrapper .input-error {
  font-size: 14px;
  color: #b24d4d;
  text-align: left;
  margin-top: 3px;
}

.picker-panel {
  position: absolute;
  z-index: 999;
  margin-top: 4px;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px 4px;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid rgba(128, 128, 128, 0.7);
}
.picker-panel.date-panel {
  min-width: 315px !important;
  max-width: 315px !important;
}
.picker-panel.date-panel .calendar .calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  column-gap: 10px;
}
.picker-panel.date-panel .calendar .calendar-header .nav-button {
  padding: 8px 12px;
  background: #f3f4f6;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  color: #374151;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.picker-panel.date-panel .calendar .calendar-header .nav-button svg {
  width: 20px !important;
  height: 20px !important;
}
.picker-panel.date-panel .calendar .calendar-header .nav-button:hover {
  background: #e5e7eb;
}
.picker-panel.date-panel .calendar .calendar-header .view-header {
  display: flex;
  column-gap: 8px;
  align-items: center;
}
.picker-panel.date-panel .calendar .calendar-header .back-button {
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #6b7280;
  transition: all 0.2s;
  display: flex;
  column-gap: 4px;
  align-items: center;
  justify-content: center;
}
.picker-panel.date-panel .calendar .calendar-header .back-button svg {
  width: 20px !important;
  height: 20px !important;
}
.picker-panel.date-panel .calendar .calendar-header .back-button:hover {
  background: #f3f4f6;
  color: #0492c2;
}
.picker-panel.date-panel .calendar .calendar-header .header-selectors {
  display: flex;
  gap: 8px;
  align-items: center;
}
.picker-panel.date-panel .calendar .calendar-header .month-year-button {
  padding: 6px 12px;
  background: #f3f4f6;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  transition: all 0.2s;
}
.picker-panel.date-panel .calendar .calendar-header .month-year-button:hover {
  background: #e5e7eb;
  color: #0492c2;
}
.picker-panel.date-panel .calendar .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.picker-panel.date-panel .calendar .calendar-grid .day-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  padding: 5px;
}
.picker-panel.date-panel .calendar .calendar-grid .day-label.weekend {
  color: #b24d4d;
}
.picker-panel.date-panel .calendar .calendar-grid .day-cell {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  font-weight: 600;
  transition: all 0.2s;
}
.picker-panel.date-panel .calendar .calendar-grid .day-cell:hover:not(.empty):not(:disabled) {
  background: #eff6ff;
  color: #0492c2;
}
.picker-panel.date-panel .calendar .calendar-grid .day-cell.selected {
  background: #0492c2;
  color: white;
  font-weight: 600;
}
.picker-panel.date-panel .calendar .calendar-grid .day-cell.empty {
  cursor: default;
}
.picker-panel.date-panel .calendar .calendar-grid .day-cell.disabled {
  color: rgba(128, 128, 128, 0.5);
  pointer-events: none;
}
.picker-panel.date-panel .calendar .months-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.picker-panel.date-panel .calendar .months-grid .month-cell {
  padding: 12px 5px;
  border: none;
  background: #f9fafb;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: all 0.2s;
  font-weight: 500;
}
.picker-panel.date-panel .calendar .months-grid .month-cell:hover {
  background: #eff6ff;
  color: #0492c2;
}
.picker-panel.date-panel .calendar .months-grid .month-cell.selected {
  background: #0492c2;
  color: white;
  font-weight: 600;
}
.picker-panel.date-panel .calendar .years-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.picker-panel.date-panel .calendar .years-grid::-webkit-scrollbar {
  width: 6px;
}
.picker-panel.date-panel .calendar .years-grid::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
}
.picker-panel.date-panel .calendar .years-grid::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.picker-panel.date-panel .calendar .years-grid .year-cell {
  padding: 12px 8px;
  border: none;
  background: #f9fafb;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: all 0.2s;
  font-weight: 500;
}
.picker-panel.date-panel .calendar .years-grid .year-cell:hover {
  background: #eff6ff;
  color: #0492c2;
}
.picker-panel.date-panel .calendar .years-grid .year-cell.selected {
  background: #0492c2;
  color: white;
  font-weight: 600;
}

.date-picker-container {
  position: relative;
}
.date-picker-container .disabled {
  color: rgba(128, 128, 128, 0.5);
  pointer-events: none;
}
.date-picker-container label {
  line-height: 28px;
}
.date-picker-container input {
  width: 100%;
  height: 46px;
  line-height: 8px;
  padding: 10px 10px 10px 30px;
  border: 2px solid;
  outline: none;
  font-size: 16px;
}
.date-picker-container input:hover {
  cursor: pointer;
}
.date-picker-container .date.disabled {
  color: rgba(128, 128, 128, 0.5);
  pointer-events: none;
}
.date-picker-container .date-picker {
  border: 1px solid #ccc;
  background: white;
  position: absolute;
  z-index: 10;
  margin-top: 1px;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  right: 0;
  max-width: 360px;
}
.date-picker-container .date-picker .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.date-picker-container .date-picker .header button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
}
.date-picker-container .date-picker .header .month-name,
.date-picker-container .date-picker .header .year-name {
  cursor: pointer;
  font-weight: bold;
}
.date-picker-container .date-picker .month-dropdown,
.date-picker-container .date-picker .year-dropdown {
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 20;
  margin-top: 5px;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
}
.date-picker-container .date-picker .month-option,
.date-picker-container .date-picker .year-option {
  padding: 8px;
  cursor: pointer;
}
.date-picker-container .date-picker .month-option:hover,
.date-picker-container .date-picker .year-option:hover {
  background-color: #f0f0f0;
}
.date-picker-container .date-picker .days-of-week,
.date-picker-container .date-picker .dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.date-picker-container .date-picker .day,
.date-picker-container .date-picker .date,
.date-picker-container .date-picker .date-empty {
  text-align: center;
  padding: 8px 0;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.date-picker-container .date-picker .date {
  cursor: pointer;
}
.date-picker-container .date-picker .date.selected {
  background-color: #0492c2;
  color: white;
  border-radius: 50%;
}
.date-picker-container .date-picker .date:hover {
  background-color: rgba(0, 0, 255, 0.2);
  border-radius: 50%;
}
.date-picker-container .date-picker .date-empty {
  background: transparent;
}
.date-picker-container .month-select,
.date-picker-container .year-select {
  background-color: transparent;
  font-size: inherit;
  padding: 0.5em;
  cursor: pointer;
}
.date-picker-container .date-picker-wrapper {
  position: relative;
}
.date-picker-container .date-picker-icon {
  position: absolute;
  top: 35%;
  left: 10px;
}
.date-picker-container .dropdown-icon-wrapper {
  position: absolute;
  right: 10px;
  top: 23%;
}
.date-picker-container .date-input-field {
  padding-left: 40px;
  padding-right: 40px;
}
.date-picker-container .month-name {
  color: #0492c2;
}
.date-picker-container .day {
  font-weight: bold;
}
.date-picker-container .weekend {
  color: #b24d4d;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.self-appointment-date-component {
  padding: 50px;
  background-color: #ffffff;
  margin: 30px 0;
}
.self-appointment-date-component .indicator {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  margin: 40px 0;
}
.self-appointment-date-component .indicator .indicator-wrapper {
  display: flex;
  align-items: center;
  margin-left: 50px;
}
.self-appointment-date-component .indicator .indicator-wrapper .reserved {
  background-color: #d59b9b;
}
.self-appointment-date-component .indicator .indicator-wrapper .booked {
  background-color: #a8a7a7;
}
.self-appointment-date-component .circle-indicator {
  width: 33px;
  height: 33px;
  border: 1px solid;
  border-radius: 50%;
  margin-left: 10px;
}
.self-appointment-date-component h3 {
  font-weight: 700;
  font-size: 18px;
  color: #191c1b;
  line-height: 26px;
  margin-bottom: 15px;
}
.self-appointment-date-component p {
  font-weight: 700;
  font-size: 16px;
  color: #575a59;
  line-height: 26px;
  text-align: justify;
}
.self-appointment-date-component .form-section {
  width: 400px;
  margin: 30px auto;
}
.self-appointment-date-component .form-section ul {
  list-style: none;
  margin-top: 30px;
}
.self-appointment-date-component .form-section ul li {
  display: flex;
  align-items: center;
  justify-content: center;
}
.self-appointment-date-component .form-section ul li .date-box {
  border: 1px solid;
  border-radius: 4px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  padding: 10px;
  margin: 10px 20px;
  cursor: pointer;
  min-width: 70px;
  text-align: center;
}
.self-appointment-date-component .form-section ul li .date-box:hover {
  opacity: 0.2;
}
.self-appointment-date-component .form-section .booked-date .date-box {
  background-color: #a8a7a7;
}
.self-appointment-date-component .form-section .reserved-date .date-box {
  background-color: #d59b9b;
}
.self-appointment-date-component .form-section .selected-date .date-box {
  background-color: #0492c2;
}
.self-appointment-date-component .self-appointment-date-wrapper {
  border: 2px solid rgba(128, 128, 128, 0.7);
  max-height: 450px;
  overflow-y: scroll;
}
.self-appointment-date-component .buttons {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}
.self-appointment-date-component .buttons .next-btn {
  background-color: #0492c2;
  color: #ffffff;
}
.self-appointment-date-component .buttons button {
  cursor: pointer;
  background-color: transparent;
}
.self-appointment-date-component .buttons button:disabled {
  background-color: #e9e4e4;
  cursor: not-allowed;
}
@media screen and (max-width: 500px) {
  .self-appointment-date-component {
    padding: 20px;
  }
  .self-appointment-date-component .buttons {
    margin-top: 40px;
  }
  .self-appointment-date-component .form-section {
    width: 100%;
  }
  .self-appointment-date-component .indicator .indicator-wrapper {
    flex-wrap: wrap;
    margin-left: 10px;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.error404-wrapper {
  background-image: url("/assets/error-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  font-family: "Roboto", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  min-width: 100vw;
  top: 60px;
  right: -15px;
  flex: 1;
  left: 0;
  bottom: 47.88px;
  z-index: 0;
}
.error404-wrapper .error-card {
  background: #ffffff;
  width: 900px;
  height: 420px;
  border: 1px solid #47b892;
  border-radius: 10px;
  box-shadow: 8px 4px 4px 4px rgba(0, 0, 0, 0.2509803922);
}
.error404-wrapper .error-card .error-card-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
.error404-wrapper .error-card .error-card-content_left-side {
  background: rgba(217, 217, 217, 0.3019607843);
  width: 300px;
  height: 300px;
  color: rgba(143, 136, 136, 0.4);
  border-radius: 100%;
  text-align: center;
}
.error404-wrapper .error-card .error-card-content_left-side div {
  margin-top: 70px;
}
.error404-wrapper .error-card .error-card-content_left-side div h2 {
  font-size: 120px;
  font-weight: 500;
  margin-bottom: 26px;
}
.error404-wrapper .error-card .error-card-content_left-side div p {
  font-size: 25px;
}
.error404-wrapper .error-card .error-card-content_right-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  font-weight: 300;
}
.error404-wrapper .error-card .error-card-content_right-side img {
  width: 250px;
}
.error404-wrapper .error-card .error-card-content_right-side h3 {
  font-size: 25px;
  margin-bottom: 15px;
}
.error404-wrapper .error-card .error-card-content_right-side p:nth-of-type(1) {
  margin: 15px 0 25px;
}
.error404-wrapper .error-card .error-card-content p:nth-of-type(2) {
  position: absolute;
  bottom: -70px;
}
@media screen and (max-width: 783px) {
  .error404-wrapper .error-card {
    width: 600px;
    height: 500px;
  }
  .error404-wrapper .error-card .error-card-content_left-side {
    width: 200px;
    height: 200px;
  }
  .error404-wrapper .error-card .error-card-content_left-side div {
    margin-top: 45px;
  }
  .error404-wrapper .error-card .error-card-content_left-side div h2 {
    font-size: 66px;
  }
  .error404-wrapper .error-card .error-card-content_left-side div p {
    font-size: 16px;
  }
  .error404-wrapper .error-card .error-card-content_right-side {
    margin-top: -70px;
  }
  .error404-wrapper .error-card .error-card-content_right-side img {
    width: 180px;
  }
  .error404-wrapper .error-card .error-card-content_right-side h3 {
    font-size: 18px;
  }
  .error404-wrapper .error-card .error-card-content_right-side p:nth-of-type(1) {
    margin: 5px 0 15px;
  }
  .error404-wrapper .error-card .error-card-content_right-side button {
    margin-bottom: 15px;
  }
  .error404-wrapper .error-card .error-card-content_right-side p:nth-of-type(2) {
    bottom: -25px;
  }
}
@media screen and (max-width: 500px) {
  .error404-wrapper {
    right: 0;
  }
  .error404-wrapper .error-card {
    margin: 0 40px;
    padding: 0 15px;
  }
  .error404-wrapper .error-card .error-card-content_right-side {
    text-align: center;
  }
}
@media screen and (max-width: 500px) and (max-width: 376px) {
  .error404-wrapper .error-card .error-card-content_left-side {
    width: 150px;
    height: 150px;
  }
  .error404-wrapper .error-card .error-card-content_left-side div {
    margin-top: 30px;
  }
  .error404-wrapper .error-card .error-card-content_left-side div h2 {
    font-size: 50px;
  }
  .error404-wrapper .error-card .error-card-content_left-side div p {
    font-size: 16px;
  }
  .error404-wrapper .error-card .error-card-content_right-side img {
    width: 140px;
  }
  .error404-wrapper .error-card .error-card-content_right-side h3 {
    font-size: 16px;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.error500-wrapper {
  background-image: url("/assets/error-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  font-family: "Roboto", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  min-width: 100vw;
  top: 60px;
  right: -15px;
  flex: 1;
  left: 0;
  bottom: 47.88px;
  z-index: 0;
}
.error500-wrapper .error-card {
  background: #ffffff;
  width: 900px;
  height: 420px;
  border: 1px solid #47b892;
  border-radius: 10px;
  box-shadow: 8px 4px 4px 4px rgba(0, 0, 0, 0.2509803922);
}
.error500-wrapper .error-card .error-card-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
.error500-wrapper .error-card .error-card-content_left-side {
  background: rgba(217, 217, 217, 0.3019607843);
  width: 300px;
  height: 300px;
  color: rgba(143, 136, 136, 0.4);
  border-radius: 100%;
  text-align: center;
}
.error500-wrapper .error-card .error-card-content_left-side div {
  margin-top: 70px;
}
.error500-wrapper .error-card .error-card-content_left-side div h2 {
  font-size: 120px;
  font-weight: 500;
  margin-bottom: 26px;
}
.error500-wrapper .error-card .error-card-content_left-side div p {
  font-size: 25px;
}
.error500-wrapper .error-card .error-card-content_right-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  font-weight: 300;
}
.error500-wrapper .error-card .error-card-content_right-side img {
  width: 250px;
}
.error500-wrapper .error-card .error-card-content_right-side h3 {
  font-size: 25px;
  margin-bottom: 15px;
}
.error500-wrapper .error-card .error-card-content_right-side p:nth-of-type(1) {
  margin: 15px 0 25px;
}
.error500-wrapper .error-card .error-card-content p:nth-of-type(2) {
  position: absolute;
  bottom: -70px;
}
@media screen and (max-width: 783px) {
  .error500-wrapper .error-card {
    width: 600px;
    height: 500px;
  }
  .error500-wrapper .error-card .error-card-content {
    flex-direction: column;
  }
  .error500-wrapper .error-card .error-card-content_left-side {
    width: 200px;
    height: 200px;
  }
  .error500-wrapper .error-card .error-card-content_left-side div {
    margin-top: 45px;
  }
  .error500-wrapper .error-card .error-card-content_left-side div h2 {
    font-size: 66px;
  }
  .error500-wrapper .error-card .error-card-content_left-side div p {
    font-size: 18px;
  }
  .error500-wrapper .error-card .error-card-content_right-side {
    margin-top: -70px;
  }
  .error500-wrapper .error-card .error-card-content_right-side img {
    width: 180px;
  }
  .error500-wrapper .error-card .error-card-content_right-side h3 {
    font-size: 18px;
  }
  .error500-wrapper .error-card .error-card-content_right-side p:nth-of-type(1) {
    margin: 5px 0 15px;
  }
  .error500-wrapper .error-card .error-card-content_right-side button {
    margin-bottom: 15px;
  }
  .error500-wrapper .error-card .error-card-content_right-side p:nth-of-type(2) {
    bottom: -25px;
  }
}
@media screen and (max-width: 500px) {
  .error500-wrapper {
    right: 0;
  }
  .error500-wrapper .error-card {
    margin: 0 40px;
    padding: 0 15px;
  }
  .error500-wrapper .error-card .error-card-content_right-side {
    text-align: center;
  }
}
@media screen and (max-width: 500px) and (max-width: 376px) {
  .error500-wrapper .error-card .error-card-content_left-side {
    width: 150px;
    height: 150px;
  }
  .error500-wrapper .error-card .error-card-content_left-side div {
    margin-top: 30px;
  }
  .error500-wrapper .error-card .error-card-content_left-side div h2 {
    font-size: 50px;
  }
  .error500-wrapper .error-card .error-card-content_left-side div p {
    font-size: 16px;
  }
  .error500-wrapper .error-card .error-card-content_right-side img {
    width: 140px;
  }
  .error500-wrapper .error-card .error-card-content_right-side h3 {
    font-size: 16px;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.side-bar-layout-wrapper {
  display: flex;
  flex-flow: row;
  background-color: #e7e7e7;
  height: calc(100% - 60px);
  width: 60px;
  position: fixed;
  top: 75px;
}
@media screen and (min-width: 1024px) {
  .side-bar-layout-wrapper {
    width: 270px;
    top: unset;
  }
}
.side-bar-layout-wrapper .side-bar-wrapper {
  display: inline-flex;
  flex-flow: column;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  overflow: hidden auto;
}
.side-bar-layout-wrapper .side-bar-wrapper .sidebar-menu {
  display: flex;
  flex-flow: column;
  width: 100%;
  padding: 10px 10px;
  row-gap: 2px;
}
.side-bar-layout-wrapper .side-bar-wrapper .sidebar-menu .side-bar-icon-text-wrapper {
  display: inline-flex;
  padding: 10px 0;
  border-radius: 5px;
  justify-content: center;
}
.side-bar-layout-wrapper .side-bar-wrapper .sidebar-menu .side-bar-icon-text-wrapper svg {
  width: 18px;
  height: 18px;
}
@media screen and (max-width: 1024px) {
  .side-bar-layout-wrapper .side-bar-wrapper .sidebar-menu .side-bar-icon-text-wrapper svg {
    width: 20px;
    height: 20px;
  }
}
.side-bar-layout-wrapper .side-bar-wrapper .sidebar-menu .side-bar-icon-text-wrapper a {
  text-decoration: none;
  color: #3f3d3d;
}
.side-bar-layout-wrapper .side-bar-wrapper .sidebar-menu .side-bar-icon-text-wrapper p {
  margin: 0 2px;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.side-bar-layout-wrapper .side-bar-wrapper .sidebar-menu .side-bar-icon-text-wrapper:hover {
  cursor: pointer;
  background-color: rgba(162, 160, 160, 0.2);
}
@media screen and (min-width: 1024px) {
  .side-bar-layout-wrapper .side-bar-wrapper .sidebar-menu .side-bar-icon-text-wrapper {
    padding: 14px 0 14px 12px;
    justify-content: unset;
  }
}
.side-bar-layout-wrapper .side-bar-wrapper .sidebar-menu .side-bar-icon-text-wrapper.active-side-bar {
  font-weight: bold;
  background-color: rgb(236, 244, 255);
  color: #3f3d3d;
  border-right: 3px solid #0492c2;
}
.side-bar-layout-wrapper .side-bar-wrapper .sidebar-menu .sub-side-bar {
  padding-left: 5px;
}
@media screen and (min-width: 1024px) {
  .side-bar-layout-wrapper .side-bar-wrapper .sidebar-menu .sub-side-bar {
    padding-left: 25px;
  }
}

.company-name-logo {
  display: inline-flex;
  justify-content: space-evenly;
  border-bottom: 2px solid #3f3d3d;
  align-items: center;
}
.company-name-logo p {
  font-size: 16px;
  margin: 30px 0;
}
.company-name-logo img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.hide-side-bar-text {
  display: none;
}

.side-bar-text {
  padding-left: 5px;
  max-width: 170px;
}

.side-bar-logout {
  color: #b24d4d;
}
.side-bar-logout a {
  color: #b24d4d;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.new-dashboard-container {
  display: block;
  width: 100%;
}
.new-dashboard-container .dashboard-main {
  width: calc(100vw - 60px);
  margin-left: 60px;
}
.new-dashboard-container .dashboard-main .dashboard-main-wrapper {
  display: flex;
  justify-content: center;
  padding: 1.5rem;
  min-height: calc(100dvh - 150px);
}
.new-dashboard-container .dashboard-main .dashboard-main-wrapper.remove-padding {
  padding: 0 !important;
}
.new-dashboard-container .dashboard-main .dashboard-main-wrapper::-webkit-scrollbar {
  display: none;
}
.new-dashboard-container .dashboard-main .dashboard-main-wrapper > section, .new-dashboard-container .dashboard-main .dashboard-main-wrapper > div {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .new-dashboard-container .dashboard-main {
    width: calc(100vw - 270px);
    margin-left: 270px;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.page-footer {
  width: 100%;
  background-color: #3f3d56;
}
.page-footer .footer-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  gap: 1rem;
  padding-left: 0.5rem;
  margin-top: auto;
  padding: 16px 0px;
  min-height: 60px;
}
.page-footer .footer-container p,
.page-footer .footer-container a {
  font-size: 14px;
  color: white;
  display: inline-flex;
}
@media screen and (max-width: 414px) {
  .page-footer .footer-container p,
  .page-footer .footer-container a {
    font-size: 8px;
  }
}
.page-footer .footer-container .powered-by {
  display: flex;
  align-items: center;
}

.footer_right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 70%;
  justify-content: space-around;
  gap: 0.5rem 0;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.medical-facility-w {
  max-width: 1400px;
  margin: auto;
}
.medical-facility-w_btn-headline-w {
  display: flex;
  justify-content: space-between;
  margin: 5px;
}
.medical-facility-w_btn-headline-w button {
  max-height: 20px;
  min-width: 10px;
}
.medical-facility-w_facilities-w_empty {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}
.medical-facility-w_facilities-w_empty p {
  font-weight: bold;
  font-size: 20px;
}
.medical-facility-w_facilities-w_grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  padding: 1%;
  border: 1px solid #0492c2;
  margin-top: 1rem;
}
.medical-facility-w_facilities-w_not-empty-w {
  border: 1px solid gray;
  max-width: 400px;
  line-height: 28px;
  margin: 0.5rem;
  padding: 0.5rem;
  border-radius: 10px;
}
.medical-facility-w_facilities-w_not-empty-w p {
  font-size: 16px;
  line-height: 1.5;
}
.medical-facility-w_facilities-w_not-empty-w:hover {
  cursor: pointer;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.radio-group-wrapper {
  padding: 0.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}
.radio-group-wrapper_label {
  font-weight: 600;
}
.radio-group-wrapper input[type=radio] {
  width: 20px;
  height: 20px;
  accent-color: #0492c2;
  cursor: pointer;
}
.radio-group-wrapper .radio-input-wrapper {
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

#company-reg-page {
  max-width: 1244px;
  margin: auto;
  padding: 1rem;
}
#company-reg-page .radio-button-container {
  margin: 10px 0;
}
#company-reg-page #progress-bar {
  height: 7px;
  background-color: white;
  border-radius: 99999px;
  margin: 1.5rem auto;
}
#company-reg-page #progress-bar div {
  background-color: #0492c2;
  height: 100%;
  width: 50%;
  border-radius: 99999px;
  position: relative;
  transition: 0.3s linear all;
}
#company-reg-page #progress-bar div.complete {
  width: 100%;
}
#company-reg-page #progress-bar div span {
  position: absolute;
  top: 50%;
  right: 0;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background-color: #0492c2;
  transform: translateY(-50%);
}
@media screen and (max-width: 840px) {
  #company-reg-page #progress-bar div span {
    display: none;
  }
}
#company-reg-page h1 {
  font-weight: 400;
  font-size: 24px;
  text-align: center;
  margin-bottom: 5rem;
}
#company-reg-page #company-reg-form,
#company-reg-page #company-reg-form-2 {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem auto;
}
@media screen and (max-width: 840px) {
  #company-reg-page #company-reg-form,
  #company-reg-page #company-reg-form-2 {
    flex-direction: column;
    gap: 10px;
  }
}
#company-reg-page #company-reg-form .dropdown-component-container .dropdown-content-wrapper label,
#company-reg-page #company-reg-form-2 .dropdown-component-container .dropdown-content-wrapper label {
  font-weight: bold;
}
#company-reg-page #company-reg-form .dropdown-component-container .options-wrapper,
#company-reg-page #company-reg-form-2 .dropdown-component-container .options-wrapper {
  width: 100%;
  overflow-x: hidden;
  z-index: 50;
}
#company-reg-page #company-reg-form > div,
#company-reg-page #company-reg-form-2 > div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 350px;
  max-width: 350px;
}
@media screen and (max-width: 840px) {
  #company-reg-page #company-reg-form > div,
  #company-reg-page #company-reg-form-2 > div {
    width: 100%;
    min-width: 0;
    max-width: unset;
  }
}
#company-reg-page .button-component {
  margin: auto 0 auto auto;
  width: 100%;
  max-width: 350px;
}
#company-reg-page .button-component button {
  width: 100%;
}
#company-reg-page #company-logo-img {
  width: 200px;
  aspect-ratio: 1/1;
  background-color: #ffffff;
  border: 1px dashed black;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 9px;
  margin: auto;
  position: relative;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
#company-reg-page #company-logo-img input {
  display: none;
}
#company-reg-page #company-logo-img small {
  font-size: 14px;
  text-align: center;
  position: absolute;
  inset: 50% 50%;
  display: block;
  width: 100%;
  transform: translate(-50%);
}
#company-reg-page #company-logo-img img {
  max-width: 100%;
  aspect-ratio: 1/1;
}
#company-reg-page #company-reg-form-2 {
  position: relative;
}
#company-reg-page #company-reg-form-2 figure {
  text-align: center;
}
#company-reg-page #company-reg-form-2 figure div {
  background-color: #3f3d3d;
  height: 1rem;
  transform: translateY(-24px);
}
@media screen and (max-width: 840px) {
  #company-reg-page #company-reg-form-2 figure {
    display: none;
  }
}
#company-reg-page #company-reg-form-2 #divider {
  position: absolute;
  display: block;
  height: 90%;
  width: 3px;
  background-color: #0492c2;
  left: 50%;
}
@media screen and (max-width: 840px) {
  #company-reg-page #company-reg-form-2 #divider {
    display: none;
  }
}
#company-reg-page #nav-submit-btn-container {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
#company-reg-page #nav-submit-btn-container .button-component {
  margin: 0;
}
@media screen and (max-width: 411px) {
  #company-reg-page #nav-submit-btn-container {
    flex-direction: column;
  }
}
#company-reg-page #nav-btn-container {
  margin-top: 3rem;
}

.company_logo_remove_icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.input-file-type-component {
  display: inline-flex;
  align-items: center;
}
.input-file-type-component label {
  cursor: pointer;
}
.input-file-type-component .file-upload {
  opacity: 0;
  z-index: -1;
}
.input-file-type-component span {
  position: absolute;
  right: 30px;
  margin-top: -137px;
}
@media screen and (min-width: 500px) {
  .input-file-type-component span {
    margin-top: -90px;
  }
}
@media screen and (min-width: 960px) {
  .input-file-type-component span {
    margin-top: -90px;
    right: 180px;
  }
}

.input-file-type-icon-wrapper {
  display: flex;
}

.input-file-type-success-icon {
  color: #ffffff;
}

.input-file-type-error-icon {
  color: #b24d4d;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.textarea-component {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin-top: 10px;
}
.textarea-component_text-count {
  font-size: 14px;
  display: flex;
  font-weight: 500;
  padding: 3px 0;
  color: darkorange;
}

.textarea-component-label {
  display: flex;
  width: inherit;
  margin-bottom: 10px;
}
.textarea-component-label label {
  font-weight: bold;
}

.textarea-component-textarea-wrapper {
  position: relative;
  display: flex;
  flex-flow: column;
  width: 100%;
}
.textarea-component-textarea-wrapper textarea {
  border: none;
  outline: 2px solid rgba(128, 128, 128, 0.7);
  min-height: 200px;
  min-width: 360px;
  width: 100%;
  height: auto;
  padding: 8px;
  line-height: 28px;
}
@media (max-width: 960px) {
  .textarea-component-textarea-wrapper textarea {
    min-width: auto;
  }
}
.textarea-component-textarea-wrapper .date-time-textArea {
  position: absolute;
  right: 10%;
  top: 8%;
  display: flex;
  align-items: center;
}
.textarea-component-textarea-wrapper .time-textArea {
  margin: 0 10px;
}
.textarea-component-textarea-wrapper .content-count {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 19px;
  height: 19px;
  background-color: green;
  font-size: 12px;
  text-align: center;
  border-radius: 50%;
  line-height: 18px;
  color: #ffffff;
  cursor: pointer;
  z-index: 1;
  pointer-events: all;
}

.more-note {
  display: flex;
  align-items: start;
  border-bottom: 1px solid;
  padding: 10px;
}
.more-note .more-note-container {
  padding: 5px 10px;
  width: 100%;
}
.more-note .more-note-date-wrapper {
  display: flex;
  align-items: center;
}
.more-note .more-note-date-wrapper div {
  margin: 0 10px;
}
.more-note .more-note-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.textarea-component-error {
  color: #b24d4d;
  line-height: 10px;
  margin: 5px 0;
}

.add-white-background {
  background-color: white;
  text-align: justify;
  hyphens: auto;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.radio-button-container {
  display: flex;
  align-items: center;
}
.radio-button-container.label-top {
  flex-direction: column;
}
.radio-button-container.label-bottom {
  flex-direction: column-reverse;
}
.radio-button-container.label-left {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.radio-button-container.label-right {
  flex-direction: row;
}
.radio-button-container label {
  font-size: 16px;
  cursor: pointer;
  margin-left: 2px;
}

.radio-wrapper {
  position: relative;
  display: flex;
}
.radio-wrapper input[type=radio] {
  appearance: none;
  border: 1px solid rgba(128, 128, 128, 0.7);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
  accent-color: #0492c2;
}
.radio-wrapper input[type=radio]:checked {
  background-color: #0492c2;
}
.radio-wrapper .radio-custom {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.patient-component {
  display: block;
  width: 100%;
  overflow-x: scroll;
}
@media screen and (min-width: 1025px) {
  .patient-component {
    overflow-x: unset;
  }
}.pagination-btn-wrapper {
  display: flex;
  width: 100%;
  margin: 20px 0;
}
.pagination-btn-wrapper button {
  min-width: 40px;
  flex: 1;
  font-size: 20px;
  font-weight: bold;
}

.pagination-pages {
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.pagination_container {
  display: flex;
  justify-content: center;
}
.pagination_container .pagination_wrapper {
  display: flex;
  width: 90%;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #ffffff;
}
@media (max-width: 960px) {
  .pagination_container .pagination_wrapper {
    padding: 0.5rem;
    overflow: auto;
    gap: 0.5rem;
  }
}
.pagination_container .disabled_button .button-component button {
  background-color: #e9e4e4;
}
.pagination_container .control_btns {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 1rem;
}
.pagination_container .control_btns button {
  font-size: 0.875rem;
  font-weight: 500;
}
.pagination_container .page_numbers_display {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 960px;
}
.pagination_container .page_numbers_display span {
  font-size: 14px;
  font-weight: 500;
}
.pagination_container .page_number {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  background-color: rgb(128, 128, 128);
}
.pagination_container .active {
  color: #ffffff;
  cursor: default;
  background-color: #0492c2;
}
.pagination_container .page_number,
.pagination_container .active {
  min-width: 20.25px;
  height: 24.14px;
  padding: 0.78px 5.8px;
  border-radius: 4.67px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagination_container #disabled_btn {
  cursor: default;
}
.pagination_container .pagination_dots {
  font-size: xx-large;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.accordion_container {
  width: 100%;
  overflow-x: auto;
}

.accordion_wrapper {
  display: block;
  min-width: 960px;
}
@media screen and (min-width: 960px) {
  .accordion_wrapper {
    overflow-x: hidden;
    min-width: 100%;
  }
}

.accordion-item-header {
  display: flex;
  margin-top: 5px;
  margin-bottom: 20px;
}
.accordion-item-header h3 {
  flex: 1;
  font-weight: bold;
  padding: 0 2px;
}
@media screen and (max-width: 500px) {
  .accordion-item-header h3 {
    text-align: center;
  }
}

.accordion-map-wrapper {
  color: white;
}

.accordion-item-border {
  margin: 25px 0;
  background-color: #ffffff;
  color: #3f3d3d;
  min-height: 60px;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.accordion-item-border p {
  flex: 1;
  text-wrap: wrap;
  line-height: 25px;
  padding: 0 2px;
}
.accordion-item-border:hover {
  outline: 3px solid #0492c2;
  cursor: pointer;
}
.accordion-item-border a {
  display: flex;
  align-items: center;
  list-style-type: none;
  text-decoration: none;
  color: inherit;
}
@media screen and (max-width: 500px) {
  .accordion-item-border a p {
    text-align: center;
  }
}

.patient-services-section {
  background-color: white;
}

.accordion-active-item-content {
  background-color: #0492c2;
  min-height: 50px;
}
.accordion-active-item-content p, .accordion-active-item-content span {
  color: #ffffff;
}

.accordion-cus-item-span-icon {
  color: #ffffff;
}

.patient-services-wrapper {
  padding: 5px 10px;
}

.accordion-content-wrapper a {
  margin: 5px 0;
  text-decoration: none;
  color: black;
}

.accordion-content-list {
  display: flex;
  flex-flow: row;
  align-items: center;
  padding-left: 10px;
  color: black;
  justify-content: flex-start;
}
.accordion-content-list a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  border: 1px solid black;
  border-radius: 5px;
  font-weight: bold;
  cursor: unset;
}
.accordion-content-list p {
  flex: 1;
}
.accordion-content-list .accordion-service-icon-title-wrapper {
  display: flex;
  align-items: center;
  min-height: inherit;
  cursor: pointer;
  padding-left: 10px;
}
.accordion-content-list .accordion-service-icon-title-wrapper span {
  display: flex;
  align-items: center;
}
.accordion-content-list .accordion-service-icon-title-wrapper .accordion-service-icon-wrapper {
  padding-right: 10px;
}

/*
.patient-initials-span-width {
  min-width: 45px;

  .surname-firstname-initials {
    display: inline-flex;
    place-items: center;
    justify-content: center;
    background: gs.$color-blue;
    color: gs.$color-white;
    border-radius: 50%;
    padding: 2px;
    min-height: 15px;
    min-width: 30px;
  }
}*//********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.accordion_container {
  width: 100%;
  overflow-x: auto;
}

.accordion_wrapper {
  display: block;
  min-width: 960px;
}
@media screen and (min-width: 960px) {
  .accordion_wrapper {
    overflow-x: hidden;
    min-width: 100%;
  }
}

.accordion-item-header {
  display: flex;
  margin-top: 5px;
  margin-bottom: 20px;
}
.accordion-item-header h3 {
  flex: 1;
  font-weight: bold;
  padding: 0 2px;
}

.accordion-map-wrapper {
  color: white;
}

.accordion-item-border {
  margin: 25px 0;
  background-color: transparent;
  color: #3f3d3d;
  min-height: 60px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  border-bottom: 1px solid #3f3d3d;
}
.accordion-item-border p {
  flex: 1;
  text-wrap: wrap;
  line-height: 25px;
  padding: 0 2px;
}
.accordion-item-border:hover {
  outline: 3px solid #0492c2;
  cursor: pointer;
  border-color: transparent;
}
.accordion-item-border a {
  display: flex;
  align-items: center;
  list-style-type: none;
  text-decoration: none;
  color: inherit;
}

.patient-services-section {
  background-color: white;
}

.accordion-active-item-content {
  background-color: #0492c2;
  min-height: 50px;
}
.accordion-active-item-content p,
.accordion-active-item-content span {
  color: #ffffff;
}

.accordion-cus-item-span-icon {
  color: #ffffff;
}

.patient-services-wrapper {
  padding: 5px 10px;
}

.accordion-content-wrapper a {
  margin: 5px 0;
  text-decoration: none;
  color: black;
}

.accordion-content-list {
  display: flex;
  flex-flow: row;
  align-items: center;
  padding-left: 10px;
  color: black;
  justify-content: flex-start;
}
.accordion-content-list a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  border: 1px solid black;
  border-radius: 5px;
  font-weight: bold;
  cursor: unset;
}
.accordion-content-list p {
  flex: 1;
}
.accordion-content-list .accordion-service-icon-title-wrapper {
  display: flex;
  align-items: center;
  min-height: inherit;
  cursor: pointer;
  padding-left: 10px;
}
.accordion-content-list .accordion-service-icon-title-wrapper span {
  display: flex;
  align-items: center;
}
.accordion-content-list .accordion-service-icon-title-wrapper .accordion-service-icon-wrapper {
  padding-right: 10px;
}

.patient-initials-span-width {
  min-width: 45px;
}
.patient-initials-span-width .surname-firstname-initials {
  display: inline-flex;
  place-items: center;
  justify-content: center;
  background: #0492c2;
  color: #ffffff;
  border-radius: 50%;
  padding: 2px;
  min-height: 30px;
  min-width: 30px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.patient-component-parent {
  display: block;
  width: 100%;
}

.customer-headline-text-wrapper {
  border-bottom: 2px solid #3f3d3d;
  line-height: 12px;
}
.customer-headline-text-wrapper p {
  font-size: x-small;
}
.customer-headline-text-wrapper i {
  font-size: 10px;
  color: darkorange;
}
@media screen and (min-width: 960px) {
  .customer-headline-text-wrapper {
    line-height: 26px;
  }
  .customer-headline-text-wrapper i {
    font-size: 16px;
  }
  .customer-headline-text-wrapper p {
    font-size: 18px;
  }
}

.cus-sectional-p {
  padding-left: 5px;
}

.fa-info-style {
  cursor: initial;
  padding-left: 10px;
  color: #0492c2;
}

.customer-address-next-of-kin-text {
  cursor: pointer;
  border-bottom: 1px solid black;
}
.customer-address-next-of-kin-text p {
  font-size: 18px;
  padding: 10px 0;
}

.patient-input-fields-wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  padding-bottom: 20px;
  background-color: #e7e7e7;
}
.patient-input-fields-wrapper .format-input,
.patient-input-fields-wrapper .selected-option-container {
  background-color: #ffffff;
}
.patient-input-fields-wrapper .input-field-container, .patient-input-fields-wrapper .dropdown-component-container,
.patient-input-fields-wrapper .date-picker-container, .patient-input-fields-wrapper .dropdown-component-wrapper {
  margin: 5px 0;
  max-width: 90%;
}
@media screen and (min-width: 378px) {
  .patient-input-fields-wrapper .input-field-container, .patient-input-fields-wrapper .dropdown-component-container,
  .patient-input-fields-wrapper .date-picker-container, .patient-input-fields-wrapper .dropdown-component-wrapper {
    max-width: 100%;
  }
}
@media screen and (min-width: 960px) {
  .patient-input-fields-wrapper .input-field-container, .patient-input-fields-wrapper .dropdown-component-container,
  .patient-input-fields-wrapper .date-picker-container, .patient-input-fields-wrapper .dropdown-component-wrapper {
    margin: 8px 0;
    border-radius: 10px;
    max-width: 600px;
  }
}
@media screen and (min-width: 1025px) {
  .patient-input-fields-wrapper {
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 50px;
    /*.format-input,
    .selected-option-container,
    .date-input {
      max-width: 100%;
    }*/
  }
}

.new-customer-buttons-wrapper {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  margin-top: 5px;
}
.new-customer-buttons-wrapper .button-component {
  display: inline-flex;
  align-items: center;
}
@media screen and (min-width: 650px) {
  .new-customer-buttons-wrapper {
    display: flex;
    flex-flow: row;
  }
}

.patient-modal-wrapper {
  text-align: center;
}
.patient-modal-wrapper .modal-icon-wrapper {
  height: 60px;
  width: 60px;
  color: #53BD8A;
}
.patient-modal-wrapper .modal-content {
  max-width: 540px;
  min-height: 370px;
}
.patient-modal-wrapper .new-patient-modal-btn-w {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}

.toast-success-buttons {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 12px;
}.old-patient-and-family-card-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 10px 0 5px 0;
}
.old-patient-and-family-card-wrapper_input-w .input-field-container, .old-patient-and-family-card-wrapper_input-w .checkbox-component-layout, .old-patient-and-family-card-wrapper_checkbox-w .input-field-container, .old-patient-and-family-card-wrapper_checkbox-w .checkbox-component-layout, .old-patient-and-family-card-wrapper_add-family-card-w .input-field-container, .old-patient-and-family-card-wrapper_add-family-card-w .checkbox-component-layout {
  display: inline-flex;
  width: 100%;
  max-width: 600px;
}
.old-patient-and-family-card-wrapper_search-p-w {
  max-height: 200px;
  position: relative;
  z-index: 1;
}
.old-patient-and-family-card-wrapper_create-f-card-btn .button-component button {
  min-height: 23px;
  padding: 4px;
}
.old-patient-and-family-card-wrapper_create-f-card-btn[data-family-card=true] {
  color: red;
}.search-patient-component-wrapper {
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.search-input-wrapper {
  position: relative;
  display: flex;
  flex-flow: column;
  row-gap: 5px;
}
.search-input-wrapper label {
  line-height: 28px;
  font-size: 14px;
  text-align: left;
}
.search-input-wrapper label span {
  color: #b24d4d;
}
.search-input-wrapper .input-error {
  font-size: 14px;
  color: #b24d4d;
  text-align: left;
  margin-top: 3px;
}

.search-input-result-w {
  margin: 6px 0;
}
.search-input-result-w button {
  background: white;
  font-style: inherit;
  font-size: inherit;
  min-width: 350px;
  max-width: inherit;
  text-align: start;
  padding: 6px;
  border-bottom: 2px solid rgba(128, 128, 128, 0.7);
}
.search-input-result-w button:hover {
  cursor: pointer;
}

.clear-search-button {
  background: transparent;
  cursor: pointer;
}
.clear-search-button svg {
  width: 16px;
  height: 16px;
}.camera-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.camera-container .video-wrapper {
  position: relative;
  width: 320px;
  height: 240px;
  border: 2px solid #e5e7eb; /* Gray-300 */
  border-radius: 12px;
  overflow: hidden;
}
.camera-container .video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.camera-container canvas {
  display: none; /* Canvas is hidden since it's only used for capturing */
}
.camera-container .button-group {
  display: flex;
  gap: 1rem;
}
.camera-container .button-group button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.camera-container .button-group button.start {
  background-color: #3b82f6; /* Blue-500 */
  color: #ffffff;
}
.camera-container .button-group button.start:hover {
  background-color: #2563eb; /* Blue-600 */
}
.camera-container .button-group button.stop {
  background-color: #ef4444; /* Red-500 */
  color: #ffffff;
}
.camera-container .button-group button.stop:hover {
  background-color: #dc2626; /* Red-600 */
}
.camera-container .button-group button.capture {
  background-color: #22c55e; /* Green-500 */
  color: #ffffff;
}
.camera-container .button-group button.capture:hover {
  background-color: #16a34a; /* Green-600 */
}
.camera-container .button-group button.capture:disabled {
  background-color: #d1d5db; /* Gray-300 */
  cursor: not-allowed;
}
.camera-container .image-preview {
  margin-top: 1rem;
  text-align: center;
}
.camera-container .image-preview img {
  margin-top: 0.5rem;
  width: 320px;
  border: 2px solid #e5e7eb; /* Gray-300 */
  border-radius: 12px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.upload-image-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
}
.upload-image-wrapper label {
  background: #0492c2;
  color: #ffffff;
  width: fit-content;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.upload-image-wrapper label input {
  display: none;
}
.upload-image-wrapper .photo-controls {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.upload-image-wrapper .image-wrapper {
  aspect-ratio: 1/1;
  width: 150px;
  position: relative;
}
.upload-image-wrapper .image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.upload-image-wrapper .image-wrapper img:hover {
  cursor: pointer;
}
.upload-image-wrapper .image-wrapper .remove-image-icon {
  position: absolute;
  bottom: 90%;
  left: 90%;
  z-index: 20;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.head-liner-component {
  display: block;
  width: 100%;
}
.head-liner-component .dashboard-top-nav-headline-text {
  display: flex;
  border-bottom: 2px solid #0492c2;
  padding-bottom: 10px;
}
@media (max-width: 960px) {
  .head-liner-component .dashboard-top-nav-headline-text {
    padding-bottom: 5px;
  }
}
.head-liner-component .dashboard-top-nav-headline-text.hide-border-line {
  border-bottom: none;
}
.head-liner-component .dashboard-top-nav-headline-text h1 {
  padding-bottom: 5px;
  font-size: 20px;
  width: 100%;
}
@media (max-width: 960px) {
  .head-liner-component .dashboard-top-nav-headline-text h1 {
    line-height: 28px;
    margin-bottom: 5px;
    justify-content: flex-start;
    overflow: auto;
  }
}
@media (max-width: 960px) {
  .head-liner-component .dashboard-top-nav-headline-text {
    flex-direction: column;
  }
}
.head-liner-component .dashboard-top-nav-headline-text .header-action {
  display: flex;
  flex-flow: row;
  justify-content: flex-end;
  border-radius: 7px;
  gap: 1rem;
  padding-right: 1rem;
  width: 100%;
}
.head-liner-component .dashboard-top-nav-headline-text .header-action button {
  padding: 11.47px 10px !important;
  border-radius: 5px;
}
.head-liner-component .dashboard-top-nav-headline-text .header-action button div {
  display: flex;
  align-items: center;
  gap: 7.79px;
  font-weight: 600;
  font-size: 14px;
}
.head-liner-component .dashboard-top-nav-headline-text .header-action button div svg {
  width: 20px;
  height: 20px;
}
.head-liner-component .dashboard-top-nav-headline-text .header-action button.active div {
  font-size: unset;
}
@media (max-width: 1024px) {
  .head-liner-component .dashboard-top-nav-headline-text .header-action {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0;
  }
  .head-liner-component .dashboard-top-nav-headline-text .header-action .button-component,
  .head-liner-component .dashboard-top-nav-headline-text .header-action button {
    width: 100%;
    justify-content: center;
  }
  .head-liner-component .dashboard-top-nav-headline-text .header-action .button-component div,
  .head-liner-component .dashboard-top-nav-headline-text .header-action button div {
    font-size: 14px;
  }
  .head-liner-component .dashboard-top-nav-headline-text .header-action .button-component div svg,
  .head-liner-component .dashboard-top-nav-headline-text .header-action button div svg {
    width: 18px;
    height: 18px;
  }
}

.search-icon {
  color: rgba(128, 128, 128, 0.5);
}

.patient-searchbar-wrapper {
  min-width: 370px;
}
.patient-searchbar-wrapper.full-width {
  min-width: 100%;
}
@media screen and (max-width: 500px) {
  .patient-searchbar-wrapper {
    min-width: unset;
    padding-bottom: 5px;
  }
}

.lightbulb_message {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  font-weight: 300;
  line-height: 18px;
}

.dashboard_nav_bottom {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  align-items: center;
  gap: 16px;
}
@media (max-width: 960px) {
  .dashboard_nav_bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}
.dashboard_nav_bottom .light-bulb-deletion-history-switch_w {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.dashboard_nav_bottom .dashboard-top-deletion-history-switch, .dashboard_nav_bottom .dashboard-top-diabled-history-switch {
  display: flex;
  justify-content: flex-end;
  margin: 0 5px;
}
.dashboard_nav_bottom_filter-w {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 10px 0;
}
.dashboard_nav_bottom_filter-w:hover {
  cursor: pointer;
}
.dashboard_nav_bottom_filter-w_button {
  width: 140px;
  height: 26px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background-color: #f1f6fb;
  border: 1px solid #86d1f5;
  cursor: pointer;
  padding: 15px 0;
}
.dashboard_nav_bottom_filter-w_button p {
  color: #797272;
}

.dashboard-nav-bottom_right {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-left: auto;
}
@media (max-width: 960px) {
  .dashboard-nav-bottom_right {
    margin: 0;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.switch-component-wrapper {
  display: flex;
  flex-flow: column;
}
.switch-component-wrapper label {
  font-weight: bold;
  font-size: 16px;
  line-height: 28px;
}
@media screen and (max-width: 500px) {
  .switch-component-wrapper label {
    line-height: 16px;
  }
}
.switch-component-wrapper input {
  display: none;
}
.switch-component-wrapper_slider {
  position: relative;
  width: 40px;
  height: 20px;
  background-color: #ccc;
  border-radius: 20px;
  transition: 0.3s;
  cursor: pointer;
  margin: 5px 0;
}
.switch-component-wrapper_slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 2px;
  top: 2px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}
input:checked + .switch-component-wrapper_slider {
  background-color: #0492c2;
}
input:checked + .switch-component-wrapper_slider::before {
  transform: translateX(20px);
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.dynamic-filter-w {
  width: 100%;
}
.dynamic-filter-w .checkbox-component-layout {
  margin-top: 0.5rem;
}
.dynamic-filter-w .dynamic-filter-w_open {
  transform: rotate(180deg);
}
.dynamic-filter-w_item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dynamic-filter-w_item_content {
  width: 100%;
}
.dynamic-filter-w_item_content .date-range-picker,
.dynamic-filter-w_item_content .dateRangeWrapper,
.dynamic-filter-w_item_content .date-picker {
  width: 100%;
}
.dynamic-filter-w_item_content .date-picker-container {
  width: 100%;
}
.dynamic-filter-w_item_content .date-picker-container label {
  display: inherit;
  text-align: left;
}
.dynamic-filter-w_item_content .format-input {
  margin-top: 5px;
}
.dynamic-filter-w_item_content_search-list {
  margin: 5px 0;
  width: 60%;
  justify-self: center;
}
.dynamic-filter-w_item_content_search-list_item {
  font-size: 18px;
  margin: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2509803922);
  list-style: none;
}
.dynamic-filter-w_item p {
  font-size: 18px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.filter-component-wrapper {
  position: absolute;
  top: 50px;
  left: -100%;
  padding-bottom: 15px;
  background-color: #ffffff;
  width: 450px;
  min-width: 300px;
  min-height: 306px;
  max-height: 800px;
  overflow-y: scroll;
  border-radius: 6px;
  border: 1px solid #00b0ff;
  text-align: center;
  z-index: 1000;
  box-shadow: 0 0 3px 1px;
}
.filter-component-wrapper_title {
  font-size: 20px;
  border-bottom: 1px solid #00b0ff;
  padding: 10px 0;
}
.filter-component-wrapper_content {
  margin: 15px 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.filter-component-wrapper_apply-clear {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #000000;
  padding: 0.5rem 0;
}
.filter-component-wrapper_apply-clear span {
  text-decoration: underline;
}
@media screen and (max-width: 769px) {
  .filter-component-wrapper {
    width: 430px;
  }
}
@media screen and (max-width: 500px) {
  .filter-component-wrapper {
    width: 350px;
    left: -5px;
  }
}
@media screen and (max-width: 376px) {
  .filter-component-wrapper {
    width: 300px;
    left: -5px;
  }
}
@media screen and (max-width: 321px) {
  .filter-component-wrapper {
    width: 250px;
    min-width: 250px;
    left: -5px;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.guest-patient-component {
  display: block;
  margin-bottom: 5px;
}
.guest-patient-component .new-guest-patient-proceed-btn {
  margin-top: 20px;
}
.guest-patient-component .guest-patient-input-fields-wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  padding-bottom: 20px;
  background-color: #e7e7e7;
}
.guest-patient-component .guest-patient-input-fields-wrapper .format-input,
.guest-patient-component .guest-patient-input-fields-wrapper .selected-option-container {
  background-color: #ffffff;
}
.guest-patient-component .guest-patient-input-fields-wrapper .input-field-container,
.guest-patient-component .guest-patient-input-fields-wrapper .dropdown-component-container, .guest-patient-component .guest-patient-input-fields-wrapper .date-picker-container, .guest-patient-component .guest-patient-input-fields-wrapper .dropdown-component-wrapper {
  margin: 5px 0;
}
@media screen and (min-width: 1025px) {
  .guest-patient-component .guest-patient-input-fields-wrapper {
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 50px;
  }
  .guest-patient-component .guest-patient-input-fields-wrapper .format-input,
  .guest-patient-component .guest-patient-input-fields-wrapper .selected-option-container,
  .guest-patient-component .guest-patient-input-fields-wrapper .date-input {
    max-width: 100%;
  }
  .guest-patient-component .guest-patient-input-fields-wrapper .input-field-container,
  .guest-patient-component .guest-patient-input-fields-wrapper .dropdown-component-container, .guest-patient-component .guest-patient-input-fields-wrapper .date-picker-container, .guest-patient-component .guest-patient-input-fields-wrapper .dropdown-component-wrapper {
    margin: 8px 0;
    border-radius: 10px;
  }
  .guest-patient-component .guest-patient-input-fields-wrapper .input-field-wrapper {
    max-width: 100%;
  }
}
.guest-patient-component .guest-patient-margin-top-10 {
  margin-top: 10px;
}
.guest-patient-component .new-guest-proceed-btn {
  display: flex;
  justify-content: flex-end;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.patient-profile-component-w .patient-headline-text {
  display: flex;
  flex-flow: column;
}
.patient-profile-component-w .patient-headline-text h1 {
  flex: 1;
  padding-bottom: 5px;
  font-size: 20px;
  min-width: 350px;
}
@media (max-width: 960px) {
  .patient-profile-component-w .patient-headline-text h1 {
    width: 100%;
    justify-content: flex-start;
    overflow: auto;
  }
}
@media (max-width: 960px) {
  .patient-profile-component-w .patient-headline-text {
    flex-direction: column;
  }
}
.patient-profile-component-w .patient-headline-text_patient-actions-navs-w nav {
  float: right;
}
.patient-profile-component-w .delete-patient-button {
  justify-self: flex-end;
}
.patient-profile-component-w .patient-profile-picture-info-section {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  margin: 10px 0;
}
.patient-profile-component-w .patient-profile-generate-invoice-divider {
  display: flex;
  flex-flow: row;
  justify-content: center;
  width: 100%;
}
.patient-profile-component-w .patient-profile-box {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}
.patient-profile-component-w .patient-pics-name-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.patient-profile-component-w .patient-pics-name-wrapper img {
  height: 111px;
  width: 111px;
  border-radius: 50%;
}
.patient-profile-component-w .patient-pics-name-wrapper img:hover {
  cursor: pointer;
}
.patient-profile-component-w .patient-pics-name-wrapper .family-card-label-w div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 50px;
}
.patient-profile-component-w .patient-pics-name-wrapper .family-card-label-w .button-component button {
  min-height: 30px;
  padding: 1px 3px;
  min-width: unset;
}
@media screen and (min-width: 960px) {
  .patient-profile-component-w .patient-pics-name-wrapper {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 50%;
  }
  .patient-profile-component-w .patient-pics-name-wrapper img {
    height: 130px;
    width: 130px;
  }
}
.patient-profile-component-w #edit-patient-profile-btn2,
.patient-profile-component-w #patient-generate-invoice-btn,
.patient-profile-component-w #edit-patient-profile-btn1 {
  min-width: 100%;
}
.patient-profile-component-w .edit-patient-profile-btn {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 1rem 0;
}
.patient-profile-component-w .edit-patient-profile-btn #patient-generate-invoice-btn {
  background-color: green;
}
.patient-profile-component-w .customer-profile-right {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  padding: 10px 0;
}
.patient-profile-component-w .customer-profile-top-mobile-wrapper {
  display: flex;
  flex-flow: column;
  justify-content: start;
}
.patient-profile-component-w .customer-profile-left {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}
@media screen and (min-width: 960px) {
  .patient-profile-component-w .customer-profile-left {
    width: 100%;
  }
}
.patient-profile-component-w .customer-pics-mobile-name-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.patient-profile-component-w .generate-invoice-history-edit-wrapper {
  display: flex;
  flex-flow: row;
  justify-content: center;
  padding-bottom: 20px;
  align-items: center;
  gap: 10px;
}
.patient-profile-component-w .view-history-edit-profile-wrapper {
  display: flex;
  flex-flow: row;
  justify-content: center;
}
.patient-profile-component-w .view-history-edit-profile-wrapper span {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.patient-profile-component-w .view-history-edit-profile-wrapper span:hover {
  cursor: pointer;
  color: #0492c2;
}
.patient-profile-component-w .view-history-edit-profile-wrapper a {
  color: #3f3d3d;
  text-decoration: none;
  border-bottom: 1px solid #3f3d3d;
  width: fit-content;
}
.patient-profile-component-w .view-history-edit-profile-wrapper a:hover {
  color: #0492c2;
  border-color: #0492c2;
}
@media screen and (min-width: 960px) {
  .patient-profile-component-w .view-history-edit-profile-wrapper span {
    display: inherit;
    flex-flow: row;
    align-items: center;
    padding: 0 5px;
  }
  .patient-profile-component-w .view-history-edit-profile-wrapper span p {
    padding-left: 5px;
  }
}
.patient-profile-component-w .customer-name-static-dynamic p {
  padding: 10px 0;
}
.patient-profile-component-w .horizontal-line {
  display: flex;
  height: 40px;
  background: #0492c2;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.patient-profile-component-w .horizontal-line p {
  color: white;
  font-weight: 600;
}
.patient-profile-component-w .customer-details-sections-wrapper {
  display: flex;
  flex-flow: column;
}
@media screen and (min-width: 960px) {
  .patient-profile-component-w .customer-details-sections-wrapper {
    margin-bottom: 30px;
  }
}
.patient-profile-component-w .customer-details-sections {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 20px;
}
@media screen and (min-width: 960px) {
  .patient-profile-component-w .customer-details-sections {
    justify-content: space-around;
  }
}
.patient-profile-component-w .customer-details-sections-children {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  width: 100%;
  margin-top: 20px;
}
@media screen and (min-width: 650px) {
  .patient-profile-component-w .customer-details-sections-children {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1025px) {
  .patient-profile-component-w .customer-details-sections-children {
    grid-template-columns: repeat(3, 1fr);
  }
}
.patient-profile-component-w .left-right-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: 15px;
  line-height: 25px;
  max-width: 310px;
  width: unset;
}
@media screen and (min-width: 960px) {
  .patient-profile-component-w .left-right-wrapper {
    width: 95%;
    max-width: unset;
    margin-bottom: unset;
  }
}
.patient-profile-component-w .customer-contact-row-wrapper-left {
  min-width: 120px;
  line-height: 30px;
}
.patient-profile-component-w .customer-contact-row-wrapper-left p {
  font-weight: bold;
}
@media screen and (min-width: 960px) {
  .patient-profile-component-w .customer-contact-row-wrapper-left {
    min-width: fit-content;
  }
}
.patient-profile-component-w .customer-contact-row-wrapper-right {
  min-width: 150px;
  line-height: 30px;
}
@media screen and (min-width: 960px) {
  .patient-profile-component-w .customer-contact-row-wrapper-right {
    padding-left: 20px;
    min-width: 120px;
  }
}
.patient-profile-component-w .customer-admin-other-info p {
  color: rgb(128, 128, 128);
}
.patient-profile-component-w .company-customer-contact-row-wrapper-header {
  display: flex;
  flex-flow: row;
  justify-content: start;
}
.patient-profile-component-w .company-contact-other-info-text {
  color: rgb(128, 128, 128);
}
@media screen and (max-width: 960px) {
  .patient-profile-component-w p {
    font-size: 14px;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.label-value-wrapper {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  border: 2px solid rgba(128, 128, 128, 0.7);
  margin: 3px 0;
  width: 100%;
  min-height: 38px;
  line-height: 24px;
  text-align: start;
}
.label-value-wrapper p {
  padding: 6px 3px;
  width: 50%;
  align-items: center;
  justify-content: flex-start;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}
.label-value-wrapper div {
  width: 50%;
  font-weight: 600;
  justify-content: flex-end;
  overflow-wrap: break-word;
  word-break: break-word;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.vaccination-list-component-wrapper {
  display: flex;
  flex-flow: column;
}
.vaccination-list-component-wrapper_actions .button-component {
  float: right;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

#add-vaccination,
#add-family-history-btn,
#add-known-illness-btn,
#add-allergy-btn {
  padding: 0.8rem 0.2rem;
  min-height: unset;
  max-height: unset;
}

.patient-common-listing__parent-list {
  max-width: 500px;
  margin-top: 20px;
}
@media screen and (min-width: 500px) {
  .patient-common-listing__parent-list {
    max-width: unset;
  }
}
.patient-common-listing__parent-list__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
}
.patient-common-listing__parent-list__items__card {
  border: 2px solid #0492c2;
  border-radius: 10px;
  margin-bottom: 1rem;
  background: #fff;
  max-width: 320px;
}
.patient-common-listing__parent-list__items__card__header {
  background-color: #0492c2;
  padding: 0.5rem;
  text-align: center;
}
.patient-common-listing__parent-list__items__card__header h3 {
  color: #fff;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.patient-common-listing__parent-list__items__card__content {
  padding: 0;
}
.patient-common-listing__parent-list__items__card__content table {
  width: 100%;
  border-collapse: collapse;
}
.patient-common-listing__parent-list__items__card__content table tbody tr {
  border-bottom: 1px solid #cfcaca;
}
.patient-common-listing__parent-list__items__card__content table tbody tr:last-child {
  border-bottom: none;
}
.patient-common-listing__parent-list__items__card__content table tbody td {
  padding: 0.2rem;
  vertical-align: top;
  border-left: 1px solid #cfcaca;
  line-height: 23px;
}
.patient-common-listing__parent-list__items__card__content__field {
  font-weight: 500;
}
.patient-common-listing__parent-list__items__card__content__title {
  font-weight: 600;
  color: #0492c2;
}
@media screen and (max-width: 1025px) {
  .patient-common-listing__parent-list__items {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 500px) {
  .patient-common-listing__parent-list__items {
    grid-template-columns: repeat(1, 1fr);
  }
}
.patient-common-listing__parent-list h2 {
  margin-bottom: 1rem;
  font-size: 1.4rem;
}
.patient-common-listing__parent-list__empty {
  color: #777;
  font-style: italic;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.add-vaccination-component-wrapper .add-vaccination {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}
.add-vaccination-component-wrapper .add-vaccination_form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.add-vaccination-component-wrapper .add-vaccination_actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.add-vaccination-component-wrapper .add-vaccination_actions_cancel-btn {
  background: #e0e0e0;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}
.add-vaccination-component-wrapper .add-vaccination_actions_add-btn {
  background: #0492c2;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}.search-user-component-wrapper {
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.patient-action-navs-component-wrapper nav {
  margin: 5px 0 10px 0;
}
.patient-action-navs-component-wrapper nav ul li {
  list-style: none;
  display: inline;
  padding: 0 10px;
  font-size: 16px;
  text-decoration: none;
  color: #3f3d3d;
  font-weight: 600;
}
.patient-action-navs-component-wrapper nav ul li:hover {
  color: #0492c2;
  border-color: #0492c2;
  cursor: pointer;
  border-bottom: 1px solid #3f3d3d;
}
.patient-action-navs-component-wrapper nav ul li[data-pactivenavaction=true] {
  color: #0492c2;
}
@media screen and (max-width: 650px) {
  .patient-action-navs-component-wrapper nav ul li {
    min-width: 650px;
    overflow-y: scroll;
    line-height: 22px;
    font-size: x-small;
    padding: 0 1px;
  }
}.family-history-component {
  display: flex;
  justify-content: space-between;
}
.family-history-component_content {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.family-history-component_content .button-component {
  align-self: flex-end;
}
.family-history-component__item {
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  background: #f9f9f9;
}
.family-history-component__modal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.family-history-component__modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
}.family-card-members-w table {
  width: 100%;
  border-spacing: 0 20px;
}
.family-card-members-w table thead tr th {
  padding-bottom: 15px;
}
.family-card-members-w_remove-patient-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.family-card-members-w_remove-patient-content h3 {
  margin-bottom: 50px;
}
.family-card-members-w_remove-patient-content_buttons {
  display: flex;
  width: 100%;
  justify-content: space-around;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.table-row-component-w {
  background: #e7e7e7;
  text-align: center;
  cursor: pointer;
}
.table-row-component-w td {
  padding: 20px 0;
}
.table-row-component-w_remove-member-icon {
  cursor: pointer;
}
.table-row-component-w:hover {
  background: #d9d9d9;
}.known-illness-component {
  display: flex;
  justify-content: space-between;
}
.known-illness-component_content {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.known-illness-component_content .button-component {
  align-self: flex-end;
}
.known-illness-component__item {
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  background: #f9f9f9;
}
.known-illness-component__modal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.known-illness-component__modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
}.allergies-component {
  display: flex;
  justify-content: space-between;
}
.allergies-component_content {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.allergies-component_content .button-component {
  align-self: flex-end;
}
.allergies-component__item {
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  background: #f9f9f9;
}
.allergies-component__modal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.allergies-component__modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.appointment-header {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 16px;
  height: 78px;
  padding: 12px 1rem;
  border-bottom: 3px solid #0492c2;
  overflow-x: auto;
  scroll-behavior: auto;
}
.appointment-header__tab {
  background-color: #e4e4e4 !important;
  border: 1px solid #b5b5b5;
  position: relative;
  color: black !important;
  height: 50px !important;
  white-space: nowrap !important;
}
.appointment-header__tab.active {
  background-color: #0492c2 !important;
  color: #ffffff !important;
  border: 1px solid #0492c2 !important;
}
.appointment-header__tab.has-badge {
  position: relative;
  padding-right: 30px;
}
@media screen and (max-width: 1024px) {
  .appointment-header__tab {
    font-size: 14px !important;
    height: 40px !important;
  }
  .appointment-header__tab.has-badge {
    padding-right: 18px !important;
  }
}
.appointment-header__badge {
  position: absolute;
  right: -15px;
  background-color: #cf3333;
  color: #ffffff;
  padding: 6px 6px;
  font-size: 12px !important;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .appointment-header__badge {
    font-size: 10px !important;
    width: 24px;
    height: 24px;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.view-dept-calendar-btn {
  text-decoration: underline;
  text-underline-offset: 0.5em;
  white-space: nowrap;
  font-size: 14px;
  background: transparent;
  cursor: pointer;
}

.calendar-modal-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calendar-modal-container__header {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 20px;
}
.calendar-modal-container__header p {
  font-size: 14px;
}
.calendar-modal-container__header .select-input-wrapper {
  width: 100px;
}
.calendar-modal-container__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 8px;
  border: 0.97px solid #0492c2;
  padding-top: 15px;
}
.calendar-modal-container__body .calendar {
  border-top: 1px solid #f0f0f0;
}
.calendar-modal-container__body__options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px 20px;
}
@media screen and (max-width: 1024px) {
  .calendar-modal-container__body__options {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
}
.calendar-modal-container__body__options__option {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.appointment-status-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 16px;
}
.appointment-status-label__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.appointment-status-label__item__color {
  width: 15px;
  height: 15px;
  border-radius: 50%;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.calendar {
  width: 100%;
}

.calendar-header {
  height: 50px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  padding: 10px 0px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.calendar-header .empty-header-label {
  width: 130px;
  min-width: 130px;
  border-right: 1px solid #f0f0f0;
  height: 50px;
}
@media screen and (max-width: 1024px) {
  .calendar-header .empty-header-label {
    width: 100px;
    min-width: 100px;
  }
}
.calendar-header .empty-header-label.monthly {
  width: 100px !important;
  min-width: 100px !important;
}
.calendar-header__nav {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 0px 10px;
}
.calendar-header__nav.vertical {
  width: calc(100% - 130px);
}
@media screen and (max-width: 1024px) {
  .calendar-header__nav.vertical {
    width: calc(100% - 100px);
  }
}
.calendar-header__nav.monthly {
  width: calc(100% - 100px) !important;
}
.calendar-header__nav .calendar-icon {
  width: 25px;
  min-width: 25px;
  height: 25px;
  color: #0492c2;
  stroke-width: 1px !important;
  cursor: pointer;
}
@media screen and (max-width: 1024px) {
  .calendar-header__nav .calendar-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
  }
}
.calendar-header__date-labels {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: -15px;
  padding-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
}
.calendar-header__date-labels::-webkit-scrollbar {
  height: 2px;
  transition: height 0.3s;
  width: 40px;
}
.calendar-header__date-labels::-webkit-scrollbar-track {
  background: transparent;
}
.calendar-header__date-labels::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 0px;
}
.calendar-header__date-labels::-webkit-scrollbar-thumb:hover {
  background-color: #888;
}
.calendar-header__date-label {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
@media screen and (max-width: 1024px) {
  .calendar-header__date-label {
    font-size: 14px;
  }
}
.calendar-header__date-label.active {
  color: #0492c2;
  font-weight: 700 !important;
}
.calendar-header__nav-button {
  padding: 0px 10px;
  cursor: pointer;
  background-color: transparent;
}
.calendar-header__nav-button svg {
  width: 20px;
  height: 20px;
  color: #0492c2;
}
@media screen and (max-width: 1024px) {
  .calendar-header__nav-button svg {
    width: 15px;
    height: 15px;
  }
}
.calendar-header__nav-button {
  /* Disabled button styling using pseudo-classes */
}
.calendar-header__nav-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.calendar-header__week-label {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 1024px) {
  .calendar-header__week-label {
    font-weight: 400;
  }
}

.calendar-daily {
  width: 100%;
  max-height: 500px;
  overflow: auto;
}
.calendar-daily table th,
.calendar-daily table td {
  min-width: 80px;
  max-width: 80px;
  text-align: left;
  border-right: 1px solid #f0f0f0;
}
@media screen and (max-width: 1024px) {
  .calendar-daily table th,
  .calendar-daily table td {
    min-width: 80px;
    max-width: 80px;
  }
}
.calendar-daily table th {
  padding: 10px 5px;
  height: 40px;
  border-bottom: 1px solid #f0f0f0;
  font-weight: 400;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #f0f0f0;
  border-right: 1px solid #444;
}
@media screen and (max-width: 1024px) {
  .calendar-daily table th {
    font-size: 14px;
    height: 40px;
  }
}
.calendar-daily table th.current-time {
  color: #0492c2;
  font-weight: 700;
}
.calendar-daily table td {
  height: 80px;
  border-bottom: 1px solid #f0f0f0;
}
@media screen and (max-width: 1024px) {
  .calendar-daily table td {
    height: 65px;
  }
}
.calendar-daily table .side-label {
  width: 130px;
  min-width: 130px;
  border-right: 1px solid #f0f0f0;
  min-height: 80px;
  padding: 6px;
  border-bottom: none !important;
  position: sticky;
  left: 0;
  z-index: 11;
  background-color: #f0f0f0;
  border-right: 1px solid #444;
}
@media screen and (max-width: 1024px) {
  .calendar-daily table .side-label {
    min-width: 100px;
    width: 100px;
    max-width: 100px;
  }
}
.calendar-daily table .side-label div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.calendar-daily table .side-label div h5 {
  font-size: 14px;
  font-weight: 600;
}
.calendar-daily table .side-label div p {
  font-size: 12px;
  font-weight: 400;
}
.calendar-daily table .side-label div p,
.calendar-daily table .side-label div h5 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96%;
}
.calendar-daily table .timeline-cell {
  position: relative;
  height: 80px;
}
.calendar-daily table .timeline-cell .timeline {
  position: relative;
  height: 100%;
}
.calendar-daily table .timeline-cell .calendar-cell {
  position: absolute;
  font-size: 14px;
  cursor: pointer;
  height: 100%;
  white-space: wrap;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  text-align: center;
  color: #ffffff;
  word-break: break-word;
  padding: 5px;
  background-color: #d9d9d9;
  overflow: hidden; /* Hides overflowing text */
  -webkit-line-clamp: 3; /* Limits the text to 3 lines */
  -webkit-box-orient: vertical; /* Ensures the box is laid out vertically */
  text-overflow: ellipsis;
}
.calendar-daily table .timeline-cell .calendar-cell.busy {
  background-color: #9f082c;
}
.calendar-daily table .timeline-cell .calendar-cell.available {
  background-color: #d9d9d9;
}
.calendar-daily table .timeline-cell .calendar-cell.taken {
  background-color: #47b892;
}
.calendar-daily table .timeline-cell .calendar-cell.booking {
  background-color: #0492c2;
}

.calendar-weekly {
  width: 100%;
  max-height: 500px;
  overflow: auto;
}
.calendar-weekly table th,
.calendar-weekly table td {
  min-width: 173px;
  max-width: 173px;
  text-align: left;
  border-right: 1px solid #f0f0f0;
}
@media screen and (max-width: 1024px) {
  .calendar-weekly table th,
  .calendar-weekly table td {
    min-width: 173px;
    max-width: 173px;
  }
}
.calendar-weekly table th {
  padding: 10px 5px;
  height: 40px;
  border-bottom: 1px solid #f0f0f0;
  font-weight: 400;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #f0f0f0;
  border-right: 1px solid #444;
}
@media screen and (max-width: 1024px) {
  .calendar-weekly table th {
    font-size: 14px;
    height: 40px;
  }
}
.calendar-weekly table th.active-date {
  color: #0492c2;
  font-weight: 700;
}
.calendar-weekly table td {
  height: 80px;
  border-bottom: 1px solid #f0f0f0;
}
@media screen and (max-width: 1024px) {
  .calendar-weekly table td {
    height: 65px;
  }
}
.calendar-weekly table .side-label {
  width: 130px;
  min-width: 130px;
  border-right: 1px solid #f0f0f0;
  min-height: 80px;
  padding: 6px;
  border-bottom: none !important;
  position: sticky;
  left: 0;
  z-index: 11;
  background-color: #f0f0f0;
  border-right: 1px solid #444;
}
@media screen and (max-width: 1024px) {
  .calendar-weekly table .side-label {
    min-width: 100px;
    width: 100px;
    max-width: 100px;
  }
}
.calendar-weekly table .side-label div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.calendar-weekly table .side-label div h5 {
  font-size: 14px;
  font-weight: 600;
}
.calendar-weekly table .side-label div p {
  font-size: 12px;
  font-weight: 400;
}
.calendar-weekly table .side-label div p,
.calendar-weekly table .side-label div h5 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96%;
}
.calendar-weekly table .timeline-cell {
  position: relative;
  height: 80px;
  min-height: 80px;
  width: 100%;
  max-height: 80px;
}
.calendar-weekly table .timeline-cell::-webkit-scrollbar {
  height: 2px;
  transition: height 0.3s;
  width: 40px;
}
.calendar-weekly table .timeline-cell::-webkit-scrollbar-track {
  background: transparent;
}
.calendar-weekly table .timeline-cell::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 0px;
}
.calendar-weekly table .timeline-cell .calendar-cell {
  font-size: 14px;
  cursor: pointer;
  height: 100%;
  white-space: wrap;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-size: 14px;
  text-align: center;
  color: #ffffff;
  word-break: break-word;
  padding: 3px;
  background-color: #d9d9d9;
}
.calendar-weekly table .timeline-cell .calendar-cell.no-busy-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
.calendar-weekly table .timeline-cell .calendar-cell {
  overflow-x: hidden; /* Hides overflowing text */
  overflow-y: auto;
  -webkit-line-clamp: 3; /* Limits the text to 3 lines */
  -webkit-box-orient: vertical; /* Ensures the box is laid out vertically */
}
.calendar-weekly table .timeline-cell .calendar-cell .time-pill {
  border-radius: 4px;
  padding: 4px 2.5px;
  font-size: 11.5px;
  font-weight: 400;
  color: #ffffff;
  border: 0.5px solid #f0f0f0;
}
.calendar-weekly table .timeline-cell .calendar-cell.busy {
  background-color: #9f082c;
}
.calendar-weekly table .timeline-cell .calendar-cell.available {
  background-color: #d9d9d9;
}
.calendar-weekly table .timeline-cell .calendar-cell.taken {
  background-color: #47b892;
}
.calendar-weekly table .timeline-cell .calendar-cell.booking {
  background-color: #0492c2;
}
.calendar-weekly table .timeline-cell .calendar-cell::-webkit-scrollbar {
  height: 40px;
  transition: height 0.3s;
  width: 2px;
}
.calendar-weekly table .timeline-cell .calendar-cell::-webkit-scrollbar-track {
  background: transparent;
}
.calendar-weekly table .timeline-cell .calendar-cell::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 0px;
}

.calendar-monthly {
  width: 100%;
  max-height: 520px;
  overflow: auto;
}
.calendar-monthly .header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #f0f0f0;
}
.calendar-monthly .header div {
  width: 100%;
  height: 40px;
  padding: 10px 5px;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
  font-weight: 400;
  background-color: #f0f0f0;
}
@media screen and (max-width: 1024px) {
  .calendar-monthly .header div {
    font-size: 14px;
  }
}
@media screen and (max-width: 1024px) {
  .calendar-monthly .header {
    grid-template-columns: repeat(7, 100px);
  }
}
.calendar-monthly .body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
@media screen and (max-width: 1024px) {
  .calendar-monthly .body {
    grid-template-columns: repeat(7, 100px);
  }
}
.calendar-monthly .body .day-cell {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
  min-height: 80px;
  height: 80px;
}
.calendar-monthly .body .day-cell .appointment-block {
  padding: 5px 0px 5px 5px;
  font-size: 14px;
  min-height: 80px;
  max-height: 80px;
  cursor: pointer;
}
.calendar-monthly .body .day-cell .appointment-block .selected {
  color: #0492c2;
  font-weight: 700;
}
.calendar-monthly .body .day-cell .appointment-block .inner-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.calendar-monthly .body .day-cell .appointment-block .inner-block .appointment-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.calendar-monthly .body .day-cell .appointment-block .inner-block .appointment-label p {
  white-space: nowrap;
  font-size: 14px;
}
.calendar-monthly .body .day-cell .appointment-block.multi-staff {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #47b892;
}
.calendar-monthly .body .day-cell .appointment-block.multi-staff.not-current-month {
  opacity: 0.4;
}
.calendar-monthly .body .day-cell .appointment-block.multi-staff .inner-block {
  overflow-y: auto;
  overflow-x: auto;
}
.calendar-monthly .body .day-cell .appointment-block.multi-staff .inner-block::-webkit-scrollbar {
  height: 40px;
  transition: height 0.3s;
  width: 2px;
}
.calendar-monthly .body .day-cell .appointment-block.multi-staff .inner-block::-webkit-scrollbar-track {
  background: transparent;
}.empty-content-wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  row-gap: 16px;
}
.empty-content-wrapper.section {
  min-height: 100px;
}
.empty-content-wrapper h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 22px;
}
.empty-content-wrapper p {
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  max-width: 600px;
  text-align: center;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.appointment-setting-btn {
  text-decoration: underline;
  text-underline-offset: 0.5em;
  white-space: nowrap;
  font-size: 14px;
  background: transparent;
  cursor: pointer;
  color: #0492c2 !important;
}

.appointment-setting {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.appointment-setting .appointment-setting-container-box {
  border: 1px solid #0492c2;
  padding: 20px;
  border-radius: 10px;
  overflow-x: auto;
}
.appointment-setting .appointment-setting-container-box::-webkit-scrollbar {
  height: 2px;
  transition: height 0.3s;
  width: 40px;
}
.appointment-setting .appointment-setting-container-box::-webkit-scrollbar-track {
  background: transparent;
}
.appointment-setting .appointment-setting-container-box::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 0px;
}
.appointment-setting .appointment-setting-container-box__inner {
  min-width: 700px;
}
.appointment-setting__title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.appointment-setting_instruction {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}
.appointment-setting_instruction p {
  font-size: 14px;
  line-height: 17px;
}
.appointment-setting_instruction svg {
  width: 35px !important;
  height: 35px !important;
}
.appointment-setting .table-header {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}
.appointment-setting .table-header .col-day {
  width: 100px;
}
.appointment-setting .table-header .col-shift {
  flex: 1;
  text-align: center;
}
.appointment-setting .table-header .col-break {
  width: 40px;
}
.appointment-setting .table-header .col-disable {
  width: 80px;
  text-align: right;
}
.appointment-setting .days-list .error-text {
  color: red;
  font-size: 14px;
  margin-bottom: 10px;
}
.appointment-setting .days-list .day-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.appointment-setting .days-list .day-row.disabled .day-label,
.appointment-setting .days-list .day-row.disabled input {
  color: #ccc;
}
.appointment-setting .days-list .day-row .day-label {
  width: 100px;
  font-size: 14px;
  font-weight: 500;
}
.appointment-setting .days-list .day-row .time-group {
  flex: 1;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.appointment-setting .days-list .day-row .vertical-divider {
  width: 1px;
  height: 40px;
  background: #eee;
  margin: 0 35px;
  position: relative;
}
.appointment-setting .days-list .day-row .vertical-divider::after {
  content: "Break";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  background: #fff;
  font-size: 14px;
  color: #000000;
}
.appointment-setting .days-list .day-row .toggle-cell {
  width: 80px;
  text-align: center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.appointment-setting .occurrence-frame {
  margin-top: 30px;
  text-align: center;
}
.appointment-setting .occurrence-frame h4 {
  font-size: 14px;
  margin-bottom: 10px;
}
.appointment-setting .occurrence-frame .radio-group {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.appointment-setting .occurrence-frame .radio-group label {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.appointment-setting .settings-footer {
  display: flex;
  justify-content: space-between;
  padding: 0 40px 10px;
  margin-top: 20px;
}
.appointment-setting .settings-footer button {
  height: 40px;
}
.appointment-setting .settings-footer .btn-back {
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.time-picker-component-w {
  border: 2px solid rgba(128, 128, 128, 0.7);
  min-height: 46px;
  margin-top: 5px;
}
.time-picker-component-w .time-picker {
  display: flex;
  align-items: end;
  margin: 10px 0;
}
.time-picker-component-w .time-picker .time-select {
  border: none;
}

.time-input-wrapper {
  position: relative;
  display: flex;
  flex-flow: column;
  row-gap: 5px;
}
.time-input-wrapper label {
  line-height: 28px;
  font-size: 14px;
  text-align: left;
}
.time-input-wrapper label span {
  color: #b24d4d;
}
.time-input-wrapper .time-input-button {
  background: transparent;
  width: 100%;
}
.time-input-wrapper .input-error {
  font-size: 14px;
  color: #b24d4d;
  text-align: left;
  margin-top: 3px;
}

.picker-panel {
  position: absolute;
  z-index: 999;
  margin-top: 4px;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px 4px;
  min-width: var(--button-width);
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid rgba(128, 128, 128, 0.7);
}
.picker-panel .time-panel {
  width: auto;
}
.picker-panel .time-selector {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.picker-panel .time-column {
  display: flex;
  flex-direction: column;
}
.picker-panel .column-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 8px;
}
.picker-panel .scroll-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
}
.picker-panel .scroll-list::-webkit-scrollbar {
  width: 3px;
}
.picker-panel .scroll-list::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 3px;
}
.picker-panel .scroll-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.picker-panel .time-option {
  padding: 8px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: all 0.2s;
  min-width: 40px;
}
.picker-panel .time-option:hover {
  background: rgba(217, 217, 217, 0.3019607843);
  color: #0492c2;
}
.picker-panel .time-option.selected {
  background: #0492c2;
  color: white;
  font-weight: 600;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.appointment-component {
  display: block;
  width: 100%;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.service-component-layout {
  width: 95%;
  margin-left: auto;
}
.service-component-layout #filter-options-container {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 1.5rem;
}
.service-component-layout #filter-options-container button {
  padding: 5px 10px;
  border-radius: 10px;
}
.service-component-layout .lightbulb_message {
  max-width: 550px;
}
.service-component-layout_service-tags-w {
  display: flex;
  justify-content: flex-start;
  color: #0492c2;
  min-width: fit-content;
  max-width: 360px;
  font-weight: 600;
}
.service-component-layout .view-more_text {
  color: #0492c2;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 5px;
  font-size: 18px !important;
  text-align: left !important;
}
.service-component-layout .delete-service-button, .service-component-layout .deactivate-service-button {
  justify-self: flex-end;
  background-color: #e53935;
  border: none;
}
.service-component-layout .delete-service-button:hover, .service-component-layout .deactivate-service-button:hover {
  background-color: #c62828;
}
.service-component-layout .delete-service-modal span, .service-component-layout .deactivate-service-modal span {
  line-height: 26px;
}
.service-component-layout .reactivate-service-button {
  justify-self: flex-end;
  background-color: #43a047;
  border: none;
}
.service-component-layout .reactivate-service-button:hover {
  background-color: #388e3c;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.time-picker-edit {
  padding: 1rem 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
}
.time-picker-edit .time-field-container {
  width: 45%;
}
.time-picker-edit .time-field-container .input-error {
  text-wrap: wrap;
  font-size: 12px;
}
@media screen and (max-width: 414px) {
  .time-picker-edit .time-field-container .input-error {
    font-size: 10px;
  }
}
.time-picker-edit input {
  border: 1px solid black;
  border-radius: 100vh;
}

.service-frequency {
  border: 2px solid #3f3d3d;
  width: 100%;
  border-radius: 10px;
}
.service-frequency p {
  padding: 10px 5px;
  background-color: #0492c2;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
}
.service-frequency p:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.service-frequency .service-content {
  padding: 12px 10px;
}
.service-frequency .days-checkbox {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  padding: 10px 10px;
}
.service-frequency .days-checkbox .checkbox-container {
  display: flex;
  align-items: center !important;
}
.service-frequency input {
  cursor: pointer;
}
.service-frequency .checkbox-group span {
  margin-left: 1rem;
}

.days_times {
  height: 10rem;
  overflow: auto;
  width: 100%;
  padding: 15px 0.5rem;
  flex-direction: column;
  display: flex;
  row-gap: 10px;
}
.days_times .day_time {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 5px;
  column-gap: 15px;
}
.days_times .day_time .day-label {
  margin: auto 0px 15px;
}
.days_times .time-picker-wrapper {
  display: flex;
  align-items: end;
  gap: 10px;
  width: 270px;
}
@media (min-width: 1024px) {
  .days_times .time-picker-wrapper {
    width: 270px;
  }
}
.days_times .time-picker-wrapper .to-text {
  margin: auto 2px 15px;
  font-weight: bold;
  font-size: 14px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.edit-service_ligh-bulb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.edit-service {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
}
.edit-service .edit-service-form {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  padding-bottom: 25px;
}
.edit-service .edit-service-form .form-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  row-gap: 16px;
}
@media screen and (max-width: 1024px) {
  .edit-service .edit-service-form .form-col {
    grid-template-columns: repeat(1, 1fr);
  }
}
.edit-service .edit-service-form .add_service_notify {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  margin-bottom: 10px;
  row-gap: 20px;
}
.edit-service .edit-service-form .add_service_notify input {
  cursor: pointer;
}
.edit-service .edit-service-form .dropdown-content-wrapper {
  width: 100%;
}
.edit-service .edit-service-form .dropdown-content-wrapper label {
  font-weight: bold;
}
.edit-service .edit-service-form .options {
  margin: 16px auto;
}
.edit-service .edit-service-form .button-component button {
  width: 100%;
}
.edit-service .edit-service-form .button-component {
  margin-top: auto;
}
@media screen and (max-width: 840px) {
  .edit-service .edit-service-form {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .edit-service .edit-service-form .button-component button {
    margin-top: 2.4rem;
  }
}

.add_service_right {
  display: flex;
  flex-direction: column;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.table-component-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  row-gap: 30px;
}

.table-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}
.table-wrapper .reusable-table {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table-wrapper .reusable-table .table-head {
  background-color: rgba(128, 128, 128, 0.5);
  position: sticky;
  top: 0;
  z-index: 10;
}
.table-wrapper .reusable-table .table-head .table-header {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: #3f3d3d;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.table-wrapper .reusable-table .table-head .table-header.sortable {
  cursor: pointer;
  user-select: none;
}
.table-wrapper .reusable-table .table-head .table-header.sortable:hover {
  background-color: rgba(128, 128, 128, 0.7);
}
.table-wrapper .reusable-table .table-head .table-header.frozen {
  position: sticky;
  background-color: rgba(128, 128, 128, 0.5);
  z-index: 20;
}
.table-wrapper .reusable-table .table-head .table-header.frozen-left {
  left: 0;
}
.table-wrapper .reusable-table .table-head .table-header.frozen-right {
  right: 0;
  background-color: rgb(174, 170, 170);
  z-index: 30;
}
.table-wrapper .reusable-table .table-head .table-header .header-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.table-wrapper .reusable-table .table-head .table-header .sort-indicator {
  color: #0492c2;
  font-weight: bold;
}
.table-wrapper .reusable-table .table-body tr .table-row.clickable {
  cursor: pointer;
}
.table-wrapper .reusable-table .table-body tr .table-cell {
  padding: 0.75rem 1rem;
  font-size: 14px;
  border-bottom: 1px solid #575a59;
}
.table-wrapper .reusable-table .table-body tr .table-cell div.cell-content {
  display: flex;
  align-items: center;
}
.table-wrapper .reusable-table .table-body tr .table-cell p.cell-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.table-wrapper .reusable-table .table-body tr .table-cell .cell-content {
  min-height: 50px;
}
.table-wrapper .reusable-table .table-body tr .table-cell span,
.table-wrapper .reusable-table .table-body tr .table-cell div,
.table-wrapper .reusable-table .table-body tr .table-cell p {
  font-size: 15px;
}
.table-wrapper .reusable-table .table-body tr .table-cell.frozen {
  position: sticky;
  background-color: #e7e7e7;
  z-index: 10;
}
.table-wrapper .reusable-table .table-body tr .table-cell.frozen-left {
  left: 0;
}
.table-wrapper .reusable-table .table-body tr .table-cell.frozen-right {
  right: 0;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.dropdown-component-container {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  align-items: center;
}
.dropdown-component-container .trigger-button {
  background: transparent;
  width: fit-content;
  cursor: pointer;
}

.dropdown-menu {
  z-index: 999;
  border-radius: 8px;
  background: #ffffff;
  padding: 5px 5px;
  margin-top: 4px;
  min-width: 7rem;
  max-height: 20rem;
  overflow-y: auto;
}
.dropdown-menu .dropdown-item {
  padding: 12px 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-direction: row;
  border-radius: 8px;
}
.dropdown-menu .dropdown-item.danger-menu {
  color: #b24d4d;
}
.dropdown-menu .dropdown-item.danger-menu button {
  color: #b24d4d;
}
.dropdown-menu .dropdown-item.danger-menu:hover {
  background: rgba(178, 77, 77, 0.3);
}
.dropdown-menu .dropdown-item:hover {
  background: rgba(217, 217, 217, 0.3019607843);
}
.dropdown-menu .dropdown-item button,
.dropdown-menu .dropdown-item a {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  width: 100%;
}.page-error-wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  row-gap: 16px;
}
.page-error-wrapper.section {
  min-height: 100px;
}
.page-error-wrapper h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 22px;
}
.page-error-wrapper p {
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  max-width: 600px;
  text-align: center;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.new-table-wrapper {
  overflow: auto;
}
.new-table-wrapper table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}
.new-table-wrapper table thead tr th {
  padding: 12px;
  text-align: left;
  white-space: nowrap;
}
.new-table-wrapper table tbody tr {
  background-color: white;
  transition: box-shadow 0.2s ease-in-out;
}
.new-table-wrapper table tbody tr:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  outline: 2px solid #0492c2;
}
.new-table-wrapper table tbody tr td {
  padding: 12px;
  border-bottom: 1px solid #eee;
}
.new-table-wrapper table tbody tr td option {
  pointer-events: none;
}
.new-table-wrapper table tbody tr td .successful {
  color: #53bd8a;
}
.new-table-wrapper table tbody tr td .failed {
  color: #b24d4d;
}
.new-table-wrapper table tbody .table-dropdown-row {
  background-color: transparent;
}
.new-table-wrapper table tbody .table-dropdown-row:hover {
  outline: none;
}
.new-table-wrapper table tbody .table-dropdown-row td {
  text-align: center;
  vertical-align: middle;
}
.new-table-wrapper table tbody .clickable-row {
  cursor: pointer;
}
.new-table-wrapper table tbody .table-actions-dropdown-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
}
.new-table-wrapper table tbody .table-actions-dropdown {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.new-table-wrapper table tbody .table-actions-dropdown span {
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.new-table-wrapper table tbody .action-dots {
  font-size: 30px;
  cursor: pointer;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.audit-table-dropdown-wrapper {
  display: flex;
  flex-flow: column;
  width: 100%;
}
.audit-table-dropdown-wrapper_metadata {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto;
  width: 55%;
  border-radius: 6px;
  border: 1px solid #000000;
  padding: 2rem 0 2rem 4rem;
}
@media (max-width: 960px) {
  .audit-table-dropdown-wrapper_metadata {
    margin: 0;
    width: 75vw;
    padding: 4rem 1rem;
  }
}
.audit-table-dropdown-wrapper_log-changes-w {
  display: inline-flex;
  justify-content: space-between;
  margin-top: 20px;
  width: 100%;
}
.audit-table-dropdown-wrapper_log-changes-w_new-log, .audit-table-dropdown-wrapper_log-changes-w_deleted-log {
  width: 98%;
}
.audit-table-dropdown-wrapper_log-changes-w_old-log, .audit-table-dropdown-wrapper_log-changes-w_updated-log {
  width: 49%;
}.audit-log-page-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.sales-component-layout {
  overflow-x: scroll;
}
.sales-component-layout .dropdown-component-wrapper .dropdown-container {
  min-width: 120px;
}
@media screen and (max-width: 960px) {
  .sales-component-layout .dropdown-component-wrapper .dropdown-container {
    min-width: 117px;
    margin-right: 10px;
  }
}
.sales-component-layout .service-table {
  border: 1px solid black;
  border-radius: 8px;
  width: 100%;
  padding: 10px;
}
.sales-component-layout .service-table tr th {
  width: 50px;
  white-space: nowrap;
  padding: 0 10px;
  text-align: center;
}
.sales-component-layout .service-table tr td {
  padding: 10px 5px;
  text-align: center;
}
.sales-component-layout .service-table tr td p {
  line-height: 22px;
}
.sales-component-layout .service-table tr.border_bottom td {
  border-bottom: 1px solid #3f3d3d;
}
.sales-component-layout .service-table-wrapper {
  margin: 10px 0 20px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.sales-component-layout .service-table-wrapper h4 {
  font-size: medium;
  margin-bottom: 15px;
}
.sales-component-layout .sales-card-wrapper {
  display: flex;
  overflow-x: auto;
  width: 100%;
  gap: 40px;
}
@media screen and (min-width: 960px) {
  .sales-component-layout {
    overflow-x: unset;
  }
}
.sales-component-layout_add-sale-inv-w .button-component button {
  margin: 20px auto auto;
}
.sales-component-layout_add-sale-inv-w .search-patient-component-wrapper,
.sales-component-layout_add-sale-inv-w .search-guest-patient-component-wrapper {
  margin: auto;
  max-width: 450px;
}
.sales-component-layout .listing-tests-display {
  display: block;
  border: 1px solid red;
  margin-bottom: 4px;
  padding: 4px 8px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.overview_container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
  width: 42%;
  aspect-ratio: 101/124;
  background: #ffffff;
  border: 1px solid #000000;
  box-shadow: 6px 4px 8px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 1rem 2.5rem;
}
.overview_container .button-component {
  width: fit-content;
  margin-left: auto;
}
@media (max-width: 960px) {
  .overview_container {
    width: 90%;
  }
}

.overview_header {
  margin: 0 auto;
  font-size: 16px;
  line-height: 8px;
}

.sales_overview_close_icon {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  cursor: pointer;
}

.overview_item {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  margin: 5px 0;
  padding: 3px 0;
  border-bottom: 1px solid;
}

.overview_checkbox {
  justify-content: flex-start;
  gap: 1rem;
}

.overview_item_label {
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
}

.overview_item_value {
  width: 30%;
  font-size: 14px;
  line-height: 21px;
}

.confirm_close {
  font-size: 11.5px;
  line-height: 18px;
  white-space: nowrap;
}
@media (max-width: 960px) {
  .confirm_close {
    font-size: 11px;
  }
}

#close_counter_btn {
  padding: 0.7rem 2.9rem;
  font-size: 12.4606px;
  line-height: 14px;
}

.sales_overview_unchecked_icon {
  width: 18.68px;
  height: 18.68px;
  border: 1px solid #000;
  border-radius: 2px;
}

.sales_overview_checked_icon {
  width: 18.68px;
  height: 18.68px;
  border-radius: 2px;
}.confirmation_popup_wrapper {
  aspect-ratio: 404/393;
  justify-content: space-around;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.confirmation_popup_warning {
  font-weight: 400;
  font-size: 13px;
  line-height: 22px;
  color: #f11348;
  margin: 0 auto;
}

#confirmation_popup_yes_btn {
  background: #e4e4e4;
  border: 0.77879px solid #b5b5b5;
  border-radius: 6.23032px;
}
#confirmation_popup_yes_btn b {
  color: #505050;
}

.confirmation_popup_btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.confirmation_popup_btns .button-component,
.confirmation_popup_btns button {
  margin: 0;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.invoice-receipt-container {
  background: #f8f8f8;
  padding: 12px 10px;
  border-radius: 8px;
  text-align: center;
  max-width: 650px;
  margin: auto;
}
.invoice-receipt-container .invoice-receipt-invoice-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 5px;
  border: 1px solid rgba(128, 128, 128, 0.7);
}
.invoice-receipt-container .invoice-receipt-invoice-header_hospital_logo {
  width: 25px;
  height: 45px;
  aspect-ratio: 1/1;
  padding-right: 2px;
}
@media screen and (min-width: 960px) {
  .invoice-receipt-container .invoice-receipt-invoice-header_hospital_logo {
    width: 65px;
    height: 65px;
  }
}
@media print {
  .invoice-receipt-container .invoice-receipt-invoice-header_hospital_logo {
    width: 65px;
    height: 65px;
  }
}
.invoice-receipt-container .invoice-receipt-invoice-header .width-5-percent {
  width: 5%;
}
.invoice-receipt-container .invoice-receipt-invoice-header_width-10-percent {
  width: 10%;
  min-height: 70px;
}
.invoice-receipt-container .invoice-receipt-invoice-header_width-90-percent {
  width: 85%;
  min-height: 70px;
  margin-left: 4px;
}
.invoice-receipt-container .invoice-receipt-invoice-header_width-90-percent_hospital-name-w {
  font-weight: 700;
  font-size: 16px;
}
@media screen and (min-width: 960px) {
  .invoice-receipt-container .invoice-receipt-invoice-header_width-90-percent_hospital-name-w {
    font-size: 18px;
  }
}
.invoice-receipt-container .invoice-receipt-invoice-header_width-90-percent_hospital-name-w {
  /*@media print {
    font-weight: 700;
    font-size: 18px;
  }*/
}
.invoice-receipt-container .invoice-receipt-invoice-header_width-90-percent_hospital-address-contact-w {
  font-size: 12px;
  line-height: 16px;
}
@media screen and (min-width: 960px) {
  .invoice-receipt-container .invoice-receipt-invoice-header_width-90-percent_hospital-address-contact-w {
    font-size: 14px;
    line-height: 22px;
  }
}
.invoice-receipt-container .logo {
  font-weight: bold;
  padding: 10px;
}
.invoice-receipt-container .company-details p {
  margin: 2px 0;
}
.invoice-receipt-container .amount-received {
  background: #0492C2;
  color: #fff;
  padding: 20px;
  border-radius: 4px;
  margin: 16px 0;
}
.invoice-receipt-container .amount-received .amount {
  font-size: 24px;
  font-weight: bold;
  margin-top: 10px;
}
.invoice-receipt-container .invoice-details {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.invoice-receipt-container .invoice-details td {
  border: 1px solid #ddd;
  padding: 8px;
}
.invoice-receipt-container .summary-section {
  margin-bottom: 20px;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
.invoice-receipt-container .summary-section_wrapper {
  display: inline-flex;
  justify-content: space-evenly;
  width: 100%;
}
@media screen and (min-width: 960px) {
  .invoice-receipt-container .summary-section_wrapper {
    width: 50%;
  }
}
.invoice-receipt-container .summary-section_wrapper p {
  text-align: start;
  padding: 5px 0;
}
.invoice-receipt-container .summary-section_wrapper_left p {
  font-weight: bold;
}
.invoice-receipt-container .invoice-no-item-thank-you-w {
  margin: 20px 0;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

/* General Print Styles */
@media print {
  body {
    margin: 0;
    padding: 0;
    width: 100vw;
    display: flex;
    justify-content: center;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body::-webkit-scrollbar {
    display: none;
  }
  body .header-component-container,
  body .side-bar-layout-wrapper,
  body .head-liner-component,
  body .patient-current-payment-state,
  body .button-component,
  body .modal-header-2,
  body button,
  body button * {
    display: none;
  }
  body .dashboard_footer,
  body .footer-component-container {
    display: none;
  }
  body .dashboard_footer p,
  body .dashboard_footer a,
  body .footer-component-container p,
  body .footer-component-container a {
    display: none;
  }
  .print-content {
    display: flex;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .print-content::-webkit-scrollbar {
    display: none;
  }
  .print-content .listing-component {
    min-width: auto;
    max-width: 100%;
  }
}
.printing_module_wrapper .print-content {
  display: flex;
  flex-direction: column;
}

/* Styles for A4 Paper */
@page {
  .A4 {
    size: A4;
    margin: 10mm;
  }
}
.A4 .print-content {
  height: auto;
  display: flex;
  justify-content: center;
}
@media (max-width: 960px) {
  .A4 .print-content {
    width: 100%;
  }
  .A4 .print-content .billing_receipt_logo_wrapper {
    font-size: 12px;
  }
}

/* Styles for 58mm POS Paper */
@page {
  .POS_58 {
    size: 58mm 0;
    margin: 0;
  }
}
.POS_58 .print-content {
  width: 58mm;
  height: auto;
  font-size: 10px;
  display: flex;
  justify-content: center;
}
@media (max-width: 960px) {
  .POS_58 .print-content {
    width: 100%;
  }
}

/* Styles for 80mm POS Paper */
@page {
  .POS_80 {
    size: 80mm 0;
    margin: 0;
  }
}
.POS_80 .print-content {
  width: 80mm;
  height: auto;
  font-size: 11px;
  display: flex;
  justify-content: center;
}
@media (max-width: 960px) {
  .POS_80 .print-content {
    width: 100%;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.print-button-component-w {
  display: flex;
  justify-content: flex-end;
}
.print-button-component-w button {
  background: #0492c2;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.print-button-component-w button:disabled {
  cursor: unset;
  background-color: #e9e4e4;
}
.print-button-component-w button:disabled:hover {
  cursor: unset;
}
.print-button-component-w button:hover {
  cursor: pointer;
}
.print-button-component-w button .print-icon {
  font-size: 18px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.invoice-preview-component-w {
  background: white;
  padding: 10px 20px;
  border-radius: 5px;
  width: 100%;
  margin: auto auto 20px;
  max-width: 600px;
}
.invoice-preview-component-w .logo {
  font-weight: bold;
  border: 1px dashed #000;
  padding: 10px;
}
.invoice-preview-component-w_invoice-box {
  padding: 5px 10px;
}
.invoice-preview-component-w_invoice-box_patient-invoice-w {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  padding: 6px;
  line-height: 26px;
}
.invoice-preview-component-w_invoice-box .invoice-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.invoice-preview-component-w_invoice-box table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}
.invoice-preview-component-w_invoice-box table thead {
  background-color: #0492C2;
  color: #fff;
}
.invoice-preview-component-w_invoice-box table th,
.invoice-preview-component-w_invoice-box table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.invoice-preview-component-w_invoice-box .invoice-receipt-default-total-w {
  display: inline-flex;
  margin: 20px auto;
  width: 100%;
  text-align: end;
  line-height: 22px;
}
.invoice-preview-component-w_invoice-box .invoice-receipt-default-total-w_left {
  width: 50%;
}
.invoice-preview-component-w_invoice-box .invoice-receipt-default-total-w_right {
  width: 50%;
}
@media screen and (min-width: 960px) {
  .invoice-preview-component-w_invoice-box .invoice-receipt-default-total-w_right {
    padding-right: 15px;
  }
}
.invoice-preview-component-w .invoice-receipt-default-thank-you {
  margin: 30px auto;
  text-align: center;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.invoice-receipt-header-w .invoice-receipt-header {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(128, 128, 128, 0.7);
}
.invoice-receipt-header-w .invoice-receipt-header_hospital_logo {
  width: 70px;
  height: 70px;
  aspect-ratio: 1/1;
}
.invoice-receipt-header-w .invoice-receipt-header .width-5-percent {
  width: 5%;
}
.invoice-receipt-header-w .invoice-receipt-header_width-15-percent {
  width: 10%;
}
.invoice-receipt-header-w .invoice-receipt-header_width-85-percent {
  width: 85%;
  text-align: center;
}
.invoice-receipt-header-w .invoice-receipt-header_width-85-percent_hospital-name-w {
  font-weight: 700;
  font-size: 18px;
}
@media screen and (min-width: 960px) {
  .invoice-receipt-header-w .invoice-receipt-header_width-85-percent_hospital-name-w {
    font-size: 20px;
    line-height: 28px;
  }
}
.invoice-receipt-header-w .invoice-receipt-header_width-85-percent_hospital-name-w {
  /*@media print {
    font-weight: 700;
    font-size: 25px;
    line-height: 32px;
  }*/
}
.invoice-receipt-header-w .invoice-receipt-header_width-85-percent_hospital-address-contact-w {
  font-size: 12px;
  line-height: 16px;
}
@media screen and (min-width: 960px) {
  .invoice-receipt-header-w .invoice-receipt-header_width-85-percent_hospital-address-contact-w {
    font-size: 14px;
    line-height: 22px;
  }
}.salesAnalyticsWrapper {
  margin-top: 40px;
}
.salesAnalyticsWrapper_total-bal-w {
  margin-bottom: 5px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.tabs-container {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid;
}
.tabs-container .tabs {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: end;
}
.tabs-container .tab-button {
  background: none;
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s;
  border-radius: 0px;
  margin-bottom: -1px;
}
.tabs-container .active {
  border-color: #0492c2;
  color: #0492c2;
  padding-bottom: 18px;
}
.tabs-container .tab-button.active {
  font-weight: bold;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.custom-card-wrapper .card {
  background-color: #fff;
  width: 100%;
  min-width: 300px;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  animation: show_card 0.5s ease-in-out;
  padding: 2rem;
  margin: 50px 0px;
}
@media screen and (min-width: 500px) {
  .custom-card-wrapper .card {
    min-width: 100%;
  }
}
@keyframes show_card {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}.date-range-picker {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.date-range-picker .text-container .title {
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0px;
  color: #05004E;
  margin-bottom: 10px;
}
.date-range-picker .text-container .subtitle {
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  letter-spacing: 0px;
  color: #737791;
}
.date-range-picker .dateRangeWrapper {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}.info-card-wrapper {
  min-width: 250px;
  min-height: 250px;
  padding: 10px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 0;
}
.info-card-wrapper .info-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.info-card-wrapper .icon-container {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.info-card-wrapper .title {
  font-weight: 400;
  font-size: 14px;
  line-height: 30px;
  letter-spacing: 0;
  color: #737791;
}
.info-card-wrapper .info-details {
  font-size: 14px;
}
.info-card-wrapper .total {
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: #425166;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.info-card-wrapper .sub-amounts div {
  margin: 15px 0;
}
.info-card-wrapper .sub-amounts div p {
  font-weight: 500;
  font-size: 16px;
  color: #425166;
}
.info-card-wrapper strong {
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: 0;
  color: #151d48;
}.bar-chart-container {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}.line-chart-container {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.search-guest-patient-component-wrapper {
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  margin: auto;
}
.search-guest-patient-component-wrapper .search-guest-patient-input-result-w {
  margin: 6px 0;
}
.search-guest-patient-component-wrapper .search-guest-patient-input-result-w button {
  background: white;
  font-style: inherit;
  font-size: inherit;
  min-width: 350px;
  max-width: inherit;
  text-align: start;
  padding: 6px;
  border-bottom: 2px solid rgba(128, 128, 128, 0.7);
}
.search-guest-patient-component-wrapper .search-guest-patient-input-result-w button:hover {
  cursor: pointer;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.billing_page_wrapper .listing_wrapper {
  position: unset;
  top: unset;
}
.billing_page_wrapper .billing_page_top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
}
@media screen and (min-width: 960px) {
  .billing_page_wrapper .billing_page_top {
    flex-direction: row;
  }
}
.billing_page_wrapper .billing_page_top_texts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  white-space: wrap;
}
.billing_page_wrapper .billing_page_top_texts span {
  font-size: smaller;
  line-height: 18px;
}
@media screen and (min-width: 960px) {
  .billing_page_wrapper .billing_page_top_texts span {
    font-size: 16px;
    line-height: 22px;
  }
}
.billing_page_wrapper *::-webkit-scrollbar {
  display: none;
}
@media screen and (min-width: 960px) {
  .billing_page_wrapper {
    width: 95%;
    padding: 0;
    position: relative;
    top: 0;
    height: auto;
    margin-left: auto;
  }
}
@media screen and (max-width: 960px) {
  .billing_page_wrapper .listing-header {
    min-width: 1100px;
  }
}

.billing_page_title {
  font-size: 1.7rem;
  line-height: 20px;
}

.billing_stat_cards {
  display: flex;
  width: 100%;
  justify-content: space-between;
  border-bottom: 1px solid #000000;
  padding-bottom: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}
@media screen and (min-width: 960px) {
  .billing_stat_cards {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    width: 100%;
  }
}

.billing_stat_card {
  display: flex;
  width: 100%;
  height: auto;
  aspect-ratio: 218/120;
  padding: 0.5rem;
  gap: 1rem;
  color: #fff;
  overflow: auto;
}
@media screen and (min-width: 650px) {
  .billing_stat_card {
    width: 24%;
  }
}
@media screen and (min-width: 650px) and (max-width: 960px) {
  .billing_stat_card {
    width: 30%;
  }
}

.total_revenue_card {
  background-color: #0492c2;
}

.atrizult_bill_card_default {
  background-color: #662635;
}

.atrizult_bill_card_grace {
  background: linear-gradient(0deg, #000000, #000000), linear-gradient(270deg, #cc4c6b 20.17%, #662635 100%);
}

.atrizult_bill_card_inprogress {
  background: linear-gradient(0deg, #86409e, #86409e), linear-gradient(270deg, #cc4c6b 20.17%, #662635 100%);
}

.atrizult_bill_card_suspended {
  background: linear-gradient(270deg, #cc4c6b 20.17%, #662635 100%);
}

.atrizult_bill_card_paid {
  background: #47b892;
}

.atrizult_bill_card_current {
  background-color: rgba(226, 160, 48, 0.71);
}

.billing_blue_bar {
  width: 100%;
  min-height: 2.5rem;
  background: #0492c2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.billing_blue_bar p {
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.billing_in_progress {
  color: #86409e;
}

.billing_processing {
  color: #e0c746;
}

.billing_paid {
  color: #47b892;
}

.first_dropdown {
  width: 100%;
}
.second_drop_down label {
  display: inline-block;
  background: #ffa000;
  border: 1px solid #3d93a6;
  box-shadow: 0 4px 4px rgba(82, 122, 152, 0.25);
  font-weight: 500;
  color: #ffffff;
  padding: 0.2rem;
  width: 100%;
}

.billing_drop_downs {
  width: 100%;
}
.billing_drop_downs .options-wrapper {
  width: 100%;
  z-index: 100;
}
.billing_drop_downs option {
  cursor: pointer;
}
@media (min-width: 960px) {
  .billing_drop_downs {
    width: 23%;
  }
}

.billing_card_content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#billing_make_payment_btn {
  max-height: fit-content;
  min-height: auto;
  padding: 0.2rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.billing_card_title {
  font-weight: 600;
  font-size: 1rem;
}

.billing_total_amount {
  font-weight: 500;
  font-size: 27.9211px;
  display: flex;
  align-items: center;
}

.billing_small_texts {
  font-weight: 500;
  font-size: 0.875rem;
}

.billing_error_notification {
  border: solid black;
  position: absolute;
  top: 20%;
  right: 0;
  z-index: 1000;
}

.billing_rows_wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 20rem;
  overflow: auto visible;
}
.billing_rows_wrapper .listing-component {
  min-width: 1100px;
}
@media screen and (min-width: 960px) {
  .billing_rows_wrapper .listing-component {
    min-width: 100%;
  }
}
.billing_rows_wrapper .listing-actions-wrapper button {
  width: 100%;
}
@media screen and (min-width: 960px) {
  .billing_rows_wrapper {
    width: 100%;
    min-height: auto;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.billing-receipt-container-w .modal-2 {
  max-width: 600px;
  height: 600px;
}
@media screen and (min-width: 960px) {
  .billing-receipt-container-w .modal-2 {
    height: 720px;
  }
}
.billing-receipt-container-w_atrizult-and-client-logos-w {
  display: inline-flex;
  width: 100%;
}
.billing-receipt-container-w_atrizult-and-client-logos-w p {
  line-height: 25px;
}
.billing-receipt-container-w_atrizult_detail-w {
  width: 50%;
}
.billing-receipt-container-w_client_detail-w {
  text-align: left;
  width: 50%;
}
.billing-receipt-container-w_client_detail-w img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.billing-receipt-container-w_client_detail-w .client-logo-name-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
}
.billing-receipt-container-w_client_detail-w .client-logo-name-wrapper p {
  font-size: 18px;
  font-weight: bold;
  padding-left: 10px;
}
.billing-receipt-container-w .billing_blue_bar {
  margin: 20px 0;
  font-weight: bold;
  font-size: 18px;
  min-height: 2.5rem;
}
.billing-receipt-container-w #billing_download_btn {
  margin: 20px 0 0 auto;
}
.billing-receipt-container-w .billing_receipt_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  margin: 10px auto;
  width: 100%;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.billing_paymentupload_bg {
  backdrop-filter: blur(10px);
  width: 85%;
  position: fixed;
  top: 4.5rem;
  right: 0;
  height: calc(100vh - 4.5rem);
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  padding: 2rem 0;
}
@media (max-width: 960px) {
  .billing_paymentupload_bg {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
  }
  .billing_paymentupload_bg *,
  .billing_paymentupload_bg button {
    font-size: small;
  }
}
@media (max-width: 650px) {
  .billing_paymentupload_bg *,
  .billing_paymentupload_bg button {
    font-size: smaller;
  }
}

.billing_paymentupload_content {
  width: 58%;
  height: auto;
  aspect-ratio: 743/682;
  background: #ffffff;
  border: 1px solid #000000;
  box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
@media (max-width: 960px) {
  .billing_paymentupload_content {
    width: 95%;
  }
}

.billing_paymentupload_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid #000000;
  width: 100%;
  padding: 1rem 2rem;
  position: relative;
}

.billing_amount_date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  width: 100%;
}
.billing_amount_date label {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.billing_amount_date input {
  border: 1px solid #000000;
  border-radius: 0.3125rem;
  padding: 0.5rem 1rem;
}
.billing_amount_date .upload_payment {
  display: flex;
  align-items: center;
  justify-content: center;
}

.billing_upload_section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 45.4%;
}
.billing_upload_section span {
  text-wrap: wrap;
  text-align: center;
  max-width: 100%;
}
.billing_upload_section label {
  width: 100%;
  aspect-ratio: 337/239;
  background: linear-gradient(180deg, rgba(118, 144, 183, 0) 5.56%, #d3edef 100%);
  border-radius: 0.3125rem;
  border: 3px dashed rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.billing_upload_section label input {
  display: none;
}
.billing_upload_section button {
  max-height: fit-content;
  min-height: auto;
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#billing_paymentupload_amountpaid {
  background: #b5b5b5;
  opacity: 0.5;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
}

.upload_close_icon {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: fit-content;
}

.remove_file_icon {
  top: 1rem;
  right: 1rem;
}

.billing_selected_image {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.billing_uploadedfile_wrapper {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: flex-end;
  background: transparent no-repeat center;
  background-size: cover;
  width: 100%;
  height: 100%;
  gap: 1rem;
  padding: 2rem 0.5rem;
}
.billing_uploadedfile_wrapper svg {
  font-size: 3rem;
}
.billing_uploadedfile_wrapper span {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0.5rem 1rem;
  border-radius: 0.2rem;
}

.billing_pdf_icon {
  color: #f40f02;
}

.billing_word_icon {
  color: #2b579a;
}

.billing_upload_success_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: auto;
  border: 0.745178px solid #000000;
  border-radius: 0.5rem;
  position: relative;
  width: 77%;
  aspect-ratio: 11/7;
}
.billing_upload_success_wrapper > span:nth-child(2) {
  font-weight: 500;
  font-size: 11.9228px;
  line-height: 18px;
  color: #000000;
}
.billing_upload_success_wrapper > span:nth-child(3) {
  font-weight: 500;
  font-size: 17.8843px;
  line-height: 27px;
  color: #53bd8a;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.manage-account-component {
  overflow-x: scroll;
}
@media screen and (min-width: 960px) {
  .manage-account-component {
    overflow: unset;
  }
}
.manage-account-component .disable-enable-delete-user-modal-wrapper .modal-2 {
  max-height: 200px;
}

.manage-user-btn-wrapper .delete-user-button {
  background-color: #e53935;
  border: none;
}
.manage-user-btn-wrapper .delete-user-button:hover {
  background-color: #c62828;
}
.manage-user-btn-wrapper {
  margin-top: 30px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.add-user-component {
  display: block;
}
.add-user-component .checkbox-component-layout {
  margin-bottom: 10px;
}
.add-user-component .add-user-component-input-wrapper .form-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  row-gap: 16px;
}
@media screen and (max-width: 1024px) {
  .add-user-component .add-user-component-input-wrapper .form-col {
    grid-template-columns: repeat(1, 1fr);
  }
}
.add-user-component .add-user-component-input-wrapper .arrange-in-twos {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 960px) {
  .add-user-component .add-user-component-input-wrapper .arrange-in-twos {
    flex-flow: row;
    gap: 50px;
  }
  .add-user-component .add-user-component-input-wrapper .arrange-in-twos .date-field-container .datepicker-calender {
    left: -20px;
  }
}
.add-user-component .add-user-component-input-wrapper .arrange-in-twos .dropdown-component-wrapper .dropdown-container {
  min-width: 328px;
}
.add-user-component .add-user-component-checkbox-wrapper {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
@media screen and (min-width: 650px) {
  .add-user-component .add-user-component-checkbox-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

.add-user-component-label-checkbox {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.add-user-component-label-checkbox .add-user-label {
  margin: 20px 0;
}
.add-user-component-label-checkbox_changeSuperAdmin {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}

.add-user-component-btn-wrapper {
  text-align: right;
  margin-top: 30px;
}
.add-user-component-btn-wrapper p {
  text-align: left;
}
.add-user-component-btn-wrapper .button-component {
  display: flex;
  justify-content: flex-end;
}
.add-user-component-btn-wrapper .button-component button {
  min-width: 100%;
  margin-top: 30px;
}
@media screen and (min-width: 960px) {
  .add-user-component-btn-wrapper .button-component button {
    min-width: 250px;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.hospital-info-component-w {
  display: flex;
  justify-content: center;
  flex-flow: column;
  max-width: 1200px;
  margin: auto;
  position: relative;
  padding: 20px 0px 50px 0px;
}
.hospital-info-component-w_name {
  font-size: 35px;
  font-weight: bold;
  line-height: normal;
}
@media screen and (max-width: 769px) {
  .hospital-info-component-w_name {
    font-size: 25px;
    margin: 0 20px;
  }
}
@media screen and (max-width: 500px) {
  .hospital-info-component-w_name {
    font-size: 18px;
    word-break: keep-all;
  }
}
@media screen and (max-width: 426px) {
  .hospital-info-component-w_name {
    font-size: 16px;
    margin: 5px 0 15px 70px;
    word-break: break-word;
    max-width: 250px;
  }
}
.hospital-info-component-w_logo-image {
  display: flex;
  justify-content: center;
  margin: 30px auto;
  width: 100%;
}
.hospital-info-component-w_logo-image img {
  width: 150px;
  aspect-ratio: 1/1;
  border-radius: 10px;
  object-fit: cover;
}
@media screen and (max-width: 565px) {
  .hospital-info-component-w .button-component button {
    min-height: 35px;
    min-width: 150px;
    padding: 0;
  }
}
.hospital-info-component-w_deactivate-button {
  background-color: #cf3333 !important;
  float: right;
}
@media screen and (max-width: 769px) {
  .hospital-info-component-w_deactivate-button {
    position: relative;
    left: -20px;
  }
}
@media screen and (max-width: 565px) {
  .hospital-info-component-w_deactivate-button {
    position: relative;
    top: -40px;
    left: -60px;
    margin: 5px 0;
  }
}
@media screen and (max-width: 500px) {
  .hospital-info-component-w_deactivate-button {
    top: -10px;
  }
}
.hospital-info-component-w .hospital-info-w {
  display: flex;
  max-width: 1000px;
  justify-content: space-between;
  flex-wrap: wrap;
}
@media screen and (max-width: 500px) {
  .hospital-info-component-w .hospital-info-w {
    flex-flow: column;
    width: 100%;
    margin-left: 20px;
  }
}
.hospital-info-component-w .hospital-info-w_left, .hospital-info-component-w .hospital-info-w_right {
  width: 44%;
}
@media screen and (max-width: 960px) {
  .hospital-info-component-w .hospital-info-w_left, .hospital-info-component-w .hospital-info-w_right {
    width: 90%;
  }
}
@media screen and (max-width: 426px) {
  .hospital-info-component-w .hospital-info-w_left, .hospital-info-component-w .hospital-info-w_right {
    width: 70%;
    margin: auto;
  }
  .hospital-info-component-w .hospital-info-w_left .label-value-wrapper p,
  .hospital-info-component-w .hospital-info-w_left span, .hospital-info-component-w .hospital-info-w_right .label-value-wrapper p,
  .hospital-info-component-w .hospital-info-w_right span {
    font-size: 12px;
  }
}
.hospital-info-component-w #right-info p {
  font-weight: 600;
}
.hospital-info-component-w .hospital-info-btn-w {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}
.hospital-info-component-w .hospital-info-btn-w .textarea-component-w {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
@media screen and (max-width: 960px) {
  .hospital-info-component-w .hospital-info-btn-w .textarea-component-w {
    flex-direction: column;
  }
}
@media screen and (max-width: 750px) {
  .hospital-info-component-w .hospital-info-btn-w .textarea-component-w {
    width: unset;
  }
}
@media screen and (max-width: 500px) {
  .hospital-info-component-w .hospital-info-btn-w .textarea-component-w {
    justify-content: center;
  }
  .hospital-info-component-w .hospital-info-btn-w .textarea-component-w textarea {
    min-width: 250px;
    font-size: 14px;
  }
  .hospital-info-component-w .hospital-info-btn-w .textarea-component-w label {
    max-width: 300px;
  }
}
@media screen and (max-width: 426px) {
  .hospital-info-component-w .hospital-info-btn-w .textarea-component-w label {
    font-size: 14px;
  }
}
@media screen and (max-width: 376px) {
  .hospital-info-component-w .hospital-info-btn-w .textarea-component-w label {
    font-size: 12px;
  }
}
.hospital-info-component-w .hospital-info-btn-w .button-component-w {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 20px;
}
@media screen and (max-width: 769px) {
  .hospital-info-component-w .hospital-info-btn-w .button-component-w {
    justify-content: center;
  }
}
@media screen and (max-width: 769px) {
  .hospital-info-component-w .hospital-info-btn-w {
    align-items: center;
  }
}
.hospital-info-component-w .hospital-info-deactivate-modal .modal-2 {
  max-height: 250px;
}
.hospital-info-component-w .hospital-info-deactivate-modal .modal-2 .modal-content-2 {
  text-align: center;
  margin: 10px auto;
}
@media screen and (max-width: 500px) {
  .hospital-info-component-w {
    overflow-x: hidden;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.edit-hospital-component-w .updated-successfully-wrapper .modal-2 .modal-header-2 h2 {
  font-size: 1rem;
}
@media screen and (max-width: 414px) {
  .edit-hospital-component-w .updated-successfully-wrapper .modal-2 .modal-header-2 h2 {
    font-size: 0.7rem;
  }
}
.edit-hospital-component-w .updated-successfully-wrapper .modal-2 .msg-content {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  text-wrap: wrap;
}
.edit-hospital-component-w .dropdown-content-wrapper {
  width: 100%;
}
.edit-hospital-component-w .dropdown-content-wrapper .options-wrapper {
  z-index: 1;
}
.edit-hospital-component-w .form-logo {
  display: grid;
  place-items: center;
  margin-bottom: 50px;
}
.edit-hospital-component-w .edit-logo-wrapper {
  width: 150px;
  height: 150px;
}
.edit-hospital-component-w .edit-logo-wrapper .edit-logo {
  height: 150px;
  width: 150px;
  border-radius: 5px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}
.edit-hospital-component-w .edit-logo-wrapper .logo-file {
  margin-top: 10px;
  box-sizing: border-box;
  background-color: #0492c2;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  cursor: pointer;
}
.edit-hospital-component-w .edit-logo-wrapper .logo-file .file-upload {
  z-index: 0;
  opacity: 1;
  display: none;
}
.edit-hospital-component-w .edit-logo-wrapper .logo-file::-webkit-file-upload-button {
  width: 100%;
}
.edit-hospital-component-w .edit-form-w {
  display: flex;
  flex-flow: column;
}
.edit-hospital-component-w .edit-form-w .edit-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: center;
}
.edit-hospital-component-w .edit-form-w .edit-form .input-field-container,
.edit-hospital-component-w .edit-form-w .edit-form .dropdown-component-container {
  max-width: 300px;
  margin: 5px auto;
}
@media screen and (max-width: 960px) {
  .edit-hospital-component-w .edit-form-w .edit-form {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.edit-hospital-component-w .edit-form-w .edit-form-textarea-btn-w {
  margin-top: 5px;
}
.edit-hospital-component-w .edit-form-w .edit-form-textarea-btn-w .button-component {
  display: flex;
  justify-content: flex-end;
}
.edit-hospital-component-w__radio-btn-w .radio-button-container {
  margin: 20px 0;
}

.cropper-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.cropper-overlay .cropper-container {
  position: relative;
  width: 90%;
  max-width: 500px;
  height: 400px;
  background-color: white;
}
.cropper-overlay .cropper-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.cropper-overlay .cropper-controls button {
  border: 2px solid #0492c2;
  border-radius: 5px;
  padding: 5px;
  text-wrap: nowrap;
  font-size: 16px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.deactivate-hospital-w p {
  line-height: normal;
}
.deactivate-hospital-w span {
  display: block;
}
.deactivate-hospital-w_deactivate-button {
  justify-self: center;
  margin-top: 10px;
  background-color: #cf3333 !important;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.user-info-component-w {
  max-width: 960px;
  margin: 20px auto;
}
.user-info-component-w .user-profile-headline p {
  font-size: 20px;
  font-weight: bold;
}
.user-info-component-w_profile-pic img {
  display: flex;
  margin: 20px auto;
  width: 100px;
  height: 100px;
  object-fit: cover;
}
.user-info-component-w_user-edit-btn {
  display: flex;
  justify-content: flex-end;
  margin: 1rem 0;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.settings-header {
  width: 100%;
  min-height: 2.5rem;
  background: #0492c2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}.invoice-settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.invoice-settings .header {
  display: flex;
  justify-content: end;
  width: 80%;
  margin-bottom: 20px;
  gap: 20px;
}
.invoice-settings .header .btn {
  padding: 10px 20px;
  border: none;
  background: #ccc;
  cursor: pointer;
  border-radius: 5px;
}
.invoice-settings .header .btn.active {
  color: white;
  background-color: #0492C2;
}
.invoice-settings .invoice-settings-header-wrapper {
  background: #0492C2;
  width: 100%;
  text-align: center;
  padding: 10px;
  color: #FFFFFF;
  margin-bottom: 20px;
}
.invoice-settings .invoice-settings-header-wrapper .title {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}
.invoice-settings .description {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin: 20px 0;
}
.invoice-settings .description .icon {
  margin-right: 8px;
  color: #ffcc00;
}
.invoice-settings .radio-group {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
.invoice-settings .radio-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  cursor: pointer;
}
.invoice-settings .radio-group .button-component button {
  padding: 9px;
  min-width: 46px;
  max-width: 120px;
  font-size: 6px;
  min-height: 30px;
}
.invoice-settings .radio-group .button-component button b {
  font-size: 12px;
}
.invoice-settings .save-button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
.invoice-settings .button-wrapper {
  width: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
}
.invoice-settings .invoice-type-state-w .modal-2 {
  min-width: 400px;
  max-width: 400px;
  width: auto;
}

/* Hide unwanted content in the invoice - global setting for all invoice */
@media print {
  /* Hide these elements during printing */
  header,
  footer,
  .header,
  .header-wrapper,
  .description,
  .radio-group,
  .save-button,
  .print-button-component-w,
  .button-wrapper {
    display: none !important;
  }
}.invoice-toggle-settings {
  padding: 40px 0px;
  border-radius: 8px;
  text-align: center;
}
.invoice-toggle-settings .title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  margin: 0px 40px 40px 40px;
}
.invoice-toggle-settings .toggle-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invoice-toggle-settings .toggle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.invoice-toggle-settings .toggle-button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.invoice-toggle-settings .toggle-button .icon {
  font-size: 20px;
  transition: color 0.3s ease-in-out;
}
.invoice-toggle-settings .toggle-button .icon.on {
  color: #007bff;
}
.invoice-toggle-settings .toggle-button .icon.off {
  color: #aaa;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.lab-settings-wrapper_navs {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 20px 0;
  border-bottom: 1px solid #0492c2;
}
.lab-settings-wrapper_navs_title {
  width: 50%;
}
.lab-settings-wrapper_navs_title h1 {
  font-size: 18px;
}
@media screen and (max-width: 460px) {
  .lab-settings-wrapper_navs_title h1 {
    font-size: 10px;
    max-width: 260px;
    word-break: break-word;
    width: fit-content;
  }
}
.lab-settings-wrapper_navs_tabs {
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  width: 50%;
}
@media screen and (max-width: 768px) {
  .lab-settings-wrapper_navs_tabs {
    justify-content: space-between;
  }
}
.lab-settings-wrapper_navs_tabs span {
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  background-color: inherit;
  color: rgb(128, 128, 128);
}
@media screen and (max-width: 481px) {
  .lab-settings-wrapper_navs_tabs span {
    font-size: 10px;
    width: fit-content;
  }
}
@media screen and (min-width: 481px) and (max-width: 768px) {
  .lab-settings-wrapper_navs_tabs span {
    justify-content: space-between;
    width: 100%;
  }
}
.lab-settings-wrapper .activeView {
  color: #0492c2;
}

.result-table-parameters {
  border: 0.5px solid #00b0ff;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px;
  text-align: center;
  cursor: default;
}

.add-structure-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.add-structure-wrapper .search-lab-test-wrapper {
  display: flex;
  justify-content: space-between;
}
.add-structure-wrapper .search-lab-test-wrapper .search-lab-test-input-field {
  width: 50%;
}
.add-structure-wrapper .search-lab-test-wrapper .select-method-field {
  width: 45%;
}
.add-structure-wrapper .search-lab-test-wrapper .select-method-field .add-others {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
@media (max-width: 960px) {
  .add-structure-wrapper .search-lab-test-wrapper {
    flex-direction: column;
  }
  .add-structure-wrapper .search-lab-test-wrapper > div {
    width: 100% !important;
  }
}
.add-structure-wrapper .button-component {
  margin-left: auto;
}
.add-structure-wrapper_save-preview-btn-w {
  display: flex;
  justify-content: space-between !important;
  border-top: 0.14px solid #a9a9a9;
  border-bottom: none;
}
.add-structure-wrapper_save-preview-btn-w span {
  font-size: 18px;
  font-weight: 700;
  margin: 20px 0;
}
.add-structure-wrapper .search-result-list {
  list-style-type: none;
  border: solid rgba(128, 128, 128, 0.5);
}
.add-structure-wrapper .search-result-list li {
  cursor: pointer;
  padding: 0.5rem;
}
.add-structure-wrapper .search-result-list li:hover {
  background-color: rgba(128, 128, 128, 0.5);
}

.parameters-map-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: 100%;
}

.parameters-wrapper {
  display: flex;
  flex-grow: 0;
  width: 100%;
  justify-content: space-between;
}
.parameters-wrapper button {
  min-width: auto;
}
.parameters-wrapper > div {
  width: 24% !important;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.parameters-wrapper .dropdown-container {
  min-width: auto;
}
.parameters-wrapper .options-btns-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.parameters-wrapper .options-btns-wrapper button {
  padding: 0.5rem;
  min-height: auto;
}
.parameters-wrapper .checkbox-component-layout .align-label-to-box b {
  font-size: 12px;
}
.parameters-wrapper .checkbox-component-layout {
  margin: 6px 0;
}
.parameters-wrapper .result-options-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (max-width: 960px) {
  .parameters-wrapper {
    flex-direction: column;
  }
  .parameters-wrapper > div {
    width: 100% !important;
  }
}

.dropdown-container {
  min-width: auto;
}

.delete-prompt-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
}
.delete-prompt-wrapper p {
  font-weight: 500;
  text-align: center;
  color: #b24d4d;
}
.delete-prompt-wrapper > div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.delete-prompt-wrapper > div div:nth-of-type(2) button {
  background-color: transparent;
}
.delete-prompt-wrapper > div #yes-btn {
  background-color: #cf3333;
}

/*.test-structure-preview-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  .listing_wrapper {
    background-color: gs.$color-gray;
  }

  .preview-test-name {
    margin: 0 auto;
  }
}*//********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.test-structure-preview-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.test-structure-preview-wrapper .listing_wrapper {
  background-color: #e7e7e7;
}
.test-structure-preview-wrapper .preview-test-name {
  margin: 0 auto;
}
.test-structure-preview-wrapper .test-preview-reference {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.listing_wrapper {
  width: 100%;
  overflow: auto;
}

.listing-component {
  display: flex;
  flex-direction: column;
  min-width: 960px;
}
@media screen and (min-width: 960px) {
  .listing-component {
    min-width: unset;
  }
}

/* Use where ever listing component is used */
.listing-header {
  display: flex;
  flex-flow: row;
  width: 100%;
  padding-right: 32px;
}

.listing-component-item-flex {
  display: flex;
  flex-flow: row;
  background-color: white;
  border: none;
  outline: none;
  margin: 0 0 12px 0;
  max-height: 50px;
  line-height: 20px;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
  min-height: 60px;
}
.listing-component-item-flex p, .listing-component-item-flex > div {
  flex: 1;
  width: auto;
  word-wrap: break-word;
  text-wrap: wrap;
  font-size: smaller;
  padding: 0 4px;
  max-width: 148px;
  text-align: start;
  display: unset;
}
@media screen and (min-width: 960px) and (max-width: 1550px) {
  .listing-component-item-flex p, .listing-component-item-flex > div {
    font-size: unset;
    max-width: 163px;
    padding: 5px;
  }
}
@media screen and (min-width: 1600px) {
  .listing-component-item-flex p, .listing-component-item-flex > div {
    font-size: unset;
    max-width: 200px;
    padding: 0 6px;
  }
}
.listing-component-item-flex:hover {
  outline: 2px solid #0492c2;
}
.listing-component-item-flex button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: unset;
  max-height: inherit;
  margin-bottom: 15px;
  position: relative;
  font-size: 30px;
}

.listing-component-items-column {
  background-color: unset;
}
.listing-component-items-column p {
  font-weight: bold;
}
.listing-component-items-column:hover {
  outline: none;
}

.listing-action {
  max-width: 30px;
  margin-right: 2px;
}
.listing-action:hover {
  cursor: pointer;
}

.listing-actions-wrapper {
  position: absolute;
  right: 0;
  z-index: 1;
}
.listing-actions-wrapper .listing-single-action-wrapper {
  text-align: center;
  background-color: white;
  outline: 1px dotted #0492c2;
  padding: 10px 5px;
  font-size: large;
  margin: unset;
  width: 100%;
}
.listing-actions-wrapper .listing-single-action-wrapper:hover {
  cursor: pointer;
  background-color: #0492c2;
  color: white;
}
@media screen and (min-width: 960px) {
  .listing-actions-wrapper {
    min-width: 170px;
  }
}

.listing_component_date {
  margin-left: auto;
  font-size: 11.44px;
  font-weight: 600;
  line-height: 17.17px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.goback-btn {
  border-radius: 6px;
  border: 1px solid #0492c2;
  padding: 0.2rem 2rem;
  gap: 1rem;
  display: flex;
  align-items: center;
  width: fit-content;
  cursor: pointer;
}
.goback-btn svg path {
  stroke: #3f3d3d;
}
.goback-btn:hover {
  background-color: #0492c2;
  color: #ffffff;
}
.goback-btn:hover svg path {
  stroke: #ffffff;
}.search-lab-service-component-wrapper {
  position: relative;
}
.search-lab-service-component-wrapper .search-lab-service-result-wrapper {
  max-height: 250px;
  overflow-y: auto;
  position: absolute;
  z-index: 2;
  background-color: #fff;
  border: 1px solid rgba(128, 128, 128, 0.7);
  width: 100%;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.dashboard_component_container {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-family: "Poppins", "Noto Sans KR", sans-serif;
  height: fit-content;
  position: relative;
  padding-bottom: 2rem;
}
.dashboard_component_container_overview {
  margin-top: -25px;
}
.dashboard_component_container_overview p {
  line-height: 0.4;
}
.dashboard_component_container_overview span {
  font-weight: bold;
  color: #0492c2;
}
.dashboard_component_container_overview span:hover {
  cursor: pointer;
}
.dashboard_component_container .component_container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}
.dashboard_component_container .default_customize_container {
  display: flex;
  gap: 3rem;
  width: 100%;
  justify-content: flex-end;
  padding: 0 2rem;
  margin-bottom: 2rem;
}
.dashboard_component_container .modal_toggle {
  width: auto;
  background: none;
  font-weight: 500;
  color: #3f3d3d;
  font-size: 18px;
  cursor: pointer;
}
.dashboard_component_container .modal_toggle[data-active=true] {
  color: #0492c2;
  text-decoration: underline;
}
.dashboard_component_container .modal_toggle[data-active=false] {
  color: #000000;
}
.dashboard_component_container .notification_admin_patients_Container {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  width: 100%;
  min-height: 100%;
}
@media screen and (max-width: 768px) {
  .dashboard_component_container .notification_admin_patients_Container {
    flex-flow: column;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.modal {
  width: 100%;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  overflow: visible;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 5rem 5rem 1rem 0;
  transition: all 2s ease-in-out;
}
.modal[data-isopen=false] {
  display: none;
}
.modal[data-isopen=true] {
  opacity: 1;
  animation: openModal 0.5s ease-in-out;
}
@keyframes openModal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.modal .content {
  min-width: 309px;
  z-index: 1000;
  width: 450px;
  border-radius: 10px;
  background-color: #fff;
  padding: 1rem 0rem;
  max-height: 100%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  overflow: auto;
}
.modal .content .content_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 1rem 0.2rem 1rem;
  border-bottom: 1px solid #3f3d3d;
}
.modal .content .content_header .header_close_customize {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.modal .content .content_sub_header {
  display: flex;
  justify-content: space-between;
  gap: 0.2rem;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem;
  font-style: italic;
}
.modal .content .content_sub_header P {
  font-size: 14px;
  font-weight: 400;
}
.modal .content ul {
  list-style: none;
  padding: 1rem;
}
.modal .content ul li {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  justify-content: space-between;
}
.modal .content ul li .icon_label_container {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.modal .content ul li .icon {
  display: flex;
  justify-content: center;
}
.modal .content ul li .label {
  flex-grow: 1;
  text-align: left;
}
.modal .content ul li .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 18px;
}
.modal .content ul li .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.modal .content ul li .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 34px;
}
.modal .content ul li .slider:before {
  position: absolute;
  content: "";
  height: 11px;
  width: 11px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}
.modal .content ul li input:checked + .slider {
  background-color: #0492c2;
}
.modal .content ul li input:focus + .slider {
  box-shadow: 0 0 1px #0492c2;
}
.modal .content ul li input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}
.modal .content .btn_container {
  display: flex;
  justify-content: flex-end;
  padding: 0 1rem;
}
.modal .content .btn_container .save_btn {
  padding: 0.8rem 1rem;
  width: 120px;
  height: auto;
  font-weight: 500;
  background-color: #0492c2;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
}
@media screen and (max-width: 768px) {
  .modal {
    width: 100%;
    padding: 2rem 1rem;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.data_representation_container {
  display: flex;
  flex-wrap: wrap;
  min-width: 320px;
  width: 100%;
  gap: 1rem;
  align-items: stretch;
  justify-content: space-between;
  flex: 1 1 auto;
  cursor: default;
  padding: 0 0.5rem;
}
.data_representation_container .card {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.1rem;
  min-width: 250px;
  max-width: 320px;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  color: #ffffff;
  transition: all 0.3s ease-in-out;
  animation: show_card 0.5s ease-in-out;
}
.data_representation_container .card:hover {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
}
.data_representation_container .card .content_header {
  font-size: 24px;
  font-weight: 600;
}
.data_representation_container .card .content_sub_header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  font-size: 16px;
  font-weight: 600;
  margin-top: 0.4rem;
  line-height: 22px;
}
.data_representation_container .card .content_sub_header span h2 {
  font-size: 21px;
  line-height: 20px;
}
.data_representation_container .card .content_sub_header span p {
  font-size: 12px;
  line-height: 14px;
}
.data_representation_container .card .card_content {
  font-size: 1rem;
  display: flex;
  gap: 0.5rem;
}
.data_representation_container .card .card_content .card_icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-radius: 50%;
  height: 2.5rem;
  min-width: 2.5rem;
}
.data_representation_container .card .card_content .card_details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.data_representation_container .card .card_footer {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.data_representation_container .card[data-name=total_revenue] {
  background-color: #0492c2;
  padding: 1rem 0.5rem;
}
.data_representation_container .card[data-name=total_revenue] .amount {
  font-size: 2rem;
}
.data_representation_container .card[data-name=total_staff] {
  background-color: #04d5c7;
  padding: 1rem 0.5rem;
}
.data_representation_container .card[data-name=total_staff] .staff_Count {
  font-size: 20px;
}
.data_representation_container .card[data-name=total_staff] .pending {
  color: #c19347;
  font-weight: 600;
}
.data_representation_container .card[data-name=total_staff] .probation {
  color: #9d2945;
  font-weight: 600;
}
.data_representation_container .card[data-name=patients] {
  background-color: #9385f7;
  padding: 1rem 0.5rem;
}
.data_representation_container .card[data-name=patients] h2 {
  font-size: 24px;
}
.data_representation_container .card[data-name=patients] .patient_number {
  font-size: 20px;
}
.data_representation_container .card[data-name=clinic] {
  background-color: #fe996c;
  padding: 0.5rem 0;
}
.data_representation_container .card[data-name=clinic] hr {
  width: 100%;
  border: 1px solid #ffffff;
}
.data_representation_container .card[data-name=clinic] .clinic {
  padding: 0 1rem;
}
@keyframes show_card {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.data_representation_container .hide_card {
  display: none;
}

@media (max-width: 768px) {
  .card {
    min-width: 10%;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.admitted_patient_container {
  background: #ffffff;
  padding: 1rem;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  margin-top: 1rem;
  border-radius: 10px;
  width: 100%;
  animation: show_card 0.5s ease-in-out;
}
@keyframes show_card {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.admitted_patient_container .charts_container {
  padding: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  min-width: 100%;
  overflow-x: auto;
}
.admitted_patient_container .charts_container .pie_chart_w {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  min-width: 350px;
  max-width: 450px;
}
.admitted_patient_container .charts_container .gender_chart {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  min-width: 350px;
  max-width: 450px;
}
@media screen and (min-width: 600px) and (max-width: 1440px) {
  .admitted_patient_container .charts_container .gender_chart {
    padding-bottom: 46px;
  }
}
.admitted_patient_container .charts_container .horizontal_chart_container {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  padding: 1rem 0;
  width: 100%;
  border-radius: 10px;
  grid-column: span 2;
  overflow-x: auto;
}
.admitted_patient_container .charts_container .horizontal_chart_container .chart_header {
  font-weight: 600;
  color: #000000;
  font-size: 16px;
  padding: 0.5rem 4rem;
}
@media (max-width: 1441px) {
  .admitted_patient_container .charts_container {
    flex-wrap: wrap;
  }
}
@media (max-width: 1025px) {
  .admitted_patient_container .charts_container .pie_chart_w,
  .admitted_patient_container .charts_container .gender_chart {
    min-width: 250px;
    max-width: 350px;
  }
}
@media (max-width: 680px) {
  .admitted_patient_container {
    flex-direction: column;
    width: auto;
  }
  .admitted_patient_container .charts_container {
    flex-flow: column;
    width: auto;
    justify-content: center;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.pie_chart_container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
.pie_chart_container .recharts-surface {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pie_chart_container .chart_details_container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: center;
}
.pie_chart_container .chart_header {
  font-weight: 600;
  color: #000000;
  font-size: 16px;
}.combined_container {
  display: flex;
  gap: 1.5rem;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
@media screen and (max-width: 768px) {
  .combined_container {
    flex-direction: column;
  }
}.sales_container {
  background-color: #fff;
  width: 100%;
  overflow: auto;
  border-radius: 1rem;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  animation: show_card 0.5s ease-in-out;
  max-height: 520px;
}
@keyframes show_card {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.sales_container .sales_header {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
  font-size: 1.3rem;
}
.sales_container .sales_header .download_open_container {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.sales_container .sales_header .download_open_container span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}/* Table.scss */
.table-container {
  min-width: 600px;
  overflow: auto;
}
.table-container .custom-table {
  width: 100%;
  border-collapse: collapse;
}
.table-container .custom-table thead tr {
  border-bottom: 2px solid #000000;
  border-top: 2px solid #000000;
  padding: 0 28px;
}
.table-container .custom-table thead tr th {
  padding: 10px 0;
}
.table-container .custom-table tbody tr {
  padding: 1rem;
}
.table-container .custom-table tbody tr td {
  border-bottom: 0.5px solid #ccc;
  padding: 10px;
  padding-bottom: 0px;
}
.table-container .custom-table tbody tr td p {
  margin-bottom: 0.6rem;
}
.table-container .custom-table tbody .invoice {
  color: rgba(0, 0, 0, 0.5);
  font-weight: 700;
}
.table-container .custom-table tr td {
  text-align: center;
}
.table-container .custom-table th {
  background-color: transparent;
  font-weight: bold;
}
.table-container .custom-table .title_date {
  display: flex;
  flex-direction: column;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.sale_service_container {
  background-color: #fff;
  width: 100%;
  max-width: 500px;
  min-width: 380px;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  animation: show_card 0.5s ease-in-out;
  padding-bottom: 2rem;
}
@keyframes show_card {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.sale_service_container .header {
  padding: 1rem;
  font-size: 1rem;
  font-weight: 500;
}
.sale_service_container .today_sales_container {
  border: 1px solid #000;
  padding: 1rem;
  border-radius: 10px;
  margin: 0.5rem;
  display: flex;
  justify-content: space-between;
}
.sale_service_container .today_sales_container .sales_wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
}
.sale_service_container .today_sales_container .sales_wrapper .sales_contents {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sale_service_container .today_sales_container .sales_wrapper .sales_contents .today_Sales_title {
  font-weight: 400;
}
.sale_service_container .today_sales_container .sales_wrapper .sales_contents .today_Sales_amount {
  font-weight: 700;
  font-size: 1.5rem;
}
.sale_service_container .today_sales_container .sales_wrapper .sales_contents .today_Sales_increment {
  color: #0492c2;
  font-size: 12px;
}
.sale_service_container .today_sales_container .date-container {
  width: 50%;
}
.sale_service_container .today_sales_container .date-container .date-field-container .datepicker-calender {
  left: -150px;
}
.sale_service_container .today_sales_container .date-container .date-field-container .input-error {
  text-wrap: wrap;
}
.sale_service_container .today_sales_container .date_input {
  border: 1px solid #000;
  border-radius: 10px;
  padding: 0.4rem;
}
.sale_service_container .today_services_container {
  border: 1px solid #000;
  border-radius: 10px;
  margin: 0.5rem;
  padding: 2px;
  max-height: 10rem;
  overflow: auto;
}
.sale_service_container .today_services_container h2 {
  padding: 0.4rem 1rem;
  border-bottom: 1px solid #000;
  display: flex;
  gap: 2rem;
  text-transform: capitalize;
  font-size: 1rem;
  font-weight: 500;
  background-color: #f6f3f3;
}
.sale_service_container .used_items_container .used_items_header {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  text-align: center;
  font-size: 16px;
  padding: 0.5rem;
}
.sale_service_container table {
  width: 100%;
  background-color: #fffafa;
  border-collapse: collapse;
}
.sale_service_container table thead {
  padding: 10px;
}
.sale_service_container table thead tr th {
  text-align: start;
  padding: 16px 5px;
  width: auto;
  overflow: hidden;
}
.sale_service_container table tbody tr {
  padding: 10px;
}
.sale_service_container table tbody tr:not(:last-child) {
  border-bottom: 0.5px solid #000;
}
.sale_service_container table tbody tr td {
  padding: 8px 5px;
  max-width: 220px;
}
.sale_service_container table tr td {
  text-align: start;
}
.sale_service_container table .title_date {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .sale_service_container {
    padding: 2rem 1rem;
    max-width: 100%;
    min-width: 100%;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.notification_container {
  background-color: #fff;
  flex: 1;
  border-radius: 1rem;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  padding-bottom: 2rem;
  animation: show_card 0.5s ease-in-out;
}
@keyframes show_card {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.notification_container h2 {
  font-size: 1.4rem;
  color: #000;
  font-weight: 600;
  text-align: center;
  padding: 1rem;
}
.notification_container .notification_list {
  border: 1px solid #000;
  padding: 0.3rem;
}
.notification_container .notification_list .notification_item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.notification_container .notification_list .notification_item:not(:last-child) {
  border-bottom: 1px solid #000;
}
.notification_container .notification_list .notification_item {
  padding: 0.5rem;
}
.notification_container .notification_list .notification_item .notification_type {
  font-size: 13px;
  padding: 0.2rem;
  min-width: 130px;
  border: 1px solid #462929;
  text-align: center;
}
.notification_container .notification_list .notification_item .notification_type[data-open=true] {
  background-color: #e7aeae;
}
.notification_container .notification_list .notification_item .notification_details {
  font-size: 13px;
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-wrap: nowrap;
  overflow: hidden;
  width: 100%;
}
.notification_container .notification_list .notification_item .date_time {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.4rem;
  text-transform: capitalize;
}
.notification_container .notification_list .notification_item .date_time p {
  font-size: 13px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.admin_online_container {
  background-color: #fff;
  flex: 1;
  border-radius: 1rem;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  animation: show_card 0.5s ease-in-out;
}
@keyframes show_card {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.admin_online_container header h2 {
  padding: 1rem;
  font-size: 1.4rem;
  color: #000;
  font-weight: 600;
}
.admin_online_container .log_Time {
  border: 1px solid #000;
  border-right: none;
  border-left: none;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.5rem;
  font-weight: 500;
  text-transform: capitalize;
}
.admin_online_container .log_Time span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-direction: column;
}
.admin_online_container .items_container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}
.admin_online_container .items_container .item_container {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}
.admin_online_container .items_container .item_container .item_image_name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.admin_online_container .items_container .item_container .item_image_name .admin_img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
}
.admin_online_container .items_container .item_container .item_image_name .admin_name_id_container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin_online_container .items_container .item_container .item_image_name .admin_name_id_container .admin_id {
  color: rgba(0, 0, 0, 0.4);
}
.admin_online_container .items_container .item_container .time_container {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}
.admin_online_container .items_container .item_container .time_container .time_Wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  align-items: center;
}
.admin_online_container .link_container {
  display: flex;
  justify-content: flex-end;
  padding: 1rem;
}
.admin_online_container .link_container a {
  color: #0492c2;
  text-decoration: underline;
}.patients_chart_container {
  display: flex;
  background-color: #fff;
  flex: 1 1 0%;
  border-radius: 1rem;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
  padding: 1rem;
  animation: show_card 0.5s ease-in-out;
}
@keyframes show_card {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .patients_chart_container {
    overflow-x: auto;
    min-height: 100%;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.in-chat-component-wrapper {
  display: flex;
  width: 100%;
}
.in-chat-component-wrapper .chat-app-wrapper, .in-chat-component-wrapper .chat-app-sidebar {
  min-height: 70vh;
  max-height: 80vh;
}
.in-chat-component-wrapper .chat-app-wrapper {
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: #f3f4f6;
  padding: 16px;
  width: 85%;
  /* center container for nicer demo layout (optional) */
}
.in-chat-component-wrapper .chat-app-wrapper > .chat-window-wrapper {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  background: transparent;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  overflow-x: hidden;
  overflow-y: auto;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-header-wrapper {
  background: #ffffff;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  font-size: 15px;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-header-wrapper span {
  color: #0492c2;
  font-weight: 700;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper_navs ul {
  display: inline-flex;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper_navs ul li {
  list-style: none;
  margin: 3px 5px;
  padding: 3px;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper_navs ul li:hover {
  cursor: pointer;
  background-color: #0492c2;
  color: white;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper_navs ul li[data-selected=true] {
  border-bottom: 2px solid #0492c2;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper_chat-date-w {
  text-align: center;
  margin-top: 10px;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper_chat-date-w__date {
  border: 2px solid #0492c2;
  border-radius: 10px;
  padding: 2px;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-body-wrapper {
  background: linear-gradient(180deg, transparent 0%, transparent 2%), #fbfdff;
  padding: 18px;
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 15px 0;
  min-height: 45vh;
  max-height: 80vh;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-body-wrapper .message-card {
  border-radius: 10px;
  padding: 10px 12px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  align-self: flex-start;
  width: 100%;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-body-wrapper .message-card .sender-time-w, .in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-body-wrapper .message-card .receiver-time-w {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 6px;
  border-bottom: 3px solid #0492c2;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-body-wrapper .message-card .sender-time-w_sender, .in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-body-wrapper .message-card .receiver-time-w_sender {
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-body-wrapper .message-card .sender-time-w_time, .in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-body-wrapper .message-card .receiver-time-w_time {
  font-size: 12px;
  color: #6b7280;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-body-wrapper .message-card .receiver-time-w {
  border-bottom: 3px solid darkgreen;
  width: fit-content;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-body-wrapper .message-card .text {
  font-size: 14px;
  line-height: 1.35;
  color: #111827;
  white-space: pre-wrap; /* preserve line breaks */
  word-break: break-word;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-body-wrapper .message-card {
  /* attachments / small meta area */
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-body-wrapper .message-card .attachments {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-body-wrapper .message-card .attachments .attachment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: #0f172a;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .sender-msg-card-right {
  border: 1px solid #0492c2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .receiver-msg-card-left {
  border: 1px solid darkgreen;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-input-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-input-wrapper input[type=text],
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-input-wrapper input,
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-input-wrapper textarea {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  background: #fff;
  font-size: 14px;
  outline: none;
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-input-wrapper input[type=text]:focus,
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-input-wrapper input:focus,
.in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-input-wrapper textarea:focus {
  border-color: #0492c2;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
}
.in-chat-component-wrapper .chat-app-wrapper {
  /* utilities */
}
.in-chat-component-wrapper .chat-app-wrapper .date-separator {
  display: flex;
  justify-content: center;
  margin: 8px 0;
  font-size: 12px;
  color: #6b7280;
  background: #f1f5f9;
  padding: 6px 12px;
  border-radius: 999px;
  align-self: center;
}
.in-chat-component-wrapper .chat-app-wrapper {
  /* scrollbar styling (WebKit) */
}
.in-chat-component-wrapper .chat-app-wrapper .chat-body-wrapper::-webkit-scrollbar {
  width: 10px;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-body-wrapper::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
}
.in-chat-component-wrapper .chat-app-wrapper .chat-body-wrapper::-webkit-scrollbar-track {
  background: transparent;
}
.in-chat-component-wrapper .chat-app-wrapper {
  /* Responsive tweaks */
}
@media (max-width: 640px) {
  .in-chat-component-wrapper .chat-app-wrapper .chat-app-wrapper {
    padding: 8px;
  }
  .in-chat-component-wrapper .chat-app-wrapper .chat-app-wrapper > .chat-window-wrapper {
    border-radius: 8px;
  }
  .in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-body-wrapper {
    padding: 12px;
  }
  .in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-body-wrapper .message-card {
    max-width: 100%;
  }
  .in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-header-wrapper {
    padding: 10px 12px;
    font-size: 14px;
  }
  .in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-input-wrapper {
    padding: 10px;
  }
  .in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-input-wrapper input {
    min-height: 40px;
  }
  .in-chat-component-wrapper .chat-app-wrapper .chat-window-wrapper .chat-input-wrapper button {
    min-width: 64px;
    padding: 8px 10px;
  }
}
.in-chat-component-wrapper .chat-app-sidebar {
  border: 1px solid black;
  border-radius: 10px;
  width: 15%;
  overflow-y: auto;
  max-height: 80vh;
}
.in-chat-component-wrapper .chat-app-sidebar_search-user {
  margin: 0 5px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.user-chat-bar-component-wrapper-active {
  background-color: #0492c2;
  color: white;
}

.msg-delivered-to-receiver {
  background: darkgreen;
  color: white;
}

.user-chat-bar-component-wrapper {
  display: flex;
  border: 1px solid #0492c2;
  margin: 20px 5px;
  border-radius: 10px;
  padding: 5px 3px;
}
.user-chat-bar-component-wrapper:hover {
  cursor: pointer;
  color: white;
  background-color: #0492c2;
}
.user-chat-bar-component-wrapper_pp-name {
  display: flex;
  align-items: center;
}
.user-chat-bar-component-wrapper_pp-name img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: auto;
}
.user-chat-bar-component-wrapper_pp-name span {
  font-size: 14px;
  display: flex;
  align-items: center;
  line-height: 1.5;
  font-weight: bold;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.clinic-page-component-w {
  max-width: inherit;
}
.clinic-page-component-w .clinic-component {
  display: block;
  width: 100%;
}
.clinic-page-component-w .patient-fee-payment-wrapper {
  display: flex;
  align-items: flex-start;
  flex-flow: column;
  justify-content: space-evenly;
  margin-bottom: 10px;
}
@media screen and (min-width: 650px) {
  .clinic-page-component-w .patient-fee-payment-wrapper {
    flex-flow: unset;
    align-items: center;
  }
}
.clinic-page-component-w .patient-fee-payment-wrapper div {
  flex: 1;
}
.clinic-page-component-w .patient-fee-payment-wrapper .paid, .clinic-page-component-w .patient-fee-payment-wrapper .unpaid {
  display: flex;
  align-items: center;
  width: fit-content;
  font-weight: bold;
  font-size: 14px;
  height: fit-content;
}
.clinic-page-component-w .patient-fee-payment-wrapper .paid .paid-unpaid-span-icon-wrapper, .clinic-page-component-w .patient-fee-payment-wrapper .unpaid .paid-unpaid-span-icon-wrapper {
  padding: 5px 0 0 10px;
}
.clinic-page-component-w .patient-fee-payment-wrapper .fee-line p {
  border-bottom: 1px solid #0492c2;
  padding-bottom: 10px;
  font-size: 20px;
}
.clinic-page-component-w .patient-fee-payment-wrapper .paid {
  color: green;
}
.clinic-page-component-w .patient-fee-payment-wrapper .unpaid {
  color: #b24d4d;
}
.clinic-page-component-w .admission-type-dropdown .selected-option-container {
  width: 350px;
}
.clinic-page-component-w .admission-type-dropdown .options-wrapper {
  width: 350px;
  z-index: 1;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.admit-patient-clinic-component-w {
  max-width: inherit;
}
.admit-patient-clinic-component-w .admit-patient-section-1 {
  display: flex;
  flex-flow: row;
  margin-top: 5px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
@media screen and (min-width: 1200px) {
  .admit-patient-clinic-component-w .admit-patient-section-1 {
    flex-wrap: unset;
    justify-content: unset;
    gap: unset;
  }
}
.admit-patient-clinic-component-w .admit-patient-section-1-divider {
  display: flex;
  flex-flow: column;
  width: 100%;
  margin-left: 10px;
}
@media screen and (min-width: 1200px) {
  .admit-patient-clinic-component-w .admit-patient-section-1-divider {
    flex: 1;
  }
}
.admit-patient-clinic-component-w .admit-patient-section-1-divider h2 {
  margin-bottom: 10px;
  text-decoration: underline;
}
.admit-patient-clinic-component-w .admit-patient-section-1-divider .dropdown-content-wrapper {
  max-width: 280px;
}
@media screen and (min-width: 414px) {
  .admit-patient-clinic-component-w .admit-patient-section-1-divider .dropdown-content-wrapper {
    max-width: 350px;
  }
}
.admit-patient-clinic-component-w .admit-patient-section-1-divider .options-wrapper {
  min-width: 280px;
}
@media screen and (min-width: 414px) {
  .admit-patient-clinic-component-w .admit-patient-section-1-divider .options-wrapper {
    min-width: 350px;
  }
}
.admit-patient-clinic-component-w .admit-date-time {
  display: flex;
  flex-flow: column;
  color: gray;
}
.admit-patient-clinic-component-w .admit-date-time .admit-date-time-label-input {
  display: flex;
  flex-flow: column;
  min-width: 150px;
  line-height: 25px;
  align-items: flex-start;
}
.admit-patient-clinic-component-w .admit-date-time .admit-date-time-label-input label {
  font-weight: bold;
}
.admit-patient-clinic-component-w .admit-date-time .admit-date-time-label-input .input-field-container input {
  color: gray;
  background-color: inherit;
  border: none;
  outline: 2px solid gray;
  border-radius: unset;
  max-width: 105px;
  height: 20px;
}
.admit-patient-clinic-component-w .admit-date-time-label-input-wrapper {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
}
.admit-patient-clinic-component-w .purpose-of-visit {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  margin-top: 30px;
}
.admit-patient-clinic-component-w .purpose-of-visit .dropdown-content-wrapper,
.admit-patient-clinic-component-w .purpose-of-visit .options-wrapper,
.admit-patient-clinic-component-w .purpose-of-visit .input-field-wrapper {
  min-width: 280px;
}
@media screen and (min-width: 414px) {
  .admit-patient-clinic-component-w .purpose-of-visit .dropdown-content-wrapper,
  .admit-patient-clinic-component-w .purpose-of-visit .options-wrapper,
  .admit-patient-clinic-component-w .purpose-of-visit .input-field-wrapper {
    max-width: 350px;
    min-width: 258px;
  }
}
.admit-patient-clinic-component-w .add-extra-note-btn-w {
  display: flex;
  justify-content: flex-end;
  margin-top: 3px;
}
.admit-patient-clinic-component-w .add-extra-note-btn-w button {
  background: #0492c2;
  color: #ffffff;
  padding: 4px 8px;
  font-weight: bold;
}
.admit-patient-clinic-component-w .add-extra-note-btn-w button:hover {
  cursor: pointer;
}
.admit-patient-clinic-component-w .wrap-check-in-and-out-patient-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
@media screen and (min-width: 960px) {
  .admit-patient-clinic-component-w .wrap-check-in-and-out-patient-btn {
    justify-content: center;
    margin-top: 40px;
  }
}
.admit-patient-clinic-component-w .admit-patient-submit-btn-wrapper {
  display: flex;
  justify-content: flex-end;
}
@media screen and (min-width: 960px) {
  .admit-patient-clinic-component-w .admit-patient-submit-btn-wrapper {
    margin-top: 25px;
  }
}
.admit-patient-clinic-component-w .admit-patient-section-2,
.admit-patient-clinic-component-w .admit-patient-section-3,
.admit-patient-clinic-component-w .admit-patient-section-4 {
  margin: 50px 0;
}
.admit-patient-clinic-component-w .admit-patient-section-2 h2,
.admit-patient-clinic-component-w .admit-patient-section-3 h2,
.admit-patient-clinic-component-w .admit-patient-section-4 h2 {
  text-align: center;
  border-bottom: 1px solid #0492c2;
  font-size: 20px;
}
.admit-patient-clinic-component-w .admit-patient-section-2 .admit-patient-section-doctor-diagnosis .textarea-component-textarea-wrapper {
  width: 100%;
}
.admit-patient-clinic-component-w .admit-patient-section-2 .admit-patient-section-doctor-diagnosis .textarea-component-textarea-wrapper textarea {
  width: inherit;
  min-height: 210px;
}
.admit-patient-clinic-component-w .admit-patient-section-2 .confirm-patient-consultation-checkbox {
  margin: 10px 0;
}
.admit-patient-clinic-component-w .admit-patient-section-2 .after-consultation-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}
.admit-patient-clinic-component-w .admit-patient-section-2 .next-steps-after-consultation-wrapper_clinic-after-consultation-w {
  padding: 5px;
  margin: 30px auto;
}
.admit-patient-clinic-component-w .admit-patient-section-2 .next-steps-after-consultation-wrapper_clinic-after-consultation-w p {
  font-weight: bold;
  padding: 10px 0;
}
.admit-patient-clinic-component-w .doctor-discharge-modal-w .modal-2 {
  border: 2px solid green;
}
.admit-patient-clinic-component-w .doctor-discharge-modal-w .modal-2 h2 {
  border-bottom: unset;
  line-height: 30px;
}
.admit-patient-clinic-component-w .doctor-discharge-modal-w .modal-2 .doctor-discharge-cancel-btn-w {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
.admit-patient-clinic-component-w .doctor-discharge-modal-w .modal-2 .doctor-discharge-cancel-btn-w #discharge-btn {
  background-color: #cf3333;
}
.admit-patient-clinic-component-w .admit-patient-section-3 {
  margin-bottom: 20px;
}
.admit-patient-clinic-component-w .admit-patient-section-4 {
  margin-bottom: 20px;
}
.admit-patient-clinic-component-w .admit-patient-consultation-note {
  display: flex;
  justify-content: space-between;
}
.admit-patient-clinic-component-w .admit-patient-consultation-note > div {
  width: 49%;
}
.admit-patient-clinic-component-w .admit-patient-consultation-note .icd_section {
  display: flex;
  flex-direction: column;
}
.admit-patient-clinic-component-w .admit-patient-consultation-note .icd_section .button-component {
  margin: 0.5rem 0 0 auto;
}
.admit-patient-clinic-component-w .admit-patient-consultation-note .icd_section .button-component button {
  padding: 0.5rem;
  min-width: auto;
  min-height: auto;
  border-radius: 0;
}
.admit-patient-clinic-component-w .admit-patient-consultation-note .unset-disable-section {
  pointer-events: auto !important;
  opacity: 1 !important;
}
.admit-patient-clinic-component-w .admit-patient-consultation-note .admit-patient-section-icd-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  height: 156px;
  border-radius: 7.43px;
  background-color: #ffffff;
  overflow: auto;
  padding: 1rem;
}
.admit-patient-clinic-component-w .admit-patient-consultation-note .admit-patient-section-icd-list .admit-patient-section-icd-list-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admit-patient-clinic-component-w .admit-patient-consultation-note .admit-patient-section-icd-list .admit-patient-section-icd-list-item p {
  display: flex;
  gap: 0.5rem;
}
.admit-patient-clinic-component-w .admit-patient-consultation-note .admit-patient-section-icd-list .admit-patient-section-icd-list-item .entity_code {
  color: #c19347;
}
.admit-patient-clinic-component-w .admit-patient-consultation-note .admit-patient-section-icd-list .admit-patient-section-icd-list-item .entity_code_title {
  font-size: 14px;
  font-weight: 500;
  line-height: 12.31px;
}
@media (max-width: 960px) {
  .admit-patient-clinic-component-w .admit-patient-consultation-note {
    flex-direction: column;
  }
  .admit-patient-clinic-component-w .admit-patient-consultation-note > div {
    width: 100%;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.admit-patient-add-note-modal-w .button-component {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.success_response {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.success_response .container {
  border: 1px solid #000;
  padding: 1rem;
  min-width: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-direction: column;
  border-radius: 10px;
}
.success_response .container h3 {
  font-size: 0.8rem;
  font-weight: 500;
}
.success_response .container .successful_text {
  color: #53bd8a;
  letter-spacing: 0.05rem;
  font-weight: 500;
  font-size: 1.1rem;
}
.success_response .continue_btn {
  margin-top: 3rem;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.patient-info-component-w .admission-patient-info {
  outline: 1px solid snow;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4), -5px 5px 10px rgba(0, 0, 0, 0.4), 5px -5px 10px rgba(0, 0, 0, 0.4), -5px -5px 10px rgba(0, 0, 0, 0.4);
  max-width: 360px;
  padding: 10px;
  margin-bottom: 15px;
}
.patient-info-component-w .admission-patient-info .admit-patient-profile-redirect {
  margin-top: 10px;
  margin-bottom: 5px;
  padding: 10px 0;
}
.patient-info-component-w .admission-patient-info .admit-patient-profile-redirect a {
  color: white;
  background-color: #0492c2;
  padding: 6px 8px;
  cursor: pointer;
  font-weight: bold;
}
.patient-info-component-w .admission-patient-info .admit-patient-profile-redirect .admit-patient-change-patient {
  margin-top: 20px;
  padding-top: 10px;
  text-align: end;
}
.patient-info-component-w .admission-patient-info .admit-patient-profile-redirect .admit-patient-change-patient a {
  background-color: #582641;
  margin-left: 10px;
}
@media screen and (max-width: 414px) {
  .patient-info-component-w .admission-patient-info .admit-patient-profile-redirect .admit-patient-change-patient a {
    font-size: smaller;
  }
}
@media screen and (max-width: 414px) {
  .patient-info-component-w .admission-patient-info .admit-patient-profile-redirect .admit-patient-change-patient {
    text-align: unset;
  }
}
.patient-info-component-w .admit-patient-section-1-align-content {
  display: flex;
  flex-flow: row;
  line-height: 28px;
}
.patient-info-component-w .admit-patient-section-1-align-left {
  display: flex;
  flex-flow: column;
  font-weight: bold;
  padding-right: 45px;
}
@media screen and (min-width: 414px) {
  .patient-info-component-w .admit-patient-section-1-align-left {
    padding-right: 100px;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.search-bar-component {
  display: block;
}

.search-bar-input-icon-wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.search-bar-icon {
  position: absolute;
  color: rgba(128, 128, 128, 0.5);
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
}

.search-bar-input {
  display: flex;
  flex-flow: row;
  width: 100%;
  position: relative;
}
.search-bar-input span {
  width: 100%;
  height: 50px;
}
.search-bar-input span input {
  background-color: #ffffff;
  color: rgba(128, 128, 128, 0.5);
  padding: 8px 20px 8px 50px;
  min-height: 48px;
  border-radius: 6px;
  border: none;
  text-align: left;
  outline: none;
  width: 100%;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.icd-search_list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 362px;
  gap: 1rem;
  border-radius: 7.43px;
  background: #ffffff;
  overflow: auto;
  padding: 1rem 1rem 1rem 1.5rem;
  position: absolute;
}
.icd-search_list .list_top {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
.icd-search_list .list_top span {
  white-space: nowrap;
}
.icd-search_list .list_top .query_value {
  font-size: 14px;
  font-weight: 500;
  line-height: 13.17px;
  color: #c19347;
  text-transform: capitalize;
}
@media (max-width: 960px) {
  .icd-search_list .list_top {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.searchresult_item_wrapper {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.searchresult_item_wrapper * {
  font-size: 14px;
  line-height: 26px;
}
@media (max-width: 960px) {
  .searchresult_item_wrapper * {
    font-size: 10.67px;
  }
}
.searchresult_item_wrapper .searchresult_item_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.searchresult_item_wrapper .search_result_dropdown_arrow_close {
  transform: rotate(-90deg);
}
.searchresult_item_wrapper .search_result_dropdown_arrow {
  position: absolute;
  left: -1.5rem;
}
.searchresult_item_wrapper .search_result_left {
  display: flex;
  cursor: pointer;
  gap: 1rem;
  width: 100%;
  align-items: center;
}
.searchresult_item_wrapper .title_code {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  position: relative;
}
.searchresult_item_wrapper .title_code .code {
  color: #bf892d;
}
.searchresult_item_wrapper .title_code_dropdown {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.searchresult_item_wrapper .title_code_open {
  background-color: #0492c2;
  padding: 1rem;
}
.searchresult_item_wrapper .title_code_open .title {
  color: #ffffff;
}
.searchresult_item_wrapper .title_code_open .code {
  color: #3f3d3d;
}
.searchresult_item_wrapper .searchresult_item_list {
  display: flex;
  flex-direction: column;
  top: 100%;
  left: 0;
  max-height: 214px;
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #a49f9f;
  width: 100%;
  gap: 1rem;
  overflow: auto;
  position: sticky;
  background-color: #ffffff;
  z-index: 10;
}
.searchresult_item_wrapper .searchresult_item_list .title_desc {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.searchresult_item_wrapper .searchresult_item_list .title_desc_title {
  font-weight: 700;
}
.searchresult_item_wrapper .searchresult_item_list .desc {
  font-weight: 400;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.vital-signs-card-wrapper {
  display: flex;
  min-width: 22%;
  border-radius: 1px 1px 12px 1px;
  border: 1px solid rgba(128, 128, 128, 0.5);
  position: relative;
  justify-content: space-between;
  padding: 0.5rem;
}
.vital-signs-card-wrapper .vital-sign-card-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.vital-signs-card-wrapper input[type=number] {
  -moz-appearance: textfield;
  -webkit-appearance: none;
  appearance: none;
}
.vital-signs-card-wrapper input[type=number]::-webkit-inner-spin-button,
.vital-signs-card-wrapper input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vital-signs-card-wrapper .control-arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vital-signs-card-wrapper .vital-sign-input-field {
  width: 2.5rem;
  padding: 0.1rem;
  background-color: #ffffff;
  border: 0.5px solid rgba(128, 128, 128, 0.5);
  text-align: center;
}
.vital-signs-card-wrapper .vital-signs-card-colored-line {
  width: 50%;
  height: 4px;
  bottom: 100%;
  position: absolute;
  right: 0;
}
.vital-signs-card-wrapper .vital-signs-card-colored-line.blood-pressure {
  background: #0492c2;
  border: 1px solid #0492c2;
}
.vital-signs-card-wrapper .vital-signs-card-colored-line.heart-rate {
  background: green;
  border: 1px solid green;
}
.vital-signs-card-wrapper .vital-signs-card-colored-line.breathing {
  background: #fe996c;
  border: 1px solid #fe996c;
}
.vital-signs-card-wrapper .vital-signs-card-colored-line.temperature {
  background: #ea5a47;
  border: 1px solid #ea5a47;
}
.vital-signs-card-wrapper .vital-signs-card-colored-line.weight {
  background: #582641;
  border: 1px solid #582641;
}
.vital-signs-card-wrapper .vital-signs-card-colored-line.sugar-level {
  background: #9385f7;
  border: 1px solid #9385f7;
}
.vital-signs-card-wrapper .vital-sign-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vital-signs-card-wrapper .vital-sign-input-wrapper .vital-sign-input-and-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.vital-signs-card-wrapper .vital-sign-input-wrapper .vital-sign-unit {
  opacity: 0.5;
  font-size: 12px;
  font-weight: 400;
  line-height: 11.65px;
  color: #000000;
  margin-top: auto;
}
.vital-signs-card-wrapper .vital-sign-icon {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}
.vital-signs-card-wrapper .required-mark {
  color: #ff0000;
  position: absolute;
  right: -0.5rem;
  top: -0.5rem;
}
@media (max-width: 960px) {
  .vital-signs-card-wrapper {
    width: 100%;
  }
}

.vital-signs-label-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0.5rem 0;
}
.vital-signs-label-content .modal-content-2 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vital-signs-wrapper {
  width: 100%;
  border-radius: 4.51px;
  background: #e7e7e7;
  border: 0.97px solid #000000;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.vital-signs-wrapper .button-component {
  margin-left: auto;
}
.vital-signs-wrapper .button-component button {
  padding: 0.5rem;
  min-height: auto;
  min-width: auto;
  border-radius: 0;
}
.vital-signs-wrapper .vital-signs-cards {
  display: flex;
  width: 100%;
  gap: 1rem;
  flex-wrap: wrap;
}
@media (max-width: 960px) {
  .vital-signs-wrapper .vital-signs-cards {
    flex-direction: column;
  }
}
.vital-signs-wrapper .other-notes-count {
  position: absolute;
  width: 19px;
  height: 19px;
  font-size: 12.45px;
  font-weight: 400;
  line-height: 18.67px;
  text-align: center;
  background: #3b8e57;
  color: #ffffff;
  top: 0.5rem;
  right: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
}

.vital-signs-extra-note-card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #000000;
}
.vital-signs-extra-note-card-wrapper .vital-signs-extra-note-card-top {
  display: flex;
  justify-content: space-between;
}
.vital-signs-extra-note-card-wrapper .vital-signs-extra-note-card-top-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.vital-signs-extra-note-card-wrapper .vital-signs-extra-note-card-content {
  font-size: 14.61px;
  font-weight: 400;
  line-height: 21.92px;
  color: #000000;
}

.relative {
  position: relative;
  width: fit-content;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.create-lab-component-w {
  width: 100%;
  background-color: #ffffff;
  min-height: 600px;
  border-radius: 8px;
}
.create-lab-component-w_top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  width: 100%;
}
.create-lab-component-w_top .create-lab-component-dropdown-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-direction: column;
}
.create-lab-component-w_top .create-lab-component-dropdown-wrapper > div {
  width: 100%;
}
@media (min-width: 960px) {
  .create-lab-component-w_top .create-lab-component-dropdown-wrapper {
    flex-direction: row;
  }
}
.create-lab-component-w_top p {
  line-height: 20px;
  font-size: 12px;
}
.create-lab-component-w_top .drop-down {
  min-width: 190px;
}
.create-lab-component-w_top-priority-w {
  border: 1px solid rgba(128, 128, 128, 0.7);
  padding: 5px;
  border-radius: 8px;
}
.create-lab-component-w_top-priority-w h3 {
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0;
}
.create-lab-component-w_top-priority-w_lightbulb_message, .create-lab-component-w_top-priority-w_priority-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #747474;
}
.create-lab-component-w_top-priority-w_lightbulb_message .range, .create-lab-component-w_top-priority-w_priority-range .range {
  display: flex;
  gap: 10px;
}
.create-lab-component-w_top-priority-w_lightbulb_message .range *, .create-lab-component-w_top-priority-w_priority-range .range * {
  font-size: 14px;
  gap: 2px;
}
.create-lab-component-w_top-priority-w_lightbulb_message {
  margin: 5px 0;
  align-self: center;
}
@media screen and (max-width: 1025px) {
  .create-lab-component-w_top-priority-w {
    margin-top: 15px;
  }
}
.create-lab-component-w_middle {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  border: 2px solid #d9d9d9;
  border-radius: 8px;
  padding: 10px;
  margin-top: 20px;
}
.create-lab-component-w_middle .create-lab-component-comment-invoice {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
}
.create-lab-component-w_middle .create-lab-component-comment-invoice > div {
  width: 100%;
}
.create-lab-component-w_middle .create-lab-component-comment-invoice .textarea-component-textarea-wrapper {
  width: 100%;
}
.create-lab-component-w_middle .create-lab-component-comment-invoice .textarea-component-textarea-wrapper textarea {
  width: 100%;
  min-width: auto;
}
@media (min-width: 960px) {
  .create-lab-component-w_middle .create-lab-component-comment-invoice {
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
  }
}
.create-lab-component-w_middle .create-lab-component-comment-area {
  margin-bottom: 20px;
  min-height: 100px;
  resize: vertical;
  border-radius: 5px;
  align-content: center;
  width: 100%;
}
.create-lab-component-w_middle_btn {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin: 15px 0;
}
@media screen and (max-width: 960px) {
  .create-lab-component-w_middle {
    align-items: flex-start;
    flex-flow: column;
  }
  .create-lab-component-w_middle_btn {
    justify-content: flex-start;
  }
}
.create-lab-component-w_bottom {
  margin: 20px 0 10px;
}
.create-lab-component-w_bottom .create-lab-order-search-patient-invoice {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-direction: column;
  width: 100%;
  align-items: flex-end;
}
.create-lab-component-w_bottom .create-lab-order-search-patient-invoice > div {
  width: 100%;
}
@media (min-width: 960px) {
  .create-lab-component-w_bottom .create-lab-order-search-patient-invoice {
    flex-direction: row;
  }
}
.create-lab-component-w_bottom .search-invoice-component-wrapper {
  max-width: 100%;
  margin-left: auto;
}
.create-lab-component-w_bottom_selected-tests-w {
  width: 100%;
  overflow: auto;
  padding: 0 0.2rem;
}
.create-lab-component-w_bottom_selected-tests-w table {
  width: 100%;
  text-align: justify;
  border-spacing: 0 15px;
}
.create-lab-component-w_bottom_selected-tests-w table th {
  margin-bottom: 10px;
}
.create-lab-component-w_bottom_selected-tests-w table tbody {
  outline: 2px solid #3f3d3d;
  border-radius: 5px;
  border-spacing: 5px 0;
}
.create-lab-component-w_bottom_selected-tests-w table tbody td {
  padding: 3px;
  border-bottom: 1px solid #e7e7e7;
  text-wrap: nowrap;
}
.create-lab-component-w_bottom_selected-tests-w p {
  text-align: center;
  margin-bottom: 30px;
}
.create-lab-component-w_bottom_patient-details-w {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}
.create-lab-component-w_bottom_patient-details-w > div {
  width: 100%;
}
.create-lab-component-w_bottom_patient-details-w h3 {
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0;
}
.create-lab-component-w_bottom_patient-details-w_patient-category {
  border: 1px solid rgba(128, 128, 128, 0.7);
  padding: 5px;
  border-radius: 8px;
}
.create-lab-component-w_bottom_patient-details-w_patient-category .input-error {
  font-size: 12px;
}
.create-lab-component-w_bottom_patient-details-w_patient-category_lightbulb_message, .create-lab-component-w_bottom_patient-details-w_patient-category_category {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  font-weight: 300;
  line-height: 18px;
}
.create-lab-component-w_bottom_patient-details-w_patient-category_lightbulb_message .radio-group, .create-lab-component-w_bottom_patient-details-w_patient-category_category .radio-group {
  display: flex;
  gap: 10px;
}
.create-lab-component-w_bottom_patient-details-w_patient-category_lightbulb_message .radio-group *, .create-lab-component-w_bottom_patient-details-w_patient-category_category .radio-group * {
  font-size: 14px;
  gap: 2px;
}
.create-lab-component-w_bottom_patient-details-w_patient-category_lightbulb_message {
  margin: 5px 0;
  align-self: center;
}
@media (min-width: 960px) {
  .create-lab-component-w_bottom_patient-details-w {
    flex-direction: row;
  }
}
.create-lab-component-w_bottom_create-section-w {
  justify-items: end;
  padding: 20px 0;
}
.create-lab-component-w_bottom_create-button {
  /*display: inline-flex;
  justify-content: space-between;*/
  margin-top: 20px;
}.search-lab-sample-component-wrapper {
  position: relative;
}
.search-lab-sample-component-wrapper .search-lab-sample-result-wrapper {
  max-height: 250px;
  overflow-y: auto;
  position: absolute;
  z-index: 2;
  background-color: #fff;
  border: 1px solid rgba(128, 128, 128, 0.7);
  width: 100%;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.search-invoice-component-wrapper {
  display: flex;
  flex-flow: column;
  position: relative;
  width: 100%;
  height: fit-content;
  z-index: 2;
}
.search-invoice-component-wrapper_input-w {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
  width: 100%;
  height: fit-content;
}
.search-invoice-component-wrapper_input-w .input-field-container {
  z-index: 1;
  width: 100%;
  background-color: white;
  margin-bottom: auto;
}
.search-invoice-component-wrapper_result-w {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: absolute;
  right: 0;
  top: 100%;
  min-height: 80px;
  max-height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #ffffff;
  width: 100%;
}
.search-invoice-component-wrapper .search-invoice-result-w {
  border: 2px solid rgba(128, 128, 128, 0.7);
  width: 100%;
  overflow-x: scroll;
  min-height: fit-content;
}
.search-invoice-component-wrapper .search-invoice-result-w button {
  background: white;
  font-style: inherit;
  font-size: inherit;
  min-width: 350px;
  max-width: inherit;
  text-align: start;
  padding: 6px;
  border-bottom: 2px solid rgba(128, 128, 128, 0.7);
}
.search-invoice-component-wrapper .search-invoice-result-w button:hover {
  cursor: pointer;
}
.search-invoice-component-wrapper_selected-invoice {
  margin: 20px 0;
}
.search-invoice-component-wrapper_selected-invoice_details {
  border: 2px solid rgba(128, 128, 128, 0.7);
  padding: 8px 4px;
  margin-top: 8px;
}
.search-invoice-component-wrapper_selected-invoice_details p {
  border-bottom: 1px solid black;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.result-preview-wrapper {
  display: flex;
  flex-direction: column;
}
.result-preview-wrapper label, .result-preview-wrapper b, .result-preview-wrapper p {
  font-size: 14px;
}
@media (max-width: 650px) {
  .result-preview-wrapper {
    flex-wrap: wrap;
  }
}
.result-preview-wrapper .result-preview-header {
  display: inline-flex;
  justify-content: space-between;
  margin-bottom: 2px;
}
.result-preview-wrapper .result-preview-header_logo-hospital-info-w {
  display: flex;
  align-items: center;
}
.result-preview-wrapper .result-preview-header_logo-hospital-info-w .logo-alt-style {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0492c2;
  color: #ffffff;
  height: 40px;
  width: 40px;
  border-radius: 50%;
}
.result-preview-wrapper .result-preview-header_logo-hospital-info-w img {
  object-fit: cover;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.result-preview-wrapper .result-preview-header_logo-hospital-info-w h1 {
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0;
  color: #4f7a8e;
  word-break: break-word;
}
@media (max-width: 650px) {
  .result-preview-wrapper .result-preview-header_logo-hospital-info-w h1 {
    max-width: 350px;
    line-height: unset;
  }
}
.result-preview-wrapper .result-preview-header_logo-hospital-info-w .hospital-name-address {
  padding-left: 8px;
  display: flex;
}
.result-preview-wrapper .result-preview-header_logo-hospital-info-w .hospital-name-address span {
  font-weight: 700;
}
.result-preview-wrapper .result-preview-header_logo-hospital-info-w > div {
  display: flex;
  flex-direction: column;
}
.result-preview-wrapper .result-preview-header_logo-hospital-info-w > div p {
  display: flex;
  align-items: center;
  line-height: 25px;
}
.result-preview-wrapper .result-preview-header_logo-hospital-contact-w {
  display: flex;
  flex-flow: column;
  justify-content: center;
  font-weight: bold;
}
@media (max-width: 650px) {
  .result-preview-wrapper .result-preview-header_logo-hospital-contact-w {
    flex-wrap: wrap;
  }
}
.result-preview-wrapper .patient-sample-result {
  display: flex;
  border-top: 2px solid #a8a7a7;
  border-bottom: 2px solid #a8a7a7;
}
.result-preview-wrapper .patient-sample-result > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  line-height: 20px;
}
.result-preview-wrapper .patient-sample-result > div:nth-child(-n+2) {
  border-right: 1px solid rgba(128, 128, 128, 0.7);
}
@media (max-width: 650px) {
  .result-preview-wrapper .patient-sample-result {
    flex-direction: column;
  }
}
.result-preview-wrapper .listing_wrapper .listing-component-item-flex {
  min-height: 20px;
  max-height: 60px;
  margin: 2px 0;
}
.result-preview-wrapper .result-list {
  display: flex;
  flex-direction: column;
  background: #fafafa;
  margin: 10px 0;
  padding: 3px;
  border: 2px solid rgba(128, 128, 128, 0.7);
}
.result-preview-wrapper .result-list .test-dept-wrapper {
  display: flex;
  width: 100%;
}
.result-preview-wrapper .result-list .listing_wrapper {
  border: 1px solid #3f3d3d;
  border-top: none;
}
.result-preview-wrapper .result-list .listing_wrapper .listing-component-item-flex {
  border-bottom: 0.5px solid #3f3d3d;
  margin: 0;
}
.result-preview-wrapper .result-list .listing_wrapper .listing-component-item-flex:hover {
  outline: none;
}
.result-preview-wrapper .result-list > h1 {
  border: 1px solid #0492c2;
  background-color: #fafafa;
  width: 100%;
  padding: 0.5rem 0;
  text-align: center;
}
.result-preview-wrapper_lab-test-result-table label {
  display: inline-block;
  margin-bottom: 10px;
  border: 1px solid rgba(128, 128, 128, 0.7);
  padding: 3px;
}
.result-preview-wrapper_lab-test-result-table label, .result-preview-wrapper_lab-test-result-table b {
  font-size: 12px;
}
.result-preview-wrapper_lab-test-result-table table {
  width: 100%;
  border-collapse: collapse;
}
.result-preview-wrapper_lab-test-result-table table tr, .result-preview-wrapper_lab-test-result-table table td {
  font-size: 14px;
}
.result-preview-wrapper_lab-test-result-table table thead {
  border: 1px solid gray;
  margin-bottom: 5px;
}
.result-preview-wrapper_lab-test-result-table table thead tr {
  border: 1px solid rgba(128, 128, 128, 0.7);
  font-weight: bold;
}
.result-preview-wrapper_lab-test-result-table table tbody tr {
  border-bottom: 1px solid rgba(128, 128, 128, 0.7);
  margin: 3px 0;
}
.result-preview-wrapper_lab-test-result-table table tbody tr td {
  padding: 3px 0;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.patient_history {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  margin-top: 1rem;
}
.patient_history-old_transaction_history_body {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding: 1rem 0;
  width: auto;
}
.patient_history p {
  font-size: 1rem;
  line-height: 105%;
  color: #3f3d3d;
  text-align: center;
  font-weight: 500;
  word-wrap: break-word;
  text-wrap: wrap;
}
.patient_history-years_list {
  margin-top: 1rem;
  position: relative;
}
.patient_history .med-his-dropdown-w {
  display: flex;
  align-items: center;
  justify-content: center;
}
.patient_history .med-his-dropdown-w .dropdown-component-container {
  width: fit-content;
}
.patient_history .med-his-dropdown-w .dropdown-component-container .dropdown-content-wrapper {
  width: fit-content;
  min-width: 180px;
}
.patient_history .med-his-dropdown-w .dropdown-component-container .options-wrapper {
  min-width: inherit;
}
.patient_history .med-his-custom-h-w {
  max-width: 500px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.calendar_dropdown {
  position: relative;
}
.calendar_dropdown .calendar-design-w {
  display: flex;
  flex-flow: column;
  position: absolute;
  overflow-y: scroll;
  max-height: 300px;
  outline: 1px solid #0492c2;
  margin-top: 5px;
}
.calendar_dropdown .calendar-design-w .calendar-years-content {
  min-width: 125px;
}
.calendar_dropdown .calendar-design-w .calendar-years-content .calendar_dropdown-w li {
  text-align: center;
  padding: 6px 0;
  cursor: pointer;
}
.calendar_dropdown .calendar-design-w .calendar-years-content .calendar_dropdown-w li:hover {
  color: #ffffff;
  background-color: #0492c2;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.yearly_folder .yearly-custom-header-w {
  max-width: 500px;
}
.yearly_folder-months {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 1.5rem 1rem;
  animation: show_card 0.3s ease-in-out;
  width: 100%;
  height: 100%;
}
@keyframes show_card {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.yearly_folder-months[data-isopen=true] {
  display: grid;
}
.yearly_folder-months-month {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
}
.yearly_folder-folder_icon {
  position: relative;
  height: 87px;
  cursor: pointer;
}
.yearly_folder-folder_icon .count {
  position: absolute;
  right: 5px;
  color: #ffffff;
  background: green;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  padding: 0.4rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.6rem;
}
.yearly_folder .month {
  color: #3f3d3d;
  font-weight: 500;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.custom_header {
  cursor: pointer;
  outline: 1px solid black;
}
.custom_header header {
  background-color: #0492c2;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  padding: 1rem;
  width: inherit;
}
.custom_header .arrow_down_icon {
  margin-left: 50px;
}
.custom_header .arrow_down_icon[data-isopen=true][data-rotate="180"] {
  transform: rotate(180deg);
}
.custom_header .arrow_down_icon[data-isopen=true][data-rotate="90"] {
  transform: rotate(-90deg);
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.add-history-component {
  cursor: default;
}
.add-history-component .add-new-old-record-w h3 {
  text-align: center;
  font-style: italic;
}
.add-history-component .new-old-record-form-container {
  margin-top: 30px;
  text-align: center;
}
.add-history-component .upload_btn {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.add-history-component .upload_btn input[type=file] {
  display: none;
  outline: 1px solid black;
}
.add-history-component .upload_btn label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background-color: #0492c2;
  padding: 8px;
  line-height: 12px;
  min-width: 130px;
  min-height: 46px;
  margin: 20px auto;
}
.add-history-component .upload_btn label:hover {
  cursor: pointer;
}
.add-history-component .rename-file-hint {
  font-style: italic;
  font-size: 14px;
  padding: 2px;
  margin: 20px 0;
}
.add-history-component .new-file-label-input-w {
  display: flex;
}
.add-history-component .add-new-list-file-names-w {
  text-decoration: none;
  margin: 10px auto;
  padding: 8px;
  list-style: none;
  outline: 2px solid rgba(128, 128, 128, 0.7);
  width: 200px;
}
.add-history-component .upload-new-record-btn-w {
  text-align: right;
  padding-right: 20px;
}.history-component-container {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
}
.history-component-container .history-list-folder-icon-w {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.history-component-container .history-list-folder-icon-w span {
  max-width: 60px;
  max-height: 60px;
}
.history-component-container .med-his-record-filename-w {
  display: flex;
  justify-content: flex-start;
  max-width: fit-content;
}
.history-component-container .med-his-record-filename-w p {
  flex: 1;
}
.history-component-container .med-his-record-filename-w:hover {
  cursor: pointer;
}
.history-component-container .med-his-record-filename-w-icon-name {
  margin: 1rem;
}
.history-component-container .med-his-record-filename-w-icon-name p {
  padding: 5px 0;
}
.history-component-container .medical-history-list-view-file {
  display: flex;
  justify-content: center;
  align-items: center;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.section_divider_wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 10px 0;
}

.blue_section_divider_bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 30px;
  background-color: #0492c2;
  justify-content: center;
  padding-right: 1rem;
  position: relative;
  margin: 20px 0;
}
.blue_section_divider_bar span {
  font-size: 18.68px;
  line-height: 28.01px;
}

.rotate_arrow_down {
  transform: rotate(0deg);
}

.rotate_arrow_up {
  transform: rotate(180deg);
}

.section_arrow_pointer {
  position: absolute;
  right: 1rem;
}

.clickable {
  cursor: pointer;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.medical_history_card_wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #d9d9d9;
  box-shadow: 6px 4px 8px 4px rgba(0, 0, 0, 0.2509803922);
  padding: 1rem;
  margin: 10px 0;
}
.medical_history_card_wrapper .view_session_btn {
  margin-left: auto;
}
.medical_history_card_wrapper .session_ended_btn_color button {
  background-color: #000000;
}

.medical_history_card_clinic_details {
  display: flex;
  flex-direction: column;
  width: fit-content;
}
@media (max-width: 960px) {
  .medical_history_card_clinic_details {
    width: 100%;
  }
}

.medical_history_card_date_and_time {
  display: flex;
  align-items: center;
  width: 30%;
  gap: 0.5rem;
}
@media (max-width: 960px) {
  .medical_history_card_date_and_time {
    width: 100%;
  }
}

.observation_cards {
  display: flex;
  align-items: center;
  gap: 4rem;
  flex-wrap: wrap;
}
.observation_card_wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 29%;
}
@media (max-width: 960px) {
  .observation_card_wrapper {
    width: 100%;
  }
}

.observation_card_title {
  font-size: 16px;
  font-weight: bold;
  line-height: 11.67px;
}

.observation_card_content {
  background: #ffffff;
  width: 100%;
  aspect-ratio: 246/91;
  border-radius: 3.89px;
  padding: 0.5rem;
}
.observation_card_content li {
  margin-bottom: 10px;
  list-style-position: inside;
}
@media (max-width: 960px) {
  .observation_card_content {
    width: 100%;
  }
}

.medical_history_card_check_boxes {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.medical_history_card_check_boxes .show_password_wrapper {
  pointer-events: none;
  margin-left: 0;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.patient_medical_history_wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.due_payment_section {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
}

.patient_medical_history_payment_details {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
@media (max-width: 960px) {
  .patient_medical_history_payment_details {
    flex-direction: column;
  }
}

.patient_medical_history_payment_details_left {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /*.hospital_info_para:nth-of-type(3) {
    color: #f11348 !important;
  }*/
}
@media (max-width: 960px) {
  .patient_medical_history_payment_details_left {
    width: 100%;
  }
  .patient_medical_history_payment_details_left p {
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

.patient_medical_history_payment_details_right {
  display: flex;
  align-items: center;
  gap: 1rem;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.service-table {
  border: 1px solid black;
  border-radius: 8px;
  width: 100%;
  padding: 10px;
}
.service-table tr th {
  width: 50px;
  white-space: nowrap;
  padding: 0 10px;
  text-align: center;
}
.service-table tr td {
  padding: 10px 5px;
  text-align: center;
}
.service-table tr td p {
  line-height: 22px;
}
.service-table tr.border_bottom td {
  border-bottom: 1px solid #3f3d3d;
}

.service-table-wrapper {
  margin: 10px 0 20px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.service-table-wrapper h4 {
  font-size: medium;
  margin-bottom: 15px;
}

.payments-component .button-component .active-state-btn {
  background-color: white;
}
.payments-component .button-component .active-state-btn b {
  color: black;
}
.payments-component .payment-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  color: black;
  padding: 8px;
  min-width: 100px;
}
.payments-component .cart-items-count {
  padding-left: 8px;
  color: #0492c2;
}

.patient-payment-box {
  display: flex;
  flex-flow: column;
  width: 100%;
}

.patient-payment-history-section {
  display: flex;
  flex-flow: column;
}

.patient-current-payment-state h1 {
  font-size: 20px;
  border-bottom: 2px solid #3f3d3d;
  width: fit-content;
  margin-bottom: 10px;
  margin-top: 20px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.invoice-component {
  display: block;
  line-height: 24px;
  width: 100%;
}

@media screen and (min-width: 960px) {
  .invoice-component-layout {
    padding: 0 30px;
  }
}

.added-items-headline p {
  font-weight: bold;
}

.invoice-billing-wrapper h3 {
  background-color: #0492c2;
  text-align: center;
  font-size: 20px;
  color: #ffffff;
  margin: 20px 0;
  padding: 10px 0;
}

.invoice-add-sales-services-wrapper {
  display: flex;
  flex-flow: row;
  padding: 5px 10px;
}
.invoice-add-sales-services-wrapper p {
  flex: 1;
  text-align: center;
  border-bottom: 2px solid #3f3d3d;
}

.remove-bottom-border p {
  border-bottom: none;
}

.invoice-table-divider {
  display: flex;
}

.invoice-table-divider .width-97-percent, .added-items-headline .width-97-percent {
  width: 97%;
}
.invoice-table-divider .width-3-percent, .added-items-headline .width-3-percent {
  width: 3%;
}

.add-bottom-border p {
  border-bottom: 1px solid #0492c2;
  width: fit-content;
}

.remove-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.remove-item:hover {
  cursor: pointer;
  font-weight: bold;
  color: #b24d4d;
}

.instalment-amount-paid-wrapper {
  display: flex;
  justify-content: flex-end;
}
.instalment-amount-paid-wrapper .input-field-wrapper {
  max-width: 180px;
}
.instalment-amount-paid-wrapper .input-field-wrapper input {
  max-width: 100px;
}

.invoice-calculations {
  display: flex;
  flex-flow: row;
  margin: 20px 0;
}

.width-50-l-percent {
  width: 0;
}
@media screen and (min-width: 650px) {
  .width-50-l-percent {
    width: 50%;
  }
}

.width-50-r-percent {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  width: 100%;
}
@media screen and (min-width: 650px) {
  .width-50-r-percent {
    width: 49%;
    justify-content: space-between;
    border-top: 1px solid #0492c2;
    border-bottom: 1px solid #0492c2;
  }
}

.invoice-calculations-left {
  display: flex;
  flex-flow: column;
  min-width: 140px;
  text-align: justify;
}

.invoice-calculations-right {
  display: flex;
  flex-flow: column;
  align-items: center;
}
@media screen and (min-width: 1200px) {
  .invoice-calculations-right {
    align-items: flex-start;
    min-width: 140px;
  }
}

.invoice-buttons-wrapper {
  display: flex;
  justify-content: space-around;
  margin: 30px 0;
}

.add-service-or-sale {
  margin-bottom: 20px;
}
.add-service-or-sale .search-bar-input-icon-wrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
}
.add-service-or-sale .search-bar-input, .add-service-or-sale .input-error-wrapper {
  width: 80%;
}
.add-service-or-sale:hover {
  cursor: pointer;
}

.add-filtered-service-wrapper {
  background-color: #0492c2;
  color: white;
}

.filter-service {
  box-shadow: 0 0 0 100000px rgba(0, 0, 0, 0.2);
}
.filter-service:hover {
  cursor: pointer;
  outline: 1px solid #0492c2;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.invoice-summary-component {
  display: block;
}

.invoice-summary-content-wrapper {
  margin-top: 20px;
}

.invoice-summary-headline {
  background-color: #0492c2;
  color: #ffffff;
}
.invoice-summary-headline p {
  font-weight: bold;
}

.invoice-summary-table {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: left;
  justify-self: center;
  min-height: 25px;
  outline: 1px solid rgba(128, 128, 128, 0.7);
  margin: 8px 0;
  width: 100%;
}
@media screen and (min-width: 960px) {
  .invoice-summary-table {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}
.invoice-summary-table p {
  display: flex;
  width: 200px;
  word-break: break-word;
  text-align: center;
  align-items: center;
  justify-content: center;
  min-height: 30px;
}

.date-of-service {
  text-align: left;
}

.invoice-summary-total-section-wrapper {
  background-color: #e7e7e7;
  margin-top: 30px;
  padding: 10px 0;
}
.invoice-summary-total-section-wrapper .summary-total-paid-balance {
  display: flex;
  justify-content: flex-end;
  padding-right: 4.5rem;
  gap: 1rem;
}
.invoice-summary-total-section-wrapper .summary-total-paid-balance-left {
  min-width: 10rem;
}

.thank-you-msg {
  display: flex;
  flex-flow: row;
  align-items: center;
  margin-top: 30px;
}
.thank-you-msg img {
  width: 40px;
  height: 45px;
}
.thank-you-msg .align-thank-you-txt {
  position: relative;
  top: -7px;
  padding-left: 10px;
}

@media print {
  button {
    display: none;
  }
}
.invoice-summary-btn-wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
  margin-bottom: 15px;
}

.invoice-summary-send-to-email .modal-2 {
  width: 50%;
  height: 40%;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.invoice-header-wrapper {
  display: block;
}

.invoice-company-info-section {
  display: flex;
  flex-flow: row;
  padding-bottom: 20px;
  justify-content: space-between;
}
@media screen and (min-width: 960px) {
  .invoice-company-info-section {
    align-items: flex-end;
  }
}

.company-info-box {
  display: flex;
  flex-flow: column;
  width: 100%;
  text-align: left;
  min-height: 10px;
}
@media screen and (min-width: 650px) {
  .company-info-box {
    max-width: 290px;
  }
}

.invoice-logo-company-name {
  display: inline-flex;
}
.invoice-logo-company-name h3 {
  font-size: 20px;
  padding-left: 20px;
}
.invoice-logo-company-name img {
  width: 30px;
  height: 30px;
}

.invoice-customer-info-section {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  text-align: left;
}

.invoice-payment-bar-wrapper {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 10px;
}
@media screen and (min-width: 960px) {
  .invoice-payment-bar-wrapper {
    margin-top: 50px;
    flex-flow: row;
    justify-content: space-between;
    height: fit-content;
  }
}

.invoice-details-left-right {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  min-width: 180px;
  height: fit-content;
  text-align: left;
}

.invoice-details-left p {
  font-weight: bold;
}

.payment-status-method-wrapper {
  display: flex;
  margin-top: 20px;
  text-align: left;
}
.payment-status-method-wrapper .left-pad-selected-options {
  padding-left: 10px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.payment-bar-component {
  display: block;
}

.payment-bar-checkboxes-wrapper {
  display: flex;
  border: 1px solid #3f3d3d;
  border-radius: 10px;
  padding: 8px 10px;
  max-width: fit-content;
}
.payment-bar-checkboxes-wrapper b {
  font-weight: unset;
  padding: 0 2px;
}

.payment-bar-checkboxes-mapper {
  padding: 0 2px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.department-component .options-wrapper {
  min-width: 100%;
}
.department-component .delete-department-button, .department-component .deactivate-department-button {
  justify-self: flex-end;
  background-color: #e53935;
  border: none;
}
.department-component .delete-department-button:hover, .department-component .deactivate-department-button:hover {
  background-color: #c62828;
}
.department-component .reactivate-department-button {
  justify-self: flex-end;
  background-color: #43a047;
  border: none;
}
.department-component .reactivate-department-button:hover {
  background-color: #388e3c;
}
.department-component .listing-component-item-flex p, .department-component .listing-component-item-flex .dropdown-selected-is-valid {
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.add-department-component .department-input-wrapper {
  display: flex;
  flex-flow: column;
  row-gap: 16px;
}
.add-department-component .department-input-wrapper #add-dept-unit-btn {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 5px;
  background-color: #0492c2;
  color: white;
}
.add-department-component .department-input-wrapper #add-dept-unit-btn:hover {
  cursor: pointer;
}
.add-department-component .department-input-wrapper .department-units-section ul {
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  list-style-type: none;
}
.add-department-component .department-input-wrapper .department-units-section ul p {
  padding: 16px 10px;
  font-size: 14px;
}
.add-department-component .department-input-wrapper .department-units-section ul li {
  list-style-type: none;
  padding: 14px 0 14px 10px;
  border-bottom: 1px solid #e7e7e7;
  border-top: 1px solid #e7e7e7;
}
.add-department-component .department-input-wrapper .department-units-section ul li span {
  font-size: 14px;
}
.add-department-component .department-input-wrapper .department-units-section ul li :last-child {
  border-bottom: none !important;
}
.add-department-component .department-input-wrapper .department-units-section ul li button {
  float: right;
  padding: 1% 10px;
  line-height: 0;
  background-color: unset;
  font-size: 20px;
  margin-block: auto;
}
.add-department-component .department-input-wrapper .department-units-section ul li button:hover {
  cursor: pointer;
}
.add-department-component .department-input-wrapper .department-units-section .department-units-wrapper {
  outline: 2px solid #e7e7e7;
  background-color: #ffffff;
  min-height: fit-content;
  min-width: fit-content;
  margin-top: 10px;
}
.add-department-component .department-input-wrapper .department-units-section .department-units-wrapper #update-dept-unit:hover {
  cursor: pointer;
}
.add-department-component .department-input-wrapper .add-department-units-btn-w {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 96%;
  margin-top: -38px;
}
.add-department-component .department-input-wrapper .add-department-units-btn-w button {
  background-color: #0492c2;
  color: white;
  padding: 5px;
}
.add-department-component .department-input-wrapper .add-department-units-btn-w button:hover {
  cursor: pointer;
}
.add-department-component .add-department-units-btn-w-error {
  margin-top: -55px;
}
.add-department-component .department-btn-wrapper {
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
  margin-top: 20px;
}.admission-listing-wrapper .queue-listing .listing-component-item-flex {
  justify-content: space-around;
}
.admission-listing-wrapper .queue-listing .listing-component-items-column p {
  font-size: 15px;
}

.admissions_queue_lists {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admission_queue_list_wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.admission_queue_list_wrapper span {
  margin-left: auto;
  font-weight: 600;
  line-height: 17.17px;
  margin-top: 10px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.lab-component-w .listing-tests-display {
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.lab-form {
  font-family: Arial, sans-serif;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 10px;
  background: #fff;
}
.lab-form .goback-btn {
  margin-bottom: 2rem;
}
.lab-form .result_preview_btn {
  margin-left: auto;
  width: fit-content;
}
.lab-form .print-btn {
  display: flex;
  align-items: center;
  background: #007bff;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px 0;
}
.lab-form .print-btn svg {
  margin-right: 5px;
}
.lab-form .lab-test-form-sub-headers {
  font-size: 18px;
  margin-top: 20px;
}
.lab-form .lab-test-form-sub-headers_print-module-w .modal-2 {
  max-width: unset;
  overflow-y: scroll;
}
@media screen and (min-width: 960px) {
  .lab-form .lab-test-form-sub-headers_print-module-w .modal-2 {
    height: 700px;
    width: 1100px;
  }
}
@media screen and (min-width: 1800px) {
  .lab-form .lab-test-form-sub-headers_print-module-w .modal-2 {
    height: 900px;
    width: 1200px;
  }
}
.lab-form_headline-label {
  display: flex;
  margin-top: 10px;
  font-weight: bold;
  width: fit-content;
  color: orange;
}
.lab-form .lab-tests {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.lab-form .lab-test {
  border: 0.14px solid #000000;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 10px;
}
.lab-form .lab-test .lab-test-card {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
  cursor: pointer;
}
@media (max-width: 960px) {
  .lab-form .lab-test .lab-test-card {
    flex-wrap: wrap;
  }
}
.lab-form .lab-test .lab-test-list-card-content {
  width: 100%;
}
.lab-form .lab-test .lab-test-list-card-content [title*=not_started] {
  color: #575a59;
}
.lab-form .lab-test .lab-test-list-card-content [title*=in_progress] {
  color: #0492c2;
}
.lab-form .lab-test .lab-test-list-card-content [title*=completed] {
  color: green;
}
.lab-form .lab-test .lab-test-list-card-content [title*=collected] {
  color: #fe996c;
}
.lab-form .lab-test .lab-test-list-card-content .lab-list-dropdown {
  min-width: 100%;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.lab-test-card-wrapper {
  border: 1px solid #000000 !important;
  background: #f7f8f9;
}
.lab-test-card-wrapper .test-instruction {
  display: flex;
  align-items: center;
  font-weight: 300;
  font-style: italic;
  border: 2px solid rgba(128, 128, 128, 0.7);
  border-radius: 8px;
  padding: 5px;
  min-height: 50px;
}
.lab-test-card-wrapper .lab-test-card-content-headers {
  margin-bottom: 10px;
  font-weight: 600;
}
.lab-test-card-wrapper .lab-pending .dropdown-selected {
  border: 2px solid #eba352;
}
.lab-test-card-wrapper .lab-successful .dropdown-selected {
  border: 2px solid #47b892;
}
.lab-test-card-wrapper .close-accordion {
  position: absolute;
  top: 0;
  right: 0;
  border-top-right-radius: 10px;
}
.lab-test-card-wrapper .close-accordion:hover {
  cursor: pointer;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.lab-test-form-wrapper {
  font-family: Arial, sans-serif;
  border-radius: 8px;
  background: #f9f9f9;
  margin-top: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.lab-test-form-wrapper .lab-test-form-content {
  display: flex;
  flex-direction: column;
  border: 2px solid rgba(128, 128, 128, 0.7);
  border-radius: 8px;
}
.lab-test-form-wrapper .lab-test-form-content h1 {
  margin: 0 auto;
  font-size: 18px;
  border-bottom: 2px solid rgba(128, 128, 128, 0.7);
  text-align: center;
}
.lab-test-form-wrapper .extra-fields-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.lab-test-form-wrapper .extra-result-data-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(128, 128, 128, 0.5);
  padding: 1rem 0.5rem;
}
.lab-test-form-wrapper .extra-result-data-wrapper button {
  padding: 0.5rem;
  min-height: auto;
  min-width: auto;
}
.lab-test-form-wrapper .lab-test-form-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px;
  border-bottom: 1px solid #ddd;
  justify-content: space-between;
  flex-wrap: wrap;
}
.lab-test-form-wrapper .lab-test-form-row .options-btns-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lab-test-form-wrapper .lab-test-form-row .options-btns-wrapper button {
  padding: 0.5rem;
  min-height: auto;
  min-width: auto;
}
.lab-test-form-wrapper .lab-test-form-row .radio-group-wrapper {
  padding: 0.5rem 0;
}
.lab-test-form-wrapper .lab-test-form-row > div {
  width: 23% !important;
}
.lab-test-form-wrapper .lab-test-form-row > h4 {
  width: 15%;
}
.lab-test-form-wrapper .lab-test-form-row .dropdown-container {
  min-width: auto;
}
.lab-test-form-wrapper .lab-test-form-row .result-options-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lab-test-form-wrapper .lab-test-form-row label {
  font-weight: bold;
  min-width: 160px;
}
.lab-test-form-wrapper .lab-test-form-row select,
.lab-test-form-wrapper .lab-test-form-row input {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.lab-test-form-wrapper .lab-test-form-row .button-component {
  margin-top: auto;
  margin-left: auto;
  width: fit-content !important;
}
.lab-test-form-wrapper .lab-test-form-row .button-component button {
  min-width: auto;
  min-height: auto;
  padding: 0.5rem;
}
@media (max-width: 960px) {
  .lab-test-form-wrapper .lab-test-form-row {
    flex-direction: column;
  }
  .lab-test-form-wrapper .lab-test-form-row > div {
    width: 100% !important;
  }
}
.lab-test-form-wrapper .lab-test-form-bottom-section {
  padding: 10px;
}
.lab-test-form-wrapper .lab-test-form-bottom-section_btn-w {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
@media (max-width: 960px) {
  .lab-test-form-wrapper .lab-test-form-bottom-section_btn-w {
    flex-direction: column;
    gap: 0.5rem;
  }
  .lab-test-form-wrapper .lab-test-form-bottom-section_btn-w > div {
    width: 100%;
  }
  .lab-test-form-wrapper .lab-test-form-bottom-section_btn-w > div button {
    width: 100%;
  }
}
@media (max-width: 960px) {
  .lab-test-form-wrapper .lab-test-form-bottom-section textarea {
    min-width: auto;
    width: 100%;
  }
}
.lab-test-form-wrapper .lab-test-form-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid rgba(128, 128, 128, 0.7);
  border-radius: 8px;
  margin: 10px;
}
.lab-test-form-wrapper .lab-test-form-section .checkboxes {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.lab-test-form-wrapper .lab-test-form-section .checkboxes #rejected-check {
  accent-color: #b24d4d;
}
.lab-test-form-wrapper .lab-test-form-section .checkboxes > div {
  width: 100%;
}
@media (max-width: 960px) {
  .lab-test-form-wrapper .lab-test-form-section .checkboxes {
    flex-direction: column;
  }
}
.lab-test-form-wrapper .lab-test-form-section h4 {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
}
.lab-test-form-wrapper .lab-test-form-section textarea {
  width: 100%;
  height: 60px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}
.lab-test-form-wrapper .lab-test-form-section p {
  font-size: 14px;
  color: #333;
  margin-bottom: 20px;
}/********** Screen Sizes **********/
/*********** Colors *************/
/************ Width ************/
/********+*** Font size ***********/
/*********** font style ************/
/*********** margin and padding **********/
/*********** margin and padding **********/
/* top left */
/*********** global classes **************/
.disable-section {
  pointer-events: none;
  background: #e7e7e7;
  color: rgba(128, 128, 128, 0.5);
}

.unset-disable-section {
  pointer-events: auto;
  color: #3f3d3d;
}
.unset-disable-section:hover {
  cursor: default;
}

body,
html,
#root {
  height: 100%;
}

.app-wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}

button,
input {
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  outline: none;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}

html {
  font-size: 1.1111111111vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
@media screen and (max-width: 1440px) {
  html {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 1200px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (max-width: 950px) {
  html {
    font-size: 1.6842105263vw;
  }
}
@media screen and (max-width: 768px) {
  html {
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 485px) {
  html {
    font-size: 3.2989690722vw;
  }
}

.patient-lab-info-wrapper .lab-info-list-header {
  margin-bottom: 10px;
  font-weight: 600;
}
.patient-lab-info-wrapper .patient-lab-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
}
.patient-lab-info-wrapper .patient-lab-info-header h2 {
  margin: 0;
  font-size: 20px;
}
.patient-lab-info-wrapper .patient-lab-info-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px;
}
.patient-lab-info-wrapper .patient-lab-info-info .patient-lab-info-priority {
  font-weight: bold;
}
.patient-lab-info-wrapper .patient-lab-info-info .patient-lab-info-priority [title*=emergency] {
  color: #b24d4d;
  border-bottom: 1px solid #b24d4d;
}
.patient-lab-info-wrapper .patient-lab-info-info .patient-lab-info-priority [title*=normal] {
  color: green;
  border-bottom: 1px solid green;
}
.patient-lab-info-wrapper .patient-lab-info-info .patient-lab-info-priority [title*=high] {
  color: #c19347;
  border-bottom: 1px solid #c19347;
}
.patient-lab-info-wrapper .lab-pending .dropdown-selected {
  border: 2px solid #eba352;
}
.patient-lab-info-wrapper .lab-successful .dropdown-selected {
  border: 2px solid #47b892;
}