@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");

/* reset & box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  font-family: "Poppins", sans-serif;
  background: var(--neutral-200);
  color: var(--neutral-700);
  line-height: 1.6;
}
:root {
  /* Primary Colors */
  --primary-100: #fde8f3;
  --primary-200: #f9b5d8;
  --primary-300: #f553ae;
  --primary-400: #d43d8d;
  --primary-500: #a30740;
  --primary-600: #f48fb1;
  --primary-700: #f2c1d1;
  --primary-800: #e5799d;
  --primary-900: #7a0530;
  --primary-1000: #55021f;

  /* Secondary Colors */
  --secondary-100: #e6f4f8;
  --secondary-200: #99d9ed;
  --secondary-300: #0280b0;
  --secondary-400: #015f8a;
  --secondary-500: #01384f;

  /* Neutral Colors */
  --neutral-100: #ffffff;
  --neutral-200: #f8f9fa;
  --neutral-300: #e9ecef;
  --neutral-400: #dee2e6;
  --neutral-500: #495057;
  --neutral-600: #343a40;
  --neutral-700: #212529;

  /* Status Colors */
  --success: #28a745;
  --warning: #ffc107;
  --danger: #dc3545;
  --info: #17a2b8;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);

  /* Transitions */
  --transition-fast: all 0.15s ease-in-out;
  --transition-normal: all 0.3s ease-in-out;
  --transition-slow: all 0.5s ease-in-out;
}
/* 🌚 Dark Mode Overrides
.dark-mode {
  --primary-100: #2e1d29;
  --primary-200: #5a2e4a;
  --primary-300: #8b2f6e;
  --primary-400: #c24294;
  --primary-500: #f553ae;

  --secondary-100: #0f1c21;
  --secondary-200: #1d3c49;
  --secondary-300: #3d6f91;
  --secondary-400: #5e9fc9;
  --secondary-500: #a0d1ec;

  --neutral-100: #121212;
  --neutral-200: #1e1e1e;
  --neutral-300: #2c2c2c;
  --neutral-400: #3a3a3a;
  --neutral-500: #b0b0b0;
  --neutral-600: #d0d0d0;
  --neutral-700: #ffffff;

  --success: #34d399;
  --warning: #fbbf24;
  --danger: #ef4444;
  --info: #38bdf8;
} */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.sidebar-container {
  position: relative;
  flex: 0 0 auto;
  width: auto;
}
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 60px;
  background: var(--neutral-100);
  border-right: 1px solid var(--primary-300);
  transition: margin 0.3s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}
.sidebar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
  display: none;
}

.sidebar.open {
  width: 240px;
}

.sidebar .logo-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 110px;
  position: relative;
}
.sidebar .logo-details img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.nav-item svg {
  width: 60px;
  height: 30px;
  margin-left: -20px;
}
.sidebar .nav-link:hover .Obstetrics-icon {
  fill: var(--primary-500);
  transition: var(--transition-normal);
}
.sidebar .nav-link.active .Obstetrics-icon {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%)
    hue-rotate(0deg);
}
#btn {
  position: absolute;
  top: 20%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 24px;
  cursor: pointer;
  color: var(--primary-400);
  transition: var(--transition-normal);
}

#btn:hover {
  color: var(--primary-400);
}
.no-sidebar-trans .sidebar,
.no-sidebar-trans .main-content {
  transition: none !important;
}

.sidebar ul {
  padding: 0.5px 8px;
  margin: 0;
}

.sidebar ul li {
  position: relative;
  width: 100%;
  list-style: none;
  margin-bottom: 8px;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}

.sidebar ul li a {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  color: var(--neutral-700);
  text-decoration: none;
  border: 1px solid rgba(245, 83, 174, 0.3);
  transition: var(--transition-normal);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
}
.sidebar ul li a:hover {
  background-color: rgba(245, 83, 174, 0.3);
  color: var(--primary-500);
  border: 1px solid rgba(245, 83, 174, 0.3);
  transition: var(--transition-normal);
}

.sidebar ul li a:focus {
  background: var(--primary-400);
  color: var(--neutral-100);
  box-shadow: 0px 5px 10px var(--primary-400);
}

.sidebar .nav-link.active {
  background: var(--primary-400) !important;
  color: var(--neutral-100) !important;
}

.sidebar .nav-link {
  transition: var(--transition-normal);
}

.sidebar ul li i {
  min-width: 40px;
  font-size: 1.2rem;
}

.sidebar .links_name {
  /* white-space: nowrap; */
  display: none;
  transition: opacity 0.3s ease-in-out;
}

.sidebar.open .links_name {
  display: inline-block;
  margin-left: 8px;
  transition: opacity 0.3s ease;
  opacity: 1;
}

.sidebar .tooltip {
  position: absolute;
  left: 70px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--neutral-100);
  color: var(--neutral-700);
  padding: 6px 12px;
  border-radius: 6px;
  width: max-content;
  box-shadow: 0px 5px 10px var(--primary-300);
  font-size: 14px;
  font-weight: 500;
  display: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 99;
}

.sidebar:not(.open) li:hover .tooltip {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.sidebar.open .tooltip {
  display: none !important;
  opacity: 0 !important;
}

.loading-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
}

.submenu {
  position: relative;
  background: var(--neutral-100);
  box-shadow: 0px 5px 10px var(--primary-200);
  border-radius: 8px;
  display: none;
  list-style: none;
  z-index: 99;
  width: 100%;
}
.sidebar:not(.open) #addPageBtn,
.sidebar:not(.open) #toggleSubmenu {
  display: none;
}
.submenu.show-submenu {
  display: block;
  position: fixed;
  left: 235px;
  transform: translateY(-50%);
  background: var(--neutral-100);
  box-shadow: 0px 5px 15px var(--primary-200);
  border-radius: 8px;
  max-height: 300px;
  width: 180px;
  overflow-y: auto;
  width: 150px;
  z-index: 2000;
  transition: opacity 0.3s ease;
  opacity: 1;
}
.submenu.show-submenu::-webkit-scrollbar {
  width: 8px;
}
.submenu.show-submenu::-webkit-scrollbar-track {
  background: var(--primary-100);
  border-radius: 10px;
}
.submenu.show-submenu::-webkit-scrollbar-thumb {
  background-color: var(--primary-300);
  border-radius: 10px;
  border: 2px solid var(--primary-100);
}
.submenu.show-submenu::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-400);
}
#toggleSubmenu.rotated {
  transform: rotate(180deg);
}
.submenu .nav-item {
  display: flex;
  align-items: center;
}

.submenu .nav-item .links_name {
  font-size: 0.8rem;
  width: 100%;
}

.submenu .nav-item a {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  color: var(--neutral-700);
  text-decoration: none;
  border: 1px solid rgba(245, 83, 174, 0.3);
  transition: var(--transition-normal);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.submenu .nav-item {
  margin-top: 4px;
  margin-bottom: 4px;
}
.submenu .nav-link.active {
  background: var(--primary-300) !important;
  color: var(--neutral-100) !important;
}
.submenu ul li a:focus {
  background: var(--primary-300);
  color: var(--neutral-100);
  box-shadow: 0px 5px 10px var(--primary-300);
}
.submenu .nav-link.active {
  background: var(--primary-300) !important;
  color: var(--neutral-100) !important;
}
.delete-page {
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-weight: 700;
}
.delete-page:hover {
  color: var(--primary-500);
}

/* pages start*/
.validation-error {
  display: none;
  color: #e63946;
  background-color: #ffe6e6;
  border-left: 4px solid #e63946;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 6px;
  margin-bottom: 6px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
}

.form-label {
  display: flex;
  align-items: center;
  color: var(--neutral-700);
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  gap: 1rem;
}

.row > [class^="col"] {
  flex: 1 1 auto;
}

.content-frame {
  width: 100%;
  margin-left: 60px;
  width: calc(100% - 60px);
  height: 100vh;
}

.sidebar.open + .main-content {
  margin-left: 240px;
  width: calc(100% - 240px);
}

.sidebar .bx-menu {
  font-size: 30px;
  cursor: pointer;
}

/* General Layout */
.form-control {
  width: 100%;
  padding: 7px;
  border-radius: 10px;
}
.main-content {
  margin-left: 240px;
  height: 100vh;
  width: calc(100% - 240px);
  transition: margin 0.3s ease;
  overflow-y: scroll;
  scrollbar-width: thin;
}

/* WebKit */
.main-content::-webkit-scrollbar {
  width: 12px;
}

.main-content::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 6px;
}

.main-content::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
  border: 3px solid #f0f0f0;
}

.main-content::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

#contentContainer {
  position: relative;
  padding: 0.5rem;
  background-color: var(--neutral-100);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}

#contentContainer h2 {
  color: var(--secondary-300);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
}

.patient {
  box-sizing: border-box;
  margin-bottom: 2rem;
  gap: 1rem;
}
/* Patients start */
.search-add-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.search-box {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid var(--primary-400);
  border-radius: 10px;
  padding: 8px 12px;
  width: 327px;
  height: 40px;
}
.search-box input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 15px;
  font-family: Roboto, sans-serif;
  color: #333;
}
.search-box input:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.search-box:focus-within {
  box-shadow: 0 0 5px var(--primary-400);
}
.search-box i {
  color: #bbb9b9;
  font-size: 16px;
}
.add-patient {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--primary-400);
  border: 1px solid var(--primary-400);
  border-radius: 10px;
  padding: 7px 15px;
  color: white;
  font-size: 15px;
  font-family: Roboto, sans-serif;
  cursor: pointer;
}
.add-patient:hover {
  background: var(--primary-400);
  border: 1px solid var(--primary-400);
  transition: background 0.3s ease, border 0.3s ease;
  color: var(--neutral-100);
}
.add-patient i {
  font-size: 16px;
}
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.patient-card-box {
  width: 100%;
  background: white;
  border-radius: 0.5rem;
  border: 1px solid var(--primary-400);
}
.patient-id {
  font-size: 24px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  color: #1f1f1f;
}
.button-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.pink-button {
  background: white;
  border-radius: 0.5rem;
  padding: 5px 10px;
  border: 1px solid var(--primary-400);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary-400);
  font-size: 16px;
  font-family: Roboto, sans-serif;
  font-weight: 700;
  cursor: pointer;
}
.pink-button .nav-link {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.pink-button svg {
  width: 30px;
  height: 20px;
}
.pink-button:hover {
  background: var(--primary-400);
  border: 1px solid var(--primary-400);
  transition: background 0.3s ease, border 0.3s ease;
  color: var(--neutral-100);
}
.card-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.card-actions .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background-color: var(--primary-200);
  color: inherit;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.card-actions .delete-btn ,
.card-actions .edit-btn ,
.card-actions .view-btn {
  color: var(--primary-900);
}

.card-actions .delete-btn:hover,
.card-actions .edit-btn:hover,
.card-actions .view-btn:hover {
  background-color: var(--primary-700);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card-actions .delete-btn i ,
.card-actions .edit-btn i ,
.card-actions .view-btn i {
  margin-left: 0.3rem;
}
.patient-info {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
mark {
  background-color: var(--primary-200);
  border-radius: 5px;
  color: inherit;
}
/* Modal container */
#deletePatientModal .modal-dialog {
  max-width: 420px;
  transition: transform 0.3s ease-in-out;
}

#deletePatientModal .modal.fade .modal-dialog {
  transform: translateY(-20px);
  opacity: 0;
  transition: all 0.3s ease;
}

#deletePatientModal .modal.show .modal-dialog {
  transform: translateY(0);
  opacity: 1;
}

/* Modal styling */
#deletePatientModal .modal-content {
  background: var(--primary-100);
  border: none;
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: modalPop 0.3s ease;
}

@keyframes modalPop {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Header */
#deletePatientModal .modal-header {
  background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
  color: #fff;
  border-bottom: none;
  padding: 1rem 1.5rem;
}

#deletePatientModal .modal-header .modal-title {
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
}

/* Body */
#deletePatientModal .modal-body {
  padding: 1.5rem;
  color: var(--primary-900);
  font-size: 1rem;
  text-align: center;
}

#deletePatientModal .modal-body strong {
  color: var(--primary-500);
}

/* Footer */
#deletePatientModal .modal-footer {
  background-color: var(--primary-200);
  border-top: none;
  padding: 1rem 1.5rem;
  justify-content: center;
  gap: 1rem;
}

#deletePatientModal .modal-footer .btn {
  min-width: 120px;
  border-radius: 0.6rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

/* Confirm Delete button */
#deletePatientModal #confirmDeleteBtn {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-900));
  border: none;
  color: #fff;
  box-shadow: 0 4px 12px rgba(163, 7, 64, 0.4);
}
#deletePatientModal #confirmDeleteBtn:hover {
  background: linear-gradient(135deg, var(--primary-400), var(--primary-500));
  transform: translateY(-2px);
}

