.widget {
	margin: 6px;
	border-radius: 6px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.widgetHeader {
	background-color: #c5c2b6;
	color: #222222;
	padding: 10px;
	display:flex;
	justify-content: space-between;
	border: 1px solid #600b46;
	border-radius: 6px;
}

.widgetHeader:hover {
	
	background-color: #e2e0da;
	
}

.widgetHeader h2 {
	margin: 0;
	font-size: 16pt;
	color: #600b46;
}

.expanded {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom: none;	
}


.widgetToggle {
	color: #444444;
	font-stretch: ultra-expanded;
	font-weight: 100;
	margin-right:20px;
	transition: transform 0.2s ease;
	transform: rotate(180deg); /* ▼ */
}

.widgetToggle:hover {
	cursor: pointer;
}

.collapsed {
	transform: rotate(0deg); /* ▼ */
}
	

.widgetBody {
	border: 1px solid #600b46;
	border-radius: 0px 0px 3px 3px;
	
	background-color: #f9f9f9;
}

.listWidget {
	max-width: 300px;
	min-width: 150px;
	display: grid;
	grid-template-rows: max-content;
	
}

.listWidgetBody {
	padding: 10px;
}

.listSelect {
	color: blue;
}

.listSelect span {
	text-decoration: underline;
}

.listSelect span:hover {
	cursor: pointer;
}

.option {
	margin: 10px 5px;
}

.option label {
	padding: 0px 3px;
	color: #333333;
}

.option select {
	margin-left: 3px;
	max-width: 400px;
	
	padding: 8px 10px;
        border-radius: 6px;
        border: 1px solid #ccc;
        font-size: 14px;
        background-color: #f9f9f9;
}

.option select:focus {
	outline: none;
	border-color: #690b45;
	box-shadow: 0 0 0 2px rgba(105,11,69,0.15);
	background-color: #ffffff;
}

.option input[type=text] {
	margin-left: 3px;
	width: 90%;
	max-width: 200px;
	
	padding: 8px 10px;
        border-radius: 6px;
        border: 1px solid #ccc;
        font-size: 14px;
        background-color: #f9f9f9;
}

.option input[type=text]:focus {
	outline: none;
	border-color: #690b45;
	box-shadow: 0 0 0 2px rgba(105,11,69,0.15);
	background-color: #ffffff;
}

.option input[type=number] {
	margin-left: 3px;
	width: 90%;
	max-width: 200px;
	
	padding: 8px 10px;
        border-radius: 6px;
        border: 1px solid #ccc;
        font-size: 14px;
        background-color: #f9f9f9;
}

.option input[type=number]:focus {
	outline: none;
	border-color: #690b45;
	box-shadow: 0 0 0 2px rgba(105,11,69,0.15);
	background-color: #ffffff;
}

.subOption {
	max-width: 500px;
	font-size: 11pt;
	padding-left: 20px;
}

.dropdown {
	border-radius: 10px;
	min-width: 450px;
	scrollbar-width: none;
	border: 1px solid #ccc;
	display: none;
	position: absolute;
	background: white;
	max-height: 200px;
	overflow-y: auto;
}

.dropdown li:hover {
	cursor: pointer;
	background: #eee;
}

.submit {
	padding: 8px 20px;
	font-size: 14pt;
}

.submitWrapper {
	text-align: right;
    margin-right: 10px;
}






/* Base checkbox */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: all 0.15s ease;
}

/* Checkmark */
input[type="checkbox"]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transition: transform 0.12s ease-in-out;
    background-color: white;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 18%, 80% 0, 43% 62%);
}

/* Checked state */
input[type="checkbox"]:checked {
    background-color: #690b45;
    border-color: #690b45;
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

/* Focus state (matches your text input) */
input[type="checkbox"]:focus {
    outline: none;
    border-color: #690b45;
    box-shadow: 0 0 0 2px rgba(105,11,69,0.15);
}