.card {
  /*height: 450px;*/ /* Fixed height */
  height: 50vh;
  /* Other styling as needed */
  overflow: hidden; /* Optional: to hide overflow content */
}

.card-img-top-wrapper {
  height: 42%; /* Adjust based on how much space you want the image to take */
  margin: 0.5em;
  overflow: hidden;
}

.card-img-top-wrapper img{
  border-radius: 0;
}

.my-custom-body {
  position: relative;
  height: 54%; /* Adjust this height as needed */
  overflow: hidden;
}

.my-custom1-body {
  position: relative;
  height: 96%; /* Adjust this height as needed */
  overflow: hidden;
}

.card-body::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12%; /* Height of the fade effect */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /* Adjust the gradient colors to match your card's background */
}

.card-header {
  text-align: right;
  background-color: #16596f;
  color: white;
}

.card-footer {
  text-align: right;
}

button.ui-dialog-titlebar-close {
  cursor: pointer;
  border: none;
  background-color: #16596f;
  /*background-color: var(--bs-primary);*/
}

.ui-dialog-titlebar-close::after {
  /*content: "[x]";*/
  content: "close";
  font-size: 14px;
  position: relative;
  left: -1.5em;
  bottom: 0.25em;
  font-weight: bold;
  color: #FFFFFF;
}

.ui-dialog-titlebar {
	background-color: #16596f;
	color: #FFFFFF;
}

.card-header.my-custom-header a i {
  color: #FFFFFF;
}

.card-header.my-custom1-header a i {
	color: #FFFFFF;
}


/* Target the dialog container */
.ui-dialog[role="dialog"] {
  width: 50%;
  max-width: 50%; /* Ensure the width does not exceed 50% */
  height: auto;
  overflow: hidden; /* Hide overflow from the main container */
  box-sizing: border-box; /* Include padding/borders in the width/height calculations */
  position: relative;
  margin-top: 100px; /* Add top margin to create a gap below the menu */
}

/* Wrapper to handle vertical scrolling */
.ui-dialog[role="dialog"] .ui-dialog-content {
  max-height: 100%;
  overflow-y: auto; /* Allow vertical scrolling */
}

/* Hide scrollbar in WebKit-based browsers (e.g., Chrome, Safari) */
.ui-dialog[role="dialog"] .ui-dialog-content::-webkit-scrollbar {
  width: 0;  /* Hide scrollbar width */
}

/* Hide scrollbar in Firefox */
.ui-dialog[role="dialog"] .ui-dialog-content {
  scrollbar-width: none;  /* Hide scrollbar */
}

/* Hide scrollbar for Internet Explorer/Edge */
.ui-dialog[role="dialog"] .ui-dialog-content {
  -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}

/* Ensure images are responsive and scale with the container */
.ui-dialog[role="dialog"] img {
  max-width: 100%; /* Scale down the image to fit the container */
  height: auto; /* Maintain aspect ratio */
}

/* Ensure text content scales with container */
.ui-dialog[role="dialog"] .field--name-body {
  width: 100%;
  box-sizing: border-box;
}

/* Adjust child containers to fit the width */
.ui-dialog[role="dialog"] .views-element-container,
.ui-dialog[role="dialog"] .view-content {
  width: 100%;
  box-sizing: border-box;
}