:root {
  /* text: header, mainTitle, templateHeader, modalheader */
  --FontSizemainHeaderTemplateHeader: 20px;
  --FontWeightHeaderTemplateHeader: 700;
  --primaryColor: #008080;
  --secondaryColor: #d9f5f5;
  --terteryColor: #cdcdcd;
  --ghostColor: #f5f8fa;
  --whiteColor: white;
  --subTitleColor: #7e8299 !important;
  --darkColorMenu: #3f1b1b;
  --fontColorMenu: #ffffff;
  --headerTextClinicalSetting: 20px;
  --headerFontweightClinicalSetting: 700;
  --headerPaddingClinicalSetting: 0px 8px;
  --templateborderRadius: 8px;
  --templateMargin: 10px 5px;
  --templatePadding: 7px 0px;
  --templatesmallheaderText: 14px;
  --templateBgcolor: #ffffff;
  /* --templateTextColor: #3f4254; */
  --templateTextColor: #464e5f;
  --templatelabelfontWeight: 600;
  --templatelabelfontSize: 12px;
  --templateBtnBorderRadius: 4px;
  --templateBtnPadding: 4px 8px;
  --templateInnerBtnColor: #fef0f0;
  --templateInnerbtnFontSize: 10px;
  --borderradius: 8px;
  --cardpadding: 15px;
  --cardflex: 1;
  --cardfdisplay: flex;
  --cardboxshadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  --cardcontent: space-between;
  --cardgap: 8px;
  --cardalign: center;
  --cardfont-size: 25px;
  --cardmarginL: 10px;
  --cardmarginT: 10px;
  --cardtotalfontsize: 22px;
  --cardcursor: pointer;
  --primaryBtnColor: #ffffff;
  --secondaryBtnColor: #008080;
  --terteryBtnColor: #000000;
  --gostBtnColor: #5e6278;
  --terteryBoarderColor: #cdcdcd;

  --svgPrimaryColor: #008080;
  --svgSecondaryColor: #d9f5f5;
  --svgTerteryColor: #3f1b1b;
}

body {
  font-family: 'Roboto' !important;
}

a {
  text-decoration: none !important;
}

.skeleton-loader {
  width: 100%;
  height: 20px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f6f6f6 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: skeleton-animation 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-animation {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* all Btns Theme ::: */
.primaryButton {
  background-color: var(--primaryColor) !important;
  color: var(--primaryBtnColor) !important;
}

.secondaryButton {
  background-color: var(--secondaryColor) !important;
  color: var(--secondaryBtnColor) !important;
}

.tertiaryButton {
  background-color: var(--terteryColor) !important;
  color: var(--terteryBtnColor) !important;
}

.ghostButton {
  background-color: var(--ghostColor) !important;
  color: var(--gostBtnColor) !important;
  border: 1px solid var(--terteryBoarderColor) !important;
}

/* ---------- */

.appHeaderColor {
  background-color: var(--primaryColor) !important;
}

.tableHeaderColor {
  background-color: var(--primaryColor) !important;
}

.appHeader {
  /* background-color: var(--primaryColor); */
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
}
/* .maindashoardcard {
  border-radius: 10px;
  background-color: var(--whiteColor);
  box-shadow: #0000001a;
} */
/*
.dashoardcard {
  display: flex;
  align-items: center;
  padding: 10px;
}
.endcardbtn {
  padding: 10px;
  font-size: 14px;
  font-weight: 599;
  text-align: left;
}
.borderbottom {
  border: 1px solid #dcdcdc;
}
.dashboardImage {
  background-color: #fff5f5;
  border-radius: 5px;
  padding: 15px;
  size: 48px;
}

.dashHeadfont {
  font-size: 24px;
  font-weight: 500;
  text-align: start;
  display: flex;
  justify-content: center;
  align-content: start;
}
.filterFont {
  display: flex;
  justify-content: end;
}

.dashboardfont {
  padding: 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 21.09px;
  text-align: left;
}

.totalnumber {
  font-size: 30px;
  font-weight: 500;
  text-align: left;   
  padding: 10px;
} */

.dashboard-wrapper {
  /* display: var(--cardflex); */
  /* justify-content: var(--cardcontent);
  gap: var(--cardgap); */
  margin-bottom: 15px;
  /* padding: var(--cardpadding); */
}
.dashboard-wrapper-clinic {
  /* display: var(--cardflex); */
  /* justify-content: var(--cardcontent); */
  /* gap: var(--cardgap); */
  margin-bottom: 15px;
  /* padding: var(--cardpadding); */
}

.dashboard-card {
  background-color: var(--fontColorMenu);
  border-radius: var(--borderradius);
  padding: var(--cardpadding);
  flex: var(--cardflex);
  box-shadow: var(--cardboxshadow);
  height: 100%;
}

.card-header {
  display: var(--cardflex);
  justify-content: var(--cardcontent);
  align-items: var(--cardalign);
}

.card-title {
  font-size: var(--cardfont-size);
  font-weight: var(--headerFontweightClinicalSetting);
  margin-left: var(--cardmarginL);
}

.filter-icon {
  margin-left: auto;
}

.card-body {
  margin-top: var(--cardmarginT);
}

.card-subtitle {
  font-size: var(--templatesmallheaderText);
  color: #888;
}

.card-data {
  margin-top: var(--cardmarginT);
}

.total-number {
  font-size: var(--cardfont-size);
  font-weight: bold;
}

.percentage {
  font-size: var(--templatelabelfontSize);
  color: var(--primaryColor);
  /* margin-left: 5px; */
}

.card-footer {
  margin-top: var(--cardmarginT);
  cursor: var(--cardcursor);
  display: var(--cardfdisplay);
  align-items: var(--cardalign);
}

/* .growth-chart {
  margin-top: 30px;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
} */

.PageHeaderTitle {
  font-size: var(--headerTextClinicalSetting);
  font-weight: var(--headerFontweightClinicalSetting);
  /* padding: var(--headerPaddingClinicalSetting); */
}

.TemplateBackgroundLayout {
  border-radius: var(--templateborderRadius);
  background-color: var(--templateBgcolor);
  margin: var(--templateMargin);
  padding: var(--templatePadding);
}

.TemplateBackgroundLayoutForm {
  border-radius: var(--templateborderRadius);
  background-color: var(--templateBgcolor);
  margin: 5px 0;
  padding: var(--templatePadding);
}

.TemplateSamllHeaderFont {
  padding: var(--headerPaddingClinicalSetting);
  font-size: var(--templatesmallheaderText);
  font-weight: var(--headerFontweightClinicalSetting);
  color: var(--templateTextColor);
}

.templatelabletext {
  font-weight: var(--templatelabelfontWeight);
  font-size: var(--templatelabelfontSize);
  color: var(--templateTextColor);
  padding: var(--headerPaddingClinicalSetting);
  margin: var(--templateMargin);
}

.TemplateInnerBtn {
  border-radius: var(--templateBtnBorderRadius);
  padding: var(--templateBtnPadding);
  background-color: var(--templateInnerBtnColor);
  color: var(--primaryColor);
  font-size: var(--templateInnerbtnFontSize);
  font-weight: var(--templatelabelfontWeight);
  border: none;
}

.toolbar {
  justify-content: end;
  padding: 10px;
  display: flex;
  gap: 10px;
}

.toolbaroption {
  border: none;
  padding: 8px 24px;
  border-radius: 8px;
}

.toolbaroption.active {
  background-color: var(--primaryColor);
  color: white; /* Change text color to white for visibility */
}

.uploadimagenborder {
  border-radius: 4px;
  border-style: dotted;
  border-color: #dcdcdc;
  width: auto;
}

.SubTitleColor {
  color: var(--subTitleColor);
}

.profileColour:hover {
  color: var(--primaryColor) !important ;
  /* background-color: var(--secondaryColor) !important; */
}

.profileColour.active {
  color: var(--primaryColor) !important ;
  /* background-color: var(--secondaryColor) !important; */
}

.profilecolour:hover {
  color: var(--primaryColor) !important ;
  background-color: var(--secondaryColor) !important;
}

.profilecolour.active {
  color: var(--primaryColor) !important ;
  background-color: var(--secondaryColor) !important;
}

.sticky-action-column {
  position: sticky;
  right: 0; /* Stick to the right */
  z-index: 2; /* Ensure it stays on top */
  background-color: white; /* Maintain table background */
  box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.1); /* Optional shadow for distinction */
}

.header-top {
  /* background:#000;
    color:#fff;
    margin-left:-20px; */
  background: var(--secondaryColor);
  color: var(--primaryColor);
  font-weight: 600;
  font-size: 16px !important;
  margin-left: -10px !important;
  width: 105%;
  /* margin-top: -10px !important; */
  height: 36px !important;
  display: flex;
  align-items: center;
}

div#kt_app_header {
  height: 48px !important;
}

div#kt_app_content_container {
  margin-top: -30px;
}

.text-color {
  color: #464e5f !important;
}

