/*CSS Table Of Content Ends Here*/
:root {
  --body: #fff;
  --black-clr: #000000;
  --white-clr: #fff;
  --pragraph-clr: #706767;
  --theme-clr: #0754B5;
  --theme-clr2: #246BFF;
  --theme-clr3: #07C9F7;
  --theme-clr4: #BCCBF7;
  --danger-clr: #ED2A1C;
  --success-clr: #10C125;
  --text-success: #1CED35;
  --text-warning: #EDCA1C;
  --text-clr: #6A6F84;
  --text-clr2: #F5F5F5;
}

/* --------------------------------------------
    Template Default Fonts & Fonts Styles
 ---------------------------------------------- */
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Thin.otf") format("opentype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-ExtraLight.otf") format("opentype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Light.otf") format("opentype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Regular.otf") format("opentype");
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Bold.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
html {
  scroll-behavior: initial !important;
}

body {
  font-size: 16px;
  font-weight: normal;
  background-color: #f5f5f5;
  padding: 0;
  margin: 0;
  font-family: "Pretendard";
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

button {
  border: none;
  background-color: transparent;
  padding: 0;
}

input:focus {
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
  padding: 0;
  transition: all 0.4s ease-in-out;
  font-family: "Pretendard";
}

p {
  margin: 0;
}

a {
  text-decoration: none;
}

.d-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.heading-font {
  font-family: "Pretendard";
}

.fs-5px {
  font-size: 5px;
}

.fs-6px {
  font-size: 6px;
}

.fs-7px {
  font-size: 7px;
}

.fs-8px {
  font-size: 8px;
}

.fs-9px {
  font-size: 9px;
}

.fs-10px {
  font-size: 10px;
}

.fs-11px {
  font-size: 11px;
}

.fs-12px {
  font-size: 12px;
}

.fs-13px {
  font-size: 13px;
}

.fs-14px {
  font-size: 14px;
}

.fs-15px {
  font-size: 15px;
}

.fs-16px {
  font-size: 16px;
}

.fs-17px {
  font-size: 17px;
}

.fs-18px {
  font-size: 18px;
}

.fs-19px {
  font-size: 19px;
}

.fs-20px {
  font-size: 20px;
}

.fs-21px {
  font-size: 21px;
}

.fs-22px {
  font-size: 22px;
}

.fs-23px {
  font-size: 23px;
}

.fs-24px {
  font-size: 24px;
}

.fs-25px {
  font-size: 25px;
}

.fs-26px {
  font-size: 26px;
}

.fs-27px {
  font-size: 27px;
}

.fs-28px {
  font-size: 28px;
}

.fs-29px {
  font-size: 29px;
}

.fs-30px {
  font-size: 30px;
}

.fs-31px {
  font-size: 31px;
}

.fs-32px {
  font-size: 32px;
}

.fs-33px {
  font-size: 33px;
}

.fs-34px {
  font-size: 34px;
}

.fs-35px {
  font-size: 35px;
}

.fs-36px {
  font-size: 36px;
}

.fs-37px {
  font-size: 37px;
}

.fs-38px {
  font-size: 38px;
}

.fs-39px {
  font-size: 39px;
}

.fs-40px {
  font-size: 40px;
}

.fs-41px {
  font-size: 41px;
}

.fs-42px {
  font-size: 42px;
}

.fs-43px {
  font-size: 43px;
}

.fs-44px {
  font-size: 44px;
}

.fs-45px {
  font-size: 45px;
}

.fs-46px {
  font-size: 46px;
}

.fs-47px {
  font-size: 47px;
}

.fs-48px {
  font-size: 48px;
}

.fs-49px {
  font-size: 49px;
}

.fs-50px {
  font-size: 50px;
}

/* Text Color Utilities */
.text-body {
  color: var(--body);
}

.text-black {
  color: var(--black-clr);
}

.text-white {
  color: var(--white-clr);
}

.text-pragraph {
  color: var(--pragraph-clr);
}

.text-theme {
  color: var(--theme-clr);
}

.text-themei {
  color: var(--theme-clr) !important;
}

.text-theme2 {
  color: var(--theme-clr2);
}

.text-theme3 {
  color: var(--theme-clr3);
}

.text-theme4 {
  color: var(--theme-clr4);
}

.text-danger {
  color: var(--danger-clr);
}

.text-success {
  color: var(--success-clr);
}

.text-success2 {
  color: var(--text-success);
}

.text-clr {
  color: var(--text-clr);
}

.text-clr2 {
  color: var(--text-clr2);
}

.text-warning {
  color: var(--text-warning);
}

/* Background Colors */
.bg-body {
  background-color: var(--body);
}

.bg-black {
  background-color: var(--black-clr);
}

.bg-white {
  background-color: var(--white-clr);
}

.bg-pragraph {
  background-color: var(--pragraph-clr);
}

.bg-theme {
  background-color: var(--theme-clr);
}

.bg-theme2 {
  background-color: var(--theme-clr2);
}

.bg-theme3 {
  background-color: var(--theme-clr3);
}

.bg-theme4 {
  background-color: var(--theme-clr4);
}

.bg-danger {
  background-color: var(--danger-clr);
}

.bg-success {
  background-color: var(--success-clr);
}

.bg-success2 {
  background-color: var(--text-success);
}

.bg-clr {
  background-color: var(--text-clr);
}

.text-theme-hover:hover {
  color: var(--theme-clr);
}

.bg-theme-hover:hover {
  background-color: var(--theme-clr);
}

.header-sections {
  width: 100%;
  z-index: 100;
  z-index: 99;
  position: fixed;
  background-color: #1e4ed8;
  top: 0;
  left: 0;
}

.header-section {
  background-color: var(--white-clr);
  padding: 28px 20px;
  position: sticky;
  top: 0;
  z-index: 9;
}
@media (max-width: 767px) {
  .header-section {
    padding: 18px 16px;
  }
  .header-section .logo-area .logo {
    max-width: 110px;
  }
  .header-section .logo-area .logo img {
    width: 100%;
  }
}

.main-header-section {
  padding: 15px 21px 0;
}
.main-header-section .main-header {
  padding: 24px 27px;
  background: linear-gradient(90deg, #0e0070 0%, #69dcf6 100%);
  border-radius: 8px;
  gap: 10px;
}
.main-header-section .main-header .user-soon-area {
  margin-bottom: 10px;
}
.main-header-section .main-header .user-soon-area .user {
  font-size: 20px;
  font-weight: 700;
  color: var(--white-clr);
}
.main-header-section .main-header .user-soon-area .user-comper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.main-header-section .main-header .user-soon-area .user-comper .line {
  width: 1px;
  height: 16px;
  background-color: #b3b4b8;
}
.main-header-section .main-header .user-course-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.main-header-section .main-header .user-course-wrap .user-couse-item {
  background: rgba(245, 245, 245, 0.2);
  border-radius: 4px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.main-header-section .main-header .user-course-wrap .user-couse-item .line {
  background-color: #b3b4b8;
  width: 1px;
  height: 12px;
}
.main-header-section .main-header .user-course-wrap .user-couse-badge {
  padding: 8px 12px;
  border-radius: 4px;
  background: rgba(245, 245, 245, 0.2);
  font-size: 12px;
  font-weight: 500;
  color: var(--white-clr);
}
@media (max-width: 1399px) {
  .main-header-section {
    padding: 10px 10px 0;
  }
}
@media (max-width: 991px) {
  .main-header-section .main-header {
    padding: 20px 16px;
  }
}

.lh-c {
  letter-spacing: -0.006em;
}

.letter-1 {
  letter-spacing: 1px;
}

.main-body-section {
  padding: 20px;
  display: flex;
  gap: 20px;
}
.main-body-section .main-side-barleft {
  width: 300px;
  min-width: 300px;
}
.main-body-section .main-side-barleft .main-side-leftinner {
  position: sticky;
  top: 100px;
}
.main-body-section .search-box {
  background-color: var(--white-clr);
  padding: 14px 16px;
  border-radius: 8px;
}
.main-body-section .search-box .title {
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--black);
}
.main-body-section .search-box .in-grp input {
  width: 100%;
  border: unset;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  font-size: 12px;
  color: #b3b4b8;
  padding: 5px 12px;
  outline: none;
}
.main-body-section .search-box:not(:last-child) {
  margin-bottom: 20px;
}
.main-body-section .lab-chart-wrap {
  padding: 14px 10px;
  background-color: var(--white-clr);
}
.main-body-section .lab-chart-wrap .table thead tr th {
  font-size: 14px;
  line-height: 16px;
  color: #6a6f84;
  padding: 11px 8px;
  font-weight: 500;
  background-color: #dfe1ea;
  vertical-align: middle;
}
.main-body-section .lab-chart-wrap .table tbody tr td {
  padding: 8.8px 8px;
  font-weight: 500;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
}
@media (max-width: 1399px) {
  .main-body-section .lab-chart-wrap .table thead tr th {
    font-size: 14px;
  }
  .main-body-section .lab-chart-wrap .table tbody tr td {
    font-size: 12px;
  }
}
.main-body-section .main-side-barright {
  width: 415px;
  min-width: 415px;
}
.main-body-section .main-side-barright .main-side-rightinner {
  position: sticky;
  top: 100px;
}
.main-body-section .main-side-barright .clinical-Summary {
  padding: 14px 19px;
  border-radius: 8px;
  margin-bottom: 20px;
  background-color: var(--white-clr);
}
@media screen and (max-width: 1700px) {
  .main-body-section .main-side-barright {
    width: 350px;
    min-width: 350px;
  }
  .main-body-section .main-side-barleft {
    width: 280px;
    min-width: 280px;
  }
}
@media (max-width: 1399px) {
  .main-body-section {
    padding: 16px 16px 0;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }
  .main-body-section .main-side-barright {
    width: calc(100% - 280px);
    min-width: calc(100% - 280px);
    margin-left: auto;
  }
  .main-body-section .main-side-barright .clinical-Summary {
    padding: 14px 16px;
    margin-bottom: 16px;
  }
  .main-body-section .main-side-barright .clinical-Summary button,
  .main-body-section .main-side-barright .clinical-Summary .fs-14px {
    font-size: 12px;
  }
  .main-body-section .main-body {
    width: calc(92% - 179px);
    min-width: calc(92% - 179px);
  }
  .main-body-section .search-box {
    margin-bottom: 16px;
  }
  .main-body-section .main-side-barleft {
    width: 250px;
    min-width: 250px;
  }
}
@media (max-width: 1199px) {
  .main-body-section {
    padding: 10px 10px 0;
  }
  .main-body-section .main-body {
    width: 100%;
    min-width: 100%;
  }
  .main-body-section .main-side-barleft {
    order: 1;
    width: 50%;
  }
  .main-body-section .main-side-barright {
    width: 48%;
    min-width: 48%;
    margin-left: auto;
  }
}
@media (max-width: 767px) {
  .main-body-section .main-body .chart-area-wrap {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-evenly;
  }
  .main-body-section .main-body .chart-area-wrap .button-area {
    width: 48% !important;
    max-width: 100%;
  }
  .main-body-section .main-body .chart-area-wrap .button-area.first {
    order: 1;
  }
  .main-body-section .main-body .response-chart {
    overflow-x: auto;
  }
  .main-body-section .main-body .record-responsive {
    overflow-x: auto;
  }
  .main-body-section .main-body .record-responsive table thead tr th {
    text-wrap: nowrap;
  }
  .main-body-section .main-side-barleft {
    order: 1;
    width: 100%;
  }
  .main-body-section .main-side-barright {
    width: 100%;
    min-width: 100%;
    margin: 0 auto;
  }
}

.cmn-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--black);
}
@media (max-width: 1399px) {
  .cmn-title {
    font-size: 16px !important;
  }
  .cmn-title img {
    width: 17px !important;
  }
}