/* Cancel button */
#deletePatientModal .modal-footer .btn-secondary {
  background: #fff;
  border: 1px solid var(--primary-300);
  color: var(--primary-500);
}
#deletePatientModal .modal-footer .btn-secondary:hover {
  background: var(--primary-300);
  color: #fff;
  border-color: var(--primary-400);
}
/* btn-close */
#deletePatientModal .btn-close {
  background: #fff;
  color: var(--primary-500);
  border: none;
  border-radius: 10%;
  width: 25px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  font-size:1.4rem;
}
#deletePatientModal .btn-close:hover {
  background: var(--primary-100);
}
/* Patients end */



/* Row for Wife and Husband start*/
.vertical-line {
  width: 0.5px;
  background-color: var(--neutral-400);
  height: 100%;
  min-height: 80px;
  margin-top: 8px;
}
/* Row for Wife and Husband end*/

.horizintal-line {
  width: 100%;
  background-color: var(--neutral-400);
  height: 0.5px;
  margin-top: 8px;
  margin-bottom: 30px;
}
.obstetrics .bx-plus-circle {
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--secondary-300);
}
/* Input Field - Patient Number start*/
.num,
.ProvisionalDiagnosis,
.Adress {
  position: relative;
}
.form-label-p {
  color: var(--neutral-700);
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  margin-bottom: 0.5rem;
}
.num .input-group {
  position: relative;
  width: 100%;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  box-sizing: border-box;
}

.num .input-group .form-control {
  border: 1px solid var(--primary-500);
}

.num input.form-control:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 5px var(--primary-500);
}

.num .input-group-text {
  background-color: var(--neutral-100);
  border: none;
  cursor: pointer;
}

.num .bx-chevron-down {
  font-size: 20px;
  color: var(--primary-500);
}
/* Input Field - Patient Number end*/

/* ProvisionalDiagnosis start */
.ProvisionalDiagnosis-label[contenteditable="true"] {
  border: 1px solid var(--primary-500);
  padding: 5px;
  background-color: var(--primary-100);
  border-radius: 5px;
  white-space: normal;
}
.ProvisionalDiagnosis-label:not([contenteditable="true"]) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ProvisionalDiagnosis-wrapper {
  position: relative;
  width: 100%;
  border-radius: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid var(--primary-500);
  cursor: pointer;
}
.ProvisionalDiagnosis-wrapper select {
  width: 100% !important;
  border-radius: 10px 0px 0 10px;
  padding: 7px;
  padding-right: 2rem;
  white-space: nowrap;
  border: none;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border-right: 1px solid var(--primary-500);
  background-color: var(--neutral-100);
  color: var(--neutral-700);
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 10px 0 0 10px;
  background-color: var(--neutral-100);
  color: var(--neutral-700);
  cursor: pointer;
}
.ProvisionalDiagnosis-wrapper select::-webkit-scrollbar {
  width: 6px;
}
.ProvisionalDiagnosis-wrapper select::-webkit-scrollbar-thumb {
  background-color: var(--primary-500);
  border-radius: 3px;
}
.ProvisionalDiagnosis-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  pointer-events: none;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--primary-500);
}
.ProvisionalDiagnosis-wrapper i.bx-plus {
  color: var(--primary-500);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 7px;
}
.ProvisionalDiagnosis-wrapper:hover {
  box-shadow: 2px 1px 12px var(--primary-500);
}
.ProvisionalDiagnosis-wrapper select:focus {
  outline: none;
}
.ProvisionalDiagnosis-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: var(--primary-500);
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.ProvisionalDiagnosis-wrapper select option:checked {
  background-color: var(--primary-500) !important;
  color: var(--neutral-100);
  cursor: pointer;
}
.ProvisionalDiagnosis-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: var(--primary-200) !important;
  cursor: pointer;
}
#newDiagnosisInput {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(90% - 2.5rem);
  box-sizing: border-box;
  display: none;
  border: 1px solid var(--primary-500);
  padding-left: 5px;
  border-radius: 5px;
  background-color: var(--primary-100);
  color: var(--primary-500);
  font-size: 16px;
  font-weight: bold;
  outline: none;
  z-index: 1;
  height: 100%;
  box-shadow: 0 0 5px var(--primary-500);
}
/* Tooltip styles */
.diagnosis-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--neutral-700);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.diagnosis-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--neutral-700) transparent transparent transparent;
}
.ProvisionalDiagnosis-wrapper:hover .diagnosis-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* ProvisionalDiagnosis end */

/* adress start */
.Adress .input-group {
  position: relative;
  width: 100%;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  box-sizing: border-box;
}

.Adress .input-group .form-control {
  border: 1px solid var(--primary-500);
}

.Adress input.form-control:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 5px var(--primary-500);
}
/* adress end */

/* Wife Section */
.wife .form-control {
  border: 1px solid var(--primary-300);
  border-radius: 10px;
  padding: 6px;
}
.wife input.form-control:focus {
  border-color: var(--primary-300);
  box-shadow: 0 0 5px var(--primary-400);
}
.wife .input-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* age wife start */
.age {
  position: relative;
}
.calendar-popup input {
  border: 1px solid #ccc;
  padding: 5px;
}
.age-wrapper {
  position: relative;
}
/* age wife end */

/* Occupation common */
.occupation-wrapper {
  position: relative;
  width: 100%;
  border-radius: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid currentColor;
}
.occupation-wrapper select {
  width: 100% !important;
  border-radius: 10px 0 0 10px;
  padding: 7px;
  padding-right: 2rem;
  white-space: nowrap;
  border: none;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border-right: 1px solid currentColor;
  background-color: var(--neutral-100);
  color: var(--neutral-500);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.wife-wrapper select {
  border-right: 1px solid var(--primary-300);
}
.husband-wrapper select {
  border-right: 1px solid var(--secondary-300);
}
.occupation-wrapper select::-webkit-scrollbar {
  width: 6px;
}
.occupation-wrapper select::-webkit-scrollbar-thumb {
  background-color: currentColor;
  border-radius: 3px;
}
.occupation-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  pointer-events: none;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid currentColor;
}
.occupation-wrapper i.bx-plus {
  color: currentColor;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 7px;
}
.occupation-wrapper:hover {
  box-shadow: 2px 1px 12px currentColor;
}
.occupation-wrapper select:focus {
  outline: none;
}
.occupation-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: currentColor;
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.occupation-wrapper select option:checked {
  background-color: currentColor !important;
  color: var(--neutral-100);
  cursor: pointer;
}
.occupation-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: currentColor !important;
  cursor: pointer;
}
.wife-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: var(--primary-400);
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.wife-wrapper select option:checked {
  background-color: var(--primary-400) !important;
  color: var(--neutral-100);
  cursor: pointer;
}
.wife-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: var(--primary-200) !important;
  cursor: pointer;
}
.husband-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: var(--secondary-300);
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.husband-wrapper select option:checked {
  background-color: var(--secondary-300) !important;
  color: var(--neutral-100);
  cursor: pointer;
}
.husband-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: var(--secondary-100) !important;
  cursor: pointer;
}
#newWifeOccInput {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(90% - 2.5rem);
  box-sizing: border-box;
  display: none;
  border: 1px solid var(--primary-400);
  padding-left: 5px;
  border-radius: 5px;
  background-color: var(--primary-100);
  color: var(--primary-400);
  font-size: 16px;
  font-weight: bold;
  outline: none;
  z-index: 1;
  height: 100%;
  box-shadow: 0 0 5px var(--primary-400);
}
#newHusbandOccInput {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(90% - 2.5rem);
  box-sizing: border-box;
  display: none;
  border: 1px solid var(--secondary-300);
  padding-left: 5px;
  border-radius: 5px;
  background-color: var(--secondary-100);
  color: var(--secondary-300);
  font-size: 16px;
  font-weight: bold;
  outline: none;
  z-index: 1;
  height: 100%;
  box-shadow: 0 0 5px var(--secondary-300);
}
/* Tooltip styles */
.occupation-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--neutral-700);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.occupation-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--neutral-700) transparent transparent transparent;
}
.occupation-wrapper:hover .occupation-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.wife-wrapper {
  color: var(--primary-300);
  border-color: var(--primary-300);
}
.husband-wrapper {
  color: var(--secondary-300);
  border-color: var(--secondary-300);
}
/* occupation  end */

/* telephone start */
.Telephone {
  position: relative;
}
.Telephone .form-control {
  position: relative;
  width: 100%;
  border: 1px solid var(--primary-300);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
}
/* telephone end */

/* Blood Group common */
.blood-wrapper {
  position: relative;
  width: 100%;
  border-radius: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid currentColor;
}
.blood-wrapper select {
  width: 90% !important;
  border-radius: 10px;
  padding: 7px;
  padding-right: 2rem;
  white-space: nowrap;
  border: none;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  background-color: var(--neutral-100);
  color: var(--neutral-500);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.blood-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid currentColor;
  pointer-events: none;
}
.blood-wrapper:hover {
  box-shadow: 2px 1px 12px currentColor;
}
.blood-wrapper select:focus {
  outline: none;
}
.blood-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: currentColor;
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.blood-wrapper i.bx-info-circle.blood-info {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 1.3rem;
  padding: 7px;
  color: currentColor;
}
.blood-tooltip {
  position: absolute;
  bottom: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--neutral-700);
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.blood-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--neutral-700) transparent transparent transparent;
}
/* Variants */
.wife-blood-wrapper {
  color: var(--primary-300);
  border-color: var(--primary-300);
}
.wife-blood-wrapper select option:checked {
  background-color: var(--primary-300) !important;
  color: var(--neutral-100);
}
.wife-blood-wrapper:hover .wife-blood-tooltip,
.wife-blood-wrapper .blood-info:hover + .wife-blood-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.husband-blood-wrapper {
  color: var(--secondary-300);
  border-color: var(--secondary-300);
}
.husband-blood-wrapper select option:checked {
  background-color: var(--secondary-300) !important;
  color: var(--neutral-100);
}
.husband-blood-wrapper:hover .husband-blood-tooltip,
.husband-blood-wrapper .blood-info:hover + .husband-blood-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.blood-wrapper select option {
  padding: 12px;
  background: #fff;
  color: currentColor;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.blood-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: currentColor !important;
}
.wife-blood-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: var(--primary-400);
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.wife-blood-wrapper select option:checked {
  background-color: var(--primary-400) !important;
  color: var(--neutral-100);
  cursor: pointer;
}
.wife-blood-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: var(--primary-200) !important;
  cursor: pointer;
}
.husband-blood-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: var(--secondary-300);
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.husband-blood-wrapper select option:checked {
  background-color: var(--secondary-300) !important;
  color: var(--neutral-100);
  cursor: pointer;
}
.husband-blood-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: var(--secondary-100) !important;
  cursor: pointer;
}
/* blood-group end*/

/* Marriage Since Section start*/
#years-married {
  text-align: center;
}
.custom-select {
  padding: 7px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  font-size: 15px;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" stroke="%23f553ae" stroke-width="2" fill="none" viewBox="0 0 16 16"><polyline points="4,6 8,10 12,6" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  cursor: pointer;
  border: 1px solid var(--primary-300);
  border-radius: 10px;
}
.custom-select:focus {
  outline: none;
  border-color: var(--primary-300);
  box-shadow: 0 0 5px var(--primary-400);
}
/* Marriage Since Section end*/

/* Marriage Status Section start*/
.wife-marital {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.wife-marital .form-label {
  margin-bottom: 0;
  white-space: nowrap;
}

.wife-marital .marital-wrapper {
  flex: 1;
}
.marital-wrapper {
  position: relative;
  width: 100%;
  border-radius: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid currentColor;
}
.marital-wrapper select {
  width: 100% !important;
  border-radius: 10px;
  padding: 7px;
  padding-right: 2rem;
  white-space: nowrap;
  border: none;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  background-color: var(--neutral-100);
  color: var(--neutral-500);
  appearance: none;
}
.marital-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid currentColor;
  pointer-events: none;
}
.marital-wrapper:hover {
  box-shadow: 2px 1px 12px currentColor;
}
.marital-wrapper select:focus {
  outline: none;
}
.marital-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: currentColor;
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.marital-wrapper i.marital-info {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 1.3rem;
  padding: 7px;
  color: currentColor;
}
.marital-tooltip {
  position: absolute;
  bottom: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--neutral-700);
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.marital-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--neutral-700) transparent transparent transparent;
}
.wife-marital-wrapper {
  color: var(--primary-300);
  border-color: var(--primary-300);
}
.wife-marital-wrapper select option:checked {
  background-color: var(--primary-300) !important;
  color: var(--neutral-100);
}
.wife-marital-wrapper:hover .wife-marital-tooltip,
.wife-marital-wrapper .marital-info:hover + .wife-marital-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.marital-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: currentColor !important;
}
/* Marriage Status Section end*/

