/* The container */
.checkbox-container {
    display: block;
    position: relative;
    padding-left: 45px; /* Ändern Sie diesen Wert, um Platz für eine größere Checkbox zu machen */
    cursor: pointer;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkbox-container .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 30px; /* Vergrößern der Checkbox */
    width: 30px;  /* Vergrößern der Checkbox */
    background-color: #eee;
    border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
    background-color: #e31bd4;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkbox-container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
    left: 11px;  /* Anpassen der Position des Checkmarks */
    top: 4px;    /* Anpassen der Position des Checkmarks */
    width: 10px; /* Vergrößern des Checkmarks */
    height: 18px;/* Vergrößern des Checkmarks */
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.checkbox-info-text {
    display: none;
}

.top-right {
    position: absolute;
    top: 5px;
    right: 5px;
}