.card-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 10px; /* Adjust the gap size as needed for padding between buttons */
}

.btn {
  margin: 0 5px; /* Additional adjustment if needed, can be removed if gap is sufficient */
}

/*.card-body {
  padding: 2px 10px;
}*/

.card-header {
  padding: 5px 10px;
  margin: 0;
}

.cards-container {
  display: flex;
  flex-direction: column;
  width: calc(100vw - 150px); /* Set the container width */
  margin-left: auto; /* Center the container */
  margin-right: auto; /* Center the container */
}

.inner-cards-container {
  width: 100%;
  display: flex;
  padding-top: 7.5px;
  flex-wrap: wrap;
}

.parent-card {
  display: flex;
  flex-wrap: wrap;
  width: 100%; /* Make parent cards take the full width of the container */
}

.parent-card-body {
  display: flex;
  flex-wrap: wrap;
  padding-top: 7.5px;
  width: 100%; /* Ensure the body takes the full width of the parent card */
  padding: 2px 10px;
}

.inner-card {
  flex-basis: auto;
  flex-grow: 1;
}

.inner-card-body {
  margin: 5px 5px;
  padding: 0;
  display: flex; /* Use flexbox to center the table */
  justify-content: center; /* Horizontally center the table */
  align-items: center; /* Vertically center the table */
  height: 100%; /* Ensure the div takes full height to allow for vertical centering */
}

/* --- HEADER --- */
.header {
  background: url(../Images/header_name.png) repeat;
  font-size: 16px;
  margin: 0;
  padding: 0 0 20px;
  position: relative;
  z-index: 1200;
}

.pcg-header-logo {
  width: 320px;
  height: 80px;
  padding-left: 25px;
  padding-top: 5px;
}

.pcg-header-name {
  width: max-content;
  padding-left: 10px;
  font-family: Tahoma;
  font-size: 18px
}

.pcg-header-subname {
  font-size: 12px
}

.pcg-header-formtitle {
  text-align: center;
  font-family: Tahoma;
  font-size: 18px;
  color: yellow;
  border: 3px solid black;
  padding-left: 10px;
  padding-right: 10px;
}

.pcg-header2 {
  width: 100%;
  height: 49px;
}

.pcg-left-login-panel {
  width: 181px;
  height: 100%;
  position: fixed;
  vertical-align: top;
  text-align: left;
  color: #ffffff;
}

.pcg-left-login-panel2 {
  padding-left: 181px;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}

.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /*Margin bottom by footer height */
  font-size: 16px;
  margin-bottom: 60px;
}

.body-login-logo-container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: #FFEBCD;
}

.body-login-logo {
  text-align: center;
  height: 200px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /*Vertically center the text there */
}

.footer-mobile {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
}

.footer-div {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: 100%;
}

.footer-left-content {
  display: flex;
  align-items: center; /* Vertically center the bird and text */
  gap: 0.5rem; /* Adds spacing between image and text */
}

.footer-left-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.0;
}

.footer-dif-left {
  font-size: 16px;
  flex: 1; /*Flex-grow to fill the space, if still needed */
  display: flex; /*Make the item a flex container */
  flex-direction: column; /*Stack children vertically */
  align-items: flex-start; /*Center content horizontally since it's in column mode */
  justify-content: center; /*Vertically center content within the item */
  text-align: left; /*Center text horizontally */
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: break-word;
  white-space: nowrap;
  line-height: 1.0;
  width: 33%;
}

.footer-div-right {
  font-size: 16px;
  position: relative; /* Needed for absolute positioning of the image */
  flex: 1; /* Allows the footer to grow and fill available space */
  display: flex; /* Makes the container a flexbox */
  flex-direction: column; /* Stacks children vertically */
  align-items: flex-end; /* Aligns items to the left initially */
  justify-content: center; /* Centers content vertically within the container */
  text-align: right; /* Aligns text to the right */
  padding-left: 5px;
  padding-right: 5px;
  word-wrap: break-word;
  white-space: nowrap;
  line-height: 1.0;
  width: 33%; /* Adjust as needed */
}

