/* bootsnip index page */
.indexbody{
  background-image: url('../images/bluepink.jpg');
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: contain;
}

.supadminindexbody{
  background-image: url('../images/multicolorbg.jpg');
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: contain;
}

.supadmin-body {
  padding-top: 120px;  
  background-image:linear-gradient(to bottom right, #CCCCFF, #ffffff);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.subadmin-body { 
  padding-top: 120px; 
  background-image:linear-gradient(to bottom right, #9FE2BF, #ffffff);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
} 
.admin-body { 
  padding-top: 120px; 
  background-image:linear-gradient(to bottom right, #FAD7A0, #ffffff);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
} 
.pharm-body { 
  padding-top: 120px; 
  background-image:linear-gradient(to bottom right, #daffe7, #ffffff);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.cworker-body{
  padding-top: 120px; 
  background-image:linear-gradient(to bottom right, #E6A4F9, #ffffff);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.dmanager-body{
  padding-top: 120px; 
  background-image:linear-gradient(to bottom right, #B6D0E2, #ffffff);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.labtech-body{
  padding-top: 120px; 
  background-image:linear-gradient(to bottom right, #75ece3, #ffffff);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.doctor-body{
  padding-top: 120px; 
  background-image:linear-gradient(to bottom right, #BAD2FC, #ffffff);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.supnurse-body{
  padding-top: 120px; 
  background-image:linear-gradient(to bottom right, #FFC0CB, #ffffff);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.nurseassist-body{
  padding-top: 120px; 
  background-image:linear-gradient(to bottom right, #F995D6, #ffffff);
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


/* supadmin grid */
/* .supadmin_grid_container {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: auto;
  gap: 10px;  
}

.supadmin_navbar{
  grid-area: 1 / 1 / span 1 / span 2;
}
.supadmin_item1 { 
  grid-area: 2 / 1 / span 1 / span 2; 
  background-color: black;
}
.supadmin_namediv{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
#supadminToken_infodiv{
  display:flex;
      flex-direction: row;
      align-items: center;
      margin: 0;
    padding: 0;
    flex-wrap: wrap; 
    justify-content: center;
}
.supadmin_item2 .supadmin_item2_flex_containe{
  display:inline-grid; 
   grid-area: 3 / 1 / span 1 / span 1; 
    width:70%;  
 }
 .supadmin_item2_flex_container{
  display:inline-flex;
  flex-direction: column;
  align-items:flex-start;
} 
  .supadmin_item3 { 
  display:inline-grid;
   grid-area: 3 / 2 / span 1 / span 1; 
  width:85%;  
 } 
 .supadmin_item3 #supadminright { 
  display:inline-grid;
   grid-area: 3 / 2 / span 1 / span 1; 
  width:85%;  
 }

.supadmin_item2c {
  width: 98%;
} 
 */

/* @media only screen and (max-width:540) {
    
}
@media screen and (max-width:1130){
  .supadmin_item3{
    margin-left:50px;
  }
 
} */
.supadmin_grid_container {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: auto;
  gap: 10px; 
}

.supadmin_navbar{
  grid-area: 1 / 1 / span 1 / span 2;
}

.supadmin_item1 { 
    grid-area: 2 / 1 / span 1 / span 2; 
    background-color: black;
    padding: 2px;
}
  .supadmin_namediv{
  
      display: flex;
      
      align-items: flex-end;
      justify-content: flex-end;
     
  }
    #supadminToken_infodiv{
      display:flex;
      flex-direction: row;
      align-items: center;
      margin: 0;
    padding: 0;
    flex-wrap: wrap; /* Allows wrapping of items if necessary */
    justify-content: center; /* Centers buttons horizontally */
    }
    
    .supadmin_item2{
      display:inline-grid; 
      grid-area: 3 / 1 / span 1 / span 1; 
        /* width:90%;  */ 
    
    }    

.supadmin_item3 { 
  display:inline-grid; 
  grid-area: 3 / 2 / span 1 / span 1; 
 width:90%;  
}
/* .subadmin_item2b {
  width: 25%;
}*/
.supadmin_item2c {
  width: 98%;
} 
#content_container {
  width: 95%;
} 

 @media only screen and (max-width: 768px) {
  .supadmin_grid_container {
    display: grid;
    grid-template-columns: 1fr;
   
    grid-column-gap: 10px;
  } 
  .supadmin_navbar{
    grid-area: 1/1/span 1/ span 1;
  }
  .supadmin_item1{
    margin-top:40px;
    grid-area: 2/1/span 1/ span 2;
    width:100%;
  }
  .supadmin_item2{

    width:100%;
  }
  .supadmin_item3{
    grid-area: 6 / 1/ span 1 /span 2;

    
  }
 .supadmin_item2a{
  grid-area: 3/1/span 1/ span 2;
 }
 .supadmin_item2b{
  grid-area:4/1/span 1/ span 2;
 } 
 .supadmin_item2c{
  grid-area:5/1/span 1/ span 2;
 } 

}
.regPatient_cwdiv{
  max-height: 250px;
  overflow-y: auto;
  
}
/* patlist spa search  */
 .patient-info-table_spa {
  width: 80%;
 /*  table-layout: fixed; */
} 

 .patient-info-table_spa td {
  word-wrap: break-word;
  overflow-wrap: break-word;
} 

/*  .patient-info-content_spa {
  max-height: 300px; 
  overflow-y: auto;
}  */

.address-cell_patlistspa {
 width: 200px; /* Adjust this value based on your layout */
}

#addclinicfrm, #editclinicfrm, #reportspa_frm{
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
}
#reportspa_frm {
  display: grid;
   grid-template-columns: 100%; 
  /*gap: 10px;  *//* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
}
/* .spa_report_note{
  grid-area:1/1/span 1/ span 2;
} */
#editclinicfrm {
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: rgb(242, 244, 218);
  padding:20px;
  width:100%;
}
.editcli_hr_line{
  grid-area:3/1/span 1/ span 2;
}
.clinic_last_item{
  grid-area:9/1/span 1/ span 2;

}
.editclinic_last_item{
  grid-area:10/1/span 1/ span 2; 
}
.clinictableheading{
  grid-area:1/1/span 1/ span 2;
}
#addclinicmsg{
  grid-area:2/1/span 1/ span 2;
}

/* Media query for screens with a maximum width of 600px */
@media only screen and (max-width: 768px) {
  #addclinicfrm{
      /* grid-template-columns: 1fr;*/
      width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
    }
}

/* leave form */
#leavefrm {
  display:flex;
  flex-direction: column;
  /* gap: 10px; */ /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:50%;
  margin:auto;
}
@media only screen and (max-width: 768px) {
  #leavefrm{
    display:flex;
    flex-direction: column;
    /* gap: 10px; */ /* Gap between form items */
    background-color: whitesmoke;
    padding:20px;
    width:100%;
    margin:auto;
    }
}
/* sba srch patient side form */
#srcpatfrm_side{
  background-color: #82E0AA ;

  padding-top:5px;
  padding-bottom:8px;
  border-radius:5px;
}
#srchbtResultfrm_ltside{
  border-radius:5px;
  display: grid;
  grid-template-columns: 50% 35% 1% 10%; /* Adjust the minmax value as needed */
  gap: 2px; /* Gap between form items */
  background-color: #82E0AA ;
  padding:5px;
  width:100%;

}
.bloodTestResult_ltsideDiv{
  grid-area:1/1/span 1/ span 4;
}

#srchTknStatusfrm_cwside{
  border-radius:5px;
  display: grid;
  grid-template-columns: 30% 50% 8%; /* Adjust the minmax value as needed */
  gap: 2px; /* Gap between form items */
  background-color: #82E0AA ;
  padding:5px;
  width:100%;
}
/* ph srch medicine side form */
#srcmedfrm_side{
  background-color: #82E0AA ;

  padding-top:5px;
  padding-bottom:8px;
  border-radius:5px;
}
#srchinvfrm_side{
  background-color: #d7e48f ;

  padding-top:5px;
  padding-bottom:8px;
  border-radius:5px;
}
#srchsuppfrm_side{
  background-color: #8fc0e4 ;

  padding-top:5px;
  padding-bottom:8px;
  border-radius:5px;
}
#msgfrm, #replymsgfrm{
  /* background-color: #ecbcf5 ; */

  padding-top:5px;
  padding-bottom:8px;
  border-radius:5px;
}
/* message frm dropdown */
.receiverid_dropdown {
  position: relative;
  display: inline-block;
}
.receiverid_btn {
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  cursor: pointer;
}
.receiverid_content {
display: none; 
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  z-index: 1;
  max-height: 150px;
  overflow-y: auto;
}
/* .select_wrapper{
 
  width:200px;
  padding:20px;
  height: 150px;
  } */
  #srchsupplierresult_sidediv{
    max-height:200px;
    overflow-y: auto;
  }
  .ph_item3d{
    max-height:200px;
    overflow-y: auto;
  }
  .disease_optionsdiv{
    max-height:200px;
    overflow-y: auto;
  }
  #srchmedresult_div_side{
    max-height:200px;
    overflow-y: auto;
  }
.receiverid_content label {
  display: block;
  padding: 8px;
  cursor: pointer;
}
.receiverid_content label:hover {
  background-color: #ddd;
}
.receiverid_selected {
  background-color: #007bff;
  color: white;
}
/* schedule frm dropdown */
.scheduleid_dropdown {
  position: relative;
  display: inline-block;
}
.scheduleid_btn {
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  cursor: pointer;
}
.scheduleid_content {
display: none; 
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  z-index: 1;
  max-height: 150px;
  overflow-y: auto;
}
.scheduleid_content label {
  display: block;
  padding: 8px;
  cursor: pointer;
}
.scheduleid_content label:hover {
  background-color: #ddd;
}
.scheduleid_selected {
  background-color: #007bff;
  color: white;
}