.scroll {
  height: 800px;
  overflow-y: scroll;
  z-index: 0;
}

.mutiselectItem {
  display: flex;
  height: 20px !important;
  margin: 30px;
  z-index: 0;
}

.colorBtn {
  margin-left: 1px;
  margin-right: 1px;
  margin-top: 1px;
  margin-bottom: 1px;
  padding: 1px;
  cursor: pointer;
}

.colorBtn:hover {
  transform: scale(1.1);
}

.switchViewbtnLeft {
  border-radius: 5px 0px 0px 5px;
  height: 30px;
  font-weight: 600;
  font-size: 12px;
  padding: 5px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-width: 0.5px;
  background-color: white;
}

.switchViewbtn2nd {
  height: 30px;
  font-weight: 600;
  font-size: 12px;
  padding: 5px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-width: 0.5px;
  background-color: white;
}

.switchViewbtnRight {
  border-radius: 0px 5px 5px 0px;
  height: 30px;
  font-weight: 600;
  font-size: 12px;
  padding: 5px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-width: 0.5px;
  background-color: white;
}

.switchViewbtnActive {
  color: white;
  background-color: #1b283f !important;
}

.switchViewbtnNonActive {
  color: #3f4254;
  background-color: white;
}

/* this is patient Navigation ...  */
.contentPage {
  width: 100%;
  margin: -25px;
  display: flex;
}

.PatientNav {
  width: 64px;
  height: 846px;
  display: block;
  background-color: rgb(205, 205, 205);
  box-shadow: #80808f;
  position: fixed;
  z-index: 5;
}

.PatientNavItem {
  width: 100%;
  height: 64px;
  font-weight: bold;
  font-size: small;
  margin-top: 2px;
  margin-bottom: 2px;
  font-size: 8.5px;
}

/* this is PatientChart Css aka Quick View  */

.PatientUl {
  display: flex;
  overflow-x: auto; /* Enable horizontal scroll */
  white-space: nowrap; /* Prevent wrapping of child elements */
  scrollbar-width: thin; /* Optional: Adjust scrollbar width for Firefox */
  scrollbar-color: #aaa transparent; /* Optional: Custom scrollbar color for Firefox */
  margin-top: '-30px';
}

.PatientUl::-webkit-scrollbar {
  height: 8px; /* Optional: Set the height of the scrollbar for WebKit browsers */
}

.PatientUl::-webkit-scrollbar-thumb {
  background-color: #aaa; /* Optional: Set scrollbar thumb color */
  border-radius: 4px; /* Optional: Add rounding to the scrollbar thumb */
}

.PatientUl::-webkit-scrollbar-track {
  background-color: transparent; /* Optional: Set scrollbar track color */
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  pointer-events: none;
}

.patientLi {
  background-color: var(--whiteColor);
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 5px;
  border-radius: 5px !important;
  font-weight: 700;
  font-weight: 12px !important;
  color: #000;
  border: 1px solid #000;
}

.activePatientLi {
  background-color: var(--primaryColor);
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 5px;
  border-radius: 5px !important;
  font-weight: 700;
  font-weight: 12px !important;
  color: var(--whiteColor);
  border: 1px solid var(--primaryColor);
}

.subHeader {
  background-color: var(--primaryColor);
  width: 100%;
  height: 36px;
  border-radius: 5px 5px 0px 0px;
  padding: 10px;
  display: inline-flex;
  justify-content: space-between;
  color: var(--whiteColor);
  font-weight: 500;
}
.PatientChartCardHeader {
  background-color: var(--secondaryColor);
  width: 100%;
  height: 36px;
  border-radius: 5px 5px 0px 0px;
  padding: 10px;
  display: inline-flex;
  justify-content: space-between;
  color: var(--primaryColor);
  font-weight: 500;
}

.PatientChartCardHeadercondition {
  background-color: var(--secondaryColor);
  width: 100%;
  height: 36px;
  border-radius: 5px 5px 5px 5px;
  padding: 10px;
  display: inline-flex;
  justify-content: space-between;
  color: var(--primaryColor);
  font-weight: 500;
}

.PatientChartCardHeaderIcon {
  width: 24px;
  height: 24px;
  margin-inline: 2px;
  cursor: pointer;
}

.fontWhite {
  color: white;
}

/*  all table in the site this  table css used ...    */
.tableHead {
  color: white;
  background-color: var(--primaryColor);
  height: 30px;
  width: 100%;
  /* text-align: center; */
  font-weight: 500;
  font-size: 14px !important;
  border-radius: 5px 5px 0px 0px;
}

.tableBody {
  background-color: #f5f8fa !important;

  width: 100%;
  /* text-align: center ; */
  font-size: 12px;
  font-weight: 500;
  /* border-top: 0.1px #1b283fc6;
  border-style: dotted; */
}

.PatientChartCardFooter {
  height: 30px;
  width: 100%;
  height: 36px;
  border-radius: 0px 0px 5px 5px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}

.HL7 {
  height: 20px;
  width: 38px;
  border-radius: 5px;
  background-color: #1b283f;
  text-align: center;
}

.cardHeaderElementMargin {
  margin-left: 10px;
}

.RxCardHeaderElement {
  width: 84px;
  height: 20px;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  color: #464e5f;
  background-color: white;
}

/* this is PatientVitals Page css ... aka  /patient/Vitals   */

.PageHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* height: 38px; */
  width: 100%;
}

.PageHeaderTitle {
  font-size: var(--FontSizemainHeaderTemplateHeader);
  font-weight: var(--FontWeightHeaderTemplateHeader);
}

.PageHeaderList {
  list-style: none;
  display: inline-flex;
  align-items: center;
}