.footer-links {
  display: flex;
  flex-direction: column; /* Stacks the links vertically */
  align-items: flex-end; /* Aligns the links to the right */
  margin-right: 50px; /* Adds space for the image, adjust based on the image size */
}

  .footer-links a {
    margin-bottom: 5px; /* Adds space between the links */
    text-decoration: none; /* Removes underline from links */
  }

.footer-image-left {
  left: 0; /* Position the image to the left edge */
  top: 50%; /* Vertically center the image */
  transform: translateY(-50%); /* Adjust for perfect centering */
}

.footer-image {
  position: absolute;
  right: 0; /* Position the image to the right edge */
  top: 50%; /* Vertically center the image */
  transform: translateY(-50%); /* Adjust for perfect centering */
}

.footer-bird {
  max-height: 100px; /* Adjust the height as needed */
  max-width: 100px; /* Adjust the width as needed */
}

.footer-fire {
  flex: 2;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  word-wrap: break-word;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 33%;
}

/* Default size (for the largest screens) */
.footer-fire-top {
  font-size: 22px;
}

.footer-fire-bottom {
  font-size: 18px;
}

/* For viewports up to 1200px wide */
@media (max-width: 1350px) {
  .footer-fire-top {
    font-size: 16px; /* Smaller font size */
  }

  .footer-fire-bottom {
    font-size: 14px;
  }

  .footer-div-right {
    font-size: 14px;
  }

  .footer-dif-left {
    font-size: 14px;
  }
}

/* For viewports up to 800px wide */
@media (max-width: 1200px) {
  .footer-fire-top {
    font-size: 14px; /* Even smaller font size */
  }

  .footer-fire-bottom {
    font-size: 12px;
  }

  .footer-div-right {
    font-size: 12px;
  }

  .footer-dif-left {
    font-size: 12px;
  }
}

/* For the smallest viewports up to 400px wide */
@media (max-width: 900px) {
  .footer-fire-top {
    font-size: 10px; /* Smallest font size */
  }

  .footer-fire-bottom {
    font-size: 8px;
  }

  .footer-div-right {
    font-size: 10px;
  }

  .footer-dif-left {
    font-size: 10px;
  }
}
/* For the smallest viewports up to 400px wide */
@media (max-width: 650px) {
  .footer-fire-top {
    font-size: 7px; /* Smallest font size */
  }

  .footer-fire-bottom {
    font-size: 7px;
  }
}

.footer-fire-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('/Images/fire2.png');
  background-size: cover;
  background-position: center;
  opacity: 0.65;
  z-index: -1
}

/* Default size (for the largest screens) */
.footer-bird {
  width: auto;
  height: 50px;
}

/* For viewports up to 1200px wide */
@media (max-width: 1200px) {
  .footer-bird {
    width: auto; /* Slightly smaller */
    height: 30px;
  }
}

/* For viewports up to 800px wide */
@media (max-width: 800px) {
  .footer-bird {
    width: auto; /* Even smaller */
    height: 25px;
  }
}

/* For the smallest viewports up to 400px wide */
@media (max-width: 400px) {
  .footer-bird {
    width: 15px; /* Smallest size */
    height: 15px;
  }
}

/* Default styles */
.footer-link::after {
  content: '';
}

/* For viewports up to 800px wide */
@media (max-width: 1600px) {
  .footer-link {
    visibility: hidden;
  }

    .footer-link::after {
      content: attr(data-text-md);
      visibility: visible;
    }
}

/* For viewports up to 400px wide */
@media (max-width: 800px) {
  .footer-link::after {
    content: attr(data-text-sm);
  }
}

.pre-scrollable {
  max-height: 490px;
  overflow-y: scroll;
}

.responsive-image {
  max-width: 100%; /*Ensures the image is not wider than its container */
  max-height: 100%; /*Ensures the image is not taller than its container */
  height: auto; /*Maintains aspect ratio */
  width: auto; /*Maintains aspect ratio */
  object-fit: contain; /*Ensures the image fits without stretching */
}

