html, body{
	height:100%
}
.text-shadowed{
	text-shadow: 2px 2px 10px black;
}

.opaBG{
	background-color:#fff5;
}
.scrollable-content {
    overflow-x: auto;
    overflow-y: visible;
    white-space: nowrap;  /* ensures content doesn't wrap and causes horizontal scroll */
}


.custom-checkbox-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Make space between label and checkbox */
    cursor: pointer;
    padding: 5px 10px;
    background: linear-gradient(180deg, #f6f6f6, #e0e0e0); /* A soft neutral gradient */
    border: 1px solid #cccccc; /* A neutral border */
    border-radius: 5px;
    transition: background 0.2s;
}

.custom-checkbox-container:hover {
    background: linear-gradient(180deg, #e0e0e0, #d4d4d4); 
}

.custom-checkbox-container input[type="checkbox"] {
    display: none;
}

.checkbox-icon {
    font-size: 1.2rem;
    color: #a5a5a5; /* Neutral color for unchecked state */
}

.custom-checkbox-container input[type="checkbox"]:checked + .checkbox-icon {
    color: #333; /* Darker color for checked state */
}

.custom-checkbox-container label.custom-checkbox {
    margin-right: 10px; /* To ensure some spacing between the text and the checkbox */
}