.lottery-container {
display: flex;
flex-direction: column;
align-items: center;
background-color: #ffffff;
border-radius: 10px;
padding: 20px 20px 30px 20px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
#lottery-form label {
display: inline-block;
margin: 8px;
cursor: pointer;
}
#lottery-form label span {
margin-left: 5px;
}
#generate, #copy-button {
padding: 10px 20px;
background-color: #607D8B;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
}
#generate:hover, #copy-button:hover {
background-color: #455A64;
}
.lottery-results {
text-align: left;
width: 100%;
margin-top: 30px;
}
.exclude-number {
display: none;
}
.exclude-number + span:before {
content: " ";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
background-color: #FFFFFF;
border: 2px solid #000000;
cursor: pointer;
}
.exclude-number:checked + span:before {
background-color: #000000;
border: 2px solid #000000; 
}
.exclude-number-exclude + span:before {
border: 2px solid #FF0000;
}
.exclude-number-exclude:checked + span:before {
background-color: #FF0000;  
border: 2px solid #FF0000;
}
.filter-number {
text-align: center;
font-weight: 600;
}
#include-label, #exclude-label {
font-size: 20px;
color: #333;
margin-bottom: 10px;
padding: 5px 10px;
cursor: pointer;
background-color: #f3f3f3;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
}
#include-label:hover, #exclude-label:hover {
background-color: #e0e0e0;
}
#include-label {
color: #008000;
}
#exclude-label {
color: #800000;
}
#lottery-form {
width: 100%;
text-align: center;
}
#reset {
margin-top: 10px;
padding: 10px 20px;
background-color: #f44336;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
}
#reset:hover {
background-color: #d32f2f;
}