.responsive-logo {
  max-width: 100%; /* Ensures the image is not wider than its container */
  max-height: 100%; /*  Ensures the image is not taller than its container */
  height: auto; /*  Maintains aspect ratio */
  width: auto; /*Maintains aspect ratio */
  object-fit: contain; /*Ensures the image fits without stretching */
}

.drop-area {
  width: 250px;
  height: 85px;
  border: 2px dashed #69c;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
  margin: auto; /*Center the drop area if it's not within a flex or grid layout */
}

  .drop-area.highlight {
    border-color: #06c;
    background-color: #f0faff;
  }

  .drop-area p {
    margin: 0;
    font-size: 16px;
    color: #666;
  }

Additional styling for visual feedback on drag over
.drop-area.drag-over {
  border-color: #06c;
  background-color: #e8f4ff;
}

p {
  margin-top: 0;
}

.drop-area.drag-over {
  border-color: #06c;
  background-color: #e8f4ff;
}
/*
input[type="file"] {
    display: none;
}
*/

#dynamicModalDialog {
  /* This ID targets a specific modal dialog for custom styling */
  /* No specific styles needed here based on the previous setup */
  /* Add custom styles if needed, otherwise, this can be empty */
}

/* Initial state before the modal is shown */
.modal .modal-dialog {
  position: fixed;
  top: -100%; /* Start from above the viewport */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Adjust for the centering based on its own width */
  margin: 0;
  width: auto;
  max-width: 100%;
  transition: none; /* Animate top and transform properties */
}

/* Final state when the modal is shown */
.modal.show .modal-dialog {
  position: fixed;
  top: 1rem; /* Final position from the top */
  left: 50%;
  transform: translateX(-50%); /* Maintain horizontal centering */
  margin: 0;
  width: auto;
  max-width: 100%;
  transition: none; /* Animate top and transform properties */
}

/* Additional style to ensure the modal content also expands */
.modal-content {
  width: auto; /* Allow the content to grow based on its inner elements */
  min-width: min-content; /* Ensures the content is at least as wide as its content */
}

.modal-body {
  width: auto; /* Ensure the body takes the width of its content */
  max-width: 100vw; /* Ensure it doesn't exceed the viewport width */
  max-height: 80vh; /* Adjust this to control how much of the viewport height the modal body can use */
  /*overflow-y: auto; /* Add vertical scrollbar if content exceeds the max-height */
  box-sizing: border-box; /* Include padding and border in the element's total width */
  /*overflow: visible !important; /* Ensure the modal body allows overflow */
}

  .modal-body .chosen-container .chosen-results {
    max-height: 100px;
  }
/* Style for the <td> to make it a flex container */
.flex-container {
  display: flex; /* This enables flex layout */
  flex-wrap: wrap; /* This allows items to wrap onto multiple lines */
  align-content: flex-start; /* Aligns wrapped lines at the start of the container */
}

