/* Apply to the container within .group-prerequisite */
.group-prerequisite .field__item {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Adjusts spacing between items */
  padding: 10px; /* Adds padding around the container */
  border: 1px solid #ccc; /* Adds outer border */
  background-color: #fff; /* Fills container with white */
  border-radius: 8px; /* Optional: rounds the corners of the outer container */
}

/* Apply to the container within .group-prerequisite */
.group-prerequisite .field__item {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Adjusts spacing between items */
  padding: 10px; /* Adds padding around the container */
  border: 1px solid #ccc; /* Adds outer border */
  background-color: #fff; /* Fills container with white */
  border-radius: 8px; /* Optional: rounds the corners of the outer container */
}

/* Style individual items within .group-prerequisite */
.group-prerequisite .field__item {
  flex: 1 1 25px; /* Allows items to grow and shrink, sets a minimum width */
  max-width: 150px; /* Ensures a maximum width for each item */
  text-align: center; /* Centers content inside the item */
  padding: 0px; /* Adds slight padding for visual separation */
  background: none; /* Removes background color */
  border: none; /* Removes inner border */
  box-shadow: none; /* Removes inner box shadow */
}

/* Style images within .group-prerequisite */
.group-prerequisite .field__item img {
  max-width: 100%;
  height: auto;
  border-radius: 5px; /* Slightly rounds the image corners */
}

/* Style the badge title */
.group-prerequisite .field__item h5 {
  margin-top: 10px; /* Adds spacing above the title */
  font-size: 1rem; /* Adjusts font size */
  color: #333; /* Optional: changes text color */
}


.group-prerequisite .field__item {
    flex: 1 1 25px;
    max-width: 150px;
    text-align: center;
    padding: 5px;
    background: none;
    border: none;
    box-shadow: none;
    background: white;
    margin: 10px;
    float: left;
    align-content: center;
}

/* Targeting the specific section inside .group-prerequisite */
.group-prerequisite .layout__region.layout__region--content {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center-aligns content horizontally */
  text-align: center; /* Centers text inside the elements */
}

/* Adjust margin of the title to reduce space */
.group-prerequisite .field--name-taxonomy-term-title h5 {
  margin-top: 5px; /* Reduces space above the title */
}



.field.field--name-field-training-documentation.field--type-entity-reference a {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    text-align: center;
    text-decoration: none;
    border-radius: 0.25rem;
}





/* Badge member Listing */

/* Style for the badge certificate container in .view-taxonomy-badges */
.view-taxonomy-badges .boxes.views-row {
  width: 450px; /* Set a fixed width for the certificate */
  margin: 20px auto; /* Center-align with auto margins and add spacing */
  padding: 20px; /* Add padding inside the certificate */
  border: 2px solid #ccc; /* Add a border to resemble a certificate frame */
  border-radius: 10px; /* Slightly round the corners */
  background-color: #fffcdd; /* White background for the certificate */
  background-image: url('path/to/watermark-image.png'); /* Add watermark image */
  background-size: 300px; /* Set size of watermark */
  background-position: center; /* Center the watermark */
  background-repeat: no-repeat; /* Prevent the watermark from repeating */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  text-align: center; /* Center-align text and content */
  position: relative; /* For positioning icons */
}

/* Add a ribbon icon at the top */
/* Add a prize ribbon icon as a watermark */
.view-taxonomy-badges .boxes.views-row::before {
  content: "";
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 42px 69px; /* Adjust the size of the icon */
  width: 47px;
  height: 59px;
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%); /* Center the icon horizontally */
  opacity: 0.5; /* Adjust opacity for a watermark effect */
  background-image: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 height%3D%2224px%22 viewBox%3D%220 -960 960 960%22 width%3D%2224px%22 fill%3D%22%23e8eaed%22%3E%3Cpath d%3D%22M240-40v-329L110-580l185-300h370l185 300-130 211v329l-240-80-240 80Zm80-111 160-53 160 53v-129H320v129Zm20-649L204-580l136 220h280l136-220-136-220H340Zm98 383L296-558l57-57 85 85 169-170 57 56-226 227ZM320-280h320-320Z%22/%3E%3C/svg%3E');
    transform: scale(4);
	
}


/* Adjust image size */
.view-taxonomy-badges .field--name-field-member-photo img {
  width: 150px; /* Adjust size to fit within the certificate */
  height: auto;
  border-radius: 50%; /* Make the photo circular */
  margin-bottom: 10px; /* Add spacing below the photo */
}

/* Style for badge name */
.view-taxonomy-badges .field--name-field-badge-requested {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

/* Style for the watermark text */
.view-taxonomy-badges .field__label {
  font-size: 1rem;
  color: #666;
  font-style: italic;
  margin-bottom: 10px;
}

/* Style for member name */
.view-taxonomy-badges .field--name-field-first-name,
.view-taxonomy-badges .field--name-field-last-name {
  font-size: 1.2rem;
  color: #555;
}

/* Additional spacing and alignment adjustments */
.view-taxonomy-badges .group-left,
.view-taxonomy-badges .group-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* Style the main container */
.field--name-field-badge-checkout-requirement {
  background-color: #f9f9f9; /* Light background color */
  border: 1px solid #ddd; /* Subtle border */
  border-radius: 8px; /* Rounded corners */
  padding: 15px; /* Add padding for spacing */
  margin: 15px 0; /* Add spacing around the element */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
  display: flex;
  align-items: center;
  gap: 10px; /* Space between icon and text */
}

/* Add an icon before the label */
.field--name-field-badge-checkout-requirement::before {
  content: '\1F393'; /* Unicode for a graduation cap emoji */
  font-size: 24px; /* Size of the icon */
  color: #007bff; /* Icon color */
  display: inline-block;
}

/* Style the label */
.field--name-field-badge-checkout-requirement .field__label {
  font-weight: bold; /* Bold text for emphasis */
  color: #333; /* Darker text color */
  margin-bottom: 5px;
  font-size: 1.1rem;
}

/* Style the item description */
.field--name-field-badge-checkout-requirement .field__item {
  color: #555; /* Subtle text color */
  font-size: 1rem; /* Adjust font size */
  margin-top: 5px;
}

/* making pending badges grey background */
.view-badges-earned-block tr.Pending {
    background: #a9a9a9;
}