/* assign meeting frm dropdown */
.assignmeeting_dropdown,  .editassignmeeting_dropdown{
  position: relative;
  display: inline-block;
}
.assignmeeting_btn, .editassignmeeting_btn {
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  cursor: pointer;
}
.assignmeeting_content, .editassignmeeting_content {
display: none; 
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  z-index: 1;
  max-height: 150px;
  overflow-y: auto;
}
.assignmeeting_content label, .editassignmeeting_content label {
  display: block;
  padding: 8px;
  cursor: pointer;
}
.assignmeeting_content label:hover, .editassignmeeting_content label:hover {
  background-color: #ddd;
}
.assignmeeting_selected, .editassignmeeting_selected {
  background-color: #007bff;
  color: white;
}
/* edit cw schedule frm dropdown */
.edit_scheduleid_dropdown {
  position: relative;
  display: inline-block;
}
.edit_scheduleid_btn {
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  cursor: pointer;
}
.edit_scheduleid_content {
display: none; 
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  z-index: 1;
  max-height: 150px;
  overflow-y: auto;
}
.edit_scheduleid_content label {
  display: block;
  padding: 8px;
  cursor: pointer;
}
.edit_scheduleid_content label:hover {
  background-color: #ddd;
}
.edit_scheduleid_selected {
  background-color: #007bff;
  color: white;
}
/* reply frm dropdown */
.reply_receiverid_dropdown {
  position: relative;
  display: inline-block;
}
.reply_receiverid_btn {
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  cursor: pointer;
}
.reply_receiverid_content {
display: none; 
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  z-index: 1;
  max-height: 150px;
  overflow-y: auto;
}
.reply_receiverid_content label {
  display: block;
  padding: 8px;
  cursor: pointer;
}
.reply_receiverid_content label:hover {
  background-color: #ddd;
}
.reply_receiverid_selected {
  background-color: #007bff;
  color: white;
}
/* flag frm dropdown */
.flag_receiverid_dropdown {
  position: relative;
  display: inline-block;
}
.flag_receiverid_btn {
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  cursor: pointer;
}
.flag_receiverid_content {
display: none; 
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  z-index: 1;
  max-height: 150px;
  overflow-y: auto;
}
.flag_receiverid_content label {
  display: block;
  padding: 8px;
  cursor: pointer;
}
.flag_receiverid_content label:hover {
  background-color: #ddd;
}
.flag_receiverid_selected {
  background-color: #007bff;
  color: white;
}

/* cwreport  dropdown*/

.cwreport_dropdown {
  position: relative;
  display: inline-block;
}
.cwreport_btn {
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  cursor: pointer;
}
.cwreport_content {
display: none; 
  position: absolute;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  z-index: 1;
  max-height: 150px;
  overflow-y: auto;
}
.cwreport_content label {
  display: block;
  padding: 8px;
  cursor: pointer;
}
.cwreport_content label:hover {
  background-color: #ddd;
}
.cwreport_selected {
  background-color: #007bff;
  color: white;
}


/* for blinking */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.blinking {
  animation: blink 1s infinite;
}

/* end of msg form dropdown */

#addcwreportfrm {
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
  margin:auto;
}

.visitreportheading{
  grid-area:1/1/span 1/ span 2;
  text-align: center;
}

.visitremarks_div{
  grid-area:5/1/span 1/ span 2;
  text-align: center;
}
/* cw general details of people */
#cwVisitReport_frm{
  display: grid;
  grid-template-columns: 40% 35% 20%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: rgb(201, 224, 241);
  padding:20px;
  width:100%;
  margin:auto;
}
.cwVisitReportfrm_note{
  grid-area:1/1/span 1/ span 3;
  /* text-align: center; */
}
/* cw registration report */
#cwRegReport_frm{
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: rgb(244, 193, 229);
  padding:20px;
  width:100%;
  margin:auto;
}
.cwRegReportfrm_note{
  grid-area:1/1/span 1/ span 2;
  /* text-align: center; */
}

/* cw unregistration report */
#cwUnregistered_frm{
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: rgb(230, 193, 244);
  padding:20px;
  width:100%;
  margin:auto;
}
.cwUnregisteredfrm_note{
  grid-area:1/1/span 1/ span 2;
  /* text-align: center; */
}

/* registered patients report either clinic / cw */

#patientsregistered_frm{
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: rgb(173, 227, 164);
  padding:20px;
  width:100%;
  margin:auto;
}
.patientsregisteredfrm_note{
  grid-area:1/1/span 1/ span 2;
  /* text-align: center; */
}
/* Patient list report admin  */
/* Ensures proper alignment of the headers */
.patientlistreportTH {
  text-align: center; 
  vertical-align: middle; 
  padding: 8px;
    border: 1px solid #f6f8f8;
}

/* Style for the 'Age' column group to have extra spacing */
.colpanpatientlist {
  text-align: center;
}

/* Optional: Add background color for clarity */
.bg-secondary-subtle {
  background-color: #f8f9fa;
  color: #333;
}

/* Optional: Style for the 'Date' and 'Total Patients' columns to appear centered */
.rowspanpatientlist {
  vertical-align: middle; /* Center the text for these columns across the two header rows */
}



#addcwgeneralfrm {
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
  margin:auto;
}
.cwgeneralheading{
  grid-area:1/1/span 1/ span 2;
  text-align: center;
}
.general_details{
  grid-area:5/1/span 1/ span 2;
  text-align: center;
}
/* get family id frm */

#getfamilyidfrm {
  display: grid;
  grid-template-columns: 58% 20% 20%;/* Adjust the minmax value as needed */
  gap: 5px; /* Gap between form items */
  background-color: rgb(238, 240, 202);
  padding:15px;
  width:100%;
  margin:auto;
}
@media only screen and (max-width: 768px) {
  #getfamilyidfrm, 
  #addcwgeneralfrm, 
  #addcwreportfrm {
      /* grid-template-columns: 1fr;*/
      width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
    }
}
.familysrchheading{
  grid-area: 1/1/span 1 / span 3;
}
#familysrch_notediv{
  grid-area: 2/1/span 1 / span 3;
}
/* .familysearchlastitem{
  grid-area: 4/1/span 1 / span 2;
} */
/* addpatientfrm */
#addpatientfrm {
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
  margin:auto;
}

#addpatfrm_supad {
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
  margin:auto;
}
#editpatientfrm {
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color:rgb(242, 244, 218);
  padding:20px;
  width:100%;
  margin:auto;
}
.patienttableheading{
  grid-area:1/1/span 1/ span 2;
  text-align: center;
}
.familysearch_insertpat {
  grid-area:2/1/span 1/ span 2;
  
}
/* .addpat_clinic_div{
  grid-area:2/1/span 1/ span 2;
  text-align: center;

} */
/* #patginfomsg{
  grid-area:2/1/span 1/ span 2;
} */
.getclinicdiv{
  grid-area:2/1/span 1/ span 2;
}

.patginfoheading{
  grid-area:3/1/span 1/ span 2;
  
}
.patmhisheading{
  grid-area:10/1/span 1/ span 2;
}
.patfhisheading{
  grid-area:17/1/span 1/ span 2;
}
.addpatsupdoc{
  grid-area:32/1/span 1/ span 2;
}
 .set_addpatient{
  grid-area:34/1/span 1/ span 2;
} 
.addpatlastitem{
  grid-area:35/1/span 1/ span 2;
}


@media only screen and (max-width: 768px) {
  #addpatientfrm, #editpatientfrm {
      /* grid-template-columns: 1fr;*/
      width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
    }
}

#dm_dateEmp_frm{
  display: grid;
  grid-template-columns: 60% 30%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
  margin:auto;
}
.dmdatedemographfrm_note{
  grid-area:1/1/span 1/ span 2; 
}
@media only screen and (max-width: 768px) {
  #dm_dateEmp_frm {
      /* grid-template-columns: 1fr;*/
      width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
    }
}
/* home profile divs */

#addhprofilefrm, #external_addhprofilefrm {
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
  margin:auto;
}

#edithprofilefrm {
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: #f8f5f2;
  padding:20px;
  width:100%;
  margin:auto;
}