/*prev status start*/
.status {
  position: relative;
  width: 100%;
}
.status-wrapper {
  position: relative;
  width: 100%;
  border-radius: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid currentColor;
}
.status-wrapper select {
  width: 90% !important;
  border-radius: 10px;
  padding: 7px;
  padding-right: 2rem;
  white-space: nowrap;
  border: none;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  background-color: var(--neutral-100);
  color: var(--neutral-500);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.status-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid currentColor;
  pointer-events: none;
}
.status-wrapper:hover {
  box-shadow: 2px 1px 12px currentColor;
}
.status-wrapper select:focus {
  outline: none;
}
.status-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: currentColor;
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.status-wrapper i.bx-info-circle.status-info {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 1.3rem;
  padding: 7px;
  color: currentColor;
}
.status-tooltip {
  position: absolute;
  bottom: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--neutral-700);
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.status-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--neutral-700) transparent transparent transparent;
}
/* Variants */
.wife-status-wrapper {
  color: var(--primary-300);
  border-color: var(--primary-300);
}
.wife-status-wrapper select option:checked {
  background-color: var(--primary-300) !important;
  color: var(--neutral-100);
}
.wife-status-wrapper:hover .wife-status-tooltip,
.wife-status-wrapper .status-info:hover + .wife-status-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.husband-status-wrapper {
  color: var(--secondary-300);
  border-color: var(--secondary-300);
}
.husband-status-wrapper select option:checked {
  background-color: var(--secondary-300) !important;
  color: var(--neutral-100);
}
.husband-status-wrapper:hover .husband-status-tooltip,
.husband-status-wrapper .status-info:hover + .husband-status-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.status-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: currentColor !important;
}
.wife-status-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: var(--primary-400);
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.wife-status-wrapper select option:checked {
  background-color: var(--primary-400) !important;
  color: var(--neutral-100);
  cursor: pointer;
}
.wife-status-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: var(--primary-200) !important;
  cursor: pointer;
}
.husband-status-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: var(--secondary-300);
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.husband-status-wrapper select option:checked {
  background-color: var(--secondary-300) !important;
  color: var(--neutral-100);
  cursor: pointer;
}
.husband-status-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: var(--secondary-100) !important;
  cursor: pointer;
}
/*prev status end*/

/* Previous-Marriage-wife start*/
.Previous-Marriage-wife {
  margin-top: 1rem;
  background-color: var(--neutral-100);
  border-radius: 10px;
}
.Previous-Marriage-wife input,
.Previous-Marriage-hus input {
  text-align: center;
}
.PreviousMarriageLabel {
  font-size: 18px;
  font-weight: bold;
  color: var(--neutral-700);
  width: 1.5rem;
  height: 1.5rem;
  padding: 1rem;
}
.PreviousMarryWife {
  position: relative;
  border: 1px solid var(--neutral-200);
  padding: 0.5rem;
  border-radius: 8px;
  margin-bottom: 0.2rem;
  box-shadow: 2px 1px 12px #92005530;
}
.PreviousMarryWife .row,
.PreviousMarryHus .row {
  flex-wrap: nowrap;
}
.PreviousMarryWife .form-label {
  font-size: 14px;
  color: var(--neutral-600);
}
input.form-control::placeholder {
  color: #aaa;
}
.Previous-Marriage-hus .row .bx-plus-circle {
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--secondary-300);
}
.MarriedWife {
  position: relative;
}
.MarriedWife-wrapper {
  position: relative;
  width: 100%;
  border: 1px solid var(--primary-300);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
}
.MarriedWife-list {
  position: absolute;
  padding: 1rem;
  top: 100%;
  left: 1;
  background-color: var(--neutral-100);
  width: 95%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--primary-300);
  border-radius: 10px;
  display: none;
  z-index: 10;
  margin-top: 0.2rem;
  box-shadow: 2px 1px 12px var(--primary-300);
}
.MarriedWife-label {
  font-size: 1rem;
  color: var(--neutral-500);
}
.MarriedWife-list li {
  transition: background 0.2s;
  padding: 8px;
  cursor: pointer;
  color: #333;
  font-size: 13px;
  cursor: pointer;
  border-radius: 7px;
  list-style: none;
}
.MarriedWife-list li:hover {
  background-color: var(--primary-100);
}
.MarriedWife-list::-webkit-scrollbar {
  width: 8px;
}
.MarriedWife-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-bottom-right-radius: 60rem;
  border-top-right-radius: 60rem;
}
.MarriedWife-list::-webkit-scrollbar-thumb {
  cursor: pointer;
  background-color: var(--primary-300);
  border: 2px solid #f1f1f1;
  height: 3rem;
  border-bottom-right-radius: 60rem;
  border-top-right-radius: 60rem;
}
.MarriedWife-list::-webkit-scrollbar-thumb:hover {
  background: var(--primary-400);
}
.MarriedWife-wrapper {
  position: relative;
  overflow: visible;
}
.MarriedWife-label {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 5px;
}
.MarriedWife-label[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #555;
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10;
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.MarriedWife-label[data-tooltip]:hover::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  z-index: 10;
}
.MarriedWife-label::after {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.PreviousMarry:has(.remove-btn-container-wife) {
  padding-bottom: 2.2rem;
}
.remove-btn-container-wife {
  position: absolute;
  bottom: 5px;
  right: 15px;
  text-align: right;
  cursor: pointer;
}
.custom-remove-wife {
  background-color: #f553ae;
  color: white;
  border: none;
  padding: 3px 14px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.custom-remove-wife:hover {
  color: white;
  background-color: #ff0080;
}
.custom-remove-wife i {
  margin-right: 5px;
}
/* previous-marriage end*/
/* Menstrual History Section start */
.menstrualhistory .input-group-ma {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wife .unit {
  color: var(--primary-300);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  margin-top: 0.2rem;
}
.menstrual-title {
  color: var(--primary-300);
  font-size: 20px;
  font-weight: 500;
  text-decoration: underline;
  margin-bottom: 15px;
  font-weight: bold;
}
.MFFD input {
  text-align: center;
}
.past-history,
.family-history,
.special-habits {
  margin-top: 0.5rem;
}
.past-history .texthx,
.family-history .texthx,
.special-habits .texthx {
  width: 100%;
  height: 80px;
  border-radius: 6px;
  padding: 0.5rem;
  margin-top: 0.5rem;
  resize: vertical;
  border: 1px solid var(--primary-300);
}
.special-habits .texthx:focus,
.past-history .texthx:focus,
.family-history .texthx:focus {
  outline: none;
  border: 1px solid var(--primary-300);
  box-shadow: 0 0 5px var(--primary-300);
}
.special-habits .text:focus::placeholder,
.past-history .texthx:focus::placeholder,
.family-history .texthx:focus::placeholder {
  color: transparent;
}
/* Base Flatpickr Calendar Styles */
.flatpickr-calendar {
  font-size: 10px !important;
  z-index: 10;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border: none;
  background: var(--neutral-100);
  width: 250px;
}
.flatpickr-innerContainer {
  width: 250px;
}
.flatpickr-rContainer {
  width: 240px;
}
.flatpickr-weekdays {
  width: 240px;
}
/* Table styles */
.flatpickr-days .dayContainer {
  min-width: 239.875px;
  max-width: 239.875px;
}
.flatpickr-days .dayContainer span {
  max-width: 30px !important;
}
.flatpickr-day {
  height: 2.3em;
  line-height: 2.5em;
  text-align: center;
  margin: 0.1em;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
.flatpickr-day .dayContainer {
  width: 246px !important;
}
.flatpickr-day:hover {
  background: var(--neutral-200);
}
/* Selected day */
.flatpickr-day.selected {
  background: var(--primary-300) !important;
  color: white !important;
}
/* Today */
.flatpickr-day.today {
  font-weight: bold;
  color: var(--primary-300) !important;
}
/* Disabled days */
.flatpickr-day.disabled {
  opacity: 0.3;
  cursor: default;
}
/* Navigation buttons */
.flatpickr-prev-month,
.flatpickr-next-month {
  filter: invert(50%) sepia(13%) saturate(2878%) hue-rotate(295deg)
    brightness(100%) contrast(96%);
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  opacity: 1;
}
/* Custom theme class (like wife-lmp) */
.flatpickr-calendar.wife-lmp {
  border: 1px solid var(--primary-300);
}
.flatpickr-calendar.wife-lmp .flatpickr-day.selected {
  background: var(--primary-300) !important;
}
.flatpickr-calendar.wife-lmp .flatpickr-day.today {
  color: var(--primary-300) !important;
}
.flatpickr-calendar.wife-lmp .flatpickr-day:hover {
  background: #fce4f1 !important;
}
.flatpickr-prev-month::after {
  font-size: 18px;
  align-items: center;
  justify-content: center;
  display: flex;
  height: 100%;
}
.flatpickr-next-month::after {
  font-size: 18px;
  align-items: center;
  justify-content: center;
  display: flex;
  height: 100%;
}
.flatpickr-prev-month,
.flatpickr-next-month {
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
  border: none !important;
}
/* Custom theme class (like HUS-lmp) */
.flatpickr-calendar.hus-lmp {
  border: 1px solid var(--secondary-300);
}
.flatpickr-calendar.hus-lmp .flatpickr-day.selected {
  background: var(--secondary-300) !important;
}
.flatpickr-calendar.hus-lmp .flatpickr-day.today {
  color: var(--secondary-300) !important;
}
.flatpickr-calendar.hus-lmp .flatpickr-day:hover {
  background: #fde3f5 !important;
}
/* Wife's Date Picker Theme */
.flatpickr-calendar.wife-calendar {
  border: 1px solid var(--primary-300) !important;
}
.flatpickr-calendar.wife-calendar .flatpickr-day.selected {
  background: var(--primary-300) !important;
}
.flatpickr-calendar.wife-calendar .flatpickr-day.today {
  color: var(--primary-300) !important;
}
.flatpickr-calendar.wife-calendar .flatpickr-day:hover {
  background: #fde3f5 !important;
}
.flatpickr-calendar.wife-calendar .flatpickr-day.selected:hover {
  background: var(--primary-300) !important;
}
.flatpickr-calendar.wife-calendar .flatpickr-prev-month svg,
.flatpickr-calendar.wife-calendar .flatpickr-next-month svg {
  fill: var(--primary-300) !important;
  stroke: var(--primary-300) !important;
}
/* Husband's Date Picker Theme */
.flatpickr-calendar.husband-calendar {
  border: 1px solid var(--secondary-300) !important;
}
.flatpickr-calendar.husband-calendar .flatpickr-day.selected {
  background: var(--secondary-300) !important;
}
.flatpickr-calendar.husband-calendar .flatpickr-day.today {
  color: var(--secondary-300) !important;
}
.flatpickr-calendar.husband-calendar .flatpickr-day:hover {
  background: #e3f2fd !important;
}
.flatpickr-calendar.husband-calendar .flatpickr-day.selected:hover {
  background: var(--secondary-300) !important;
}
.flatpickr-calendar.husband-calendar .flatpickr-prev-month svg,
.flatpickr-calendar.husband-calendar .flatpickr-next-month svg {
  fill: var(--secondary-300) !important;
  stroke: var(--secondary-300) !important;
}
/* Menstrual History Section end */

/* Obstetric History Section start */
.previous-pregnancies input {
  text-align: center;
}
.obstetric-title {
  color: var(--primary-300);
  font-size: 20px;
  font-weight: 500;
  text-decoration: underline;
  margin-bottom: 15px;
  font-weight: bold;
}
.GPAEV {
  margin-bottom: 0.5rem;
}
.GPAEV input {
  text-align: center;
}
#addObHistory {
  margin-bottom: 0.5rem;
}
#addObHistory:hover {
  background-color: var(--primary-300);
  color: #fff !important;
}
/* Menstrual Flow wrapper START*/
.mf-wrapper {
  position: relative;
  width: 100%;
  border-radius: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  color: var(--primary-300);
  border: 1px solid var(--primary-300);
}
.mf-wrapper select {
  width: 100% !important;
  border-radius: 10px 0 0 10px;
  padding: 7px;
  padding-right: 2rem;
  white-space: nowrap;
  border: none;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border-right: 1px solid var(--primary-300);
  background-color: var(--neutral-100);
  color: var(--neutral-500);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.mf-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: translateY(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--primary-300);
  pointer-events: none;
}
.mf-wrapper i.bx-plus {
  color: var(--primary-300);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 7px;
}
.mf-wrapper:hover {
  box-shadow: 2px 1px 12px var(--primary-300);
}
.mf-wrapper select:focus {
  outline: none;
}
.mf-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: var(--primary-400);
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.mf-wrapper select option:checked {
  background-color: var(--primary-400) !important;
  color: var(--neutral-100);
}
.mf-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: var(--primary-200) !important;
}
/* Input for adding new MF */
#newMFInput {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(90% - 2.5rem);
  box-sizing: border-box;
  display: none;
  border: 1px solid var(--primary-400);
  padding-left: 5px;
  border-radius: 5px;
  background-color: var(--primary-100);
  color: var(--primary-400);
  font-size: 16px;
  font-weight: bold;
  outline: none;
  z-index: 1;
  height: 100%;
  box-shadow: 0 0 5px var(--primary-400);
}
/* Tooltip for MF */
.mf-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--neutral-700);
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.mf-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--neutral-700) transparent transparent transparent;
}
.mf-wrapper:hover .mf-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* MF Wrapper end */