.vitalsCard1st {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* all blue button CSS----------------------------------------------- */
.blueButton {
  height: 30px;
  background-color: var(--secondaryColor);
  display: flex;
  align-items: center;
  border-radius: 4px;
  border: none;
  color: var(--primaryColor);
  font-weight: 700;
  font-size: 12px;
  padding-inline: 8px;
}

.primarybtn {
  height: 30px;
  background-color: var(--primaryColor);
  display: flex;
  align-items: center;
  border-radius: 4px;
  border: none;
  color: white;
  font-weight: 700;
  font-size: 12px;
  padding-inline: 10px;
}

.primarybtnBig {
  height: 40px;
  background-color: var(--primaryColor);
  text-align: center;
  border-radius: 4px;
  border: none;
  color: white;
  font-weight: 700;
  font-size: 15px;
  padding-inline: 20px;
}

.secondarybtnBig {
  height: 35px !important;
  background-color: var(--secondaryColor);
  text-align: center;
  border-radius: 4px;
  border: none;
  color: red;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding-inline: 16px !important;
}

.blueButton {
  height: 30px;
  background-color: var(--secondaryColor);
  display: flex;
  align-items: center;
  border-radius: 4px;
  border: none;
  color: var(--primaryColor);
  font-weight: 700;
  font-size: 12px;
  padding-inline: 8px;
  display: flex;
  align-items: center;
}

.bigredButton {
  height: 40px;
  /* width: 79px; */
  background-color: #cb3939;
  display: flex;
  align-items: center;
  border-radius: 4px;
  border: none;
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  padding-inline: 20px;
}

.blueButton :nth-child(1) {
  color: var(--primaryColor);
}

.tertiarybig {
  height: 40px;
  border: none;
  border-radius: 5px;
  background-color: #dcdcdc;
  font-size: 15px;
  padding-inline: 18px;
}

.blueButtonSmall {
  display: flex;
  align-items: center;
  height: 28px;
  background-color: var(--secondaryColor);
  border-radius: 4px;
  border: none;
  color: var(--primaryColor);
  font-weight: 700;
  font-size: 12px;
  padding-inline: 8px;
}

.blueButtonSmall :nth-child(1) {
  color: var(--primaryColor);
}

.btnIconColor {
  color: var(--primaryColor);
}

/* all gray Button ...  */
.grayButton {
  height: 30px;
  background-color: #f1f1f2;
  border-radius: 5px;
  border: 1px solid rgb(126, 126, 126);
  color: #5b5b5b;
  font-weight: 700;
  font-size: 12px;
  padding-inline: 10px;
}

.bigBluePrimaryButton {
  height: 40px;
  background-color: var(--primaryColor);
  border-radius: 5px;

  border-style: none;
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  padding-inline: 16px;
}

.biggrayButton {
  height: 40px;
  background-color: #f1f1f2;
  border-radius: 5px;
  border: 1px solid rgb(126, 126, 126);
  color: #858585;
  font-weight: 700;
  font-size: 15px;
  padding-inline: 16px;
}

.xlargeInput100 {
  width: 100% !important;
  font-size: 15px !important;
  height: 32px;
}

.xlargeInput100::placeholder,
.smallInput25::placeholder {
  text-align: end;
  margin-inline: 2px;
}

.largeInput75 {
  width: 70% !important;
  font-size: 12px !important;
  margin-inline: 2px;
  height: 32px;
}

.smallInput25 {
  width: 30% !important;
  font-size: 12px !important;
  margin-inline: 2px;
  height: 32px;
}

.mediumInput50 {
  width: 50% !important;
  font-size: 12px !important;
  height: 32px;
  margin-inline: 2px;
}

/* vitals Table BOrderRadius ...  */

.CurveTable tr:first-child th:first-child {
  border-top-left-radius: 5px;
}

/* top-right border-radius */
.CurveTable tr:first-child th:last-child {
  border-top-right-radius: 5px;
}

/* .CurveTable tbody tr {
  border-top: thin solid;
} */

.fullCurve tbody tr {
  border-top: thin solid;
}

.fullCurve td {
  white-space: nowrap;
  max-width: 100px;
  /* height: 30px; */
  overflow: hidden;
  text-overflow: ellipsis;

  /* border: 1px solid #000000; */
}

.CurveTable td {
  white-space: nowrap;
  max-width: 100px;
  /* height: 30px; */
  overflow: hidden;
  text-overflow: ellipsis;
  /* border: 1px solid #000000; */
}

.elipsisText {
  font-weight: 500;
  white-space: nowrap !important;
  max-width: 200px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (min-width: 768px) and(max-width: 1440px) {
  .elipsisText {
    font-weight: 200;
    font-size: 10px !important;
    white-space: nowrap !important;
    max-width: 200px !important;
    /* overflow: hidden !important;   */
    text-overflow: ellipsis !important;
  }
}

.smallRangeText {
  font-size: 0.75em;
}
.smallrange {
  font-size: 8px;
  margin-bottom: 2px;
}
.listStyle {
  list-style: none;
}

.fullCurve tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

/* top-right border-radius */
.fullCurve tr:first-child th:last-child {
  border-top-right-radius: 6px;
}

/* bottom-left border-radius */
.fullCurve tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
.fullCurve tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

/* patient Search page csss  */
/* all input which contain 30px height */
.SearchInputbox {
  width: 100% !important;
  font-size: 13px !important;
  /* font-stretch: condensed !important; */
  height: 30px;
  padding-left: 7px !important;
  font-size: 400 !important;
  color: #000000;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*  */

.grayBox {
  background-color: #f5f8fa;
  height: 40px;
  width: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  /* padding: 10px; */
  font-weight: 600;
  font-size: 14px;
  color: #3f4254;
}

.CardHeaderwithoutcolor {
  background-color: #ffffff;
  width: 100%;
  height: 42px;
  border-radius: 5px 5px 0px 0px;
  padding: 10px;
  display: inline-flex;
  justify-content: space-between;
  color: #1b283f;
  font-weight: 800;
}

.CardHeaderwithoutcolorCondition {
  background-color: #ffffff;
  width: 100%;
  height: 36px;
  border-radius: 5px;
  padding: 10px;
  display: inline-flex;
  justify-content: space-between;
  color: #1b283f;
  font-weight: 800;
}

.SubCard {
  width: 100%;
  height: auto;
  border: #bbbbbb 1px;
  border-style: solid;
  border-radius: 5px;
}

/* Review of results Page ...  */

.uploadbtn {
  padding: 5px;

  border: #dcdcdc 2px;
  border-radius: 5px;
  border-style: dotted;
  font-weight: bold;
  /* cursor: pointer; */
}

.uploadErrbtn {
  padding: 5px;

  border: #fb6666 2px;
  border-radius: 5px;
  border-style: dotted;
  font-weight: bold;
  cursor: pointer;
}

.uploadfillbtn {
  padding: 5px;
  border: #3479f0 2px;
  border-radius: 5px;
  border-style: dotted;
  font-weight: bold;
  cursor: pointer;
}

/* Patient Detail Page  */
a {
  cursor: pointer;
}

.folderIcon {
  height: 17px;
  width: 17px;
}

.folderName {
  font-size: 18px;
  font-weight: bold;
}

input[type='checkbox'] {
  border: 1px solid rgb(148, 148, 148) !important;
  height: 12px !important;
  width: 12px !important;
}

.react-tel-input .form-control {
  position: relative;
  font-size: 14px;
  letter-spacing: 0.01rem;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 48px;
  margin-left: 0;
  background: #ffffff;
  border: 1px solid #dbdfe9 !important;
  border-radius: 5px;
  line-height: 30px;
  height: 30px !important;
  width: 100% !important;
  outline: none;
}

.special-label {
  display: none;
}

.react-tel-input .form-control:focus {
  position: relative;
  font-size: 14px;
  letter-spacing: 0.01rem;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 48px;
  margin-left: 0;
  background: #ffffff;
  border: 1px solid #b5b5c3 !important;
  border-radius: 5px;
  line-height: 30px;
  height: 30px !important;
  width: 100% !important;
  outline: none;
}

/*  */

.errMsg {
  color: red !important;
  font-weight: 400 !important;
  font-size: small !important;
  gap: 2;
}

.errMsg :nth-child(1) {
  color: red !important;
}

.appointmentUl {
  list-style: none;
}

.appointmentUl li {
  border-radius: 0px;
  background-color: white;
  padding: 5px;
  display: flex;

  align-items: center;
  font-weight: 500;
  font-size: 16px;
  height: 30px;
  width: 100%;
  cursor: pointer;
}

.appointmentUl li i {
  color: black;
  font-size: medium;
}

.appointmentUl li:hover {
  border-radius: 5px;
  background-color: #f5f8fa;
}

.mainMenu {
  position: relative;
}

.subMenu {
  display: block !important;

  list-style: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 300px !important;

  width: 100% !important;
  padding: 5px !important;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.subMenu li {
  font-size: 16px;
  font-weight: 500;
}

.dialoge {
  background-color: #f2f3f7 !important;
  /* border-radius: 5px ; */
}

.userProfileImg {
  height: 30px !important;
}

.logo {
  height: 70px !important;
  width: 100px !important;
}

.label-margin {
  font-size: 20px !important;
  font-weight: 700;
}

.css-1y1v5z2-control,
.css-1aro8gf-control,
.css-qsn7pb-ValueContainer,
.css-1cjvpk1-Input,
.css-fuvdze-control {
  width: 100% !important;
  font-size: 13px !important;
  font-stretch: condensed !important;
  height: 30px !important;
  /* padding-left: 7px !important; */
  font-size: 400 !important;
  color: #000000;
  min-height: 30px !important;

  /*select dropdown Appointment side     */
}

/* TagsInput.css */

.tags-input-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid #ced4da;
  border-radius: 5px !important;
  padding: 0.2rem 1rem 0.2rem 0.2rem;
}

.tags-input-wrapper .tag {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 0.2rem 0.5rem 0.2rem 0.5rem;
  border-radius: 0.25rem;
  margin-right: 0.5rem;
  /* margin-bottom: 0.5rem; */
}

.tags-input-wrapper input {
  border: none;
  outline: none;
  flex-grow: 1;
  padding: 0;
  margin: 0;
}

.tags-input-wrapper input::placeholder {
  color: #6c757d !important;
}

.tags-input-wrapper input:focus {
  box-shadow: none !important;
}

.tags-input-wrapper a {
  color: #fff;
  text-decoration: none;
  margin-left: 0.5rem;
  cursor: pointer;
}

.tags-input-wrapper a:hover {
  text-decoration: none;
}

.inputTag {
  position: relative !important;
  display: flex;
  flex-wrap: wrap;
  margin-top: -0.12rem;
  justify-content: space-between;
}

.inputTagsSuggestions {
  position: absolute !important;
  top: calc(100%);
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  z-index: 1000;
  max-height: 120px;
  overflow-y: auto;
}

.react-datepicker-wrapper {
  display: flex !important;
}

.documentFilesContainer {
  display: flex;
  flex-wrap: wrap; /* Allows the items to wrap onto multiple lines if necessary */
  gap: 5px; /* Adjust spacing between items as needed */
}

.documentFiles {
  height: 20px !important;
  align-items: center; /* Vertically centers items within each .documentFiles container */
}

.errDocumentsFile {
  border: 1px solid red;
  color: red;
  padding: 4px 5px 4px 5px;
  border-radius: 3px 0px 0px 3px !important;
}

.documentFileName {
  background-color: #f2f3f7;
  padding: 4px 5px 4px 5px;
  border-radius: 3px 0px 0px 3px !important;
}
.documentFileCancelBtn {
  background-color: #dcdcdc;
  padding: 4px 6px 4px 6px;
  border-radius: 0px 3px 3px 0px !important;
}

.documentFileCancelBtn:hover {
  background-color: #ff7c7c;
  color: #860000;
}

.hamburger-icon {
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clinicalSettingMenu {
  background-color: white;
  list-style: none;
  padding: 0;
  height: 100%;

  transition: transform 0.3s ease-in-out;
}

.clinicalSettingMenu.closed {
  transform: translateX(-101%);
  position: absolute;
  left: 0;
  top: 80px;
  z-index: 100;
  width: 200px;
}

.clinicalSettingMenu.open {
  transform: translateX(0);
  width: 200px;
}

.clinicalSettingMenu .navLink {
  display: flex;
  padding: 0.5vw;
  cursor: pointer;
  font-weight: 500;
  align-items: center;
  margin-top: 5px;
  color: #464e5f;
}

.activeClinicalSettingMenu {
  background-color: var(--primaryColor);
  color: var(--templateBgcolor) !important;
  border-radius: 5px;
}
.activePatientAppointmentHistoryMenu {
  background-color: var(--primaryColor);
  color: #4e4949 !important;
  border-radius: 5px;
}

.clinicalSettingMenu .navLink:hover {
  background-color: var(--darkColorMenu);
  color: var(--fontColorMenu);
  border-radius: 5px;
}

/* patienChart Page Navigation ...  */
@media only screen and (max-width: 1920px) {
  .patientLi {
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 5px;
    border-radius: 5px !important;
    font-weight: 700;
    font-size: 12px !important;
  }
  .activePatientLi {
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 5px;
    border-radius: 5px !important;
    font-weight: 700;
    font-size: 12px !important;
  }

  div#kt_app_header {
    height: 48px !important;
  }

  .headerText {
    font-size: 12px !important;
    font-weight: 500 !important;
  }

  .userProfileImg {
    height: 30px !important;
  }

  .logo {
    height: 30px !important;
  }

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

  .label-margin {
    font-size: 20px !important;
    font-weight: 700;
  }

  .patient-info-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
  }

  .SearchInputbox {
    width: 100% !important;
    font-size: 14px !important;
    font-stretch: condensed !important;
    height: 30px;
    padding-left: 7px !important;
    font-size: 400 !important;
    color: #000000;
  }

  .blueButton {
    height: 30px;
    background-color: var(--secondaryColor);
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: none;
    color: var(--primaryColor);
    font-weight: 700;
    font-size: 12px;
    padding-inline: 8px;
  }

  .grayButton {
    height: 30px;
    background-color: #f1f1f2;
    border-radius: 5px;
    border: 1px solid rgb(126, 126, 126);
    color: #5b5b5b;
    font-weight: 700;
    font-size: 12px;
    padding-inline: 10px;
  }

  .title-header {
    font-size: 20px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
    color: #3f4254;
  }

  .patientIDText {
    font-size: 14px !important;
    font-weight: 700;
    color: #858898;
    line-height: 30px;
  }

  .blueButtonSmall {
    display: flex;
    align-items: center;
    height: 28px;
    background-color: var(--secondaryColor);
    border-radius: 4px;
    border: none;
    color: var(--primaryColor);
    font-weight: 700;
    font-size: 12px;
    padding-inline: 8px;
  }

  .primarybtnBig {
    height: 40px;
    background-color: var(--primaryColor);
    text-align: center;
    border-radius: 4px;
    border: none;
    color: white;
    font-weight: 700;
    font-size: 15px;
    padding-inline: 20px;
  }

  .biggrayButton {
    height: 40px;
    background-color: #f1f1f2;
    border-radius: 5px;
    border: 1px solid rgb(126, 126, 126);
    color: #858585;
    font-weight: 700;
    font-size: 15px;
    padding-inline: 16px;
  }

  .tertiarybig {
    height: 40px;
    border: none;
    border-radius: 5px;
    background-color: #dcdcdc;
    font-size: 15px;
    padding-inline: 18px;
  }

  .primarybtn {
    height: 30px;
    background-color: var(--primaryColor);
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: none;
    color: white;
    font-weight: 700;
    font-size: 12px;
    padding-inline: 10px;
  }

  .css-1y1v5z2-control,
  .css-1aro8gf-control,
  .css-qsn7pb-ValueContainer,
  .css-1cjvpk1-Input,
  .css-fuvdze-control {
    width: 100% !important;
    font-size: 14px !important;
    font-stretch: condensed !important;
    height: 30px !important;
    /* padding-left: 7px !important; */
    font-size: 400 !important;
    color: #000000;
    min-height: 30px !important;
    /*select dropdown Appointment side     */
  }

  .tableHead {
    color: white;
    background-color: var(--primaryColor);
    height: 25px !important;
    width: 100%;
    /* text-align: center; */
    font-weight: 500;
    font-size: 14px !important;
    border-radius: 5px 5px 0px 0px;
  }

  .tableBody {
    background-color: #f5f8fa !important;

    width: 100%;
    /* text-align: center ; */
    height: 25px !important;
    font-size: 12px;
    font-weight: 500;
    border-top: 0.2px #1b283f;
    /* border-style: dotted; */
  }

  .react-tel-input .form-control {
    height: 30px !important;
    width: 100% !important;
  }

  .switchViewbtnLeft {
    border-radius: 5px 0px 0px 5px;
    height: 30px;
    font-weight: 600;
    font-size: 12px;
    padding: 5px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-width: 0.5px;
    background-color: var(--whiteColor);
  }

  .switchViewbtnActive {
    color: white;
    background-color: #1b283f;
  }

  .switchViewbtnRight {
    border-radius: 0px 5px 5px 0px;
    height: 30px;
    font-weight: 600;
    font-size: 12px;
    padding: 5px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-width: 0.5px;
    background-color: white;
  }

  .folderIcon {
    height: 17px;
    width: 17px;
  }

  .folderName {
    font-size: 13px;
    font-weight: bold;
  }
}

@media only screen and (max-width: 1359px) {
  .patientLi {
    padding: 5px;
    padding-left: 5px;
    padding-right: 5px;
    margin: 2px;
    border-radius: 5px !important;
    font-weight: 600;
    font-size: 10px !important;
  }

  .activePatientLi {
    padding: 5px;
    padding-left: 5px;
    padding-right: 5px;
    margin: 2px;
    border-radius: 5px !important;
    font-weight: 600;
    font-size: 10px !important;
  }

  .header-top {
    height: 30px !important;
    font-weight: 600 !important;
    margin-left: -10px !important;
    /* margin-top: -20px ; */
    width: calc(100% + 19px);
    font-size: 13px !important;
    border-radius: 5px !important;
  }

  div#kt_app_header {
    height: 38px !important;
  }

  .headerText {
    font-size: 11px !important;
    font-weight: 500 !important;
  }

  .userProfileImg {
    height: 24px !important;
  }

  .logo {
    height: 24px !important;
  }

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

  .label-margin {
    font-size: 14px !important;
    font-weight: 700;
  }

  .patient-info-title {
    font-weight: 500;
    font-size: 11px !important;
    line-height: 20px !important;
  }

  .SearchInputbox {
    width: 100% !important;
    font-size: 12px !important;
    font-stretch: condensed !important;
    height: 25px;
    padding-left: 5px !important;
    font-size: 300 !important;
    color: #000000;
  }

  .blueButton {
    height: 25px;
    background-color: var(--secondaryColor);
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: none;
    color: var(--primaryColor);
    font-weight: 600;
    font-size: 10px;
    padding-inline: 8px;
  }

  .grayButton {
    height: 25px;
    background-color: #f1f1f2;
    border-radius: 5px;
    border: 1px solid rgb(126, 126, 126);
    color: #5b5b5b;
    font-weight: 600;
    font-size: 10px;
    padding-inline: 8px;
  }

  .blueButtonSmall {
    display: flex;
    align-items: center;
    height: 30px;
    background-color: var(--secondaryColor);
    border-radius: 4px;
    border: none;
    color: var(--primaryColor);
    font-weight: 500;
    font-size: 10px;
    padding-inline: 6px;
  }

  .primarybtnBig {
    height: 35px !important;
    background-color: var(--primaryColor);
    text-align: center;
    border-radius: 4px;
    border: none;
    color: white;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding-inline: 16px !important;
  }

  .biggrayButton {
    height: 35px;
    background-color: #f1f1f2;
    border-radius: 4px;
    border: 1px solid rgb(126, 126, 126);
    color: #858585;
    font-weight: 600;
    font-size: 12px;
    padding-inline: 16px;
  }

  .tertiarybig {
    height: 35px;
    border: none;
    border-radius: 4px;
    background-color: #dcdcdc;
    font-size: 12px;
    padding-inline: 16px;
  }

  .primarybtn {
    height: 25px !important;
    background-color: var(--primaryColor);
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: none;
    color: white;
    font-weight: 700;
    font-size: 10px !important;
    padding-inline: 8px !important;
  }

  .title-header {
    font-size: 18px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
    color: #3f4254;
  }

  .patientIDText {
    font-size: 12px !important;
    font-weight: 700;
    color: #858898;
    line-height: 30px;
  }

  .css-1y1v5z2-control,
  .css-1aro8gf-control,
  .css-qsn7pb-ValueContainer,
  .css-1cjvpk1-Input,
  .css-fuvdze-control,
  .css-1l6314g-control
  /* css-1l6314g-control ...   grouped Select dropDown class  */ {
    width: 100% !important;
    font-size: 12px !important;
    font-stretch: condensed !important;
    height: 25px !important;
    /* padding-left: 5px !important; */
    padding-bottom: -20px !important;
    font-size: 300 !important;
    color: #000000;
    min-height: 25px !important;
    /* display: flex !important; */
    padding-bottom: 7px !important;
    padding-left: 1px !important;

    /*select dropdown Appointment side     */
  }

  .css-1jqq78o-placeholder {
    padding-bottom: 3px !important;
  }

  .css-1dimb5e-singleValue {
    padding-bottom: 4px !important;
  }

  .tableHead {
    color: white;
    background-color: var(--primaryColor) !important;
    height: 25px;
    width: 100%;

    font-weight: 500;
    font-size: 12px !important;
    border-radius: 5px 5px 0px 0px;
  }

  .tableBody {
    background-color: #f5f8fa !important;
    height: 25px !important;
    width: 100%;

    font-size: 10px;
    font-weight: 500;
    border-top: 0.2px #1b283f;
    /* border-style: dotted; */
  }

  .react-tel-input .form-control {
    width: 100% !important;
    height: 25px !important;
    font-size: 10px !important;
  }

  .switchViewbtnLeft {
    border-radius: 5px 0px 0px 5px;
    height: 25px;
    font-weight: 600;
    font-size: 10px;
    padding: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-width: 0.5px;

    background-color: white;
  }

  .switchViewbtnActive {
    color: white;
    background-color: #1b283f;
  }

  .switchViewbtnRight {
    border-radius: 0px 5px 5px 0px;
    height: 25px;
    font-weight: 600;
    font-size: 10px;
    padding: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-width: 0.5px;
    background-color: white;
  }

  .folderIcon {
    height: 15px;
    width: 15px;
  }

  .folderName {
    font-size: 12px;
    /* font-weight: bold; */
  }
}

@media only screen and (max-width: 768px) {
  /* Add styles for screens with a maximum width of 768px */
  .header-top {
    font-weight: 600 !important;
    width: 110% !important;
    margin-top: 0px !important;
    margin-left: -10px !important;
  }

  div#kt_app_content_container {
    margin-top: 0px;
  }
}

