:root {
	--bbview-share-blue-color: #0c79bf;
	--bbview-broadbit-red-color: #8b0000;
	--bbview-broadbit-red-hover-color: #ab2020;
	--bbview-disabled-background-color: #eee;
	--bbview-disabled-color: #888;
	--bbview-separator-color: #ddd;
	--bbview-highlight-background-color: #eee;
	--bbview-background-color: #fff;
	--bbview-text-color: #333;
	--bbview-button-color: var(--bbview-share-blue-color);
	--bbview-button-background-color: #fff;
	--bbview-primary-button-background-color: var(--bbview-share-blue-color);
	--bbview-primary-button-color: #fff;
	--bbview-link-color: var(--bbview-share-blue-color);
	--bbview-selected-background-color: var(--bbview-share-blue-color);
	--bbview-selected-color: #fff;
	--bbview-notification-background-color: #888;
	--bbview-notification-color: #ccc;
	--bbview-notification-error-background-color: var(--bbview-broadbit-red-hover-color);
	--bbview-notification-error-color: #fff;
	--bbview-font: Open Sans, Arial, sans-serif;
	--bbview-font-size: 0.95rem;
	--bbview-icon-font: "Material Icons";
}

@font-face {
	font-family: "Material Icons";
	font-style: normal;
	font-weight: 400;
	src:
        local("Material Icons"),
        local("MaterialIcons-Regular"),
        url(../../fonts/MaterialIcons-Regular.woff) format("woff");
}

.bbview {
	height: 100%;
	font-family: var(--bbview-font);
	font-size: var(--bbview-font-size);
	background-color: var(--bbview-background-color);
	color: var(--bbview-text-color);
}

.bbview div:has(form) {
	position: relative;
}

.bbview form {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: start;
}

.bbview form fieldset {
	width: auto;
	height: auto;
	border: none 0px;
	margin: 0px;
	padding: 0px;
}

.bbview a,
.bbview a:visited {
	text-decoration: none;
	color: var(--bbview-link-color);
}

.bbview a:hover {
	text-decoration: underline;
	filter: brightness(1.2);
}

.bbview a[disabled] {
	cursor: default;
	color: var(--bbview-disabled-color);
}

.bbview input,
.bbview select,
.bbview textarea {
	min-width: 20px;
	width: auto;
	padding: 6px 6px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: var(--bbview-font);
}

.bbview input:disabled,
.bbview select:disabled,
.bbview select[readonly],
.bbview textarea:disabled {
	color: var(--bbview-disabled-color);
	background-color: var(--bbview-disabled-background-color);
	pointer-events: none;
}

.bbview input {
	padding: 7px 6px;
}

.bbview select {
	background-color: white;
}

.bbview input[type="radio"] {
	width: fit-content;
}

.bbview h1 {
	font-weight: normal;
}

.bbview input[readonly] {
	background-color: var(--bbview-disabled-background-color);
	color: var(--bbview-disabled-color);
	pointer-events: none;
}

.bbview input[type="number"] {
	text-align: right;
	padding-right: 0px;
}

.bbview input[type="date"] {
	font-family: var(--bbview-font);
}

div.bbview-inputfield {
	display: grid;
	grid-template-columns: 0fr 1fr 0fr;
	grid-template-areas:
		"bbview-inputfield-label bbview-inputfield-label bbview-inputfield-label"
		"bbview-inputfield-prefix bbview-inputfield bbview-inputfield-suffix"
		"bbview-inputfield-message bbview-inputfield-message bbview-inputfield-message";
	padding: 0px 0px 10px 0px;
	align-items: center;
}

div.bbview-inputfield > input,
div.bbview-inputfield > select,
div.bbview-inputfield > textarea,
div.bbview-inputfield > div.bbview-inputfield-input,
div.bbview-inputfield > div.bbview-inputfield-text {
	grid-area: bbview-inputfield;
}

div.bbview-inputfield > div.bbview-label:first-child,
div.bbview-inputfield > .bbview-inputfield-label:first-child {
	grid-area: bbview-inputfield-label;
	margin-bottom: 4px;
}

div.bbview-inputfield > .bbview-inputfield-prefix {
	grid-area: bbview-inputfield-prefix;
	margin-right: 4px;
}

div.bbview-inputfield > .bbview-inputfield-suffix {
	width: min-content;
	grid-area: bbview-inputfield-suffix;
	margin-left: 4px;
}

div.bbview-inputfield > div.bbview-inputfield-message {
	grid-area: bbview-inputfield-message;
	margin-top: 4px;
}

div.bbview-inputfield:has(> *:required),
.bbview-required {
	position: relative;
}

div.bbview-inputfield:has(> *:required)
	> div.bbview-label:not(.bbview-inputfield-suffix):not(.bbview-inputfield-message):after,
