:root {
	--listbox-border-color: var(--default-border-color);
	--listbox-popup-background-color: var(--default-row-background-even);
	--listbox-popup-separator-color: var(--default-border-color);
	--listbox-outline-color: var(--default-outline-color);
	--listbox-popup-box-shadow: var(--default-box-shadow);
	
	--listbox-row-background-color-odd: var(--default-row-background-odd);
	--listbox-row-text-color-odd: var(--default-row-text-odd);
	--listbox-row-background-color-even: var(--default-row-background-even);
	--listbox-row-text-color-even: var(--default-row-text-even);
	
	--listbox-row-background-color-hover: var(--default-hover-background-color);
	--listbox-row-text-color-hover: var(--default-hover-text-color);
	--listbox-row-background-color-active: var(--default-row-background-color-active);
	--listbox-row-text-color-active: var(--default-row-text-color-active);
	
	--listbox-card-background-color: var(--default-row-background-even);
	--listbox-card-box-shadow: var(--subtle-box-shadow);
	--listbox-card-border-radius: var(--default-border-radius);
	
	--listbox-list-default-icon: var(--default-list-icon);
	--listbox-list-dropdown-icon: var(--default-dropdown-icon);
}

.selectbox-selected {
	border: 1px solid var(--listbox-border-color, #EFEFEF);
	padding: 1px 36px 1px 5px;
	background-size: 16px 10px;
	background-repeat: no-repeat;
	background-position: CALC(100% - 4px) center;
	background-image: var(--listbox-list-dropdown-icon);
}

.selectbox-selected:focus {
	outline: 2px solid var(--listbox-outline-color, #006EB1);
	outline-style: solid;
	outline-offset: -2px;
}

.selectbox-popup {
	position: fixed;
	width: auto;
	z-index: 13;
	box-shadow: var(--listbox-popup-box-shadow, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px);
	background-color: var(--listbox-popup-background-color, #FFFFFF);
	padding: 5px;
	max-height: 70vh;
	overflow: auto;
}

ul.list-unstyled {
	padding-left: 0;
    list-style: none;
}

ul.list-with-icons.list-select-item {
	margin-bottom: 0;
}

.selectbox-selected > div {
	background-size: 20px 20px;
	background-repeat: no-repeat;
	background-position: 2px center;
	padding-left: 28px;
}

.selectbox-popmenu {
	display: none;
}

.list-popmenu-separator {
	border-bottom: 1px solid var(--listbox-popup-separator-color, #EFEFEF) !important;
}

.selectbox-popup-menu {
}

ul.list, ul.list-with-icons {
	list-style: none;
	padding: 0;
	border: 1px solid var(--listbox-border-color, #EFEFEF);
	overflow-y: auto;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0;
	user-select: none;
}

ul.list li:focus, ul.list-with-icons li:focus {
	outline: 2px solid var(--listbox-outline-color, #006EB1);
	outline-style: solid;
	outline-offset: -2px;
}

ul.list-without-border {
	border: none;
}

ul.list li, ul.list-with-icons li {
	padding: 3px 0px 3px 0px;
}

ul.list li, ul.list-with-icons li {
	display: block;
	color: var(--listbox-row-text-color-odd, #000000);
	border-bottom: 1px solid var(--listbox-border-color, #EFEFEF);
	width: 100%;
}

ul.list li:focus, ul.list-with-icons li:focus {
	outline-style: dotted;
	outline-width: 1px;
}

ul.list-without-border li:first-child {
	border-top: 1px solid var(--listbox-border-color, #EFEFEF);
}

ul.list-with-wrap {
	display: flex;
	flex-wrap: wrap;
	word-wrap: break-word;
	white-space:normal;
	align-content: flex-start;
}

ul.list-with-icons li {
	padding: 3px 0px 3px 36px;
	background-image: var(--listbox-list-default-icon);
	background-repeat: no-repeat;
	background-size: 16px 16px;
	background-position: 5px center;
	background-color: var(--listbox-row-background-color-odd, rgba(255, 255, 255, 1));
}

ul.list-alt-row li:nth-child(odd) {
    background-color: var(--listbox-row-background-color-odd, rgba(255, 255, 255, 1));
	color: var(--listbox-row-text-color-odd, #000000);
}

ul.list-alt-row li:nth-child(even) {
    background-color: var(--listbox-row-background-color-even, rgba(250, 250, 250, 1));
	color: var(--listbox-row-text-color-even, #000000);
}

ul.list-selectable li:hover {
	cursor: pointer;
	background-color: var(--listbox-row-background-color-hover, #EAEAFF);
	color: var(--listbox-row-text-color-hover, #000000);
}

ul.list-selectable li.active {
	background-color: var(--listbox-row-background-color-active, #B1E1FF);
	color: var(--listbox-row-text-color-active, #000000);
	outline: none;
}

ul.list-as-cards {
	align-items: stretch;
	align-content: flex-start;
	justify-content: space-around;
	gap: 15px;
	padding: 1px; /* will make box-shadow visible on cards */
}

ul.list-as-cards > li {
	display: inline-block;
	flex: 1 0 310px;
	padding: 5px 10px;
	position: relative;
	min-height: 6rem;
	overflow: hidden;
	box-shadow: var(--listbox-card-box-shadow, 0 0 1px rgba(34, 25, 25, 0.4));
	border-radius: var(--listbox-card-border-radius, 2px);
	background-color: var(--listbox-card-background-color, #EAEAEA);
	margin: 0;
}

ul.list-as-cards > li.message {
	min-height: auto;
}

ul.list-horizontal {
	display: flex;
	flex-wrap: nowrap;
	list-style: none;
	flex-direction: row;
	gap: 2px;
	padding: 1px; /* will make box-shadow visible on cards */
	margin: 0;
	align-items: center;
}

ul.list-horizontal > li {
	margin: 0;
	padding: 0 8px;
	flex: 0;
	border: none;
}

ul.list-horizontal > li:first-child {
	border: none;
}

.float-right {
	float: right;
	margin-right: 4px;
}

ul.list-with-wrap li {
	background-position: 5px center;
}

ul.list-with-icons.list-checkbox-select-item li {
	background-image: url(../../images/icons/light/64/check-box-outline-blank.png);
}

ul.list-with-icons.list-checkbox-select-item li.checked {
	background-image: url(../../images/icons/light/64/check-box.png);
}


ul.list-with-icons.list-with-wrap.list-without-border li a {
    text-decoration: none;
    padding: 0px 5px;
    display: block;
}

ul.list-with-icons.list-with-wrap.list-without-border li a:hover {
    background-color: var(--default-hover-background-color, rgba(180,150,150,0.2));
}


.input-group {
	margin: 0px 0px 0px 0px;
	padding: 0 0 10px 0;
}

.input-group p:last-child {
	margin-bottom: 0;
}

.input-group label {
	font-family: 'Bree Serif',Serif;
	background-color: transparent;
	padding: 0 0 0 30px;
	display: block;
	background-image: none;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-position: left center;
}

.input-group input, .input-group textarea {
	width: 100%;
	height: 1.6rem;
	margin-bottom: 8px;
}

.input-group *:last-child {
	margin-bottom: 0;
}