@media only screen and (max-width: 820px) {
  /* Add styles for screens with a maximum width of 768px */
  .header-top {
    width: 100%;
    margin-top: 0px !important;
  }

  div#kt_app_content_container {
    margin-top: 0px;
  }

  .header-top {
    background: var(--secondaryColor);
    color: '#008080';
    margin-left: -8px !important;
    width: calc(100% + 7%);
    margin-top: 0px !important;
    padding: 10px !important;
  }

  .userProfileImg {
    height: 24px !important;
  }

  .logo {
    height: 24px !important;
  }

  .headerText {
    font-size: 10px !important;
    font-weight: 500 !important;
  }

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

  .label-margin {
    font-size: 14px !important;
    font-weight: 700;
  }

  .patient-info-title {
    font-weight: 500;
    font-size: 11px !important;
    line-height: 20px !important;
  }

  .SearchInputbox {
    width: 100% !important;
    font-size: 10px !important;
    font-stretch: condensed !important;
    height: 25px;
    padding-left: 3px !important;
    font-size: 300 !important;
    color: #000000;
  }

  .primarybtnBig {
    height: 35px !important;
    background-color: var(--primaryColor);
    text-align: center;
    border-radius: 4px;
    border: none;
    color: white;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding-inline: 16px !important;
  }

  .biggrayButton {
    height: 35px;
    background-color: #f1f1f2;
    border-radius: 4px;
    border: 1px solid rgb(126, 126, 126);
    color: #858585;
    font-weight: 600;
    font-size: 12px;
    padding-inline: 16px;
  }

  .tertiarybig {
    height: 35px;
    border: none;
    border-radius: 4px;
    background-color: #dcdcdc;
    font-size: 12px;
    padding-inline: 16px;
  }

  .blueButton {
    height: 25px;
    background-color: var(--secondaryColor);
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: none;
    color: var(--primaryColor);
    font-weight: 600;
    font-size: 10px;
    padding-inline: 8px;
  }

  .grayButton {
    height: 25px;
    background-color: #f1f1f2;
    border-radius: 4px;
    border: 1px solid rgb(126, 126, 126);
    color: #5b5b5b;
    font-weight: 600;
    font-size: 10px;
    padding-inline: 8px;
  }

  .primarybtn {
    height: 25px !important;
    background-color: var(--primaryColor);
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: none;
    color: white;
    font-weight: 700;
    font-size: 10px !important;
    padding-inline: 8px !important;
  }

  .blueButtonSmall {
    display: flex;
    align-items: center;
    height: 25px;
    background-color: var(--secondaryColor);
    border-radius: 4px;
    border: none;
    color: var(--primaryColor);
    font-weight: 500;
    font-size: 10px;
    padding-inline: 6px;
  }

  .title-header {
    font-size: 15px !important;
    line-height: 15px !important;
    font-weight: 600 !important;
    color: #3f4254;
  }

  .patientIDText {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #858898 !important;
    line-height: 15.41px !important;
  }

  .css-1y1v5z2-control,
  .css-1aro8gf-control,
  .css-qsn7pb-ValueContainer,
  .css-1cjvpk1-Input,
  .css-fuvdze-control {
    width: 100% !important;
    font-size: 10px !important;
    font-stretch: condensed !important;
    height: 25px !important;

    /* padding-left: 3px !important; */
    font-size: 300 !important;
    color: #000000;
    min-height: 25px !important;

    padding-bottom: 6px !important;
    /*select dropdown Appointment side     */
  }

  .css-1jqq78o-placeholder {
    padding-bottom: 3px !important;
  }

  .tableHead {
    color: white;
    background-color: var(--primaryColor) !important;
    height: 25px;
    width: 100%;
    /* text-align: center; */
    font-weight: 500;
    font-size: 10px !important;
    border-radius: 5px 5px 0px 0px;
  }

  .tableBody {
    background-color: #f5f8fa !important;
    height: 30px !important;
    width: 100%;
    /* text-align: center ; */
    font-size: 8px;
    font-weight: 500;
    border-top: 0.2px #1b283f;
    /* border-style: dotted; */
  }

  .switchViewbtnLeft {
    border-radius: 5px 0px 0px 5px;
    height: 25px;
    font-weight: 600;
    font-size: 10px;
    padding: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-width: 0.5px;

    background-color: white;
  }

  .switchViewbtnActive {
    color: white;
    background-color: #1b283f;
  }

  .folderIcon {
    height: 13px;
    width: 13px;
  }

  .folderName {
    font-size: 14px;
    font-weight: bold;
  }
}