/* MOC & MOD Wrappers for Wife start*/
.mocmod-wrapper {
  position: relative;
  border-radius: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid currentColor;
}
.mocmod-wrapper select {
  width: 90% !important;
  border-radius: 10px;
  padding: 7px;
  padding-right: 2rem;
  white-space: nowrap;
  border: none;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  background-color: var(--neutral-100);
  color: var(--neutral-500);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.mocmod-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid currentColor;
  pointer-events: none;
}
.mocmod-wrapper:hover {
  box-shadow: 2px 1px 12px currentColor;
}
.mocmod-wrapper select:focus {
  outline: none;
}
.mocmod-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: currentColor;
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.mocmod-wrapper i.bx-info-circle.blood-info {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 1.3rem;
  padding: 7px;
  color: currentColor;
}
.wife-moc-wrapper {
  color: var(--primary-300);
  border-color: var(--primary-300);
}
.wife-moc-wrapper select option:checked {
  background-color: var(--primary-300) !important;
  color: var(--neutral-100);
}
.wife-moc-wrapper:hover .wife-moc-tooltip,
.wife-moc-wrapper .blood-info:hover + .wife-moc-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.wife-mod-wrapper {
  color: var(--primary-300);
  border-color: var(--primary-300);
}
.wife-mod-wrapper select option:checked {
  background-color: var(--primary-300) !important;
  color: var(--neutral-100);
}
.wife-mod-wrapper:hover .wife-mod-tooltip,
.wife-mod-wrapper .blood-info:hover + .wife-mod-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Optional Hover Styling */
.wife-moc-wrapper select option,
.wife-mod-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: var(--primary-400);
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.wife-moc-wrapper select option:hover,
.wife-mod-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: var(--primary-200) !important;
}
/* MOC & MOD Wrappers for Wife end*/
.entry {
  border-radius: 8px;
  position: relative;
  margin-bottom: 0.4rem;
  padding: 1.5rem 0.6rem 0.6rem 0.5rem;
  box-shadow: 2px 1px 12px #92005520;
}
.entry-number {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  width: 1.5rem;
  height: 1.5rem;
  padding: 1rem;
}
.entry.d-flex {
  display: flex;
  align-items: center;
}
.numberadded {
  flex-shrink: 0;
  width: 30px;
  text-align: center;
}
.entry-content {
  flex: 1;
}
/* CSS for Remove Button Styling */
.remove-btn-wrapper {
  position: absolute;
  bottom: 5px;
  right: 15px;
  text-align: right;
  cursor: pointer;
}
.remove-btn {
  background-color: var(--primary-300);
  color: white;
  border: none;
  padding: 3px 14px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.remove-btn:hover {
  background-color: #ff0080;
}
.remove-btn i {
  margin-right: 5px;
}
.notesOHX:focus {
  outline: none;
  border: 1px solid var(--primary-300);
  box-shadow: 0 0 5px var(--primary-300);
}
.box {
  padding-top: 0.5rem;
}
.box .form-label {
  font-size: 16px;
  color: var(--neutral-600);
}
.BG {
  margin-top: -1rem;
}
.BG label {
  margin-bottom: 0.5rem;
}
.PNLL input {
  text-align: center;
}
/* ===== Contraception Dropdown Styles ===== */
.contraception-dropdown-wrapper {
  position: relative;
  border-radius: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  color: var(--primary-300);
  border: 1px solid var(--primary-300);
}

.contraception-dropdown-wrapper select {
  width: 90% !important;
  border-radius: 10px;
  padding: 7px;
  padding-right: 2rem;
  white-space: nowrap;
  border: none;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  background-color: var(--neutral-100);
  color: var(--neutral-500);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.contraception-dropdown-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid currentColor;
  pointer-events: none;
}

.contraception-dropdown-wrapper select:focus {
  outline: none;
}

.contraception-dropdown-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: var(--primary-400);
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}

.contraception-dropdown-wrapper select option:checked {
  background-color: var(--primary-300) !important;
  color: var(--neutral-100);
}

.contraception-dropdown-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: var(--primary-200) !important;
}
.contraception-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--neutral-700) transparent transparent transparent;
}

.contraception-info-icon {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 1.3rem;
  padding: 7px;
  color: currentColor;
}

.contraception-tooltip {
  position: absolute;
  bottom: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--neutral-700);
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.66rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.contraception-dropdown-wrapper:hover .contraception-tooltip,
.contraception-dropdown-wrapper
  .contraception-info-icon:hover
  + .contraception-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.contraception-dropdown-wrapper:hover {
  box-shadow: 2px 1px 12px currentColor;
}
.entries-container .box.has-remove {
  padding-bottom: 2rem;
}

/* Obstetric History Section end */

/* last-part-wife */
.last-part {
  width: 100%;
}
.last-part h4 {
  color: var(--primary-300);
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: underline;
}
.last-part .title {
  display: flex;
  width: 100%;
  margin: 10px 0;
  justify-content: space-between;
}
.last-part h6 {
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
}
.last-part .row .Textarea {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--primary-300);
}

.last-part .row .Textarea:focus {
  border: 1px solid var(--primary-300);
  outline: none;
  box-shadow: 0 0 5px var(--primary-300);
}
#popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#popupBody {
  position: relative;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 40vw;
  max-height: 90vh;
  overflow: auto;
  align-items: center;
  display: flex;
  flex-direction: column;
}
.close-icon {
  position: absolute;
  top: 1px;
  right: 1px;
  cursor: pointer;
  font-weight: bold;
  background-color: var(--primary-400);
  border-radius: 20%;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 30px;
  color: #fff;
  z-index: 1000;
}
.close-icon:hover {
  color: #ffffff;
  background-color: var(--primary-300);
}
#popupBody .file-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 5px;
  cursor: pointer;
  width: 95%;
}
#popupBody.file-preview:hover {
  background: #f0f0f0;
}
#popupBody .file-preview .file-name {
  flex: 1;
}
#popupBody .file-preview .file-icon {
  cursor: pointer;
}
#popupBody img,
#popupBody video,
#popupBody iframe {
  max-width: 100%;
  height: auto;
  width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 0.5rem;
}
#popupBody.download-link {
  font-size: 0.9em;
  padding: 8px;
}
.last-part .file-item {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 10px;
  margin: 5px 0;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f8f9fa;
  width: 100%;
}
.last-part .file-item:hover {
  background: #e9ecef;
}
.last-part .remove-btn {
  margin-left: auto;
  padding: 2px 8px;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
/* last-part end*/
/* Husband Section */
.Husband .form-control {
  border: 1px solid var(--secondary-300);
  border-radius: 10px;
}

.Husband input.form-control:focus {
  border-color: var(--secondary-300);
  box-shadow: 0 0 5px #00b7ff;
}

.Husband .input-group {
  display: flex;
  align-items: center;
  /* gap: 1rem; */
}

/* age husband start */
.ageWrapperHusband {
  position: relative;
  width: 100%;
  border: 1px solid var(--secondary-300);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
}
/* age husband end */

/* Combined common styles */
.smoking,
.consanguinity {
  border: 1px solid var(--secondary-300);
  border-radius: 10px;
  padding: 0.6rem;
  gap: 0.5rem;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.smoking h5,
.consanguinity h5 {
  color: #1f1f1f;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
.smoking input[type="checkbox"],
.consanguinity input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--secondary-300);
  width: 20px;
  height: 20px;
}
.smoking .text,
.consanguinity .text {
  width: 100%;
  display: none;
  height: 80px; /* More reliable than vh */
  border-radius: 6px;
  padding: 0.5rem;
  color: red;
  margin-top: 0.5rem;
  resize: vertical; /* Allow vertical resizing */
}
.smoking .text::placeholder,
.consanguinity .text::placeholder {
  color: red;
}
.smoking .text:focus,
.consanguinity .text:focus {
  outline: none;
  border: 1px solid var(--secondary-300);
  box-shadow: 0 0 5px var(--secondary-300);
}
.smoking .text:focus::placeholder,
.consanguinity .text:focus::placeholder {
  color: transparent;
}

/* Flex alignment for checkbox and label */
.smoking .smoke {
  align-items: center;
  justify-content: space-between;
}

.smoking .smoke,
.consanguinity .consange {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.marriage-since-list {
  display: none;
}
.marriage-since-list.show {
  display: block;
}

/* previous-marriage-hus start */
.Previous-Marriage-hus {
  margin-top: 1rem;
  background-color: var(--neutral-100);
  border-radius: 10px;
}
.PreviousMarryHus {
  position: relative;
  border: 1px solid #dcdcdc;
  padding: 0.5rem;
  border-radius: 8px;
  margin-bottom: 0.2rem;
  box-shadow: 2px 1px 12px #027fb039;
}
.PreviousMarryHus .form-label {
  font-size: 14px;
  color: #555;
}
.MarriedHus {
  position: relative;
}
.MarriedHus-wrapper {
  overflow: visible;
  position: relative;
  width: 100%;
  border: 1px solid var(--secondary-300);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
}
.MarriedHus-list {
  position: absolute;
  padding: 1rem;
  top: 100%;
  left: 1;
  background-color: var(--neutral-100);
  width: 95%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--secondary-300);
  border-radius: 10px;
  display: none;
  z-index: 10;
  margin-top: 0.2rem;
  box-shadow: 2px 1px 12px var(--secondary-300);
}
.MarriedHus-label {
  font-size: 1rem;
  color: #636363;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 5px;
}
.MarriedHus-list li {
  transition: background 0.2s;
  padding: 8px;
  cursor: pointer;
  color: #333;
  font-size: 13px;
  cursor: pointer;
  border-radius: 7px;
  list-style: none;
}
.MarriedHus-list li:hover {
  background-color: var(--secondary-100);
}
.MarriedHus-list::-webkit-scrollbar {
  width: 8px;
}
.MarriedHus-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-bottom-right-radius: 60rem;
  border-top-right-radius: 60rem;
}
.MarriedHus-list::-webkit-scrollbar-thumb {
  cursor: pointer;
  background-color: var(--secondary-300);
  border: 2px solid #f1f1f1;
  border-bottom-right-radius: 60rem;
  border-top-right-radius: 60rem;
  height: 3rem;
}
.MarriedHus-list::-webkit-scrollbar-thumb:hover {
  background-color: #026592;
}
.MarriedHus-label[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #555;
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10;
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.MarriedHus-label[data-tooltip]:hover::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  z-index: 10;
}
.MarriedHus-label::after {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.PreviousMarryHus:has(.remove-btn-container) {
  padding-bottom: 2.2rem;
}
.remove-btn-container-hus {
  position: absolute;
  bottom: 5px;
  right: 15px;
  text-align: right;
  cursor: pointer;
}
.custom-remove-hus {
  background-color: var(--secondary-300);
  color: white;
  border: none;
  padding: 3px 14px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.custom-remove-hus:hover {
  color: white;
  background-color: #026592;
}
.custom-remove-hus i {
  margin-right: 5px;
}
/* previous-marriage-hus end */
.dropdown-menu {
  display: none;
}
.dropdown-menu.show {
  display: block;
}

/* ovarian-factor */
.ovarian-factor .title {
  display: flex;
  width: 100%;
  color: var(--primary-300);
  font-family: "Poppins", sans-serif;
  font-size: 2rem;
}
.ovarian-factor .labs_Container {
  margin-top: 0.5rem;
  width: 100%;
}
.ovarian-factor .bx-list-ul {
  cursor: pointer;
}
.ovarian-factor .title h5 {
  font-weight: bold;
  text-decoration: underline;
}
.ovarian-factor .selected-tests {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  border-radius: 12px;
  padding: 0.5rem;
}
.ovarian-factor .selected-tests.has-selected {
  box-shadow: 2px 1px 12px #92005520;
}
.ovarian-factor .test-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: 0.3s ease-in-out;
}
.ovarian-factor .test-card label {
  color: var(--primary-400);
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}
.ovarian-factor .test-card input {
  border: 1px solid var(--primary-300);
  padding: 5px 10px;
  flex: 1;
  text-align: center;
}
/* Modal styling */
.ovarian-factor #ovarianModal .modal-dialog {
  max-width: 500px;
}
.ovarian-factor #ovarianModal .modal-content {
  background-color: var(--primary-100);
  border-radius: 15px;
  border: 1px solid var(--primary-300);
  box-shadow: 0 5px 15px rgba(212, 61, 141, 0.3);
}
.ovarian-factor #ovarianModal .modal-header {
  background-color: var(--primary-300);
  color: white;
  border-bottom: 1px solid var(--primary-400);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.ovarian-factor #ovarianModal .modal-title {
  font-weight: 700;
  font-size: 1.3rem;
}
.ovarian-factor #ovarianModal .modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-height: 400px;
  overflow-y: auto;
  padding: 15px;
}

.ovarian-factor #ovarianModal .test-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--primary-100);
  border-radius: 8px;
  background: #fff;
}

.ovarian-factor #ovarianModal .test-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--primary-300);
  margin-bottom: 6px;
  border-bottom: 1px solid var(--primary-100);
  padding-bottom: 4px;
}

.ovarian-factor #ovarianModal .form-check {
  margin-left: 4px;
}

.ovarian-factor #ovarianModal .modal-body::-webkit-scrollbar {
  width: 8px;
}