.hometableheading{
  grid-area:1/1/span 1/ span 2;
  text-align: center;
}
.basicInfo_container{
  grid-area:2/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.homebinfoheading{
  grid-area:1/1/span 1/ span 2;
  text-align: center;
}
.pas_name{
  grid-area:7/1/span 1/ span 2;
 }
/*  .hprofile_mapcw{
  grid-area:8/1/span 1/ span 2;
 } */
.pastor_container{
  grid-area:8/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.pastorHeading{
  grid-area:1/1/span 1/ span 2;
 } 
 @media only screen and (max-width: 768px) {
  .pastor_container {
      /* grid-template-columns: 1fr;*/
      width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
    }
}

 /* end of basic info container which has the pastor container */
.homefdmainheading{
  grid-area:3/1/span 1/ span 2;
  text-align: center;
}
.fmember_container{
  grid-area:4/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}

.homefmdheading{
  grid-area:1/1/span 1/ span 2;
}
#homefmemberWrapper{
  grid-area:2/1/span 1/ span 2;

}
#homefmemberContainer{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:100%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}

.homefmemberheading{
  grid-area:1/1/span 1/ span 3;
}

@media only screen and (max-width: 768px) {
  #homefmemberContainer {
      grid-template-columns: 1fr;
      width:100%;
      margin:0;
      align-content:center;
      display:flex;
      flex-direction: column;
      
    }
}/* end of family member container */
#viewfmember_modal #fmeditModal_container{
  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; 
  gap: 10px; 
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
@media only screen and (max-width: 768px) {
  #viewfmember_modal #fmeditModal_container {
      grid-template-columns: 1fr;
      width:100%;
      margin:0;
      align-content:center;
      display:flex;
      flex-direction: column;
    }
    .basicInfo_container{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }  
}
.fmember_editcontainer{
  grid-area:4/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 10px; 
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.edit_homefmdheading{
  grid-area:1/1/span 1/ span 2;
}
.edit_fmhprofile_container{
  grid-area:2/1/span 1/ span 2;
}


.childrenVaccinated_maincontainer{
  grid-area:5/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%;
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
} /* wrapper and container are part of this */
.cVaccinatedQuestion{
  grid-area:1/1/span 1/ span 2;
}
.editvaccinehprofile_container{
  grid-area:2/1/span 1/ span 2;
  display:flex;
}


#cVaccinatedWrapper{
  grid-area:3/1/span 1/ span 2; 
  
}
#cVaccinatedContainer{
  /* grid-area:1/1/span 1/ span 3; */
  display: grid;
  grid-template-columns: 1fr 1fr ; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.cVaccinatedheading {
  grid-area:1/1/span 1/ span 2;
}
.child_name{
  grid-area:2/1/span 1/ span 1;
}
.addchildVaccine{
  grid-area:2/2/span 1/ span 1;
}
.bcg{
  grid-area:3/1/span 1/ span 1;
}
.yov_bcg{
  grid-area:3/2/span 1/ span 1;
}
.opv{
  grid-area:4/1/span 1/ span 1;
}
.yov_opv{
  grid-area:4/2/span 1/ span 1;
}
.penta{
  grid-area:5/1/span 1/ span 1;
}
.yov_penta{
  grid-area:5/2/span 1/ span 1;
}
.measles{
  grid-area:6/1/span 1/ span 1;
}
.yov_measles{
  grid-area:6/2/span 1/ span 1;
}
.rotavirus{
  grid-area:7/1/span 1/ span 1;
}
.yov_rota{
  grid-area:7/2/span 1/ span 1;
}

