/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Style for the container holding the top buttons */
#topButtons {
  display: flex;
  justify-content: flex-start;
  padding: 5px;
  background-color: whitesmoke;
  z-index: 1;
  position: sticky;
  gap: 4px;
  top: 0;
  box-shadow: 0 2px 5px lightgrey, inset 0 -1px silver;
}

#toolbar {
  display: flex;
  justify-content: center;
  padding: 5px;
  gap: 4px;
  background-color: white;
}

/* Style for the container holding the bottom Copy button */
#bottomButtons {
  display: flex;
  justify-content: center;
  padding: 5px;
  background-color: white;
  z-index: 1;
  position: sticky;
  width: 100%;
  bottom: 0;
  box-shadow: 0 -2px 5px lightgrey, inset 0 1px silver;
}

/* Buttons and text input for top section */
#textInput,
button {
  padding: 5px;
  /* margin-right: 5px; */
}

#textInput {
  flex-grow: 1;
}

button {
  cursor: pointer;
  border: none;
  background-color: dodgerblue;
  color: white;
  border-radius: 4px;
}

#selectAllButton, #deselectAllButton {
  width: 50%;
  background-color: dodgerblue;
}

/* Style for the Copy button */
#copyButton {
  width: 100%;
  padding: 5px;
  background-color: forestgreen;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

/* Style for checkboxes */
.checkbox-list {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 5px;
  margin-top: 0px;
  border: 1px solid gainsboro;
  /* Border around the checkbox container */
  border-radius: 4px;
  /* Rounded corners for the checkbox container */
}

/* Add padding around each checkbox and its label */
.checkbox-list div {
  border-top: 1px solid gainsboro;
  display: flex;
  align-items: center;
  /* Align checkbox and label horizontally */
  position: relative;
  /* To position delete button at the far right */
}

/* Make label take up all available space */
.checkbox-list label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  /* Space between checkbox and text */
  flex-grow: 1;
  /* Makes label fill the available space */
}

/* Add padding for the delete button */
.delete-button {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  /* Makes it a circle */
  background-color: lightcoral;
  /* Circle color */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 5px;
  min-width: 14px;
  max-width: 14px;
  min-height: 14px;
  max-height: 14px;
}

.delete-button::before,
.delete-button::after {
  content: '';
  position: absolute;
  width: 60%;
  /* Width of the lines relative to the circle size */
  height: 1px;
  /* Thickness of the lines */
  background-color: white;
  /* Color of the "X" */
}

.delete-button::before {
  transform: rotate(45deg);
  /* First diagonal line */
}

.delete-button::after {
  transform: rotate(-45deg);
  /* Second diagonal line */
}