div.bbview-inputfield:has(> *:required) > .bbview-inputfield-label:after,
.bbview-required:after {
	position: absolute;
	margin-left: 4px;
	content: " *";
	color: red;
}

div.bbview-inputfield > select:user-invalid {
	border-color: red;
}

div.bbview-inputfield > select:user-valid {
	border-color: #ccc;
}

div.bbview-inputfield > input[type="checkbox"] {
	justify-self: start;
}

div.bbview-radiogroup {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

div.bbview-radiobutton {
	display: flex;
	gap: 4px;
}

div.bbview-label {
	font-size: 0.9em;
	color: #606060;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: min-content;
}

.bbview-buttons {
	display: flex;
	gap: 4px;
	align-items: end;
}

.bbview button,
.bbview-button {
	min-width: 30px;
	padding: 6px 10px;
	background-color: var(--bbview-button-background-color);
	color: var(--bbview-button-color);
	border-radius: 3px;
	border-width: 1px;
	border-style: solid;
	border-color: var(--bbview-button-color);
	cursor: pointer;
	font-size: 0.9em;
	white-space: nowrap;
	flex-shrink: 0;
}

.bbview button:hover:not(:disabled),
.bbview button.bbview-button-primary:hover:not(:disabled),
.bbview-button:hover:not(:disabled) {
	filter: brightness(1.2);
	text-decoration: none;
}

.bbview button:disabled,
.bbview button:disabled:hover,
.bbview-button:disabled,
.bbview-button:disabled:hover {
	background-color: var(--bbview-disabled-background-color);
	color: var(--bbview-disabled-color);
	border-color: var(--bbview-disabled-color);
	cursor: default;
	text-decoration: none;
}

.bbview button.bbview-button-primary:not(:disabled),
.bbview-button-primary:not(:disabled) {
	background-color: var(--bbview-primary-button-background-color);
	color: var(--bbview-primary-button-color);
}

.bbview button.bbview-button-warn,
button.bbview-confirm-button-confirm,
.bbview-button-warn,
.bbview-button-confirm {
	background-color: var(--bbview-broadbit-red-color);
	border-color: var(--bbview-broadbit-red-color);
	color: white;
}

.bbview button.bbview-button-warn:hover,
button.bbview-confirm-button-confirm:hover,
.bbview-button-warn:hover,
.bbview-button-confirm:hover {
	background-color: var(--bbview-broadbit-red-hover-color);
	border-color: var(--bbview-broadbit-red-hover-color);
	color: white;
	text-decoration: none;
}

.bbview button.bbview-icon-button,
.bbview a.bbview-icon-button {
	font-family: var(--bbview-icon-font);
	text-transform: none;
	border: none;
	font-size: 1.3em;
}

.bbview button.bbview-icon-button:disabled {
	background-color: initial;
}

.bbview h2 {
	font-family: Open Sans, Arial, sans-serif;
	font-size: 123.1%;
	font-weight: normal;
	margin: 10px 0px;
}

.bbview h3 {
	font-family: Open Sans, Arial, sans-serif;
	font-size: 100%;
	font-weight: bold;
	margin: 6px 0px;
}

.bbview-flex {
	display: flex;
	gap: 10px;
	align-items: center;
}

.bbview-flex-col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bbview-grow {
	flex-grow: 1;
}

.bbview-grid-col-span-2 {
	grid-column: span 2;
}
.bbview-grid-col-span-3 {
	grid-column: span 3;
}
.bbview-grid-col-span-4 {
	grid-column: span 4;
}
.bbview-grid-col-span-5 {
	grid-column: span 5;
}
.bbview-grid-col-span-full {
	grid-column: 1 / -1;
}

.bbview-grid-col-1 {
	grid-column: 1;
}
.bbview-grid-col-2 {
	grid-column: 2;
}
.bbview-grid-col-3 {
	grid-column: 3;
}
.bbview-grid-col-4 {
	grid-column: 4;
}
.bbview-grid-col-5 {
	grid-column: 5;
}
.bbview-grid-col-last {
	grid-column: -2;
}

.bbview-hidden {
	display: none;
}

/* Scrollable table implemented with CSS grid */
.bbview-table {
	display: grid;
	grid-auto-rows: auto;
	overflow: auto;
}

.bbview-table .bbview-table-row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	grid-auto-rows: min-content;
	align-items: stretch;
}

.bbview-table .bbview-table-row > *:not(.bbview-table-row) {
	padding: 8px;
}

.bbview-table > .bbview-table-header {
	position: sticky;
	top: 0;
	background-color: var(--bbview-background-color);
	z-index: 1;
}

.bbview-table-content-even > div:nth-child(2n + 1) {
	background-color: var(--bbview-background-color);
}

.bbview-table-content-even > div:nth-child(2n) {
	background-color: var(--bbview-highlight-background-color);
}

.bbview-table-content-hover > div:hover {
	filter: brightness(95%);
}