.w-145 {
  width: 145px;
}

.w-225 {
  width: 225px;
  border-bottom: 1px solid #3d4c60 !important;
}

.bg-415166 {
  background-color: #415166 !important;
}

.mb-20 {
  margin-bottom: 20px;
}
@media (max-width: 1399px) {
  .mb-20 {
    margin-bottom: 16px !important;
  }
}

.p-20 {
  padding: 20px !important;
}
@media (max-width: 1399px) {
  .p-20 {
    padding: 16px !important;
  }
}
@media (max-width: 1199px) {
  .p-20 {
    padding: 14px !important;
  }
}

.mb-15 {
  margin-bottom: 15px !important;
}

.mt-15 {
  margin-top: 15px;
}

.p-14 {
  padding: 14px !important;
}

.service-sponsor {
  display: flex;
  align-items: center;
  gap: 11px;
}
.service-sponsor .service-sponsor-item {
  width: 100%;
  border: 1px solid #c1c3ca;
  padding: 6px 10px;
  border-radius: 4px;
  transition: all 0.4s;
}
.service-sponsor .service-sponsor-item .text-s {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* number of lines to show */
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.service-sponsor .service-sponsor-item:hover {
  background-color: var(--theme-clr);
  color: var(--white-clr) !important;
  cursor: pointer;
  border-color: var(--theme-clr);
}
.service-sponsor .service-sponsor-item:hover div,
.service-sponsor .service-sponsor-item:hover i {
  color: var(--white-clr) !important;
}
@media (max-width: 991px) {
  .service-sponsor {
    flex-wrap: wrap;
  }
  .service-sponsor .service-sponsor-item {
    width: initial !important;
    gap: 16px !important;
  }
}

.pro {
  font-size: 24px;
  line-height: 28px;
  text-align: center;
  font-weight: 800;
  color: var(--black);
}
@media (max-width: 1399px) {
  .pro {
    font-size: 18px;
  }
}

.text-B3B4B8 {
  color: #b3b4b8 !important;
}

.calender-wrap {
  padding: 10px 20px;
  display: flex;
  flex-wrap: wrap;
  border-radius: 10px;
  background-color: #eff5fe;
  gap: 8px;
}
.calender-wrap .clock-date {
  width: 35px;
  height: 41px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--white-clr);
  border-end-end-radius: 2px;
  background-color: var(--white-clr);
  text-align: center;
}
.calender-wrap .clock-date img {
  text-align: center;
  margin: 0 auto;
}
.calender-wrap .clock-date.active {
  border-color: var(--theme-clr);
}
.calender-wrap .clock-date:hover {
  cursor: pointer;
}
@media (max-width: 1399px) {
  .calender-wrap {
    padding: 10px 10px;
  }
}