.automated-lable {
  width: 48% !important;
  margin-top: 15px !important;
  text-align: right !important;
}

.padding-label {
  padding-top: 5px !important;
}

.lable-font-class {
  font-family: 'Roboto' !important;
  font-size: 14px !important;
  color: #3f4254 !important;
  font-weight: 600 !important;
}

.btn-left {
  margin-left: 5px !important;
  height: 30px !important;
  background-color: #bfe6fc !important;
  color: #00a3ff !important;
  /* margin-left: 30px !important; */
  float: right;
  height: auto !important;
  text-align: center;
  width: auto !important;
  cursor: pointer !important;
}

.textbox-height {
  height: 31px !important;
}

.lable-margin {
  margin-top: 10px;
}

.searchformfld {
  position: relative;
  margin: 5px 0px;
}

.searchformfld label {
  position: absolute;
  padding-left: 10px;
  top: 11px;
  cursor: text;
}

.searchformfld input:focus + label,
.searchformfld input:not(:placeholder-shown) + label {
  opacity: 1;
  transform: scale(0.9) translateY(-100%) translateX(-10px);
  color: #000;
}

.searchformfld input:focus {
  border: 1px solid #000;
  outline-color: #000;
}

.searchformfld {
  padding: 10px;
  /* margin:15px 0px; */
  margin: 0px 0px;
}

.searchformfld input {
  width: 100%;
  padding-left: 10px;
}

.searchformfld label,
.searchformfld input {
  transition: all 0.2s;
  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity: 2;
}

.btn-center {
  margin-left: 50%;
}

.btn-search-form {
  /* Define hover styles here */
  /* For example, change the background color when hovered */
  height: 33px !important;
  background-color: #0095e8 !important;
}

.btn-search-form-close {
  /* Define hover styles here */
  /* For example, change the background color when hovered */
  height: 33px !important;
  background-color: #ff0000 !important;
}

/* Pagination container */
.pagination {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

/* Pagination items */
.pagination-item {
  margin: 0 5px;
  display: inline-block;
}

/* Pagination link button */
.pagination-link {
  text-decoration: none;
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #333;
  font-size: 14px;
  background-color: #fff;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  display: inline-block;
}

.pagination-link:hover {
  background-color: #f0f0f0;
  color: #000;
}

/* Active page */
.pagination-item.active .pagination-link {
  background-color: var(--primaryColor) !important;
  color: #fff;
  font-weight: bold;
}

/* Disabled state */
.pagination-item.disabled .pagination-link {
  background-color: #ddd;
  color: #aaa;
  pointer-events: none;
}

/* First and Last page buttons */
.pagination-item:first-child .pagination-link,
.pagination-item:last-child .pagination-link {
  padding: 8px 12px; /* Adjust padding for first/last buttons */
}

/* Ellipsis button */
.pagination-item.disabled .pagination-link[disabled] {
  background-color: #f0f0f0;
  color: #888;
  pointer-events: none;
}

/* Styling for the "Previous" and "Next" buttons */
.pagination-item button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 8px 12px;
}