.familyIndepth_container{
  grid-area:6/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:100%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.homefindepthheading{
  grid-area:1/1/span 1/ span 2;
}
.indepth_financeContainer{
  grid-area:2/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:100%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.homefexpenseContainer{
  grid-area:1/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
@media only screen and (max-width: 768px) {
  .homefexpenseContainer {
      /* grid-template-columns: 1fr;*/
      width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
    }
}
.homefexpenseheading{
  grid-area:1/1/span 1/ span 3;
}
.homeTransportContainer{
  grid-area:2/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.homeTransportheading{
  grid-area:1/1/span 1/ span 2;
}

.transport_checkboxcontainer{
  grid-area:3/1/span 1/ span 2; 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
@media only screen and (max-width: 768px) {
  .transport_checkboxcontainer{
      /* grid-template-columns: 1fr;*/
      width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
    }
}

.transportQuestion{
  grid-area:1/1/span 1/ span 3; 
}
.m_transportExpense{
  grid-area:4/1/span 1/ span 2; 
}

.homeMoneyContainer{
  grid-area:3/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
@media only screen and (max-width: 768px) {
  .shortfall_span{
      /* grid-template-columns: 1fr;*/
      width:50%;
      white-space: normal; 
      word-wrap: break-word; 
      text-align:left;
    }
}
.homeMoneyheading{
  grid-area:1/1/span 1/ span 1;
}
.homeSavingContainer{
  grid-area:4/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.homeSavingheading{
  grid-area:1/1/span 1/ span 2;
  
}
.dosave{
  grid-area:2/1/span 1/ span 2;
}
@media only screen and (max-width: 768px) {
  .save_bank{
    /* grid-template-columns: 1fr;*/
    grid-area:3/1/span 1/ span 2;
  }
  .save_hand{
      /* grid-template-columns: 1fr;*/
      grid-area:4/1/span 1/ span 2;
    }
    .housingownership_span, .threewheel_span, .autorickshaw_span{
      width:50%;
      white-space: normal; 
      word-wrap: break-word; 
      text-align:left;
    }
}
.homeAssetContainer{
  grid-area:5/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.homeAssetheading{
  grid-area:1/1/span 1/ span 2;
}
/* .homeimmovableheading{
  grid-area:2/1/span 1/ span 2;
} */
.homeimmovableAssetheading{
  grid-area:2/1/span 1/ span 2;
}
.house_status{
  grid-area:3/1/span 1/ span 2;
}
.prop_worth, .rent_amt, .rentOffice_amt{
  grid-area:4/1/span 1/ span 2;
}

.homemovableAssetTableheading{
  grid-area:6/1/span 1/ span 2;
}

.bicycle{
  grid-area:7/1/span 1/ span 2;
}
.rickshaw{
  grid-area:9/1/span 1/ span 2;
}
.autorickshaw{
  grid-area:10/1/span 1/ span 2;
}
.mcycle{
  grid-area:11/1/span 1/ span 2;
}
.car{
  grid-area:12/1/span 1/ span 2;
}
.gold{
  grid-area:13/1/span 1/ span 2;
}
.cow{
  grid-area:14/1/span 1/ span 2;
}
.goat{
  grid-area:15/1/span 1/ span 2;
}

.chicken{
  grid-area:16/1/span 1/ span 2;
}


@media only screen and (max-width: 768px) {

  .threewheel_span, .autorickshaw_span{
    /* width:50%; */
    white-space: normal; 
    word-wrap: break-word; 
    text-align:left;
  }
}

/* end of home asset container */
/* end of indepth container */

/* after family indepth container */
.health_container{ 
  grid-area:7/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.hygieneHealthheading{
  grid-area:1/1/span 1/ span 2;
}
.waterUsage_container{ 
  grid-area:2/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
@media only screen and (max-width: 768px) {
  .waterUsage_container {
    width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
  }
    .waterusageQuestion{
      grid-area:1/1/span 1/ span 3;
    }
}
.waterusageQuestion{
  grid-area:1/1/span 1/ span 3;
}

#diabetes_reason option[selected] {
  color: green;
}
.familySickness_container{ 
  grid-area:3/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.commonIllness_container{ 
  grid-area:4/1/span 1/ span 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.commonIllnessQuestion{
  grid-area:1/1/span 1/ span 3;
}
@media only screen and (max-width: 768px) {
  .commonIllness_container {
    width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
  }
 /*    .waterusageQuestion{
      grid-area:1/1/span 1/ span 3;
    } */
}

/* area sanitation */
.sanitation_container{
  grid-area:8/1/span 1/ span 2; 
  display: grid;
  grid-template-columns: 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.poorSani_reason_checkboxcontainer{ /* sanitation container item */
  grid-area:3/1/span 1/ span 1; 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.poorSaniQuestion{
  grid-area:1/1/span 1/ span 3;
} 
.poorSani_disease_checkboxcontainer{
  grid-area:5/1/span 1/ span 1; 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}

 .poorSaniDiseaseQuestion{
  grid-area:1/1/span 1/ span 3;
}/* end of sanitation container */
/* substance conatiner inside health container */
.substance_container{
  grid-area:7/1/span 1/ span 2; 
  display: grid;
  grid-template-columns: 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
/* end of health container which has 6 containers in it */
.education_container{
  grid-area:9/1/span 1/ span 2; 
  display: grid;
  grid-template-columns: 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}

.churchAid_checkboxcontainer{
 /*  grid-area:8/1/span 1/ span 2;  */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.churchAidQuestion{
  grid-area: 1/1/span 1/ span 3;
}/* end of education container */

.spiritual_container{
  grid-area:10/1/span 1/ span 2; 
  display: grid;
  grid-template-columns: 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.spiritual_heading{
  grid-area: 1/1/span 1/span 1;
}
.religiousedu_checkboxcontainer{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.religiouseduQuestion{
  grid-area: 1/1/span 1/ span 3;
}

.pastorVisit_checkboxcontainer{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.pastorVisitQuestion{
  grid-area: 1/1/span 1/ span 3;
}
.media_checkboxcontainer{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.mediaQuestion{
  grid-area: 1/1/span 1/ span 3;
}
.ministry_checkboxcontainer{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.ministryQuestion{
  grid-area: 1/1/span 1/ span 3;
}
.hprofileLastbtn{
  grid-area:11/1/span 1/ span 2;
  
}
@media only screen and (max-width: 768px) {
  .religiousedu_checkboxcontainer, 
  .ministry_checkboxcontainer, 
  .media_checkboxcontainer,
  .pastorVisit_checkboxcontainer,
  .churchAid_checkboxcontainer,
  .poorSani_disease_checkboxcontainer,
  .poorSani_reason_checkboxcontainer {
    width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
  }
  .spiritual_container span, 
  .education_container span, 
  .substance_container span,
  .sanitation_container span,
  .familySickness_container span,
  .homeAssetContainer span,
  .homeMoneyContainer span{
    width:50%;
    white-space: normal; 
    word-wrap: break-word; 
    text-align:left;
  }
  .commonIllnessQuestion{
    width:100%;
    white-space: normal; 
    word-wrap: break-word; 
    text-align:left;
  }
}


@media only screen and (max-width: 768px) {
  #addhprofilefrm {
      /* grid-template-columns: 1fr;*/
      width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
    }
}

#vaccineeditModal_container{
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px; 
}
.editchild_name{
  grid-area:1/1/span 1/ span 2;
}
.editvaccine_lastbtn{
  grid-area:8/1/span 1/ span 2;
}

/* hprofile modal view cw */
.hprofilecwview_container{
 
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:97%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
.fmhprofile_container{
  grid-area:2/1/span 1/ span 2;
}
.vaccinehprofile_container{
  grid-area:3/1/span 1/ span 2;
}
.spiritualhprofile_container{
  grid-area:7/1/span 1/ span 2;
}
@media only screen and (max-width: 768px) {
  #hprofilecwview_container {
      /* grid-template-columns: 1fr;*/
      width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
    }
}



/* addempfrm */
#addempfrm, #updateempfrm, #addcworkerfrm, #updateCworker_sbafrm  {
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
  margin:auto;
}
.communityworker_empqualheading{
  grid-area:10/1/span 1/ span 2;
}
.updateCworkerQualheading{
  grid-area:9/1/span 1/ span 2;
}
#updateempdetailsfrm{
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: rgb(237, 243, 205);
  padding:20px;
  width:100%;
  margin:auto;
}
.employeetableheading{
  grid-area:1/1/span 1/ span 2;
  text-align: center;
}
/* #patginfomsg{
  grid-area:2/1/span 1/ span 2;
} */

.empginfoheading{
  grid-area:2/1/span 1/ span 2;
}

.empqualheading{
  grid-area:12/1/span 1/ span 2;
}
.update_empqualheading{
  grid-area:12/1/span 1/ span 2;
}
.update_empqualheadingstaff{
  grid-area:9/1/span 1/ span 2;
}
.addempbtns{
  grid-area:17/1/span 1/ span 2;
}

@media only screen and (max-width: 768px) {
  #addempfrm, #updateempfrm {
      /* grid-template-columns: 1fr;*/
      width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
    }
}

#updateempfrm_supad{
  display: grid;
  grid-template-columns: 30% 30% 20%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  /* background-color: whitesmoke; */
  padding:20px;
  width:100%;
  margin:auto;
}
/* add medicine form */

#addmedfrm {
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
  margin:auto;
}
.medicinetableheading{
  grid-area:1/1/span 1/ span 2;
  text-align: center;
}

.addmedbtns{
  grid-area:9/1/span 1/ span 2;
}

@media only screen and (max-width: 768px) {
  #addmedfrm {
    display: grid;
    grid-template-columns: 1fr;
    padding:20px;
    width:100%;
    margin:auto;
      /* grid-template-columns: 1fr;*/
    /*   width:100%; */
      /* margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%; */
      /* Adjust the minmax value as needed */
  /* Gap between form items */
 
 
    }
}
/* .m_disease {
  width: 100%;
}

.m_disease option {
  padding: 5px;
}

.m_disease label {
  display: block;
  padding-left: 20px;
} */
.m_disease {
  overflow: hidden;
  display: block;
  height: auto;
  max-height: 2.5em; /* Adjust this to the height of one option */
  overflow-y: hidden;
}

.m_disease:focus {
  overflow-y: auto;
  height: auto;
  max-height: 5em; /* Adjust this to show only two options with a scrollbar */
}

/* Custom styling for the checkboxes inside the select */
.medinput {
  margin-right: 5px;
}
/* .editmedbtns{
  grid-area:9/1/span 1/ span 2;
} */
#mededit_detailfrm{
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
  margin:auto;
}
@media only screen and (max-width: 768px) {
  #mededit_detailfrm {
      /* grid-template-columns: 1fr;*/
      width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
    }
}
#suppedit_detailfrm{
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
  margin:auto;
}
@media only screen and (max-width: 768px) {
  #suppedit_detailfrm {
      /* grid-template-columns: 1fr;*/
      width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
    }
}


#grnfrm{
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
  margin:auto;
}
@media only screen and (max-width: 768px) {
  #grnfrm{
      /* grid-template-columns: 1fr;*/
      width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
    }
}
.grnbtns{
  grid-area:9/1/span 1/ span 2;
}


.scrollable-select {
  max-height: 100px; /* Adjust the height as needed */
  overflow-y: auto;
}

#ordermedfrm {
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
  margin:auto;
}
.ordertableheading{
  grid-area:1/1/span 1/ span 2;
  text-align: center;
}

#medlistWrapper{
  grid-area:3/1/span 1/ span 2;
  text-align: center;
}
.medicine_display{
  grid-area:4/1/span 1/ span 2;
}
.orderRemarks_div{
  grid-area:5/1/span 1/ span 2;
  
}
#ordermedContainer{
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:100%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
@media only screen and (max-width: 768px) {
  #ordermedContainer {
      grid-template-columns: 1fr;
      width:100%;
      margin:0;
      align-content:center;
      display:flex;
      flex-direction: column;
      
    }
}
.med_listheading{
  grid-area:1/1/span 1/ span 2;
  text-align: left;
}


/* end of super admin grid */

/* subadmin grid */

.subadmin_grid_container {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: auto;
  gap: 10px; 
}

.subadmin_navbar{
  grid-area: 1 / 1 / span 1 / span 2;
}

.subadmin_item1 { 
    grid-area: 2 / 1 / span 1 / span 2; 
    background-color: black;
    padding: 2px;
}
  .subadmin_namediv{
  
      display: flex;
      
      align-items: flex-end;
      justify-content: flex-end;
     
  }
    #subadminToken_infodiv{
      display:flex;
      flex-direction: row;
      align-items: center;
      margin: 0;
    padding: 0;
    flex-wrap: wrap; /* Allows wrapping of items if necessary */
    justify-content: center; /* Centers buttons horizontally */
    }
    
    .subadmin_item2{
      display:inline-grid; 
      grid-area: 3 / 1 / span 1 / span 1; 
      width:90%; 
    
    }    

.subadmin_item3 { 
  display:inline-grid; 
  grid-area: 3 / 2 / span 1 / span 1; 
 width:85%; 
}
/* .subadmin_item2b {
  width: 25%;
}*/
/* .subadmin_item2c, .subadmin_item2msg{
  width: 98%;
} */ 


 @media only screen and (max-width: 768px) {
  .subadmin_grid_container {
    display: grid;
    grid-template-columns: 1fr;
   
    grid-column-gap: 10px;
  } 
  .subadmin_navbar{
    grid-area: 1/1/span 1/ span 1;
  }
  .subadmin_item1{
    margin-top:40px;
    grid-area: 2/1/span 1/ span 2;
    width:100%;
  }
  .subadmin_item2{

    width:100%;
  }
  .subadmin_item3{
    grid-area: 6 / 1/ span 1 /span 2;

    
  }
 .subadmin_item2a{
  grid-area: 3/1/span 1/ span 2;
  /* flex-grow: 1; */
 }
 .subadmin_item2b{
  grid-area:4/1/span 1/ span 2;
  /* flex-grow: 1; */
 } 
 .subadmin_item2c{
  grid-area:5/1/span 1/ span 2;
  /* flex-grow: 1; */
 } 

}

/* end of sub admin grid */

/* sn_diagnose_grid_container */
.sn_diagnose_grid_container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 10px; 
  /* background-color: rgb(246, 188, 188); */
  
  padding:15px;
  border:1px solid black;
}
 .snd_grid_item1{
  grid-area:2/1/span 1/ span 1;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 10px; 
  
  padding:15px;
  border:1px solid black;
}
.bmi_div{
  grid-area:1/1/span 1/ span 2;
}
.hb_div{
  grid-area:2/1/span 1/ span 2;
}
.vcount_div{
  grid-area:3/1/span 1/ span 2;
}
.initial_div{
  grid-area:2/2/span 1/ span 2;
}

.snd_grid_title{
  grid-area:1/1/span 1/ span 2;
}

.labsuggestions_div{
  grid-area:3/1/span 1/ span 2;
}

.diabetes_div{
  grid-area:4/1/span 1/ span 2;
}
.bp_div{
  grid-area:5/1/span 1/ span 2;
}
.todaysMedicine_div{
  grid-area:6/1/span 1/ span 2;
}
.todaysTest_div{
  grid-area:7/1/span 1/ span 2;
}

.evaluation_div{
  grid-area:8/1/span 1/ span 2;
}
.lastthreeevaluationTable_container{
  grid-area:9/1/span 1/ span 2;
}

.lastthreevisit_container{
  grid-area:10/1/span 1/ span 2;
}
.symptoms_suggestion_div{
  grid-area:11/1/span 1/ span 2;
}
.visit_div{
  grid-area:12/1/span 1/ span 2;
  background-color: #5DADF7;
}
.same_symptoms_div{
  grid-area:15/1/span 1/ span 2;
  background-color: #5DADF7;
}
.sn-zone-btn{
  grid-area:16/1/span 1/ span 2;
}

/* evaluation table 3 visits ht/wt/bp/glucose */
/* date Header Styles */
.threeevaluation_table .date-header {
  background-color: #eef8ca; /* Light gray background */
}

.threeevaluation_table .date-column_sub {
  background-color: #f3f8e1; /* Light blue background for general columns */
}
/* General Header Styles */
.threeevaluation_table .general-header {
  background-color: #f2f2f2; /* Light gray background */
}

.threeevaluation_table .general-column {
  background-color: #e6f7ff; /* Light blue background for general columns */
}

.threeevaluation_table .general-column_sub {
  background-color: #e1eff7; /* Light blue background for general columns */
}


/* BP Header Styles */
.threeevaluation_table .bp-header {
  background-color: #f2f2f2; /* Light gray background */
}

.threeevaluation_table .bp-column {
  background-color: #ffcccc; /* Light red background for BP columns */
}
.threeevaluation_table .bp-column_sub {
  background-color: #f9eaea; /* Light red background for BP columns */
}

/* Glucose Header Styles */
.threeevaluation_table .glucose-header {
  background-color: #f2f2f2; /* Light gray background */
}

.threeevaluation_table .glucose-column {
  background-color: #d9f2d9; /* Light green background for glucose columns */
}
.threeevaluation_table .glucose-column_sub {
  background-color: #e7f3e7; /* Light green background for glucose columns */
}

/* Optional: Add borders and padding for better visual separation */
.eval_th, .eval_td {
  padding: 8px;
  border: 1px solid #ddd;
}
.threeevaluation_table {
  width: 100%;
  border-collapse: collapse;
}



/* three visit table border */
.threevisit_table {
  width: 100%;
  border-collapse: collapse;
}
.threevisit_table-bordered {
  border: 1px solid black;
}
.threevisit_table-bordered th, .threevisit_table-bordered td {
  border: 1px solid black;
}
.threevisit_bg-secondary-subtle th{
  background-color: #E9ECEF; /* Bootstrap secondary subtle color */
}

/* modal for the medical docs to open */
/* The Modal (background) */
.medreportmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.medreportmodal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.medreportclose {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.medreportclose:hover,
.medreportclose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.unreadMessagesModal{
  max-width: 500px; /* Adjust this percentage to your liking */
}
/* admin grid */

.admin_grid_container {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: auto;
  gap: 10px; 
}

.admin_navbar{
  grid-area: 1 / 1 / span 1 / span 2;
}
.admin_item1 { 
  grid-area: 2 / 1 / span 1 / span 2; 
  background-color: black;
  padding: 2px;
}
.admin_namediv{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
 
}
#adminToken_infodiv{
  display:flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
padding: 0;
flex-wrap: wrap; /* Allows wrapping of items if necessary */
justify-content: center; /* Centers buttons horizontally */
}

.admin_item2{
  display:inline-grid; 
      grid-area: 3 / 1 / span 1 / span 1; 
      width:90%; 
}
.admin_item3 { 
  display:inline-grid; 
  grid-area: 3 / 2 / span 1 / span 1; 
 width:95%; 
}
.admin_item2a, .admin_item2b {
  width: 98%;
} 


 @media only screen and (max-width: 768px) {
  .admin_grid_container {
    display: grid;
    grid-template-columns: 1fr;
   
    grid-column-gap: 10px;
  } 
  .admin_navbar{
    grid-area: 1/1/span 1/ span 1;
  }
  .admin_item1{
    margin-top:40px;
    grid-area: 2/1/span 1/ span 2;
    width:100%;
  }
  .admin_item2{

    width:100%;
  }
  .admin_item3{
    grid-area: 6 / 1/ span 1 /span 2;

    
  }
 .admin_item2a{
  grid-area: 3/1/span 1/ span 2;
  width:100%;
 }
 .admin_item2b{
  grid-area:4/1/span 1/ span 2;
  width:100%;
 } 
 .admin_item2c{
  grid-area:5/1/span 1/ span 2;
  width:100%;
 } 

}

/* end of admin grid */

/* cworker grid */

.cworker_grid_container {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: auto;
  gap: 10px; 
}

.cworker_navbar{
  grid-area: 1 / 1 / span 1 / span 2;
}
.cworker_item1 { 
  grid-area: 2 / 1 / span 1 / span 2; 
  background-color: black;
  padding: 2px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end; 
  
}
/* .cworker_namediv{
  display: flex;
 align-items: flex-center;
  justify-content: flex-center; 
 
} */

.cworker_item2{
  display:inline-grid; 
      grid-area: 3 / 1 / span 1 / span 1; 
      width:90%; 
}
.cworker_item3 { 
  display:inline-grid; 
  grid-area: 3 / 2 / span 1 / span 1; 
 width:95%; 
}
.cworker_item2a, .cworker_item2b {
  width: 98%;
} 


 @media only screen and (max-width: 768px) {
  .cworker_grid_container {
    display: grid;
    grid-template-columns: 1fr;
   
    grid-column-gap: 10px;
  } 
  .cworker_navbar{
    grid-area: 1/1/span 1/ span 1;
  }
  .cworker_item1{
    margin-top:40px;
    grid-area: 2/1/span 1/ span 2;
    width:100%;
  }
  .cworker_item2{

    width:100%;
  }
  .cworker_item3{
    grid-area: 6 / 1/ span 1 /span 2;

    
  }
 .cworker_item2a{
  grid-area: 3/1/span 1/ span 2;
  width:100%;
 }
 .cworker_item2b{
  grid-area:4/1/span 1/ span 2;
  width:100%;
 } 
 .cworker_item2c{
  grid-area:5/1/span 1/ span 2;
  width:100%;
 } 

}
/* end of cworker grid */

/* dmanager grid */

.dmanager_grid_container {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: auto;
  gap: 10px; 
}

.dmanager_navbar{
  grid-area: 1 / 1 / span 1 / span 2;
}
.dmanager_item1 { 
  grid-area: 2 / 1 / span 1 / span 2; 
  background-color: black;
  padding: 2px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end; 
  
}
/* .dmanager_namediv{
  display: flex;
 align-items: flex-center;
  justify-content: flex-center; 
 
} */

.dmanager_item2{
  display:inline-grid; 
      grid-area: 3 / 1 / span 1 / span 1; 
      width:90%; 
}
.dmanager_item3 { 
  display:inline-grid; 
  grid-area: 3 / 2 / span 1 / span 1; 
 width:95%; 
}
.dmanager_item2a, .dmanager_item2b {
  width: 98%;
} 


 @media only screen and (max-width: 768px) {
  .dmanager_grid_container {
    display: grid;
    grid-template-columns: 1fr;
   
    grid-column-gap: 10px;
  } 
  .dmanager_navbar{
    grid-area: 1/1/span 1/ span 1;
  }
  .dmanager_item1{
    margin-top:40px;
    grid-area: 2/1/span 1/ span 2;
    width:100%;
  }
  .dmanager_item2{

    width:100%;
  }
  .dmanager_item3{
    grid-area: 6 / 1/ span 1 /span 2;

    
  }
 .dmanager_item2a{
  grid-area: 3/1/span 1/ span 2;
  width:100%;
 }
 .dmanager_item2b{
  grid-area:4/1/span 1/ span 2;
  width:100%;
 } 
 .dmanager_item2c{
  grid-area:5/1/span 1/ span 2;
  width:100%;
 } 

}
/* end of dmanager grid */

/* lab technician dashboard */

.labtech_grid_container {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: auto;
  gap: 10px; 
}

.labtech_navbar{
  grid-area: 1 / 1 / span 1 / span 2;
}
.labtech_item1 { 
  grid-area: 2 / 1 / span 1 / span 2; 
  background-color: black;
  padding: 2px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end; 
  
}
/* .labtech_namediv{
  display: flex;
 align-items: flex-center;
  justify-content: flex-center; 
 
} */

.labtech_item2{
  display:inline-grid; 
      grid-area: 3 / 1 / span 1 / span 1; 
      width:90%; 
}
.labtech_item3 { 
  display:inline-grid; 
  grid-area: 3 / 2 / span 1 / span 1; 
 width:95%; 
}
.labtech_item2a, .labtech_item2b {
  width: 98%;
} 


 @media only screen and (max-width: 768px) {
  .labtech_grid_container {
    display: grid;
    grid-template-columns: 1fr;
   
    grid-column-gap: 10px;
  } 
  .labtech_navbar{
    grid-area: 1/1/span 1/ span 1;
  }
  .labtech_item1{
    margin-top:40px;
    grid-area: 2/1/span 1/ span 2;
    width:100%;
  }
  .labtech_item2{

    width:100%;
  }
  .labtech_item3{
    grid-area: 6 / 1/ span 1 /span 2;

    
  }
 .labtech_item2a{
  grid-area: 3/1/span 1/ span 2;
  width:100%;
 }
 .labtech_item2b{
  grid-area:4/1/span 1/ span 2;
  width:100%;
 } 
 .labtech_item2c{
  grid-area:5/1/span 1/ span 2;
  width:100%;
 } 

}
/* end of lab technician */


/* sup nurse grid container */
.supnurse_grid_container {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: auto;
  gap: 10px; /* 
  background-color: rgb(245, 167, 167); */
  
}

.supnurse_navbar{
  grid-area: 1 / 1 / span 1 / span 2;
}
.supnurse_item1 { 
  grid-area: 2 / 1 / span 1 / span 2; 
  background-color: black;}

.supnurse_item2{
    display:inline-grid;
    grid-area: 3 / 1 / span 1 / span 1; 
    width:90%;
  }
  .supnurse_item2d{
    display:inline-grid;
    grid-area: 3 / 1 / span 1 / span 1; 
    width:100%;
  }
  
  .supnurse_item3 { 
    display:inline-grid;
    grid-area: 3 / 2 / span 1 / span 1; 
    width:90%;
  }


.supnurse_item2_flex_container{
  display:inline-flex;
  flex-direction: column;
  align-items:flex-start;
  width:100%;
}
.supnurse_namediv{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
#supnurseToken_infodiv{
  display:flex;
      flex-direction: row;
      align-items: center;
      margin: 0;
    padding: 0;
    flex-wrap: wrap; /* Allows wrapping of items if necessary */
    justify-content: center;
}

.supnurse_item2c, .supnurse_item2a1, .supnurse_item2b, .supnurse_item2aa {
  width: 98%;
} 

 @media only screen and (max-width: 768px) {
  .supnurse_grid_container {
    display: grid;
    grid-template-columns: 1fr;
   
    grid-column-gap: 10px;
  } 
  .supnurse_navbar{
    grid-area: 1/1/span 1/ span 1;
  }
  .supnurse_item1{
    margin-top:40px;
    grid-area: 2/1/span 1/ span 2;
     width:100%; 
  }
  .supnurse_item2{

    width:100%; 
  } 
  .supnurse_item3{
    grid-area: 6 / 1/ span 1 /span 2;

    
  }
 .supnurse_item2a{
  grid-area: 3/1/span 1/ span 2;
 }
 .supnurse_item2b{
  grid-area:4/1/span 1/ span 2;
 } 
 .supnurse_item2c{
  grid-area:5/1/span 1/ span 2;
 } 

}

/* end of sup nurse grid container */
/* n assistant grid container */
.nassist_grid_container {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: auto;
  gap: 10px; 
}

.nassist_navbar{
  grid-area: 1 / 1 / span 1 / span 2;
}
.nassist_item1 { 
  grid-area: 2 / 1 / span 1 / span 2; 
  background-color: black;
}
 
.nassist_item2_flex_container{
  display:inline-flex;
  flex-direction: column;
  align-items:flex-start;
} 
.nassist_namediv{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
#nassistToken_infodiv{
  display:flex;
      flex-direction: row;
      align-items: center;
      margin: 0;
    padding: 0;
    flex-wrap: wrap; /* Allows wrapping of items if necessary */
    justify-content: center; 
}


.nassist_item2{
  display:inline-grid;
  grid-area: 3 / 1 / span 1 / span 1; 
  width:90%;
}

.nassist_item3 { 
  display:inline-grid;
  grid-area: 3 / 2 / span 1 / span 1; 
  width:90%;
}

.nassist_item2c {
  width: 98%;
} 

 @media only screen and (max-width: 768px) {
  .nassist_grid_container {
    display: grid;
    grid-template-columns: 1fr;
   
    grid-column-gap: 10px;
  } 
  .nassist_navbar{
    grid-area: 1/1/span 1/ span 1;
  }
  .nassist_item1{
    margin-top:40px;
    grid-area: 2/1/span 1/ span 2;
     width:100%; 
  }
  .nassist_item2{

    width:100%; 
  } 
  .nassist_item3{
    grid-area: 6 / 1/ span 1 /span 2;

    
  }
 .nassist_item2a{
  grid-area: 3/1/span 1/ span 2;
 }
 .nassist_item2b{
  grid-area:4/1/span 1/ span 2;
 } 
 .nassist_item2c{
  grid-area:5/1/span 1/ span 2;
 } 

}


/* end of n assistant grid container */


/* doctor grid */

.doctor_grid_container {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: auto;
  gap: 10px; /* 
  background-color: rgb(245, 167, 167); */
  
}

.doctor_navbar{
  grid-area: 1 / 1 / span 1 / span 2;
}
.doctor_item1 { 
  grid-area: 2 / 1 / span 1 / span 2; 
  background-color: black; }

.doctor_item2{
    display:inline-grid;
    grid-area: 3 / 1 / span 1 / span 1; 
    width:90%; 
}
.doctor_item3{
    display:inline-grid;
    grid-area: 3 / 2 / span 1 / span 1; 
    width:90%;  
}
.doctor_item2_flex_container{
  display:inline-flex;
  flex-direction: column;
  align-items:flex-start;
}
.doctor_namediv{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

#doctorToken_infodiv{
    display:flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 0;
    flex-wrap: wrap; /* Allows wrapping of items if necessary */
    justify-content: center;
}
.doctor_item2a, .doctor_item2b, .doctor_item2c, .doctor_item2d, .doctor_item2e,.doctor_item2aa {
  width: 98%;
} 

/* @media only screen and (max-width:540) {
    
}
@media screen and (max-width:1130){
  .doctor_item3{
    margin-left:50px;
  }
 
} */

 @media only screen and (max-width: 768px) {
  .doctor_grid_container {
    display: grid;
    grid-template-columns: 1fr;
   
    grid-column-gap: 10px;
  } 
  .doctor_navbar{
    grid-area: 1/1/span 1/ span 1;
  }
  .doctor_item1{
    margin-top:40px;
    grid-area: 2/1/span 1/ span 2;
    width:100%;
  }
  .doctor_item2{

    width:100%;
  }
  .doctor_item3{
    grid-area: 6 / 1/ span 1 /span 2;

    
  }
 .doctor_item2a{
  grid-area: 3/1/span 1/ span 2;
 }
 .doctor_item2b{
  grid-area:4/1/span 1/ span 2;
 } 
 .doctor_item2c{
  grid-area:5/1/span 1/ span 2;
 } 

}

/* end of doctor grid */

/* Pharmacist grid */
.pharm_grid_container {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: auto;
  gap: 10px; 
  
}
.pharm_navbar{
  grid-area: 1 / 1 / span 1 / span 2;
}
.pharm_item1 { 
  grid-area: 2 / 1 / span 1 / span 2; 
  background-color: black;}

  .pharm_item2_flex_container{
    display:inline-flex;
    flex-direction: column;
    align-items:flex-start;
  }
  
  .pharm_namediv{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }

 
  .msgonheader_div{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
  #pharmToken_infodiv{
    display:flex;
        flex-direction: row;
        align-items: center;
        margin: 0;
      padding: 0;
      flex-wrap: wrap; /* Allows wrapping of items if necessary */
      justify-content: center;
  }  
  .pharm_item2{
    display:inline-grid;
    grid-area: 3 / 1 / span 1 / span 1; 
    width:90%;
  }

  .pharm_item3 { 
    display:inline-grid;
    grid-area: 3 / 2 / span 1 / span 1; 
    width:90%;
  }
  .ph_item2c, .ph_item3b,.ph_item3c, .ph_item3d, #ph_ginfodiv, .ph_item3e, .pharm_item2msg  {
    width: 98%;
  } 
  /* #srchmedresult_div_side{
    width: 98%;
  } */
  

 @media only screen and (max-width: 768px) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 10px;
  }
  .pharm-body{
    padding-top: 50px; 
  }
  .pharm_navbar{
    grid-area: 1/1/span 1/ span 1;
  }
  .pharm_item1{
    margin-top:40px;
    grid-area: 2/1/span 1/ span 2;
    width:100%;
  }
  .pharm_item4{
    grid-area: 5 / 1/ span 1 /span 2;
    display:flex;
    align-items: center;
    justify-content: center;
    width:100%;
  }
 .pharm_item2{
  grid-area: 3/1/span 1/ span 2;
 }
 .pharm_item3{
  grid-area:4/1/span 1/ span 1;
 } 

}
.invdetails_mdlwidth {
  max-width: 60%; /* Adjust as needed */
  width: auto; /* Allows it to fit content */
}