.ovarian-factor #ovarianModal .modal-body::-webkit-scrollbar-track {
  background: var(--primary-100);
  border-radius: 10px;
}

.ovarian-factor #ovarianModal .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--primary-300);
  border-radius: 10px;
  border: 2px solid var(--primary-100);
}

.ovarian-factor #ovarianModal .modal-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-400);
}

.ovarian-factor #ovarianModal .test-section:hover {
  background: var(--primary-50, #f8f0f9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  transition: all 0.2s ease-in-out;
}

.ovarian-factor #ovarianModal .modal-footer {
  border-top: 1px solid var(--primary-400);
  padding: 1rem 1.5rem;
  background-color: var(--primary-200);
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
}
.ovarian-factor #ovarianModal .btn-primary {
  background-color: var(--primary-300);
  border-color: var(--primary-300);
  font-weight: 600;
  transition: background-color 0.3s ease;
}
.ovarian-factor #ovarianModal .btn-primary:hover {
  background-color: var(--primary-400);
  border-color: var(--primary-400);
}
/* Form check styling */
.ovarian-factor .form-check {
  background-color: white;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--primary-300);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ovarian-factor #ovarianModal .form-check-input {
  background-color: var(--primary-100);
  border: 2px solid var(--primary-300);
  width: 18px;
  height: 18px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.ovarian-factor #ovarianModal .form-check-input:checked {
  background-color: var(--primary-300);
  border-color: var(--primary-400);
}
.ovarian-factor #ovarianModal .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(244, 83, 174, 0.25);
}
.ovarian-factor #ovarianModal .form-check-label {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary-400);
  margin-left: 8px;
}
.ovarian-factor .modal-header .btn-close {
  background-color: var(--primary-100);
  color: var(--primary-400);
  border: none;
  opacity: 1;
  padding: 0.75rem;
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f553ae' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-size: 2rem;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 30%;
  transition: background-color 0.3s ease-in-out;
}

.ovarian-factor .modal-header .btn-close:hover {
  background-color: var(--primary-200);
  color: var(--primary-400);
}
/* ovarian-factor end */

/* male-factor */
.male-factor .title {
  display: flex;
  width: 100%;
  color: var(--secondary-300);
  font-family: "Poppins", sans-serif;
  font-size: 2rem;
}
.male-factor .bx-list-ul {
  cursor: pointer;
}
.male-factor .title h5 {
  font-weight: bold;
  text-decoration: underline;
}
.male-factor .test-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: 0.3s ease-in-out;
}

.male-factor .selected-tests {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  border-radius: 12px;
  padding: 0.5rem;
}
.male-factor .selected-tests.has-selected {
  box-shadow: 2px 1px 12px #027fb039;
}
.male-factor .test-card label {
  color: var(--secondary-500);
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}

.male-factor .test-card input {
  border: 1px solid var(--secondary-300);
  padding: 5px 10px;
  flex: 1;
  text-align: center;
}

/* Modal for Selecting Tests */
.male-factor #testModal .modal-dialog {
  max-width: 500px;
}

.male-factor #testModal .modal-content {
  background-color: var(--secondary-100);
  border-radius: 15px;
  border: 1px solid var(--secondary-300);
  box-shadow: 0 5px 15px rgba(1, 56, 79, 0.3);
}

.male-factor #testModal .modal-header {
  background-color: var(--secondary-300);
  color: white;
  border-bottom: 1px solid var(--secondary-400);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.male-factor #testModal .modal-title {
  font-weight: 700;
  font-size: 1.3rem;
}

.male-factor #testModal .modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-height: 400px;
  overflow-y: auto;
  padding: 15px;
  scrollbar-width: thin;
  scrollbar-color: var(--secondary-300) var(--secondary-100);
}

.male-factor #testModal .test-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--secondary-100);
  border-radius: 8px;
  background: #fff;
}

.male-factor #testModal .test-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--secondary-400);
  margin-bottom: 6px;
  border-bottom: 1px solid var(--secondary-100);
  padding-bottom: 4px;
}

.male-factor #testModal .form-check {
  margin-left: 4px;
}

.male-factor #testModal .modal-body::-webkit-scrollbar {
  width: 8px;
}

.male-factor #testModal .modal-body::-webkit-scrollbar-track {
  background: var(--secondary-100);
  border-radius: 10px;
}

.male-factor #testModal .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--secondary-300);
  border-radius: 10px;
  border: 2px solid var(--secondary-100);
}

.male-factor #testModal .modal-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--secondary-400);
}

.male-factor #testModal .test-section:hover {
  background: var(--secondary-50, #f9f9fb);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  transition: all 0.2s ease-in-out;
}

.male-factor #testModal .modal-footer {
  border-top: 1px solid var(--secondary-400);
  padding: 1rem 1.5rem;
  background-color: var(--secondary-200);
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
}

.male-factor #testModal .btn-primary {
  background-color: var(--secondary-400);
  border-color: var(--secondary-400);
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.male-factor #testModal .btn-primary:hover {
  background-color: var(--secondary-500);
  border-color: var(--secondary-500);
}

/* Form check styling */
.male-factor .form-check {
  background-color: white;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--secondary-300);
  display: flex;
  align-items: center;
  gap: 10px;
}

.male-factor #testModal .form-check-input {
  background-color: var(--secondary-100);
  border: 2px solid var(--secondary-300);
  width: 18px;
  height: 18px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.male-factor #testModal .form-check-input:checked {
  background-color: var(--secondary-300);
  border-color: var(--secondary-400);
}

.male-factor #testModal .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(2, 128, 176, 0.25);
}

.male-factor #testModal .form-check-label {
  color: var(--secondary-500);
  font-weight: 500;
  margin-left: 8px;
  cursor: pointer;
}

.male-factor .form-check-label {
  cursor: pointer;
  font-weight: 600;
  color: var(--secondary-500);
}

.male-factor .modal-header .btn-close {
  background-color: var(--secondary-100);
  color: var(--secondary-500);
  border: none;
  opacity: 1;
  padding: 0.75rem;
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2301384f' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-size: 2rem;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 30%;
  transition: background-color 0.3s ease-in-out;
}

.male-factor .modal-header .btn-close:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230280b0' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-color: var(--neutral-100);
  color: var(--secondary-500);
  border: none;
}

/* .male-factor .modal-header .btn-close:focus {
  box-shadow: 0 0 0 3px var(--secondary-500) !important;
  outline: none !important;
  border: none !important;
}

.male-factor .modal-header .btn-close:focus-visible {
  box-shadow: none !important;
    outline: none !important;
  border: none !important;
} */
/* male-factor end */
/* past-hx */

.past-hx h5 {
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--secondary-400);
}

.past-hx textarea {
  width: 100%;
  border-radius: 5px;
  border-color: var(--secondary-300);
  padding: 8px;
}

.past-hx textarea:focus {
  border: 1px solid var(--secondary-300);
  outline: none;
  box-shadow: 0 0 5px var(--secondary-300);
}

/* CASA */
.casa-wrapper {
  position: relative;
  width: 100%;
  border-radius: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid var(--secondary-300);
  color: var(--secondary-300);
}
.casa-wrapper select {
  width: 90% !important;
  border-radius: 10px;
  padding: 7px;
  padding-right: 2.5rem;
  white-space: nowrap;
  border: none;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  background-color: var(--neutral-100);
  color: var(--neutral-500);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.casa-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid currentColor;
  pointer-events: none;
}
.casa-wrapper:hover {
  box-shadow: 2px 1px 12px var(--secondary-300);
}
.casa-wrapper select:focus {
  outline: none;
}
.casa-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: var(--secondary-300);
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.casa-wrapper select option:checked {
  background-color: var(--secondary-300) !important;
  color: var(--neutral-100);
}
.casa-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: var(--secondary-100) !important;
  cursor: pointer;
}
.casa-info {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 1.3rem;
  padding: 7px;
  color: var(--secondary-300);
  pointer-events: none;
}
.casa-tooltip {
  position: absolute;
  bottom: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--neutral-700);
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.casa-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--neutral-700) transparent transparent transparent;
}
.casa-wrapper:hover .casa-tooltip,
.casa-wrapper .casa-info:hover + .casa-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.casa .casa-box {
  position: relative;
  background-color: var(--neutral-100);
  border-radius: 10px;
  border: 1px solid #dcdcdc;
  padding: 1rem;
  box-shadow: 2px 1px 12px #027fb039;
}
.casa .casa-box .unit {
  color: var(--secondary-300);
  font-family: "Poppins", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
}
.casa .form-label {
  font-size: 15px;
  color: #555;
  font-weight: 500;
  margin-bottom: 0.3rem;
}
.casa .title h3 {
  font-size: 1.3rem;
}
.casa-box .enter-number-casa {
  display: none;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.casa input {
  border: 1px solid var(--secondary-300);
  border-radius: 10px;
  text-align: center;
}
.casa input:focus {
  border: 1px solid var(--secondary-300);
  outline: none;
  box-shadow: 0 0 5px var(--secondary-300);
}
.casa-box:has(.remove-btn-container-casa) {
  padding-bottom: 2.3rem;
}
.remove-btn-container-casa {
  position: absolute;
  bottom: 5px;
  right: 15px;
  text-align: right;
  cursor: pointer;
}
.custom-remove-casa {
  background-color: var(--secondary-300);
  color: white;
  border: none;
  padding: 3px 14px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.custom-remove-casa:hover {
  background-color: #026592;
}
.custom-remove-casa i {
  margin-right: 5px;
}
.casa-upload-btn {
  border: 1px solid var(--secondary-300);
  border-radius: 10px;
  padding: 8px;
  font-size: 14px;
  transition: var(--transition-normal);
  cursor: pointer;
  color: var(--secondary-300);
}
.upload-icon {
  font-size: 1.2rem;
  transition: transform 0.2s;
  margin-right: 5px;
}
.upload-icon:hover {
  transform: scale(1.1);
  color: #fff;
}
.casa-upload-btn:hover {
  background-color: var(--secondary-300);
  color: #fff;
  border-color: var(--secondary-300);
}
.casa-file-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.casa-file-list li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  border: 1px solid var(--secondary-300);
  border-radius: 8px;
  padding: 6px 12px;
}
.casa-file-list .file-link {
  text-decoration: none;
  font-weight: 500;
  color: var(--neutral-600);
  transition: color 0.2s;
}
.casa-file-list .file-link:hover {
  color: var(--secondary-300);
}
.casa-file-list .remove-file-btn {
  border: none;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  color: var(--primary-100);
  transition: color 0.2s;
  background-color: var(--secondary-300);
  padding: 0.2rem 0.3rem;
}
.casa-file-list .remove-file-btn:hover {
  background-color: #026592;
}
.casa-file-list .remove-file-btn:focus {
  color: var(--neutral-100);
}
#casa-file-modal .modal-content-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  padding: 1rem;
  border-radius: 4px;
  max-width: 100%;
  max-height: 90vh;
  width: 55vw;
  height: auto;
  overflow: auto;
  position: relative;
}
#casa-file-modal .modal-body img,
#casa-file-modal .modal-body video,
#casa-file-modal .modal-body iframe {
  max-width: 100%;
  max-height: 70vh;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
#casa-file-modal .modal-body iframe {
  width: 100%;
  height: 80vh;
  border: none;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
#casa-file-modal .modal-close-btn {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: 1;
  font-size: 2rem;
  padding: 0.5rem;
  color: var(--neutral-100);
  background-color: var(--secondary-300);
  border: none;
  cursor: pointer;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border-radius: 30%;
  transition: background-color 0.3s;
  z-index: 1000;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
#casa-file-modal .modal-close-btn:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  background-color: #026592;
  color: #fff;
  transform: scale(1.05);
  transition: all 0.2s ease;
}
/* Casa end */

/* previous-art start*/
/* Protocol start */
.Protocol-wrapper {
  position: relative;
  width: 100%;
  border-radius: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid var(--primary-500);
}
.Protocol-wrapper select {
  width: 100% !important;
  border-radius: 10px 0px 0 10px;
  padding: 7px;
  padding-right: 2rem;
  white-space: nowrap;
  border: none;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border-right: 1px solid var(--primary-500);
  background-color: var(--neutral-100);
  color: var(--neutral-700);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.Protocol-wrapper select::-webkit-scrollbar {
  width: 6px;
}
.Protocol-wrapper select::-webkit-scrollbar-thumb {
  background-color: var(--primary-500);
  border-radius: 3px;
}
.Protocol-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  pointer-events: none;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--primary-500);
}
.Protocol-wrapper i.bx-plus {
  color: var(--primary-500);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 7px;
}
.Protocol-wrapper:hover {
  box-shadow: 2px 1px 12px var(--primary-500);
}
.Protocol-wrapper select:focus {
  outline: none;
}
.Protocol-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: var(--primary-500);
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.Protocol-wrapper select option:checked {
  background-color: var(--primary-500) !important;
  color: var(--neutral-100);
  cursor: pointer;
}
.Protocol-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: var(--primary-200) !important;
  cursor: pointer;
}
.newProtocolInput {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(90% - 2.5rem);
  box-sizing: border-box;
  display: none;
  border: 1px solid var(--primary-500);
  padding-left: 5px;
  border-radius: 5px;
  background-color: var(--primary-100);
  color: var(--primary-500);
  font-size: 16px;
  font-weight: bold;
  outline: none;
  z-index: 10;
  height: 100%;
  box-shadow: 0 0 5px var(--primary-500);
}
/* Tooltip styles */
.Protocol-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--neutral-700);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.Protocol-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--neutral-700) transparent transparent transparent;
}
.Protocol-wrapper:hover .Protocol-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Protocol end */