.pagination-item button:disabled {
  color: #aaa;
  pointer-events: none;
}

.showing-count {
  float: left !important;
}

.table-margin {
  margin-top: 20px !important;
}

.btn-search-payer {
  background-color: #bfe6fc !important;
  color: var(--primaryColor) !important;
  height: 20px !important;
}

.hand-color {
  color: var(--primaryColor) !important;
}

.search-btn-payer {
  color: var(--primaryColor) !important;
  margin-left: 10px !important;
}

.icon-color {
  color: var(--primaryColor) !important;
}

.table tr {
  background-color: #f2f2f2 !important;
  /* Gray background for even rows */
}

.table tr td {
  border-bottom: 1px dotted #000 !important;
  /* Dotted border for all table cells */
}

.tableheader {
  background-color: #dcdcdc;
  color: #3f4254;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 500;
}

.tableheaderclinicsetting {
  color: white;
  background-color: var(--primaryColor);
  font-family: Roboto;
  font-size: 14px;
  font-weight: 600;
}

.table th:first-child {
  /* background-color: #1B283F; */
  color: white;
  border-top-left-radius: 10px;
  /* Adjust the radius as needed */
}

.table th:last-child {
  /* background-color: #1B283F; */
  color: white;
  border-top-right-radius: 10px;
  /* Adjust the radius as needed */
}

.model-footer-color {
  background-color: #ebedf2 !important;
}

/* Add New Patient Form css */
.patient-info-card {
  background-color: #fff;
  border-radius: 8px !important;
}

.patient-info-header {
  margin-top: 10px;
  margin-left: 10px;
  font-weight: bold;
  font-size: medium;
  /* color: #80808f; */
}

.first-Input {
  margin-top: 10px;
  margin-left: 10px;
}

.pmrt {
  margin-top: -20px !important;
}

.lineBottom {
  border-top: 1px solid #ddd !important;
  width: '100%';
}

.patient-info-section {
  margin-left: 8px;
}

.patient-info-title {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
}

.row-width {
  width: 100% !important;
  padding: 5px !important;
}

.col-width {
  width: 24% !important;
}

.date-box-height {
  height: 35px !important;
}

.float-left {
  float: right !important;
}

.custom-list {
  list-style: none;
  /* Remove bullets */
  padding: 0;
}

.custom-list li {
  background-color: #f2f2f2;
  /* Grey background color */
  padding: 10px;
  /* Add some padding for spacing */
  margin: 5px 0;
  /* Add margin to separate the list items */
  display: flex;
  /* To display icon and text in a row */
  align-items: center;
  /* Vertically center content */
}

.view-icon {
  font-size: 14px !important;
}

.font-icon-title {
  font-size: 14px !important;
  margin-left: 10px !important;
}

.title-details-page {
  margin-left: -2% !important;
  padding: 1% !important;
}

.custom-card-width-login {
  width: 70% !important;
  margin-top: 0%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  transition: box-shadow 0.3s !important;
}

.login-card {
  align-items: center !important;
}

.background-color-page {
  background-color: white !important;
}

.image-back {
  margin-top: -70%;
  margin-left: -100%;
}

.image-back-width {
  width: 1800px !important;
  height: 700px;
}

@media screen and (max-width: 820px) {
  /* Add styles for screens with a maximum width of 768px */

  .image-back {
    /* display: none !important; */
    margin-top: -15%;
    margin-left: 0%;
  }

  .image-back-width {
    width: 800px !important;
    height: 630px;
  }
}

.title-center {
  text-align: left !important;
}

.image-back-forgot {
  margin-top: -45%;
  margin-left: -100%;
}

.image-back-width-forgot {
  width: 1800px !important;
  height: 700px;
}

@media screen and (max-width: 820px) {
  .image-back-forgot {
    margin-top: -15%;
    margin-left: 0%;
  }

  .image-back-width-forgot {
    width: 800px !important;
    height: 650px;
  }
}

@media screen and (max-width: 820px) {
  .custom-card-width-login {
    margin-left: 13% !important;
    width: 80% !important;
  }
}

/* superAdmin  */

/* table  */
/* 
table.table:first-child thead:first-child tr:first-child th:first-child {
  border-top-left-radius: 6px !important;
}

table.table:first-child tr:first-child th:last-child {
  border-top-right-radius: 0px !important;
}


table.table:last-child thead:first-child tr:first-child th:first-child {

  border-bottom-left-radius: 6px !important;
}

table.table:last-child tr:first-child th:last-child {
  border-top-right-radius: 0px !important;
}
 */

/* table.table.table-bordered.table-sm.table-striped.dataTable:first-child  tr:first-child th:first-child {
  border-top-left-radius: 6px;
} */
/* 
 table.table.table-bordered.table-sm.table-striped.dataTable:last-child  tr:first-child th:first-child {
  border-bottom-left-radius: 6px;
} */

/* table tr th:nth-child(1){ 
   background-color: #00A3FF !important;
} */

.custom-table th {
  background-color: #1b283f !important;
  color: white !important;
  border-style: hidden !important;
}

.custom-table th tr {
  display: flex;
  align-items: center;
}

[data-test='datatable-head'] th:first-child {
  border-top-left-radius: 6px !important;
  /* Adjust as needed */
  border-bottom-left-radius: 0px;
  /* Adjust as needed */
  /* border-bottom-right-radius: 10px; Adjust as needed */
}

[data-test='datatable-head'] th:last-child {
  border-top-right-radius: 6px !important;
  /* Adjust as needed */
  border-bottom-right-radius: 0px;
  /* Adjust as needed */
  /* border-bottom-right-radius: 10px; Adjust as needed */
}

[data-test='table-foot'] th:first-child {
  border-top-left-radius: 0px;
  /* Adjust as needed */
  border-bottom-left-radius: 6px;
  /* Adjust as needed */
  /* border-bottom-right-radius: 10px; Adjust as needed */
}

[data-test='table-foot'] th:last-child {
  border-top-right-radius: 0px;
  /* Adjust as needed */
  border-bottom-right-radius: 6px;
  /* Adjust as needed */
  /* border-bottom-right-radius: 10px; Adjust as needed */
}

/* use in  addition Info  */
.title-header {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: #3f4254;
}

.patientIDText {
  font-size: 1.6vh;
  font-weight: 700;
  color: #858898;
  line-height: 2vh;
}

.lowerBorder {
  border-bottom: 1px solid #eff2f5;
  justify-content: space-between !important;
}

.normalLater {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
}

tbody[data-test='table-body'] td[colspan='10'] {
  text-align: center;
}

tbody[data-test='table-body'] td[colspan='9'] {
  text-align: center;
}

.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-radius: 50%;
  border-top: 3px solid #00a3ff;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.clinicNavTitle {
  font-size: 20px;
  font-weight: bold;
  line-height: 24px;
  text-align: left;
  color: #232323;
  justify-content: space-between;
}

.titleclinic {
  top: 40px;
  border: 1px 0px 0px 0px;
  border: 1px solid #eff2f5;
}

.form-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
}

.placeholdfont::placeholder {
  color: white;
}

/* clinicaltime */

.clinical-time-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  padding: 10px 5px;
  /* margin: 0px 0px 0px 15px; */
  /* width: 100%; */
}
.clinical-time-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  padding: 10px 5px;
  /* margin: 0px 0px 0px 15px; */
  /* width: 100%; */
}
.content-wrapper {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  padding: 8px;
  margin: 8px;
  /* margin: 0px 0px 0px 15px; */
  /* width: 100%; */
}

.tabname {
  font-family: Roboto;
  font-size: 16px;
  font-weight: 900;
  line-height: 20px;
  text-align: left;
  padding-left: 0%;
}

.navbar {
  width: 15%; /* Narrow the navbar to move content more to the left */
  background-color: #f8f9fa;
  padding: 5px; /* Reduce padding to decrease the gap */
}
.content {
  width: 85%; /* Increase content width */
  padding: 5px 10px; /* Reduce top padding to move content upwards */
}