.calender-text {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
}
.calender-text .c-txt {
  font-size: 12px;
  line-height: 12px;
  display: block;
  color: #6a6f84;
}

.treatment-wrapper {
  display: flex;
  gap: 20px;
}
@media (max-width: 1399px) {
  .treatment-wrapper {
    gap: 16px;
  }
}
@media (max-width: 1199px) {
  .treatment-wrapper {
    gap: 14px;
  }
}
@media (max-width: 991px) {
  .treatment-wrapper {
    flex-wrap: wrap;
  }
}

.btn-theme {
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  border-radius: 4px;
  padding: 10px 20px;
  background-color: var(--theme-clr);
  color: var(--white-clr);
  letter-spacing: 1px;
  transition: all 0.4s;
  border: 1px solid var(--theme-clr);
}
.btn-theme.btn-cmn-outline {
  border-color: #b3b4b8;
  color: var(--black);
  background-color: transparent;
}
.btn-theme:hover {
  background-color: #0765d8;
  color: var(--white-clr);
  border-color: var(--theme-clr);
}

.outline-theme-small {
  border: unset;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 4px;
  padding: 8px 20px;
  color: var(--theme-clr);
  letter-spacing: 1px;
  transition: all 0.4s;
  border: 1px solid var(--theme-clr);
  background-color: var(--white-clr);
}
.outline-theme-small:hover {
  background-color: var(--theme-clr);
  color: var(--white-clr);
}