.numberaddedPA {
  display: none;
}
.pa-wrapper {
  position: relative;
  width: 100%;
  border-radius: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid var(--primary-500);
  color: var(--primary-500);
}
.pa-wrapper select {
  width: 90% !important;
  border-radius: 10px;
  padding: 7px;
  padding-right: 2.5rem;
  white-space: nowrap;
  border: none;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  background-color: var(--neutral-100);
  color: var(--neutral-500);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.pa-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid currentColor;
  pointer-events: none;
}
.pa-wrapper:hover {
  box-shadow: 2px 1px 12px var(--primary-500);
}
.pa-wrapper select:focus {
  outline: none;
}
.pa-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: var(--primary-500);
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.pa-wrapper select option:checked {
  background-color: var(--primary-500) !important;
  color: var(--neutral-100);
}
.pa-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: var(--secondary-100) !important;
  cursor: pointer;
}
.pa-info {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 1.3rem;
  padding: 7px;
  color: var(--primary-500);
  pointer-events: none;
}
.Type-tooltip::after,
.Protocol-tooltip::after,
.Result-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--neutral-700) transparent transparent transparent;
}
.pa-wrapper:hover .Type-tooltip,
.pa-wrapper:hover .Protocol-tooltip,
.pa-wrapper:hover .Result-tooltip,
.pa-wrapper .pa-info:hover + .Type-tooltip,
.pa-wrapper .pa-info:hover + .Protocol-tooltip,
.pa-wrapper .pa-info:hover + .Result-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Tooltip */
.Type-tooltip,
.Protocol-tooltip,
.Result-tooltip {
  position: absolute;
  bottom: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--neutral-700);
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.previous-art-section input {
  text-align: center;
}
.previous-art-section .bx-plus-circle {
  color: var(--primary-500);
  font-size: 1.6rem;
  cursor: pointer;
}
.previous-art-section .previous-art-header h5 {
  font-weight: bold;
  text-decoration: underline;
  color: var(--primary-500);
}
.previous-art-box {
  background-color: var(--neutral-100);
  border-radius: 10px;
  border: 1px solid #dcdcdc;
  padding: 1rem;
  box-shadow: 2px 1px 12px rgba(163, 7, 64, 0.2);
  position: relative; /* for remove button positioning */
}
.previous-art-box:first-child {
  display: none;
}
.previous-art-section .form-label {
  font-size: 14px;
  color: #555;
  font-weight: 500;
  margin-bottom: 0.3rem;
}
.previous-art-section .form-control,
.previous-art-section textarea {
  border: 1px solid var(--primary-500);
  border-radius: 10px;
  padding: 8px;
  font-size: 14px;
  transition: var(--transition-normal);
}
.previous-art-section .form-control:focus,
.previous-art-section textarea:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 5px var(--primary-300);
  outline: none;
}
.previous-art-section .input-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.previous-art-section [data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #555;
  color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10;
}
.previous-art-section [data-tooltip]:hover::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  z-index: 10;
}
.previous-art-section .dropdown-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 120px;
  padding: 8px 12px;
  gap: 8px;
  border: 1px solid var(--primary-500);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
}
.previous-art-section .typeValuepa {
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
  font-size: 14px;
  color: #666;
}
.checkbox-group-E {
  border: 1px solid var(--primary-500);
  border-radius: 8px;
  padding: 6px 0;
  gap: 8px;
  background: white;
  align-items: center;
  justify-content: space-around;
}
.checkbox-group-E .form-check-input {
  border: 1px solid var(--primary-500);
}
.checkbox-group-E .form-check-input:focus {
  box-shadow: none;
  border-color: var(--primary-500);
}
.checkbox-group-E .form-check-input {
  cursor: pointer;
}
.checkbox-group-E .form-check-input:checked {
  background-color: var(--primary-500);
  border-color: var(--primary-500);
}
.checkbox-group-E .form-check-label {
  font-size: 13px;
  color: #444;
}
.previous-art-box:has(.remove-btn-container-pa) {
  padding-bottom: 2.6rem;
}
.remove-btn-container-pa {
  position: absolute;
  bottom: 0.5rem;
  right: 1rem;
}
.custom-remove-pa {
  background-color: var(--primary-500);
  color: #fff;
  border: none;
  padding: 4px 12px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.3s;
}
.custom-remove-pa:hover,
.custom-remove-pa:focus {
  background-color: #a30740e0;
  color: #fff;
}
.custom-remove-pa i {
  margin-right: 5px;
}
.pa-upload-btn {
  border: 1px solid var(--primary-500);
  border-radius: 10px;
  padding: 8px;
  font-size: 14px;
  transition: var(--transition-normal);
  cursor: pointer;
  color: var(--primary-500);
}
.upload-icon {
  font-size: 1.2rem;
  transition: transform 0.2s;
  margin-right: 5px;
}
.upload-icon:hover {
  transform: scale(1.1);
  color: #fff;
}
.pa-upload-btn:hover {
  background-color: var(--primary-500);
  color: #fff;
  border-color: var(--primary-500);
}
.pa-file-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pa-file-list li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  border: 1px solid var(--primary-500);
  border-radius: 8px;
  padding: 6px 12px;
}
.pa-file-list .file-link {
  text-decoration: none;
  font-weight: 500;
  color: var(--neutral-600);
  transition: color 0.2s;
}
.pa-file-list .file-link:hover {
  color: var(--primary-500);
}
.pa-file-list .remove-file-btn {
  border: none;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  color: var(--primary-100);
  transition: color 0.2s;
  background-color: var(--primary-500);
  padding: 0.2rem 0.3rem;
}
.pa-file-list .remove-file-btn:hover {
  background-color: #c3192ae6;
}
#pa-file-modal .modal-content-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  padding: 1rem;
  border-radius: 4px;
  max-width: 100%;
  max-height: 90vh;
  width: 55vw;
  height: auto;
  overflow: auto;
  position: relative;
}
#pa-file-modal .modal-body img,
#pa-file-modal .modal-body video,
#pa-file-modal .modal-body iframe {
  max-width: 100%;
  max-height: 70vh;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
#pa-file-modal .modal-body iframe {
  width: 100%;
  height: 80vh;
  border: none;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
#pa-file-modal .modal-close-btn {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  line-height: 1;
  font-size: 2rem;
  padding: 0.5rem;
  color: var(--neutral-100);
  background-color: var(--primary-500);
  border: none;
  cursor: pointer;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border-radius: 30%;
  transition: background-color 0.3s;
  z-index: 1000;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}
#pa-file-modal .modal-close-btn:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  background-color: #a30740e0;
  color: #fff;
  transform: scale(1.05);
  transition: all 0.2s ease;
}
.pa-years {
  display: flex;
  gap: 0.5rem;
}
.pa-years .unit-pa {
  color: var(--primary-500);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  margin-top: 0.5rem;
}
/* previous-art end*/

/* Visits */
.labs_Container-w input {
  border: 1px solid var(--primary-400);
}
.labs_Container-w input:focus {
  box-shadow: 0 0 5px var(--primary-300);
  border: 1px solid var(--primary-300);
}
/* vis-con */
.vis-con .title {
  display: flex;
  width: 100%;
  color: var(--primary-300);
  font-family: "Poppins", sans-serif;
  font-size: 2rem;
}
.vis-con .bx-list-ul {
  cursor: pointer;
}
.vis-con .title h5 {
  font-weight: bold;
  text-decoration: underline;
}
.vis-con .selected-tests {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 0.5rem;
  border-radius: 12px;
  padding: 0.5rem;
}
.vis-con .selected-tests.has-selected {
  box-shadow: 2px 1px 12px #92005520;
}
.vis-con .test-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: 0.3s ease-in-out;
}
.vis-con .test-card label {
  color: var(--primary-400);
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}
.vis-con .test-card input {
  border: 1px solid var(--primary-300);
  padding: 5px 10px;
  flex: 1;
  text-align: center;
}
.vis-con .test-card input:focus {
  box-shadow: 0 0 5px var(--primary-300);
}
/* Modal styling */

.vis-con #VisitModal .modal-dialog {
  max-width: 500px;
}
.vis-con #VisitModal .modal-content {
  background-color: var(--primary-100);
  border-radius: 15px;
  border: 1px solid var(--primary-300);
  box-shadow: 0 5px 15px rgba(212, 61, 141, 0.3);
}
.vis-con #VisitModal .modal-header {
  background-color: var(--primary-300);
  color: white;
  border-bottom: 1px solid var(--primary-400);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.vis-con #VisitModal .modal-title {
  font-weight: 700;
  font-size: 1.3rem;
}
.vis-con #VisitModal .modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-height: 400px;
  overflow-y: auto;
  padding: 15px;
}
.vis-con #VisitModal .test-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--primary-100);
  border-radius: 8px;
  background: #fff;
}
.vis-con #VisitModal .test-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--primary-300);
  margin-bottom: 6px;
  border-bottom: 1px solid var(--primary-100);
  padding-bottom: 4px;
}
.vis-con #VisitModal .form-check {
  margin-left: 4px;
}
.vis-con #VisitModal .modal-body::-webkit-scrollbar {
  width: 8px;
}
.vis-con #VisitModal .modal-body::-webkit-scrollbar-track {
  background: var(--primary-100);
  border-radius: 10px;
}
.vis-con #VisitModal .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--primary-300);
  border-radius: 10px;
  border: 2px solid var(--primary-100);
}
.vis-con #VisitModal .modal-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-400);
}
.vis-con #VisitModal .test-section:hover {
  background: var(--primary-50, #f8f0f9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  transition: all 0.2s ease-in-out;
}

.vis-con #VisitModal .modal-footer {
  border-top: 1px solid var(--primary-400);
  padding: 1rem 1.5rem;
  background-color: var(--primary-200);
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
}
.vis-con #VisitModal .btn-primary {
  background-color: var(--primary-300);
  border-color: var(--primary-300);
  font-weight: 600;
  transition: background-color 0.3s ease;
}
.vis-con #VisitModal .btn-primary:hover {
  background-color: var(--primary-400);
  border-color: var(--primary-400);
}
/* Form check styling */
.vis-con .form-check {
  background-color: white;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--primary-300);
  display: flex;
  align-items: center;
  gap: 10px;
}
.vis-con #VisitModal .form-check-input {
  background-color: var(--primary-100);
  border: 2px solid var(--primary-300);
  width: 18px;
  height: 18px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.vis-con #VisitModal .form-check-input:checked {
  background-color: var(--primary-300);
  border-color: var(--primary-400);
}
.vis-con #VisitModal .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(244, 83, 174, 0.25);
}
.vis-con #VisitModal .form-check-label {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary-400);
  margin-left: 8px;
}
.vis-con .modal-header .btn-close {
  background-color: var(--primary-100);
  color: var(--primary-400);
  border: none;
  opacity: 1;
  padding: 0.75rem;
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f553ae' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-size:2rem;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 30%;
  transition: background-color 0.3s ease-in-out;
}

.vis-con .modal-header .btn-close:hover {
  background-color: var(--primary-200);
  color: var(--primary-400);
}
/* vis-con end */
.visit .date h5 {
  color: #000000;
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
}
.visit .bx-plus-circle,
.row .wife .bx-plus-circle {
  color: var(--primary-300);
  font-size: 1.6rem;
  cursor: pointer;
}
.row .Husband .bx-plus-circle {
  color: var(--secondary-300);
  font-size: 1.6rem;
  cursor: pointer;
}
.vital-signs {
  display: flex;
  margin: 1rem;
  margin-left: 0;
  gap: 2%;
}
.vital-signs h4 {
  color: #1f1f1f;
  font-family: "Poppins", sans-serif;
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  margin-top: 1rem;
}
.vital-signs h3 {
  color: #1f1f1f65;
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 140%;
  margin-top: 1.5rem;
  margin-left: 0;
}
.vital-signs input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--primary-300);
  text-align: center;
}
.vital-signs input:focus {
  border: 1px solid var(--primary-300);
  box-shadow: 0 0 5px #ff0080;
  outline: none;
}
.TArea {
  width: 100%;
  border-radius: 6px;
  padding: 1rem;
  border: 1px solid var(--primary-300);
}
.TArea:focus {
  border: 1px solid var(--primary-300);
  outline: none;
  box-shadow: 0 0 5px var(--primary-300);
}
.btn-delete {
  background-color: var(--primary-300);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.btn-delete:hover {
  color: var(--neutral-100);
  background-color: #e1419e;
}

.textarea-wrapper {
  position: relative;
}

.textarea-wrapper .bx-plus-circle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  padding: 5px 10px;
  font-size: 25px;
  cursor: pointer;
}
.textarea-wrapper .bx-list-ul {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  padding: 5px 10px;
  cursor: pointer;
  color: var(--primary-300);
  font-size: 1.6rem;
  cursor: pointer;
}