.SearchInputbox {
  width: Fixed (160px) px;
  height: Fixed (24px) px;
  padding: 4px 8px 4px 8px;
  gap: 10px;
  border-radius: 4px;
  border: 1px 0px 0px 0px;
  opacity: 0px;
  border: 1px solid #dcdcdc;
}
.form-label {
  /* width: 54px;
  height: 24px; */
  top: 48px;
  left: 8px;
  gap: 0px;
  opacity: 0px;
  font-family: Roboto;
  font-size: 14px;
  font-weight: 800;
  line-height: 24px;
  text-align: left;
}
.SearchInputbox {
  font-family: Roboto;
  font-size: 10px;
  font-weight: 500;
  line-height: 12px;
  letter-spacing: 0.01em;
  text-align: left;
  color: #5e6278;
}
.vaccine-text {
  font-weight: 650;
  color: #464e5f;
}
.clinical-time-header {
  font-family: Roboto;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: left;
  border-bottom: 1px solid #eff2f5;
}

.clinical-time-body {
  padding: 20px;
}

.form-group-time {
  margin-bottom: 5px;
  display: flex;
}

.radio-group label {
  padding: 5px;
  align-items: center;
}

.time-zone-select {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.day-rows {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 2fr;
  gap: 10px;
}

.day-row {
  display: contents;
}

.day-label {
  grid-column: 1;
}

.time-range {
  grid-column: span 1;
  display: flex;
  align-items: center;
}

.time-range input,
.time-range select {
  margin-right: 5px;
}

.time-range input[type='time'] {
  width: 60px;
  height: 24px;
  top: 144px;
  left: 181px;
  padding: 4px 8px 4px 8px;
  gap: 10px;
  border-radius: 4px;
  border: 1px 0px 0px 0px;
  opacity: 0px;
}

.timeformat {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
  color: black;
  line-height: 24px;
  text-align: left;
}

.tabname {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  cursor: pointer;
}

.tabNameStyle {
  display: flex;
  gap: 25px;
}

.activeTab {
  border-bottom: 2px solid var(--primaryColor);
  color: var(--primaryColor);
}

.inactiveTab {
  color: grey;
}

.user-time-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.user-time-table th,
.user-time-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.user-time-table th {
  background-color: var(--primaryColor);
  font-weight: bold;
  color: white;
}

.user-time-table tr:nth-child(even) {
  background-color: #e4e6ef;
}

/* todolist */

.editdeletButton {
  width: 24px;
  height: 24px;
  padding: 6px;
  border-radius: 2.4px;
  background-color: #dcdcdc;
  margin: 3px;
}

.status {
  width: Fixed (162px) px;
  height: Hug (40px) px;
  padding: 8px;
  gap: 10px;
  opacity: 0px;
  background-color: #ffffff;
}

.patientAssign {
  display: flex;
  flex-direction: column;
}

.sizescreen {
  width: 100% !important;
  display: block;
  justify-content: space-between;
  background-color: '#FFFFFF';
}
.editbtn {
  background-color: var(--secondaryColor) !important;

  border: transparent;
  border-radius: 3px;
  margin-right: 10px;
}
.add-Vaccine-btn {
  padding: 4px, 8px, 4px, 8px;
  font-size: 10px;
  font-weight: 700;
  background-color: var(--primaryColor);
  color: white;
  border-radius: 4px;
  border: none;
}

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

/* .Allergies-container{
  width: 1050px;
height: 524px;
top: 120px;
left: 224px;
gap: 0px;
border-radius: 8px 0px 0px 0px;
opacity: 0px;
} */
.addvaccinetitle {
  font-family: Roboto;
  font-size: 12px;
  font-weight: 700;
  color: #3f4254;
}

.user-label {
  flex-grow: 1; /* Take up remaining space */
}

.user-checkbox {
  margin-left: 10px;
}

.modal-body .row {
  display: flex;
  flex-wrap: wrap;
}
.mybtns {
  justify-content: start;
}

.medicationTemp {
  display: flex;
  gap: 10px;
  width: 100%;
}
.viewlabels {
  /* var(--templateTextColor: #3F4254;
  --templatelabelfontWeight:600;
  --templatelabelfontSize:12px;) */
  color: var(--templateTextColor);
  font-weight: var(--templatelabelfontWeight);
  font-size: var(--templatesmallheaderText);
}
.vaccine-label-data {
  font-size: var(--templatelabelfontSize);
  color: var(--templateTextColor);
}
.eyeicon {
  size: 10px;
}

.profile-img {
  width: 150px;
  height: 150px;
}

.toolbaroption:hover {
  background-color: var(--primaryColor); /* Hover background color */
  color: white; /* Change text color if needed */
}

.image-back-wrapper {
  background-image: url('./media/auth/loginbackground.png');
  background-size: cover;
  background-position: center;
  height: 100%;
  /* margin-top: 0px; */
  overflow-y: hidden !important;
  /* z-index: -1;  */
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
.loginpage {
  z-index: 1000;
  position: relative;
  display: flex;
  justify-content: center;
}
/* .dashboard-image{
  width: 80px;
  height: 80px;
  top: 16px;
  left: 16px;
  gap: 0px;
  opacity: 0px;
  background-color: #FFF5F5;
  border-radius: 5px;
  justify-content: center;
  
} */

/* fontsize  */

/* Title font  */

.titleFont {
  font-size: 16px;
  font-weight: 600;
}

.menuTitle {
  font-size: 14px;
  font-weight: 600;
}

.formLabelTitle {
  font-size: 12px;
  font-weight: 500;
}

.sectionTitle {
  font-size: 14px;
  font-weight: 600;
}
.pmrt {
  margin-top: -20px;
}

.dashboard-image-bg {
  background-color: var(--secondaryColor);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; /* Prevents squishing if layout is tight */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transition */
}
.dashboard-image-bg:hover {
  transform: scale(1.05); /* Slightly enlarge */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Soft shadow */
}
/* // skeleton loader ... */
.skeleton {
  min-height: 20px;
  width: 100%;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.clinicalSettinlayout.csClosed {
  width: 100%;
}

@media (max-width: 991.98px) and (min-width: 821px) {
  .app-content {
    margin-top: 30px !important;
  }
}
@media (max-width: 1439px) and (min-width: 769px) {
  .clinicalSettinlayout {
    /* padding-left: 190px; */
    width: calc(100% - 205px);
  }
  .clinicalSettinlayout.csClosed {
    width: 100%;
  }
}

@media (max-width: 1920px) and (min-width: 1440px) {
  .clinicalSettinlayout {
    /* padding-left: 280px; */
    width: calc(100% - 205px);
  }
  .clinicalSettinlayout.csClosed {
    width: 100%;
  }
}

/* .select__control {
  max-height: 32px !important;
} */

.multi_select_dropdown_option {
  padding: 0px !important;
}

/* .select__control {
  max-height: 32px !important;
} */

.boxStyle {
  width: 40% !important;
  /* height: 10px !important; */
}
.daysinput {
  margin-right: 20px;
}

/* .dashboard-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fff;
  margin-top: 10px;
} */

.card-height {
  height: 196px;
  width: 180px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.card-body {
  padding: 16px;
  margin-top: 20px;
}

.tableBody {
  width: 100%;
  border-collapse: collapse;
}

.tableBody th,
.tableBody td {
  /* border: 1px solid #e7e7e7; */
  padding: 5px !important;
  text-align: left;
}

.tableBody th {
  background-color: #f8f9fa;
}

.patient-image {
  width: 40px; /* Adjust the size of the patient image */
  height: 40px;
  border-radius: 50%; /* Makes the image circular */
}

.card-footer {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text-file {
  font-size: 8px;
  text-align: left;
}
.plusbutton {
  justify-content: end;
}

.modal-body .form-control {
  width: 100%;
}
.modal-body .mb-3 {
  margin-bottom: 1rem;
}

.userItem {
  margin-left: 5px;
}

.Addbtn {
  margin-right: 1px;
}
.actionbtn {
  margin-left: 4px;
}

.common-table th,
.common-table td {
  width: auto;
  text-align: center; /* Center-align the content */
  vertical-align: middle; /* Vertically align the content to the middle */
}

.common-table th {
  padding: 10px;
}

.common-table td {
  padding: 8px;
}

/* Optional: Add styling for the table itself */
.common-table {
  width: 100%;
  border-collapse: collapse;
}

/* Optional: Add alternate row background colors for readability */

.addcalendarbutton {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.schoolname {
  margin-left: 12px;
}
.to {
  margin-top: 10px;
}
.appointmentTime {
  width: 220px;
}
.Searchclearbuttton {
  justify-items: end;
  margin-left: 10px;
}
/* .addmedication{
  margin-left: 0;
  text-align: left;
} */
.addmedication {
  display: flex; /* Use flexbox layout */
  justify-content: flex-start; /* Align content to the left */
}

.align-left-button {
  margin-left: 0; /* Ensure no additional left margin */
  padding: 0; /* Remove any extra padding if present */
}
.mycliniclogo {
  /* height: 76px;
  width: 69px; */
  height: 30px;
  width: auto;
  object-fit: cover !important;
  object-position: center; /* Center the image content */
  margin-top: -20px;
}
.dropdown-divider {
  height: 1px;
  background-color: #e0e0e0; /* Light gray color */
  margin: 0.5rem 0; /* Spacing around the divider */
}

.ellipsis-select {
  width: 100%;
  max-width: 200px; /* Adjust max width as needed */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Ensuring ellipsis effect inside options */
.ellipsis-select option {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}

/* Tooltip on hover */
.ellipsis-select option:hover {
  position: relative;
}

.ellipsis-select option:hover::after {
  content: attr(title); /* Display full text */
  position: absolute;
  left: 0;
  top: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 100;
}

.radio-buttons {
  display: flex;
  gap: 20px;
}

.custom-radio {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.custom-radio input[type='radio'] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 0.5px solid rgb(8, 8, 8);
  border-radius: 50%;
  outline: none;
  margin-right: 8px;
  cursor: pointer;
  position: relative;
}

.custom-radio input[type='radio']::before {
  content: '';
  width: 8px;
  height: 8px;
  background-color: #008080;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.custom-radio input[type='radio']:checked::before {
  opacity: 1;
}

.instruction img {
  width: 80x !important;
  height: 60px !important;
}
.vaccine-label-data img {
  height: 100px !important;
  width: 100px !important;
}
/* .instruction {
  width: 100px !important;
  word-break: break-word;
} */
.vaccine-label-data p {
  overflow: hidden; /* Ensure content is clipped and does not overflow */
  display: block;
  word-wrap: break-word;
}
.ql-editor p > img {
  height: 100px !important;
  width: 100px !important;
}

/* used in common table */
.rbc-event,
.rbc-day-slot .rbc-background-event {
  padding: 0 !important;
  display: flex !important;
  width: 100% !important;
}

/* .rbc-current .rbc-button-link{
  background-color: var(--primaryColor) !important;
  border-radius: 50% !important;
  padding-inline: 3px !important;
  margin-bottom: 2px !important;
  color:  var(--whiteColor) !important;

} */

.rbc-day-bg + .rbc-day-bg {
  /* border: none !important; */
}
.rbc-ellipsis,
.rbc-show-more,
.rbc-row-segment .rbc-event-content,
.rbc-event-label {
  width: 100% !important;
}
.rbc-today {
  position: relative !important;
  background-color: transparent !important;
}

.rbc-agenda-view table.rbc-agenda-table tbody > tr > td {
  padding: 0 !important ;
  vertical-align: middle !important;
}
.rbc-btn-group {
  margin-right: 6px !important;
}
.rbc-agenda-event-cell {
  /* width: none !important; */
}
.rbc-current {
  background-color: var(--primaryColor) !important;
  color: var(--whiteColor) !important;
}

.rbc-date-cell {
  margin-bottom: 3px !important;
}

.rbc-active {
  background-color: var(--primaryColor) !important;
  color: var(--whiteColor) !important;
  box-shadow: none !important;
}

.holiday-cell {
  /* background-color: #D7D7D7 !important;
  ; */
  background-color: var(--secondaryColor) !important;
}

.rbc-off-range-bg {
  background-color: #f9f9f9 !important;
  /* background-color:  var(--secondaryColor) !important; */
}
.rbc-event {
  z-index: 100;
}

.rbc-event:hover {
  height: auto !important;
  z-index: 101;
}

.rbc-event-label {
  display: none !important ;
}
.appointmenteSperator {
  border: solid var(--terteryColor);
  border-width: 1px 1px 1px 1px;
  border-radius: 5px;
  padding-bottom: 40px;
}

.hellotext {
  color: black;
  font-size: 12px;
  font-weight: 600;
  line-height: 22px;
}
.navbarhello {
  background-color: white;
  border-radius: 4px;
}

.custom-backdrop {
  background-color: rgba(69, 63, 63, 0.4) !important; /* Semi-transparent gray */
  backdrop-filter: blur(5px); /* Apply blur effect */
  -webkit-backdrop-filter: blur(5px); /* For Safari compatibility */
  opacity: 1 !important; /* Ensure backdrop is visible */
}

/* Optional: Ensure the modal content stays above the blurred backdrop */
.custom-modal .modal-content {
  background-color: #fff; /* Or your preferred background */
  position: relative;
  z-index: 1055; /* Higher than default backdrop z-index (1050) */
}

.complaint-card {
  /* border: 1px solid #dbe6f3; */
  border-radius: 8px;
  /* padding: 20px; */
  width: 100%;
  max-width: 400px;
  transition: all 0.3s ease;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  padding: 8px;
  padding-top: 10px;
  margin-right: 6px;
  min-height: 280px;
}

.complaint-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 16px;
  color: #2c2c2c;
}

.complaint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.complaint-label {
  width: 100px;
  font-weight: 500;
  color: #4a4a4a;
  font-size: 13px;
}

.progress-bar-container {
  flex: 1;
  height: 6px;
  border-radius: 10px;
  margin: 0 12px;
  overflow: hidden;
  position: relative;
  background-color: #f0f0f0;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.progress-bar-container:hover .progress-bar-fill {
  filter: brightness(0.9);
}

.complaint-percent {
  width: 40px;
  text-align: right;
  font-weight: 500;
  color: #333;
}

.toolbar-dropdown {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.range-select {
  padding: 6px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s;
}

.range-select:focus {
  border-color: #2b78f6; /* highlight on focus */
}

.scroll-adjusted::-webkit-scrollbar {
  width: 8px; /* Thin scrollbar */
}

.scroll-adjusted::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-adjusted::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3); /* scrollbar color */
  border-radius: 4px;
}

.section-divider {
  border: 0;
  height: 1px;
  color: rgb(0, 0, 0);
  width: 100%; /* Full width of the parent container */

  background-color: #ddd;
  margin: 16px 0;
}

/* loader */
/* src/components/GlobalLoader.css */

.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(239, 237, 237, 0.858);
  backdrop-filter: blur(1px); /* 🔥 This adds the blur effect */
  -webkit-backdrop-filter: blur(1px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 115px; /* 🔧 Reduced size */
  height: 50px;
  stroke-dasharray: 1; /* 🔄 Unit length dash */
  stroke-dashoffset: 1; /* 🔄 Full offset */
  animation: ekg-flow 1.2s linear infinite;
}

@keyframes ekg-flow {
  0% {
    stroke-dashoffset: 1;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.loading-text {
  color: #6c6f6f;
  font-size: 16px;
  font-weight: 500;
  /* text-shadow: 0 0 4px rgba(0, 0, 0, 0.3); */
  margin-top: 12px;
}

.tooltip-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px; /* or whatever width you need */
}

/* custom-typeahead.css */
.custom-typeahead .rbt-input-main::placeholder {
  font-size: 12px;
  font-weight: 600;
  color: #999; /* adjust placeholder color */
  z-index: 0 !important; /* lower its stacking context */
}


/* Reorder buttons to: Back, Today, Next */
.rbc-toolbar .rbc-btn-group {
  display: flex !important;
  flex-direction: row !important;
  gap: 4px !important;
}

/* Target the default buttons by order (Today is first by default in React Big Calendar) */
.rbc-toolbar .rbc-btn-group button:nth-child(1) {
  order: 2; /* Today */
}
.rbc-toolbar .rbc-btn-group button:nth-child(2) {
  order: 1; /* Back */
}
.rbc-toolbar .rbc-btn-group button:nth-child(3) {
  order: 3; /* Next */
}

/* Optional – Keep consistent look */
.rbc-toolbar .rbc-btn-group button {
  border: 1px solid #ddd !important;
  background: #fff !important;
  padding: 4px 12px !important;
  border-radius: 2px !important;
  color: #333 !important;
  font-weight: 500 !important;
  cursor: pointer;
  margin-left: 2px;
}

.rbc-toolbar .rbc-btn-group button:hover {
  background-color: var(--primaryColor) !important;
    color: var(--whiteColor) !important;

}


/* Reorder the view buttons — Day, Week, Month, Agenda */
.rbc-toolbar .rbc-btn-group:last-of-type {
  display: flex !important;
  flex-direction: row !important;
}

/* Default order is Month, Week, Day, Agenda — so we rearrange */
.rbc-toolbar .rbc-btn-group:last-of-type button:nth-child(1) {
  order: 3; /* Month */
}
.rbc-toolbar .rbc-btn-group:last-of-type button:nth-child(2) {
  order: 2; /* Week */
}
.rbc-toolbar .rbc-btn-group:last-of-type button:nth-child(3) {
  order: 1; /* Day */
}
.rbc-toolbar .rbc-btn-group:last-of-type button:nth-child(4) {
  order: 4; /* Agenda */
}

/* Optional — Add some spacing consistency */
.rbc-toolbar .rbc-btn-group:last-of-type button {
  margin-right: 5px;
  border: 1px solid #ddd !important;
  border-radius: 2px !important;
  background-color: #fff !important;
  color: #333 !important;
  font-weight: 500 !important;
  padding: 4px 11px !important;
  cursor: pointer;
  gap: 2px;
  display: flex !important;
}

.rbc-toolbar .rbc-btn-group:last-of-type button:hover,
.rbc-toolbar .rbc-btn-group:last-of-type button.rbc-active {
  background-color: var(--primaryColor) !important;
  color: var(--whiteColor) !important;
}