/* Style for the <div> elements inside the <td> */
.flex-item {
  display: flex; /* Make .flex-item a flex container */
  flex-direction: column; /* Stack children vertically */
  justify-content: center; /* Vertically center content in the flex container */
  flex: 1 0 200px; /* Flex-grow, flex-shrink, and flex-basis */
  margin: 4px; /* Adds a little space between the divs */
  box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

.card-body .table-fullwidth {
  width: calc(100% - 30px); /* 100% width of the parent minus 30px for the left and right margins */
  margin: 0 15px; /* 0 top and bottom margin, 15px left and right margin */
  table-layout: fixed; /* Optional: Helps with managing column widths */
}

.perm-table-wrapper {
  position: relative;
  max-height: 68vh;
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: auto; /* Enable horizontal scrolling */
}

.permissions-table {
  width: 100%;
  table-layout: fixed; /* Ensure the table uses the widths as defined */
  border-collapse: collapse; /* Ensure borders don't add extra space */
}

  .permissions-table th,
  .permissions-table td {
    padding: 8px; /* Adjust padding as needed */
    box-sizing: border-box; /* Include padding and border in the element's width */
    overflow: hidden; /* Prevent content from overflowing */
    text-overflow: ellipsis; /* Add '...' if content overflows */
  }

.perm-sticky-col {
  position: sticky;
  left: 0;
  z-index: 2; /* Ensure this stays above the table body but below the sticky header */
  background-color: inherit;
}

.perm-sticky-col-header-1, .perm-sticky-col-1 {
  width: 100px;
  left: 0;
  z-index: 3;
}

.perm-sticky-col-header-2, .perm-sticky-col-2 {
  width: 200px;
  left: 100px; /* Adjust according to previous column */
  z-index: 4;
}

.perm-sticky-col-header-3, .perm-sticky-col-3 {
  width: 200px;
  left: 300px; /* Adjust according to previous column */
  z-index: 5;
}

.perm-sticky-col-header-4, .perm-sticky-col-4 {
  width: 150px;
  left: 500px; /* Adjust according to previous column */
  z-index: 6;
}

.perm-sticky-col-header-5, .perm-sticky-col-5 {
  width: 100px;
  left: 650px; /* Adjust according to previous column */
  z-index: 7;
}

.perm-sticky-col-header-sub-1, .perm-sticky-col-sub-1 {
  width: 200px;
  left: 0;
  z-index: 3;
}

.perm-sticky-col-header-sub-2, .perm-sticky-col-sub-2 {
  width: 200px;
  left: 200px; /* Adjust according to previous column */
  z-index: 4;
}

.perm-sticky-col-header {
  position: sticky;
  top: 0;
  z-index: 12; /* Ensure this stays above the table body but below the sticky header */
  background-color: inherit;
}

.perm-sticky-header {
  position: sticky;
  top: 0;
  z-index: 10; /* Higher than sticky columns to ensure it stays on top */
  background-color: inherit;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4); /* Optional: adds a slight shadow for better separation */
}

/* ========================== */
/*   Alert / Backdrop Styles  */
/* ========================== */

.alert-hidden {
  display: none !important;
}

#alert-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9998;
  display: flex;
  justify-content: center;
  align-items: center;
}

#alert-wrapper {
  max-width: 400px;
  width: 90vw;
  /* 🔥 Removed pointer-events: none here if you need clicks inside */
}

.alert-box {
  position: relative;
  font-weight: 500;
  font-size: 1.25rem;
  border-radius: 10px;
  padding: 1.25rem 1.5rem 1.25rem 1.5rem;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
  animation: popIn 0.3s ease-out;
  max-height: 90vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.alert-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  color: inherit;
  padding: 0.25rem;
  z-index: 1; /* ensure it's above content */
}

.alert-content {
  display: flex;
  align-items: flex-start; /* vertical alignment */
  gap: 1rem;
  padding-top: 1.5rem; /* 👈 prevent overlap with close button */
}

.alert-icon {
  font-size: 3.25rem;
  flex-shrink: 0;
}

.alert-message {
  flex-grow: 1;
  font-size: 1.25rem;
}

.alert-close:hover {
  transform: scale(1.1);
}

#alert-container .alert-box {
  pointer-events: auto;
  background-color: #d4edda;
  color: #155724;
  border: 6px solid #000000;
  border-radius: 10px;
  padding: 1.25rem;
  font-weight: 500;
  font-size: 1.25rem;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
  animation: popIn 0.3s ease-out;
  max-height: 90vh;
  overflow: auto;
}

.alert-box .alert {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

@keyframes popIn {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 1) Force the displayed “selected” text (in the closed box) to dark */
.select2-container--default .select2-selection__rendered {
  color: #000 !important;
}

/* 2) Force every option in the dropdown list to dark text */
.select2-container--default .select2-results__option {
  color: #000 !important;
}

/* 3) When an option is highlighted (hover / keyboard-select), keep its text dark */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  color: #000 !important;
}

/* 4) If you’re using a multi-select “tag” mode, make sure tag labels are dark too */
.select2-container--default .select2-selection__choice {
  color: #000 !important;
}

/* 5) And the input field inside a multi-select (where you type new tags/search) */
.select2-container--default .select2-search__field {
  color: #000 !important;
}