.textarea-wrapper .bx-visit-list-ul {
  position: absolute;
  z-index: 1;
  padding: 5px 10px;
  cursor: pointer;
  color: var(--primary-300);
  font-size: 1.6rem;
  cursor: pointer;
}
/* visit end */

/* Obstetrics start*/
.Menstrual-History .mf-wrapper {
  position: relative;
  width: 100%;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid var(--primary-500);
  color: var(--primary-500);
}

.Menstrual-History .mf-wrapper select {
  width: 90% !important;
  border-radius: 10px;
  padding: 7px;
  padding-right: 2rem;
  border: none;
  background-color: var(--neutral-100);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  box-sizing: border-box;
}

.Menstrual-History .mf-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--primary-500);
  pointer-events: none;
}

.Menstrual-History .mf-wrapper:hover {
  box-shadow: 2px 1px 12px var(--primary-500);
}

.Menstrual-History .mf-wrapper select:focus {
  outline: none;
}

.Menstrual-History .mf-wrapper select option {
  padding: 15px;
  background-color: #fff;
  color: var(--primary-500);
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}

.Menstrual-History .mf-wrapper select option:checked {
  background-color: var(--primary-500) !important;
  color: var(--neutral-100);
}

.Menstrual-History .mf-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: var(--primary-500) !important;
}

.Menstrual-History .mf-wrapper i.mf-info {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 1.3rem;
  padding: 7px;
  color: var(--primary-500);
}

.Menstrual-History .mf-tooltip {
  position: absolute;
  bottom: calc(100% + 0.3rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  /* background: var(--primary-500); */
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.Menstrual-History .mf-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
}

.Menstrual-History .mf-wrapper:hover .mf-tooltip,
.Menstrual-History .mf-wrapper .mf-info:hover + .mf-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* both */
.both .unit {
  color: var(--primary-500);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  margin-top: 0.2rem;
}
.both .form-control {
  border: 1px solid var(--primary-500);
  border-radius: 10px;
  padding: 6px;
}
.both input.form-control:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 5px var(--primary-500);
}
.both .input-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.both .title-both {
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: underline;
  color: var(--primary-500);
}
.both .texthx {
  border: 1px solid var(--primary-500);
}
.both .texthx:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 5px var(--primary-500);
}
.both .fa-chevron-down {
  color: var(--primary-500);
  transition: transform 0.3s;
  font-size: 14px;
}
.both input {
  text-align: center;
}
/* LMP */
.flatpickr-calendar.both-lmp {
  border: 1px solid var(--primary-500) !important;
}
.flatpickr-calendar.both-lmp .flatpickr-day.selected {
  background: var(--primary-500) !important;
}
.flatpickr-calendar.both-lmp .flatpickr-day.today {
  color: var(--primary-500) !important;
}
.flatpickr-calendar.both-lmp .flatpickr-day:hover {
  background: #fce4ec !important;
}
.flatpickr-calendar.both-lmp .flatpickr-day.selected:hover {
  background: var(--primary-500) !important;
}
.flatpickr-calendar.both-lmp .flatpickr-prev-month svg,
.flatpickr-calendar.both-lmp .flatpickr-next-month svg {
  fill: var(--primary-500) !important;
  stroke: var(--primary-500) !important;
}
/* EDD */
.flatpickr-calendar.both-edd {
  border: 1px solid var(--primary-500) !important;
}
.flatpickr-calendar.both-edd .flatpickr-day.selected {
  background: var(--primary-500) !important;
}
.flatpickr-calendar.both-edd .flatpickr-day.today {
  color: var(--primary-500) !important;
}
.flatpickr-calendar.both-edd .flatpickr-day:hover {
  background: #fce4ec !important;
}
.flatpickr-calendar.both-edd .flatpickr-day.selected:hover {
  background: var(--primary-500) !important;
}
.flatpickr-calendar.both-edd .flatpickr-prev-month svg,
.flatpickr-calendar.both-edd .flatpickr-next-month svg {
  fill: var(--primary-500) !important;
  stroke: var(--primary-500) !important;
}

/* investigation */
.labs_Container-w .lab-wrapper {
  color: var(--primary-400);
}
.labs_Container-w .lab-wrapper select {
  border-right: 1px solid var(--primary-400);
}
.labs_Container-w .lab-wrapper select option {
  color: var(--primary-400);
}
.labs_Container-w .lab-wrapper select option:checked {
  background-color: var(--primary-400) !important;
  color: var(--neutral-100);
  cursor: pointer;
}
.labs_Container-h .lab-wrapper {
  color: var(--secondary-300);
}
.labs_Container-h .lab-wrapper select {
  border-right: 1px solid var(--secondary-300);
}
.labs_Container-h .lab-wrapper select option {
  color: var(--secondary-300);
}
.labs_Container-h .lab-wrapper select option:checked {
  background-color: var(--secondary-300) !important;
  color: var(--neutral-100);
  cursor: pointer;
}
.huslab .new-lab-input {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(90% - 2.5rem);
  box-sizing: border-box;
  display: none;
  border: 1px solid var(--secondary-300);
  padding-left: 5px;
  border-radius: 5px;
  text-align: left !important;
  background-color: var(--secondary-100);
  color: var(--secondary-300);
  font-size: 16px;
  font-weight: bold;
  outline: none;
  z-index: 1;
  height: 100%;
  box-shadow: 0 0 5px var(--secondary-300);
}
.lab-wrapper {
  position: relative;
  width: 100%;
  border-radius: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid currentColor;
  color: var(--primary-500);
}
.lab-wrapper select {
  width: 100% !important;
  border-radius: 10px 0 0 10px;
  padding: 5.5px;
  padding-right: 2rem;
  white-space: nowrap;
  border: none;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  border-right: 1px solid currentColor;
  background-color: var(--neutral-100);
  border-right: 1px solid var(--primary-500);
  color: var(--neutral-500);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.lab-wrapper select::-webkit-scrollbar {
  width: 6px;
}
.lab-wrapper select::-webkit-scrollbar-thumb {
  background-color: currentColor;
  border-radius: 3px;
}
.lab-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  pointer-events: none;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid currentColor;
}
.lab-wrapper i.bx-plus {
  color: currentColor;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 7px;
}
.lab-wrapper:hover {
  box-shadow: 2px 1px 12px currentColor;
}
.lab-wrapper select:focus {
  outline: none;
}
.lab-wrapper select option {
  padding: 15px;
  background-color: #ffffff;
  color: currentColor;
  font-size: 15px;
  border-bottom: 1px solid #dee2e6;
  cursor: pointer;
}
.lab-wrapper select option:checked {
  background-color: var(--primary-500) !important;
  color: var(--neutral-100);
  cursor: pointer;
}
.lab-wrapper select option:hover {
  background-color: #e9ecef !important;
  color: currentColor !important;
  cursor: pointer;
}
.new-lab-input {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(90% - 2.5rem);
  box-sizing: border-box;
  display: none;
  border: 1px solid var(--primary-400);
  padding-left: 5px;
  border-radius: 5px;
  text-align: left !important;
  background-color: var(--primary-100);
  color: var(--primary-400);
  font-size: 16px;
  font-weight: bold;
  outline: none;
  z-index: 1;
  height: 100%;
  box-shadow: 0 0 5px var(--primary-400);
}
.fas {
  margin-right: 0.2rem;
}
/* Tooltip styles */
.lab-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--neutral-700);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.lab-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: var(--neutral-700) transparent transparent transparent;
}
.lab-wrapper:hover .lab-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* time */
.flatpickr-calendar.bothtime {
  border: 1px solid var(--primary-500) !important;
}
.flatpickr-calendar.bothtime .flatpickr-day.selected {
  background: var(--primary-500) !important;
}
.flatpickr-calendar.bothtime .flatpickr-day.today {
  color: var(--primary-500) !important;
}
.flatpickr-calendar.bothtime .flatpickr-day:hover {
  background: #fce4ec !important;
}
.flatpickr-calendar.bothtime .flatpickr-day.selected:hover {
  background: var(--primary-500) !important;
}
.flatpickr-calendar.bothtime .flatpickr-prev-month svg,
.flatpickr-calendar.bothtime .flatpickr-next-month svg {
  fill: var(--primary-500) !important;
  stroke: var(--primary-500) !important;
}
/* date */
.flatpickr-calendar.bothdate {
  border: 1px solid var(--primary-500) !important;
}
.flatpickr-calendar.bothdate .flatpickr-day.selected {
  background: var(--primary-500) !important;
}
.flatpickr-calendar.bothdate .flatpickr-day.today {
  color: var(--primary-500) !important;
}
.flatpickr-calendar.bothdate .flatpickr-day:hover {
  background: #fce4ec !important;
}
.flatpickr-calendar.bothdate .flatpickr-day.selected:hover {
  background: var(--primary-500) !important;
}
.flatpickr-calendar.bothdate .flatpickr-prev-month svg,
.flatpickr-calendar.bothdate .flatpickr-next-month svg {
  fill: var(--primary-500) !important;
  stroke: var(--primary-500) !important;
}
.labsContainer .invest {
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #939393;
}
.btn-add {
  color: var(--primary-500);
  cursor: pointer;
}
.btn-addfile {
  color: var(--primary-500);
  cursor: pointer;
}
/* Risk Summary*/
.txrea {
  width: 100%;
  border-radius: 6px;
  padding: 1rem;
  border: 1px solid var(--primary-500);
}
.txrea:focus {
  border: 1px solid var(--primary-500);
  outline: none;
  box-shadow: 0 0 5px var(--primary-500);
}
/* Date */
.date .form-control {
  border: 1px solid var(--primary-500);
  border-radius: 10px;
  padding: 6px;
}
.date .form-control:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 5px var(--primary-500);
}
/* Age */
.b-age {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.b-age .week,
.b-age .day {
  color: #929292;
}
.b-age .form-control {
  border: 1px solid var(--primary-500);
  border-radius: 10px;
  padding: 6px;
  text-align: center;
}
.b-age .form-control:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 5px var(--primary-500);
}
/* WT/BP */
.signs .small {
  color: #929292;
  font-weight: bold;
}
.signs .form-control {
  border-radius: 10px;
  border: 1px solid var(--primary-500);
  text-align: center;
}
.signs .form-control:focus {
  border: 1px solid var(--primary-500);
  box-shadow: 0 0 5px var(--primary-500);
  outline: none;
}
/* Notes */
.notes .texthx {
  width: 100%;
  border-radius: 6px;
  padding: 1rem;
  border: 1px solid var(--primary-500);
}
.notes .texthx:focus {
  border: 1px solid var(--primary-500);
  outline: none;
  box-shadow: 0 0 5px var(--primary-500);
}
.notes .bx-plus-circle {
  color: var(--primary-500);
}
/* button */
.endButton {
  color: var(--primary-100);
  background-color: var(--primary-500);
  padding: 5px;
  border: none;
  border-radius: 5px;
  margin-bottom: 5px;
  font-size: 20px;
}
.endButton:focus {
  color: var(--primary-100);
  background-color: var(--primary-500);
  border: none;
  box-shadow: none;
}
/* Modal styling */
.ob-ix #labsModal .modal-dialog {
  max-width: 500px;
}
.ob-ix #labsModal .modal-content {
  background-color: var(--primary-100);
  border-radius: 15px;
  border: 1px solid var(--primary-500);
  box-shadow: 0 5px 15px rgba(212, 61, 141, 0.3);
}
.ob-ix #labsModal .modal-header {
  background-color: var(--primary-500);
  color: white;
  border-bottom: 1px solid var(--primary-600);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.ob-ix #labsModal .modal-title {
  font-weight: 700;
  font-size: 1.3rem;
}
.ob-ix #labsModal .modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-height: 400px;
  overflow-y: auto;
  padding: 15px;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-500) var(--primary-100);
}

.ob-ix #labsModal .test-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--primary-100);
  border-radius: 8px;
  background: #fff;
}

.ob-ix #labsModal .test-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--primary-900);
  margin-bottom: 6px;
  border-bottom: 1px solid var(--primary-100);
  padding-bottom: 4px;
}

.ob-ix #labsModal .form-check {
  margin-left: 4px;
}

.ob-ix #labsModal .modal-body::-webkit-scrollbar {
  width: 8px;
}

.ob-ix #labsModal .modal-body::-webkit-scrollbar-track {
  background: var(--primary-100);
  border-radius: 10px;
}

.ob-ix #labsModal .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--primary-500);
  border-radius: 10px;
  border: 2px solid var(--primary-100);
}

.ob-ix #labsModal .modal-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-600);
}

.ob-ix #labsModal .test-section:hover {
  background: var(--primary-50, #f9f9fb);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  transition: all 0.2s ease-in-out;
}

