html,
body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  padding-top: 28px; /* Adjust this value to avoid content being hidden behind the fixed header */

}

#content {
  flex: 1;
  /* display: flex;
  flex-direction: column; */
}

/* Default styling for larger screens */
.navbar-brand img {
  height: 60px;
  width: auto; /* Maintain aspect ratio */
}

/* Adjust image size for smaller screens */
@media (max-width: 576px) {
  .navbar-brand img {
      height: 40px; /* Reduce height for smaller screens */
      width: auto; /* Maintain aspect ratio */
  }
  body {
    padding-top: 6px; /* Adjust this value to avoid content being hidden behind the fixed header */
  
  }
  /* Styles for buttons */

}


footer {
  background-color: #f8f9fa;
  padding: 1rem 0;
  width: 100%;
  height: 50px; /* Fixed height for footer */
  margin-top: auto; /* Push the footer to the bottom */
}

.form-signin .body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center; /* Center horizontally */
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.btn-circle {
  width: 60px;
  height: 60px;
  padding: 6px 0;
  border-radius: 50%;
  text-align: center;
  font-size: 24px;
  line-height: 1.42857;
  font-weight: bold;
  color: white !important;
}


.card-container {
  max-width: 300px;
  margin: 0 auto; /* Center horizontally */
  position: relative;
  height: 250px; /* Adjust height as needed */
}
.card {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.5s, opacity 0.5s;
  z-index: 0;
  display: none; /* Initially hide all cards */
  overflow: hidden;
}

.swipe-card {
  background-color: #525252; /* Change to your desired background color */
  color: #ffffff; /* Change to your desired font color */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.card.active {
  z-index: 1;
  display: block; /* Show the active card */
}
.card-text {
  max-height: 100px; /* Set a max height for the text */
  overflow: hidden;
  text-overflow: ellipsis;
  transition: max-height 0.5s;
}
.card-text.expanded {
  max-height: none;
}
.extend-button {
  display: none;
  margin-top: 10px;
}
.card-text.overflowing + .extend-button {
  display: block;
}

/* Gender-specific button colors */
.btn-gender-male {
  background-color: #7BE1F5;
  border-color: #7BE1F5;
  color: white;
}

.btn-gender-female {
  background-color: #F2A3B9;
  border-color: #F2A3B9;
  color: white;
}

/* Styles for buttons */
.btn-square {
  width: 70px; /* Adjust size as needed */
  height: 70px; /* Adjust size as needed */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px; /* Adjust icon size */
  border-radius: 8px; /* Make buttons square */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
}

.btn-square.selected {
  background-color: #7BE1F5;
  color: white;
}

.btn-square:not(.selected) {
  background-color: white;
  color: #7BE1F5;
}

.btn-gender-female.selected {
  background-color: #F2A3B9;
  color: white;
}

.btn-gender-female:not(.selected) {
  background-color: white;
  color: #F2A3B9;
}

.btn-gender-male:not(.selected):hover {
  background-color: #7BE1F5;
  color: white;
}

.btn-gender-female:not(.selected):hover {
  background-color: #F2A3B9;
  color: white;
}

/* Gender-specific card colors */
.male-card {
  background-color: #7BE1F5;
  color: #000; /* Adjust font color as needed */
}

.female-card {
  background-color: #F2A3B9;
  color: #000; /* Adjust font color as needed */
}

/* Styles for 'or' text */
.or-text {
  margin: 0 10px;
  font-size: 1.2rem;
  vertical-align: middle;
}

/* Button colors */
.btn-revise {
  background-color: #fff; /* Yellow */
  border-color: #7b8ff5;
  color: #7b8ff5 !important; /* Ensure text color is black */
  font-weight: bold;
  
}
.btn-revise:hover {
  background-color: #7b8ff5; /* Darker Yellow */
  border-color: #7b8ff5;
  color: white !important;
}