.chart-area-wrap {
  display: flex;
  gap: 16px;
}
.chart-area-wrap .button-area {
  max-width: 184px;
  width: 100%;
}
@media (max-width: 1600px) {
  .chart-area-wrap .button-area {
    max-width: 154px;
    width: 100%;
  }
  .chart-area-wrap .button-area button {
    font-size: 12px;
  }
}

.outline-theme-sm {
  border: unset;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 4px;
  padding: 8px 14px;
  color: var(--theme-clr);
  letter-spacing: 0px;
  transition: all 0.4s;
  border: 1px solid var(--theme-clr);
  background-color: var(--white-clr);
}
.outline-theme-sm.theme-light-dark {
  background-color: var(--theme-clr);
  border-color: var(--theme-clr) !important;
  color: var(--white-clr) !important;
}
.outline-theme-sm.theme-light-sm {
  background-color: var(--theme-clr2);
  border-color: var(--theme-clr2) !important;
  color: var(--white-clr) !important;
}
.outline-theme-sm.theme-btn-sm3 {
  background-color: var(--theme-clr3);
  border-color: var(--theme-clr3) !important;
  color: var(--white-clr) !important;
}
.outline-theme-sm.theme-btn-sm4 {
  background-color: var(--theme-clr4);
  border-color: var(--theme-clr4) !important;
  color: var(--white-clr) !important;
}