.bbview-table-row-selected > div {
	background-color: var(--bbview-selected-background-color);
	color: var(--bbview-selected-color);
}

.bbview-table-vertical-grid > .bbview-table-content > div,
.bbview-table-vertical-grid > .bbview-table-header {
	border-bottom: solid 1px var(--bbview-separator-color);
}

.bbview-table-horizontal-grid .bbview-table-row > *:not(.bbview-table-row) {
	border-right: solid 1px var(--bbview-separator-color);
}

.bbview-table-horizontal-grid .bbview-table-row > *:last-child {
	border-right: none 0px;
}

.bbview-table-horizontal-separator {
	grid-column: 1 / -1;
	height: 1px;
	background-color: var(--bbview-separator-color);
}

.bbview-template {
	display: none;
}

.bbview-template {
	display: none !important;
}

.bbview-icon {
	font-family: var(--bbview-icon-font);
}

.bbview-with-icon {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.bbview-with-icon:before {
	font-family: var(--bbview-icon-font);
}

.bbview-with-icon:after {
	font-family: var(--bbview-icon-font);
}

/* Modal styles */
div.bbview-modal {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	z-index: 2;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.4);
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.3s, opacity 0.3s;
}

div.bbview-modal-visible {
	visibility: visible;
	opacity: 1;
}

div.bbview-modal > *:not(.bbview-modal-close) {
	width: calc(100% - 90px);
	height: calc(100% - 90px);
	background-color: #fefefe;
	padding: 10px;
	border: 1px solid #888;
	border-radius: 6px;
	box-shadow: 0px 0px 10px #0005;
}

div.bbview-modal-close {
	position: fixed;
	left: calc((100% + 100% - 90px) / 2 + 10px);
	bottom: calc((100% + 100% - 90px) / 2 + 10px);
	z-index: 2;
	font-size: 1.5em;
	color: white;
	cursor: pointer;
	box-shadow: 0px 0px 10px #0008;
	border-radius: 30px;
	opacity: 0.5;
}

div.bbview-modal-close:hover {
	opacity: 1;
}

/* Dialog styles */
#view-dialog > A.container-close {
	z-index: 1;
}

#view-dialog > A.container-close + DIV {
	padding-right: 0px !important;
}

#view-dialog > div.hd + div.bd > div.bbview {
	padding: 10px;
}

/* Notifications styles */
#bbview-notifications {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	margin-bottom: 6px;

	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	justify-items: center;

	z-index: 100;
}

#bbview-notifications > div {
	padding: 10px;
	background: var(--bbview-notification-background-color);
	color: var(--bbview-notification-color);
	border: solid 1px transparent;
	border-radius: 6px;
	box-shadow: 0px 4px 6px #0004;
	font-weight: bold;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.3s, opacity 0.3s;
}

#bbview-notifications > div:before {
	content: "notifications";
}

#bbview-notifications > div.bbview-notification-visible {
	visibility: visible;
	opacity: 1;
	transition: visibility 0.3s, opacity 0.3s;
}

#bbview-notifications > div.bbview-error-notification {
	background-color: var(--bbview-notification-error-background-color);
	color: var(--bbview-notification-error-color);
}

#bbview-notifications > div.bbview-error-notification:before {
	content: "error";
}

input.bbview-autocomplete {
	padding-right: 24px;
}

div.bbview-autocomplete-status {
	display: none;
	font-family: var(--bbview-icon-font);
	position: absolute;
	z-index: 2;
	opacity: 0.5;
	animation: spin 2s linear infinite;
}

div.bbview-autocomplete-status.bbview-autocomplete-loading {
	display: block;
}

input.bbview-validator {
	height: 0px;
	width: 0px;
	min-height: 0px;
	min-width: 0px;
	margin: 0px;
	padding: 0px;
	border-color: transparent;
}

@keyframes spin {
	100% {
		transform: rotate(-360deg);
	}
}
.bbview-sort-control {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
}

.bbview-sort-control:hover {
	cursor: pointer;
}

.bbview-sort-control:after {
	font-family: var(--bbview-icon-font);
	width: 16px;
	content: "";
	opacity: 0.5;
}

.bbview-sort-control[sortdirection="asc"]:after {
	content: "south";
}

.bbview-sort-control[sortdirection="desc"]:after {
	content: "north";
}

.bbview-sort-control:hover:after {
	opacity: 1.0;
}

/* Sort styles */
.bbview-sort-control {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
}

.bbview-sort-control:hover {
	cursor: pointer;
}

.bbview-sort-control:after {
	font-family: var(--bbview-icon-font);
	width: 16px;
	content: "sort";
	opacity: 0.5;
}

.bbview-sort-control[sortdirection="asc"]:after {
	content: "south";
}

.bbview-sort-control[sortdirection="desc"]:after {
	content: "north";
}

.bbview-sort-control:hover:after {
	opacity: 1.0;
}

/* Page control styles */
.bbview-page-control {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
}