.btn-dislike {
  background-color: #F55C7A; /* Red */
  border-color: #F55C7A;
  color: white;
}
.btn-dislike:hover {
  background-color: #E55464; /* Darker Red */
  border-color: #E55464;
}

.btn-like {
  background-color: #A3F57B; /* Green */
  border-color: #A3F57B;
  color: white;
}
.btn-like:focus,
.btn-like:active {
    background-color: #424341; /* Keep background color the same */
    border-color: #79E582; /* Change border color */
    color: white;
          
        }
.btn-like:hover {
  background-color: #79E582; /* Darker Green */
  border-color: #79E582;
}

.btn-like.selected{
  background-color: #424341; /* Green */
  border-color: #af16a8;
  color: white;
}

.btn-favorite {
  background-color: #F5E17B;
  border-color: #F5E17B;
  color: white;
}
.btn-favorite:focus,
.btn-favorite:active {
    background-color: #F5E17B; /* Keep background color the same */
    border-color: #F5E17B; /* Change border color */
    color: white;
}
.btn-favorite:hover {
  background-color: #F5E17B; /* Darker Green */
  border-color: #F5E17B;
}

.btn-favorite.selected{
  background-color: #F5E17B; /* Green */
  border-color: #F5E17B;
  color: white;
}

.btn-dislike.selected {
  background-color: #F55C7A; /* Red */
  border-color: #66ff00;
  color: white;
}

.share-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: transparent;
  border: none;
  color: white;
  font-size: 1.5rem;
  padding: 0;
}


.name-list .list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.name-list .list-group-item .name-text {
  flex: 1;
}
.name-list .btn-circle-small {
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 2px 0;
  border-radius: 50%;
  text-align: center;
  font-size: 15px;
  line-height: 1.42857;
  font-weight: bold;
  color: white !important;
}


#backToTopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  bottom: 40px; /* 40px from the bottom */
  right: 40px; /* 40px from the right */
  z-index: 99; /* Make sure it does not overlap */
  background-color: #343a40; /* Blue background */
  border-color: #343a40;
  color: white; /* White text */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 0px; /* Some padding */
  border-radius: 50%; /* Rounded border */
  font-size: 30px; /* Increase font size */
}

#backToTopBtn:hover {
  background-color: #23272b; /* Add a dark-grey background on hover */
  border-color: #1d2124;
}

.install-overlay {
  display: none; /* Ensure the overlay is initially hidden */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999; /* Ensure the overlay is above other elements */
  justify-content: center;
  align-items: center;
}

.install-banner {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 90%; /* Increase the width of the banner */
  max-width: 600px; /* Ensure the banner doesn't get too wide on larger screens */
  height: 70%; /* Adjust height as needed */
  max-height: 250px; /* Ensure the banner doesn't get too tall on larger screens */
}


.install-banner p {
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}

.install-banner h4 {
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}

.install-banner button {
    background-color: #0080ff; /* Green */
    border: none;
    color: white;
    padding: 10px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 4px;
}

#dismissButton {
    background-color: #827e7e; /* Red */
    margin-left: 10px;
}

/* Container for filter buttons */
.filter-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

/* Default style for buttons within filter-buttons */
.filter-buttons .btn-default {
  background-color: #d3d3d3; /* Light background */
  color: #ffffff; /* Dark text */
  border: 1px solid #d3d3d3; /* Light gray border */
  border-radius: 3px; /* Rounded corners */
  padding: 5px 15px; /* Smaller padding for button size */
  font-size: 14px; /* Font size */
  cursor: pointer; /* Pointer cursor on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
  transition: background-color 0.3s, color 0.3s, border 0.3s; /* Smooth transition */
}
/* bootstrap dark 343a40 */

/* Style for selected buttons within filter-buttons */
.filter-buttons .btn-selected {
  background-color: #6c757d; /* Light gray background */
  color: #fff; /* White text */
  border: 1px solid #6c757d; /* Light gray border */
  padding: 5px 15px; /* Smaller padding for button size */
  font-size: 14px; /* Font size */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow */
  transition: background-color 0.3s, color 0.3s, border 0.3s; /* Smooth transition */
 
}