.bg-D7EAFF {
  background: #d7eaff !important;
}

.text-415166 {
  color: #415166 !important;
}

.bg-1B76D3 {
  background-color: #1b76d3 !important;
}

.general-info {
  font-size: 16px !important;
  padding: 14px 14px;
  margin-bottom: 10px;
}

.hemacds-sub-chart .table {
  background-color: var(--white-clr) !important;
}
.hemacds-sub-chart .table tr td {
  background-color: var(--white-clr) !important;
  border: 1px solid #000;
  vertical-align: middle;
}
.hemacds-sub-chart .table tr td .soon-btn button:hover {
  border-color: var(--theme-clr) !important;
}
.hemacds-sub-chart .table tr td .slg-text button {
  width: 150px;
}
.hemacds-sub-chart .table tr .first-td {
  width: 115px;
}
.hemacds-sub-chart .table tr .first-td .text {
  max-width: 115px;
}
.hemacds-sub-chart .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-color-type: var(--white-clr);
  --bs-table-bg-type: var(--white-clr);
}
.hemacds-sub-chart .date-birth-wrap input {
  color: var(--black-clr);
  font-size: 13px;
  outline: none;
  padding: 4px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: initial !important;
}
.hemacds-sub-chart .date-birth-wrap .date {
  width: 32px;
  max-width: 32px;
}
.hemacds-sub-chart .date-birth-wrap .month {
  width: 40px;
  max-width: 40px;
}
.hemacds-sub-chart .date-birth-wrap .year {
  width: 55px;
  max-width: 55px;
}
.hemacds-sub-chart .date-birth-wrap .devider {
  width: 5px;
  color: var(--black-clr);
  display: flex;
}
.hemacds-sub-chart .date-birth-wrap.style2 input {
  font-size: 12px;
}
.hemacds-sub-chart .date-birth-wrap.style2 .date {
  width: 29px;
  max-width: 29px;
}
.hemacds-sub-chart .date-birth-wrap.style2 .month {
  width: 32px;
  max-width: 32px;
}
.hemacds-sub-chart .date-birth-wrap.style2 .year {
  width: 42px;
  max-width: 42px;
}
.hemacds-sub-chart .select-hospital .hospital-label {
  font-size: 11px;
  background-color: #fff;
  padding: 1px 2px;
  display: inline-block;
  position: relative;
  z-index: 1;
  margin-left: 10px;
  bottom: -12px;
}
.hemacds-sub-chart .select-hospital .btn {
  font-size: 14px;
  padding: 10px 16px;
}
.hemacds-sub-chart .select-hospital .btn:hover {
  color: var(--black-clr);
}
.hemacds-sub-chart .mt-n2 {
  margin-top: -12px;
}
.hemacds-sub-chart .sex-male-female .form-check-input {
  border-color: #c1c3ca;
}
.hemacds-sub-chart .type-anumber input {
  width: 100% !important;
}

.fs-12pxi {
  font-size: 12px !important;
}

.chart-area-sub .hemacds-sub-chart {
  overflow-x: auto !important;
}

@media screen and (max-width: 1399px) {
  .sub-hema {
    order: 1 !important;
    width: 48% !important;
    max-width: 48% !important;
  }
  .r-sub {
    width: 48% !important;
    max-width: 48% !important;
    min-width: 48% !important;
  }
}
@media screen and (max-width: 570px) {
  .sub-hema {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .r-sub {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }
}
/* Reset Bootstrap default radio styles */
.form-check-input[type=radio] {
  width: 16px;
  height: 16px;
  border: 1px solid #777 !important;
  border-radius: 50%;
  background-color: transparent;
  box-shadow: none !important;
  cursor: pointer;
  margin-right: 6px;
  position: relative;
}

/* Outer ring when checked */
.form-check-input[type=radio]:checked {
  border-color: var(--theme-clr) !important;
}

/* Inner filled dot */
.form-check-input[type=radio]:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--theme-clr);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* Double ring effect */
.form-check-input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border: 1px solid var(--theme-clr);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}/*# sourceMappingURL=main.css.map */