/* styles.css */
.cornerstone-color-picker.container {
  display: flex; /* Create a two-column layout */
  width: 1000px; /* Fixed width for the container */
  margin: 0 auto; /* Center the container */
  height: 100vh; /* Full viewport height */
}

.cornerstone-color-picker .left-column {
  width: 570px; /* Fixed width for the left column */
  overflow-y: auto; /* Enable scrolling for the left column */
  padding: 20px;
  background: #ffffff;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
}

.cornerstone-color-picker .right-column {
  flex: 1; /* Take up remaining space */
  padding: 20px;
  background: #f4f4f4;
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.1);
  position: sticky; /* Keep the right column fixed */
  top: 0; /* Stick to the top of the viewport */
}

.cornerstone-color-picker h1, 
.cornerstone-color-picker h2 {
  text-align: center;
  color: #333333;
}

.cornerstone-color-picker h1{
  font-size:23px;
}

.cornerstone-color-picker .item, 
.cornerstone-color-picker .sub-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.cornerstone-color-picker .item:hover, 
.cornerstone-color-picker .sub-item:hover {
  background-color: #f0f0f0; /* Light gray highlight on hover */
}

.cornerstone-color-picker .sub-item {
  margin-left: 20px; /* Indentation for sub-items */
  margin-bottom: 10px; /* Space between sub-items and parent items */
}

.cornerstone-color-picker label {
  flex: 1;
  margin-left: 10px;
  color: #333333;
}

.cornerstone-color-picker input[type="color"] {
  margin-left: 10px;
  border: none;
  cursor: pointer;
  width:60px;
  margin-bottom:0;
}

.cornerstone-color-picker input[type="checkbox"] {
  cursor: pointer;
}

.cornerstone-color-picker textarea {
  width: 100%; /* Full width of the right column */
  height: 200px; /* Set a fixed height for the textarea */
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none; /* Disable resizing */
}

.cornerstone-color-picker button {
  margin-top: 10px; /* Space above the button */
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  background-color: #007bff; /* Button color */
  color: white;
  border: none;
  border-radius: 4px;
}

.cornerstone-color-picker button:hover {
  background-color: #0056b3; /* Darker shade on hover */
}

.cornerstone-color-picker .copy-message {
  margin-top: 10px; /* Space above the message */
  color: green; /* Message color */
  font-size: 14px; /* Message font size */
}