/* pharmacist add supplier frm */
#addsupplierfrm {
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
}
.suppliertableheading{
  grid-area:1/1/span 1/ span 2;
}
#addsuppliercmsg{
  grid-area:2/1/span 1/ span 2;
}
.supplier_last_item{
  grid-area:8/1/span 1/ span 2;
}

/* Media query for screens with a maximum width of 600px */
@media only screen and (max-width: 768px) {
  #addsupplierfrm {
      /* grid-template-columns: 1fr;*/
      width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
    }
}

/* nurse assistant diseaseForm */
#diseaseForm {
 background-color: whitesmoke;
  padding:5px;
  
  width:100%;
  margin-bottom: 20px;
}

.suggestion {
  cursor: pointer;
  padding: 5px;
}

.suggestion:hover {
  background-color: #f0f0f0;
}

.no-suggestion {
  color: #999;
  padding: 5px;
}
/* medrequire frm */

#medrequirefrm {
  background-color: whitesmoke;
   padding:5px;
   
   width:90%;
   margin-bottom: 20px;
 }
 #medrequireContainer{
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:100%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
@media only screen and (max-width: 768px) {
  #medrequireContainer {
      grid-template-columns: 1fr;
      width:100%;
      margin:0;
      align-content:center;
      display:flex;
      flex-direction: column;
      
    }
}
/* sn_prescription */