/* Additional styling for origin buttons within filter-buttons */
.filter-buttons .btn-origin {
  margin: 0 5px; /* Margin between buttons */
  padding: 5px 15px; /* Smaller padding for consistent size */
}

/* Styling for the "More" button within filter-buttons */
.filter-buttons .btn-more-filters {
  padding: 5px 15px; /* Smaller padding for size */
  background-color: #343a40; /* Gray background */
  color: #fff; /* White text */
  border: 1px solid #343a40; /* Light gray border */
  border-radius: 5px; /* Rounded corners */
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-buttons .btn-more-filters i {
  margin-left: 5px; /* Space between text and icon */
}

/* Hover effect for all buttons within filter-buttons */
.filter-buttons .btn-origin:hover,
.filter-buttons .btn-more-filters:hover {
  background-color: #6c757d; /* Darker blue on hover */
  color: #fff; /* White text on hover */
  border-color: #6c757d; /* Border color changes on hover */
}

/* Responsive behavior for buttons within filter-buttons */
@media (max-width: 768px) {
  .filter-buttons .btn-origin,
  .filter-buttons .btn-more-filters {
      padding: 5px 10px; /* Smaller padding on mobile */
      font-size: 12px; /* Smaller font size on mobile */
  }

  .filter-buttons {
      gap: 5px; /* Smaller gap between buttons on mobile */
  }
}
.modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.modal-header {
  flex-shrink: 0; /* Prevents the header from shrinking */
}

.modal-footer {
  flex-shrink: 0; /* Prevents the footer from shrinking */
}

.modal-body {
  overflow-y: auto; /* Enables scrolling inside the body */
  flex-grow: 1; /* Allows the body to take up remaining space */
  padding: 15px; /* Adjust padding as needed */
  max-height: 75vh; /* Optional: Limits height to avoid large modals */
}

.modal-body .form-check {
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Vertically align label and checkbox */
  justify-content: space-between; /* Space between label and checkbox */
  padding: 3px 0; /* Padding around each item */
}

.modal-body .form-check-label.origin-label {
  font-size: 1.1em; /* Make the origin name larger */
  flex-grow: 1; /* Allow the label to take up available space */
  margin-right: 15px; /* Space between label and checkbox */
  white-space: nowrap; /* Prevent label text from wrapping */
  overflow: hidden; /* Hide overflow text */
  text-overflow: ellipsis; /* Add ellipsis if text overflows */
}

.modal-body .form-check-input.origin-checkbox {
  transform: scale(1.3); /* Make the checkbox slightly larger */
  margin-left: auto; /* Push the checkbox to the right */
  margin-right: 10px; /* Move the checkbox slightly to the left */
  position: relative; /* Ensure the checkbox is positioned correctly */
}

/* Style for the overall "Select All Origins" checkbox */
.modal-body .select-all-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.modal-body .select-all-container label {
  font-size: 1.2em; /* Make the label slightly larger for better readability */
  margin-right: 15px; /* Space between label and checkbox */
}

.modal-body .select-all-container input[type="checkbox"] {
  transform: scale(1.3); /* Make the checkbox slightly larger */
  margin-left: auto; /* Push the checkbox to the right */
  margin-right: 10px; /* Move the checkbox slightly to the left */
}

/* Style for group-specific "Select All" checkboxes */
.modal-body .group-section .select-all-group-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 10px;
}

.modal-body .select-all-group-container label {
  font-size: 1.2em; /* Make the label slightly larger */
  margin-right: 10px; /* Space between label and checkbox */
}

.modal-body .select-all-group-container input[type="checkbox"] {
  transform: scale(1.3); /* Make the checkbox slightly larger */
  margin-right: 5px; /* Optional: fine-tune positioning */
}