#nickname::placeholder,
#name::placeholder {
  color: #ccc; /* Replace with your desired lighter color */
}
#drivers div,
#selections div {
  border: 1px solid #3498db;
  margin: 5px;
  margin-bottom: 2px;
  padding: 3px;
  cursor: pointer;
  background-color: #f2f2f2;
  border-radius: 8px;
  transition: all 0.3s ease;
}

#selections div {
  font-size: 90%
}

#drivers div {
  margin-bottom: 3px;
}

h2 {
  font-size: 1.5rem;
}

#selections,
#drivers {
  min-height: 300px;
  border: 2px dashed #3498db;
  padding: 15px; /* Increased padding */
  border-radius: 15px;
  background-color: #ecf0f1;
}

.form-group {
  margin-top: 20px;
}

#selections-counter {
  display: inline-block;
  margin-left: 10px;
  font-weight: bold;
}

.ui-sortable-placeholder {
  background: #d5d5d5; /* Added background color to show drop area */
  border: 2px dashed #3498db; /* Added border to show drop area */
  visibility: visible !important;
}

input:valid {
  border: 2px solid green;
} /* Highlight drop zones when dragging over them */
#selections.dragover,
#drivers.dragover {
  border: 3px dashed green;
  background-color: #d9f2d9;
}

/* Style for the dragging element */
div.dragging {
  opacity: 0.5;
}
#rankings {
 
  overflow: auto;
}
#rankings div {
  margin-left: 0px;
  padding-left: 0px;
  border-radius: 4px;
  border: 1px solid silver;
  margin-bottom: 4px;
  padding: 2px;
  font-size: 90%;
  background-color: rgb(242, 242, 247);
  list-style: none;
}
/* ... existing styles ... */

/* Additional style to ensure columns have equal height */
.column-equal-height {
  display: flex;
  flex-direction: column;
}

/* Make sure the content of each column expands to fill the available space */
.column-equal-height > div {
  flex-grow: 1;
  max-height: 780px;
  overflow: auto;
}

#selections {
  border: 1px solid #ccc;
  padding: 10px;
}

/* Style for the placeholder line */
.placeholder {
  border: 1px dashed #333;
  margin: 10px;
  height: 1.5em;
}

.sortable-item {
  margin: 10px;
  padding: 10px;
  border: 1px solid #000;
  cursor: move;
  position: relative; /* Needed for absolute positioning of the close icon */
}

.close-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 15px;
  color: #333;
  width: 20px; /* Set a width for the circle */
  height: 20px; /* Set a height for the circle */
  line-height: 19px; /* Align the text vertically */
  text-align: center; /* Align the text horizontally */
  border-radius: 50%; /* Make the background shape circular */
  background-color: #fff; /* Set background color for the circle */
  border: 1px solid #333; /* Optional: Add border to the circle */
}

.close-icon:hover {
  background-color: red; /* Change background color to red on hover */
  color: white; /* Change text color to white on hover for better visibility */
}

#drivers .sortable-item .close-icon {
  display: none;
}

  /* Add circle outline */
  .circle-button {
    border: 2px solid #000; /* Change the border color as needed */
    border-radius: 50%;
    width: 32px; /* Adjust the width and height as needed */
    height: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: border-color 0.3s; /* Add hover effect transition */
  }

  /* Add hover effect */
  .circle-button:hover {
    border-color: #ff0000; /* Change the border color on hover */
    cursor: pointer; /* Add a pointer cursor on hover */
  }

  /* for the modal */
  .list-group-item {
    font-size: 90%;
    padding: 2px;
  }

  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
  }