#sn_prescribe_frm {
  background-color: rgb(233, 247, 230);
   padding:5px;
   
   width:90%;
   margin-bottom: 20px;
 }
/*  .sn_referHospital{
    grid-area:1/1/span 1/ span 2;
 } */
 /* .sn_referHospContainer{
  grid-template-columns: 1fr 1fr;
      width:100%;
      margin:0;
      align-content:center;
      display:flex;
      flex-direction: column;
 } */
 #amber_monitor_frm{
  background-color: rgb(243, 242, 214);
  padding:5px;
  
  width:90%;
  margin-bottom: 20px;
 }
 #dr_prescribe_frm {
  background-color: rgb(249, 224, 224);
   padding:5px;
   
   width:90%;
   margin-bottom: 20px;
 }
 #sn_prescribe_amber_frm {
  background-color: rgb(250, 244, 229);
   padding:5px;
   
   width:90%;
   margin-bottom: 20px;
 }
 
 #sn_amberFinalprescribe_frm {
  background-color: rgb(250, 244, 229);
   padding:5px;
   
   width:90%;
   margin-bottom: 20px;
 }


#prescriptionContainer{
  display: grid;
  grid-template-columns: 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:100%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
@media only screen and (max-width: 768px) {
  #prescriptionContainer {
      grid-template-columns: 1fr;
      width:100%;
      margin:0;
      align-content:center;
      display:flex;
      flex-direction: column;
      
    }
}
#xtrasaleContainer{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:100%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
@media only screen and (max-width: 768px) {
  #xtrasaleContainer{
      grid-template-columns: 1fr;
      width:100%;
      margin:0;
      align-content:center;
      display:flex;
      flex-direction: column;
      
    }
}