.ob-ix #labsModal .modal-footer {
  border-top: 1px solid var(--primary-700);
  padding: 1rem 1.5rem;
  background-color: var(--primary-600);
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
}
.ob-ix #labsModal .btn-primary {
  background-color: var(--primary-500);
  border-color: var(--primary-500);
  font-weight: 600;
  transition: background-color 0.3s ease;
}
.ob-ix #labsModal .btn-primary:hover {
  background-color: var(--primary-900);
  border-color: var(--primary-600);
}
.ob-ix #labsModal .form-check-input {
  background-color: var(--primary-100);
  border: 2px solid var(--primary-500);
  width: 18px;
  height: 18px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.ob-ix #labsModal .form-check-input:checked {
  background-color: var(--primary-500);
  border-color: var(--primary-600);
}
.ob-ix #labsModal .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(244, 83, 174, 0.25);
}
.ob-ix #labsModal .form-check-label {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary-500);
  margin-left: 8px;
}
.ob-ix .lab-row .selected-tests {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  border-radius: 12px;
  padding: 0.5rem;
}

.ob-ix .bx-list-ul {
  cursor: pointer;
}
.ob-ix .title h5 {
  font-weight: bold;
  text-decoration: underline;
}
.ob-ix .notes .selected-tests {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 0.5rem;
  border-radius: 12px;
  padding: 0.5rem;
}
.ob-ix .selected-tests.has-selected {
  box-shadow: 2px 1px 12px #92005520;
}
.ob-ix .test-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: 0.3s ease-in-out;
}
.ob-ix .test-card label {
  color: var(--primary-500);
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
}
.ob-ix .test-card input {
  border: 1px solid var(--primary-500);
  padding: 5px 10px;
  flex: 1;
  text-align: center;
}
.ob-ix .test-card input:focus {
  box-shadow: 0 0 5px var(--primary-500);
}
.ob-ix #obstetricsModal .modal-dialog {
  max-width: 500px;
}

.ob-ix #obstetricsModal .modal-content {
  background-color: var(--primary-100);
  border-radius: 15px;
  border: 1px solid var(--primary-500);
  box-shadow: 0 5px 15px rgba(212, 61, 141, 0.3);
}

.ob-ix #obstetricsModal .modal-header {
  background-color: var(--primary-500);
  color: white;
  border-bottom: 1px solid var(--primary-600);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.ob-ix #obstetricsModal .modal-title {
  font-weight: 700;
  font-size: 1.3rem;
}
.ob-ix #obstetricsModal .modal-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-height: 400px;
  overflow-y: auto;
  padding: 15px;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-500) var(--primary-100);
}

.ob-ix #obstetricsModal .test-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--primary-100);
  border-radius: 8px;
  background: #fff;
}

.ob-ix #obstetricsModal .test-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--primary-900);
  margin-bottom: 6px;
  border-bottom: 1px solid var(--primary-100);
  padding-bottom: 4px;
}

.ob-ix #obstetricsModal .form-check {
  margin-left: 4px;
}

.ob-ix #obstetricsModal .modal-body::-webkit-scrollbar {
  width: 8px;
}

.ob-ix #obstetricsModal .modal-body::-webkit-scrollbar-track {
  background: var(--primary-100);
  border-radius: 10px;
}

.ob-ix #obstetricsModal .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--primary-500);
  border-radius: 10px;
  border: 2px solid var(--primary-100);
}

.ob-ix #obstetricsModal .modal-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-600);
}

.ob-ix #obstetricsModal .test-section:hover {
  background: var(--primary-50, #f9f9fb);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  transition: all 0.2s ease-in-out;
}

.ob-ix #obstetricsModal .modal-footer {
  border-top: 1px solid var(--primary-700);
  padding: 1rem 1.5rem;
  background-color: var(--primary-600);
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
}

.ob-ix #obstetricsModal .btn-primary {
  background-color: var(--primary-500);
  border-color: var(--primary-500);
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.ob-ix #obstetricsModal .btn-primary:hover {
  background-color: var(--primary-900);
  border-color: var(--primary-600);
}

.ob-ix .form-check {
  background-color: white;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--primary-500);
  display: flex;
  align-items: center;
  gap: 10px;
}

.ob-ix #obstetricsModal .form-check-input {
  background-color: var(--primary-100);
  border: 2px solid var(--primary-500);
  width: 18px;
  height: 18px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.ob-ix #obstetricsModal .form-check-input:checked {
  background-color: var(--primary-500);
  border-color: var(--primary-600);
}

.ob-ix #obstetricsModal .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(244, 83, 174, 0.25);
}

.ob-ix #obstetricsModal .form-check-label {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary-500);
  margin-left: 8px;
}

.ob-ix .modal-header .btn-close {
  background-color: var(--primary-100);
  color: var(--primary-500);
  border: none;
  opacity: 1;
  padding: 0.75rem;
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a30740' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-size: 2rem;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 30%;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.ob-ix .modal-header .btn-close:hover {
  background-color: var(--primary-600);
  color: var(--primary-100);
}

/* Obstetrics end*/

/* Induction start */
.Induction .pa-item {
  margin-bottom: 0.5rem;
}
.Induction .checkbox-group-E {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
  border: none;
}
.table {
  border: 1px solid var(--primary-700);
  border-radius: 0.3rem;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

.table th,
.table td {
  border: 1px solid var(--primary-700);
}

.table thead th {
  color: var(--neutral-700);
}

.table tbody th {
  color: var(--neutral-700);
}

.table tbody td {
  transition: background-color 0.3s;
  color: var(--neutral-700);
  text-align: center;
}

.table tbody td:focus {
  outline: none;
  background-color: var(--primary-600);
}
.table-editable td:not(:first-child),
.table-editable th:not(:first-child) {
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.table-editable td:focus {
  background-color: var(--primary-600);
  outline: none;
}

.table-editable th {
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding: 0.5rem;
  text-align: left;
  border: 1px solid var(--primary-800);
}
.table-editable th:hover {
  background-color: var(--primary-600);
}

/* Induction end */

/* Custom Gradient Button */
.secondary-gradient-button {
  background: linear-gradient(to right, #99d9ed, #0280b0, #015f8a);
  color: white;
  border: none;
  padding: 10px 25px;
  font-weight: bold;
  border-radius: 6px;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.secondary-gradient-button:hover {
  background: linear-gradient(to right, #99d9ed, #0280b0, #015f8a);
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* General styles */

/* Responsive design */
@media (max-width: 3000px) {
  .PreviousMarryWife .marriage-since-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
  }
}
@media (min-width: 1450px) {
  .label-responsive {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
  }
}
@media (max-width: 1440px) {
  .entries-container .entry .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .entries-container .entry .row > [class*="col-"] {
    width: auto;
  }
  .entries-container .entry .row > .col-12 {
    grid-column: 1 / -1;
  }
  .BG {
    margin-top: 0rem;
  }
}
@media (max-width: 1350px) {
  .notes .col-12 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 1320px) {
  .previous-art-section .row.g-3 .pa-item {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .male-factor .selected-tests {
    grid-template-columns: 1fr;
  }
  .ovarian-factor .selected-tests {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1300px) {
  .marriage-date-section .row.align-items-end.flex-wrap {
    flex-direction: column !important;
  }
  .marriage-date-section .row.g-3.flex-nowrap {
    flex-wrap: wrap !important;
  }
  .marriage-date-section .col-lg-1 {
    width: 100% !important;
    max-width: none !important;
  }
  .marriage-date-section .col-12 {
    margin-top: 1rem;
  }
}
@media (max-width: 1260px) {
  .casa-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 1210px) {
  .PreviousMarryWife .row,
  .PreviousMarryHus .row {
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
  }
}
@media (max-width: 1183px) {
  .ob-ix .lab-row .selected-tests {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1170px) {
  .previous-art-section .row.g-3 .pa-item {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .PNLL > div {
    width: 50% !important;
  }
}
@media (max-width: 1130px) {
  .entries-container .entry .row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1120px) {
  .Hx,
  .checkbox,
  .row.AO,
  .row.BT {
    flex-direction: column;
  }

  .smoking-container,
  .consanguinity-container,
  .age,
  .wife-occupation,
  .Blood,
  .Telephone {
    width: 100% !important;
    max-width: 100%;
  }
  .age,
  .wife-occupation,
  .Blood,
  .Telephone {
    margin-bottom: 0.5rem;
  }
  .menstrualhistory .col-md-6 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    gap: 0.5rem;
  }

  .menstrualhistory .d-flex {
    flex-wrap: wrap;
  }

  .menstrualhistory .input-group,
  .menstrualhistory .lmp-wrapper {
    width: 100% !important;
  }

  .menstrualhistory .col-md-6:nth-child(2) {
    margin-top: 15px;
  }
  .Analysis .col-md-3 {
    width: 50%;
    margin-bottom: 15px;
  }
}
@media (max-width: 1030px) {
  .row.patient {
    flex-wrap: wrap !important;
    flex-direction: column;
  }
  .num,
  .ProvisionalDiagnosis,
  .Adress {
    width: 100% !important;
    max-width: 100%;
  }
}
@media (max-width: 1000px) {
  .visit {
    display: block;
    width: 100%;
    margin-bottom: 20px;
  }
  .vis-con {
    display: block;
    width: 100%;
  }
  .visits {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .line {
    display: none !important;
  }
}
@media (max-width: 1170px) and (min-width: 769px) {
  .contraception-notes .d-flex {
    flex-direction: column !important;
  }

  .contraception-notes .contraception,
  .contraception-notes .notes-wrapper {
    width: 100% !important;
  }
}
@media (max-width: 1130px) and (min-width: 769px) {
  .MFFD {
    display: flex;
    flex-wrap: wrap;
  }

  .MFFD .MF {
    width: 100% !important;
  }

  .MFFD .F,
  .MFFD .D {
    width: 50% !important;
  }
}
@media (max-width: 1130px) {
  .last-part-row {
    flex-direction: column !important;
  }
  .last-part-row .col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}
@media (max-width: 830px) {
  .notes .col-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .ob-ix .lab-row .selected-tests {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (max-width: 789px) {
  .search-add-container {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box,
  .add-patient {
    width: 100%;
    justify-content: center;
  }

  .add-patient {
    margin-top: 10px;
  }
}
@media (max-width: 770px) {
  .vertical-line {
    width: 100%;
    height: 0.5px;
    min-height: 0;
    margin: 16px 0;
  }
  .button-group {
    flex-wrap: wrap;
    gap: 10px;
  }
}
@media (max-width: 768px) {
  .pdf-preview-container {
    height: 50vh;
    min-height: 200px;
  }
  .PNLL > div {
    width: 100% !important;
  }
  .male-factor .test-card {
    flex: 1 1 calc(50% - 20px);
  }
}
@media (max-width: 630px) {
  .textarea-wrapper {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
  .textarea-wrapper i {
    display: block;
    margin-bottom: 5px;
  }
  .bp-input,
  .wt-input {
    width: 100%;
    margin-bottom: 10px;
    height: 6vh;
  }
  .vital-signs {
    display: block;
    width: 100%;
  }
}
@media (max-width: 500px) {
  .male-factor .test-card {
    flex: 1 1 100%;
  }
}
@media (max-width: 575.98px) {
  .ob-ix #labsModal .modal-body > .container-fluid > .row {
    grid-template-columns: 1fr;
  }
  .ob-ix #labsModal .modal-body > .container-fluid > .row > div h6 {
    font-size: 0.9rem;
    white-space: normal;
  }
  .ob-ix #obstetricsModal .modal-body {
    grid-template-columns: 1fr;
  }
  .ob-ix #obstetricsModal .modal-body h6 {
    font-size: 0.9rem;
    white-space: normal;
  }
  .vis-con #VisitModal .modal-body {
    grid-template-columns: 1fr;
  }
  .vis-con #VisitModal .modal-body h6 {
    font-size: 0.9rem;
    white-space: normal;
  }
}
@media (max-width: 565px) {
  /* .sidebar.open {
    margin-left: -240px;
  } */
  .sidebar.open ~ .main-content {
    margin-left: 0 !important;
  }
  .sidebar.open + .main-content {
    margin-left: 0 !important;
  }
}
@media (max-width: 480px) {
  .pika-single {
    width: 100%;
    max-width: 300px;
  }
  .pika-button {
    width: 2em;
    height: 2em;
    line-height: 2em;
    font-size: 0.9em;
  }
  .contraception-notes .d-flex {
    flex-direction: column !important;
  }
  .contraception-notes .contraception,
  .contraception-notes .notes-wrapper {
    width: 100% !important;
  }
  .previous-art-box .pa-item {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .previous-art-box .row > div {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .previous-art-box .d-flex.flex-nowrap {
    flex-direction: column !important;
  }
  .previous-art-box .d-flex.flex-nowrap > div {
    width: 100% !important;
  }
  .previous-art-box textarea {
    width: 100% !important;
  }
}
@media (max-width: 400px) {
  .submenu.show-submenu {
    left: 0;
    right: 0;
    width: 60%;
    max-width: 100%;
    transform: none;
    margin: 0;
  }
}