.sn_referHospContainer{
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  width:100%; 
  border:1px solid lightgray;
  border-radius:5px;
  padding:10px;
  margin:5px;
}
@media only screen and (max-width: 768px) {
  .sn_referHospContainer {
      grid-template-columns: 1fr;
      width:100%;
      margin:0;
      align-content:center;
      display:flex;
      flex-direction: column;
      
    }
}
.disabled-snVisitclosedbutton {
  background-color: #ccc; 
  color: #999; 
  cursor: not-allowed; 
  pointer-events: none; 
}

/* Optional: Make sure the cursor is a "hand" when hovering over the normal button */
#sn_prescribe_frm #sn_visitClosed_savebtn {
  cursor: pointer;
}




/* example workout */
/* admin.php side bar */
.top_navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:70px;
  background-color:#042331;
  box-shadow: 1px 0 2px rgbs(0,0,0,0.125);
  display: flex;
  align-items: center;
 }
 .logo{
   width:250px;
   padding:0 25px;
   border-right:1px solid #f5f5f5;
 }
 .menu{
   width:calc(100%-250px);
   padding:0 25px;
   display:flex;
   justify-content: space-between;
   align-items: center;
 }
 .menu .hamburger{
   color:white;
   cursor: pointer;
   font-size: 25px;
 }
 .menu .hamburger:hover{
   color: #0976e2;
 }
 .sidebar{
   position:fixed;
   top:70px;
   left:0;
   width:220px;
   height:100%;
   background-color:#042331;
 }
 .sidebar ul li a{
   display:block;
   color: #0e94d4;
   border-bottom: 1px solid #03374e;
   padding: 7px 10px;
   text-decoration: none;
   padding-top:20px;
 }
 .sidebar ul li a:hover{
   background-color: #0e94d4;
 }
 .sidebar ul li a .icon{
   font-size: 18px;
   color:#CCCCFF;
   vertical-align: middle;
   
 }
 .sidebar ul li a .text{
   margin-left: 19px;
   color:#CCCCFF;
   font-size:18px;
   letter-spacing: 2px;
 } 
 /* side bar responsive look */
 .hover_collapse .sidebar{
   width:70px;
 }
 .hover_collapse .sidebar ul li a .text{
   display:none;
 }
 .contentarea{
   
   width:calc(100%-220px);
   height:100px;
   background-image:linear-gradient(to bottom right, #CCCCFF, #ffffff);
   
   top:70px;
   left: 200px;
   display:flex;
 
 }
 /* grid layout */
 .grid-container {
   display: grid;
   grid-template-columns: 30% 70%;
     
   gap: 10px;
   background-image:linear-gradient(to bottom right, #f852f8, #ffffff);;
   padding: 10px;
 }
 .item1 { 
   grid-area: 1 / 1 / span 1 / span 2; }
 
 .item5 { 
   grid-area: 2 / 2 / span 3 / span 1; 
 }
 .item6{
   grid-area: 5 / 1 / span 1 / span 2;
   background-color: black;
 }
 
 
 
 .grid-container > div {
   background-color: rgba(255, 255, 255, 0.8);
   text-align: center;
   padding: 20px 0;
   font-size: 30px;
 }
 @media screen and (min-width:480){
  /* */
 }
  @media only screen and (max-width: 768px) {
   .grid-container {
     display: grid;
     grid-template-columns: 100%;
     padding: 1em;
     grid-row-gap: 10px;
   }
   .item1{
     grid-area: 1/1/span 1/ span 1;
   }
   .item5{
     grid-area: 2 / 1/ span 1 /span 1;
   }
  .item2{
   grid-area: 3/1/span 1/ span 1;
  }
  .item3{
   grid-area:4/1/span 1/ span 1;
  } 
  .item4{
   grid-area:5/1/span 1/ span 1;
  } 
  .item6{
   grid-area:6/1/span 1/span 1;
  }
 }
 
/* admin weekly scedule table */
.table-row-with-margin {
  margin-bottom: 10px; /* Adjust this value as needed */
}

#weekscheduletable th, #weekscheduletable td{
  padding: 15px;
  
}
#weekscheduletable { box-shadow: 3px 3px 3px #999; }
/* used in displayclinic table in supadmin */
.buttonsBlock {
  white-space: nowrap;
}

/* pagination in patient display table in sup admin */
.pagination {
  text-align: right;
}
 /* for supadmin sections to be hidden */
/* .hidden-section {
  display: none;
} */


.toggle-password {
  position: absolute;
  top: 50%;
  right: 30px;
  cursor: pointer;
  transform: translateY(-50%);
}

.toggle-password-icon {
  color: #666;
}

.toggle-password-icon:hover {
  color: #333;
}

.srchempfrm_div{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; 
   padding:10px;
   /* border: 1px, solid black; */
}
@media only screen and (max-width: 768px) {
  .srchempfrm_div {
    display: grid;
    grid-template-columns: 100%;
    padding: 1em;
    grid-row-gap: 10px;
  }
  .srchempbtn{
   text-align: center;
   }
}


.srchemp_msgsfrm_div{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; 
   padding:10px;
   /* border: 1px, solid black; */
}
@media only screen and (max-width: 768px) {
  .srchemp_msgsfrm_div {
    display: grid;
    grid-template-columns: 100%;
    padding: 1em;
    grid-row-gap: 10px;
  }
  .ssrchempmsg_btn{
   text-align: center;
   }
}

.srchsuppfrm_div{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; 
   padding:10px;
   /* border: 1px, solid black; */
}
@media only screen and (max-width: 768px) {
  .srchsuppfrm_div {
    display: grid;
    grid-template-columns: 100%;
    padding: 1em;
    grid-row-gap: 10px;
  }
  .srchsuppbtn_spa{
   text-align: center;
   }
}

.srchpatfrm_div{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; 
   padding:10px;
   /* border: 1px, solid black; */
}
@media only screen and (max-width: 768px) {
  .srchpatfrm_div {
    display: grid;
    grid-template-columns: 100%;
    padding: 1em;
    grid-row-gap: 10px;
  }
  .srchpatbtn_spa{
   text-align: center;
   }
}

.header-row {
  background-color: #6C3483;
  color: white;
}

.prntempfrm_div{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; 
   padding:10px;
   /* border: 1px, solid black; */
}
.notesrchempbtn{
  grid-area:1/1/span 1/ span 3;
  margin-left:15px;
}
@media only screen and (max-width: 768px) {
  .prntempfrm_div {
    display: grid;
    grid-template-columns: 100%;
    padding: 1em;
    grid-row-gap: 10px;
  }
  .srchempbtn{
   text-align: center;
   }
}

/*  */
.issuetokenfrm_div{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; 
   padding:10px;
}
.notesrchpat{
  grid-area:1/1/span 1/ span 3;
  margin-left:15px;
}
@media only screen and (max-width: 768px) {
  .issuetokenfrm_div {
    display: grid;
    grid-template-columns: 100%;
    padding: 1em;
    grid-row-gap: 10px;
  }
 
}
/* admin issue token frm - other clinics*/
.admin_issuetokenfrm_oclinicdiv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px; 
  padding:10px;
}
.admin_notesrchpat{
  grid-area:1/1/span 1/ span 2;
  margin-left:15px;
}
@media only screen and (max-width: 768px) {
  .admin_issuetokenfrm_oclinicdiv {
    display: grid;
    grid-template-columns: 100%;
    padding: 1em;
    grid-row-gap: 10px;
  }
 
}
/* admin issue token frm */
.admin_issuetokenfrm_div{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px; 
   padding:10px;
}
.admin_notesrchpat{
  grid-area:1/1/span 1/ span 2;
  margin-left:15px;
}
@media only screen and (max-width: 768px) {
  .admin_issuetokenfrm_div {
    display: grid;
    grid-template-columns: 100%;
    padding: 1em;
    grid-row-gap: 10px;
  }
 
}
/* emp id card */
 .id-card {
  width: 3.370in;
  height: 2.125in;
  border: 1px solid black;
  border-radius: 10px;
 padding: 5px; 
  display: inline-block; 
}
.id-card .cardheader {
  /* background-color: #d8f784;
  color: green; */
  
  text-align: center;

}
.id-card .avatar {
  text-align: center;
  
}
.id-card .avatar img {
  border-radius: 10px;
  width:60px;
  height:70px;
}
.cardfooter{
/*   background-color: #d8f784;
 color: green;*/
 
 text-align: center; 
 }
 
 @media print {
  .id-card {
    width: 3.370in;
  height: 2.125in;
      margin: 0;
      box-shadow: none;
  }
  .cardfooter{
   /*  background-color: #d8f784;
   color: green; */
  }
  .id-card .cardheader {
   /*  background-color: #d8f784;
    color: green; */
  }  
} 

/* patient id card */
/* emp id card */
 .pat-id-card {
  width: 3.370in;
  height: 2.125in;
  border: 1px solid black;
  border-radius: 10px;
 padding: 5px; 
  display: inline-block;
  font-size: 12px; 
}
.pat-id-card .pat-cardheader {
  background-color: #03396c;
  color:#1adee6;
  
  text-align: center;

}
.pat-id-card table {
  width: 100%; 
}
.pat-id-card .card-footer {
  padding: 5px 10px; 
}

.pat-id-card .card-footer small {
  font-size: 10px; 
} 


/* nurse assistant initial test frm */
#srchstaffleavefrm{
  background-color: whitesmoke;
  width:100%;
  margin:auto;
}
#initialTestfrm {
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
  margin:auto;
}
#initialTestUpdatefrm{
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: #FCFCEC;
  padding:20px;
  width:100%;
  margin:auto;
}
.initialtestheading{
  grid-area:1/1/span 1/ span 2;
  text-align: center;
}
.patprevDrVisitheading{
  grid-area:9/1/span 1/ span 2;
  text-align: start; 
}
.lastvisit{
  grid-area:10/1/span 1/ span 2;
}
.lvreason{
  grid-area:11/1/span 1/ span 2;
}
.patglucoseheading{
  grid-area:12/1/span 1/ span 2;
  text-align: start; 
}
.patbloodheading{
  grid-area:15/1/span 1/ span 2;
  text-align: start; 
}
.suppdocheading{
  grid-area:20/1/span 1/ span 1;
  text-align: start; 
}
#file-input-container{
  grid-area:22/1/span 1/ span 1;
}
.update_suppdocheading{
  grid-area:20/1/span 1/ span 2;
  text-align: start; 
}
#edit-file-input-container{
  grid-area:21/1/span 1/ span 1;
}
.update_medreport{
  grid-area:23/1/span 1/ span 1;
  text-align: start; 
}
.existing_medreport_container{
  grid-area:24/1/span 1/ span 1;
  text-align: start;
}


.updateRemarksHeading{
  grid-area:25/1/span 1/ span 2;
  text-align: start; 
}
.editupdate_remarks{
  grid-area:26/1/span 1/ span 2;
  
}
.update_remarks{
  grid-area:21/1/span 1/ span 2;
  
}
.updateinitial_last_item{
  grid-area:27/1/span 1/ span 2;
}


.ini_remarks{
  grid-area:23/1/span 1/ span 2;
  
}

.initial_last_item{
  grid-area:27/1/span 1/ span 2;
  text-align: start; 
}

.viewhprofilebtn_cw{
  text-align: center;
}

/* blood test result form */

#btResultfrm {
  display: grid;
  grid-template-columns: 50% 50%; /* Adjust the minmax value as needed */
  gap: 10px; /* Gap between form items */
  background-color: whitesmoke;
  padding:20px;
  width:100%;
  margin:auto;
}
.btResultheading{
  grid-area:1/1/span 1/ span 2;
  text-align: center;
}

.cbcheading{
  grid-area:2/1/span 1/ span 2;
  text-align: left;
}
.esrheading{
  grid-area:7/1/span 1/ span 1;
  text-align: left;
}
.crpheading{
  grid-area:7/2/span 1/ span 1;
  text-align: left;
}
.glucoheading{
  grid-area:9/1/span 1/ span 2;
  text-align: left;
}
.lipidheading{
  grid-area:12/1/span 1/ span 2;
  text-align: left;
}
/* #initialTestUpdatefrm{
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 10px; 
  background-color: #FCFCEC;
  padding:20px;
  width:100%;
  margin:auto;
}
.initialtestheading{
  grid-area:1/1/span 1/ span 2;
  text-align: center;
}
 */


/* Modal styles */
.medfilemodal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
    padding-top: 60px; 
}
.medfilemodal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
}
.medfileclose-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.medfileclose-button:hover,
.medfileclose-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}



 #frm_addsupplier{
  z-index: 20;
 }

/* Custom style for autocomplete menu */
.ui-autocomplete {
  position: absolute;
  z-index: 1; /* Adjust as needed */
  background-color: white;
  border: 1px solid #ccc;
  padding: 5px;
  max-height: 200px; /* Adjust max height as needed */
  overflow-y: auto;
}

.ui-menu-item {
  padding: 5px;
  cursor: pointer;
} 

.ui-state-active,
.ui-widget-content .ui-state-active {
  background-color: #007bff; /* Highlight color */
  color: white;
  border: 1px solid #0056b3; /* Highlight border color */
}
@media only screen and (max-width: 768px) {
  #m_schedule_modal #m_schedulemodalfrm{
  width:100%;
  margin:auto;
  display:flex;
  flex-direction: column;
  flex-grow:0; 
  flex-shrink:0;
  flex-basis:100%;
}
}


@media only screen and (max-width: 768px) {
  #initialTestfrm {
      /* grid-template-columns: 1fr;*/
      width:100%;
      margin:auto;
      display:flex;
      flex-direction: column;
      flex-grow:0; 
      flex-shrink:0;
      flex-basis:100%;
    }
}

#n_pgenralinfodiv #container #dr-menu a:hover  {
  color: #0f0 !important;
}

/* calculator */
#calculator {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  background-color: #f9f9f9;
   
}

.calc-display {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  text-align: right;
  font-size: 1.5em;
  padding-right: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}

.calc-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.calc-btn {
  padding: 10px;
  font-size: 1.2em;
  background-color: #e0e0e0;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  
}

.calc-btn:hover {
  background-color: #d0d0d0;
}

/* invoice modal */
.invoice_modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4); 
}

/* Modal Content */
.invoice_modal-content {
  background-color: #fefefe;
  margin: 15% auto; 
  padding: 20px;
  border: 1px solid #888;
  width: 80%; 
}

/* The Close Button */
.invoice_close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.invoice_close:hover,
.invoice_close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/* end of initial test form */

/* pagination styling for patlist spa search */
.patlist_spa_pagination .page-link {
  color: #ec4af2;
}

.patlist_spa_pagination .page-item.active .page-link {
  background-color: #95179a;
  border-color: #95179a;
  color: #fff;
}

.patlist_spa_pagination .page-link:hover {
  color: #95179a;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.patlist_spa_pagination .page-item.active .page-link:hover {
  color: #fff;
}

#map {
  height: 400px;
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
}
.location-info {
  padding: 10px;
  margin-bottom: 10px;
  background: #f5f5f5;
  border-radius: 4px;
}
.leaflet-container {
  height: 200px;
  width: 100%;
  margin: 0;
  z-index: 1;
}
@media print {
 
  /* Hide the print button */
  #viewBtestResult_modal #print_displaybtestResult_btn {
      display: none;
  }

}

 .suggestions {
  border: 1px solid #ccc;
  background: white;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  width: 100%;
  z-index: 999;
}

.suggestion-item {
  padding: 10px;
  cursor: pointer;
}

.suggestion-item:hover {
  background-color: #f0f0f0;
}
.ui-autocomplete {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  border: 1px solid #ccc;
  background-color: white;
  position: absolute;
   z-index: 9999 !important;
}


/* Style for each suggestion item  */
.ui-menu-item {
  padding: 5px;
  cursor: pointer;
}

/*  Highlight suggestion on hover  */
.ui-menu-item:hover {
  background-color: #f0f0f0;
} 
/* #symptomSuggestions {
  display: block !important;
  visibility: visible !important;
  position: relative;
  z-index: 9999;
}

#symptomSuggestions option {
  display: block !important;
  visibility: visible !important;
} */
/* Suggestions container styling */
#symptomSuggestions {
  display: none;  /* Hide by default */
  position: absolute;  /* Position relative to the parent input */
   width: 60%;   /* Match the width of the input */
  max-height: 180px;  /* Limit the height of the dropdown */
  overflow-y: auto;
  overflow-x: hidden; /* Scroll if there are many items */
  border: 1px solid #ccc;  /* Border around the suggestions */
  background-color: white;  /* Background color */
  z-index: 999;  /* Make sure it's above other content */
  margin-top: 40px;  /* Space between input and suggestions */
  margin-left:180px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  /* Add some shadow for better visibility */
}

/* Style for each suggestion item */
.symptom-item {
  padding: 10px;
  cursor: pointer;
  background-color: white;
  border-bottom: 1px solid #f0f0f0;
}

/* Hover effect on suggestion item */
.symptom-item:hover {
  background-color: #f0f0f0;
}

#currmedSuggestions {
  display: none;  /* Hide by default */
  position: absolute;  /* Position relative to the parent input */
   width: 60%;   /* Match the width of the input */
  max-height: 180px;  /* Limit the height of the dropdown */
  overflow-y: auto;
  overflow-x: hidden; /* Scroll if there are many items */
  border: 1px solid #ccc;  /* Border around the suggestions */
  background-color: white;  /* Background color */
  z-index: 999;  /* Make sure it's above other content */
  margin-top: 40px;  /* Space between input and suggestions */
  margin-left:180px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);  /* Add some shadow for better visibility */
}

/* Style for each suggestion item */
.currmed-item {
  padding: 10px;
  cursor: pointer;
  background-color: white;
  border-bottom: 1px solid #f0f0f0;
}

/* Hover effect on suggestion item */
.currmed-item:hover {
  background-color: #f0f0f0;
}
.btestresult_pagination a {
  margin: 0 5px;
  padding: 5px;
  text-decoration: none;
}

.btestresult_pagination .active {
  font-weight: bold;
  color: #007bff;
}


	
.table-container {
  max-height: 400px; /* Adjust this height to fit 5 rows */
  overflow-y: scroll; /* Enables scrolling */
}

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

.btresultTable th, .btresultTable td {
  padding: 10px;
  border: 1px solid #ddd;
}

/* Style for all pagination links */
.cworker_pagination a.active {
  border: 2px solid #8E44AD !important;
  background-color: white !important;
  /* color: white !important; */
  font-weight: bold !important;
  color: #8E44AD !important;;
}


.cworker_pagination a {
  color: #8E44AD;
  text-decoration: none;
  padding: 5px 10px;
  margin: 0 3px;
  border-radius: 5px;
}

.cworker_pagination a:hover {
  background-color: #D5B8D4;
}

.content_pagination a.active {
  border: 2px solid #8E44AD !important;
  background-color: white !important;
  /* color: white !important; */
  font-weight: bold !important;
  color: #8E44AD !important;;
}


.content_pagination a {
  color: #8E44AD;
  text-decoration: none;
  padding: 5px 10px;
  margin: 0 3px;
  border-radius: 5px;
}

.content_pagination a:hover {
  background-color: #D5B8D4;
}