// Cerb custom styles

// Alerts

#cerb-alerts {
	position: fixed;
	z-index: 999999;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
	overflow: hidden;
}

.cerb-alert {
	line-height: 2em;
	vertical-align: middle;
	margin: 0.5em 0;
	padding: 0.5em 0.5em 0.5em 1em;
	border: 0;
	background: var(--cerb-color-alert-background);
	font-weight: bold;
	color: black;
	
	A {
		color: black;
	}
	
	&.cerb-alert-rounded {
		border-radius: 0.5em;
	}
	
	&.cerb-alert-error {
		background: var(--cerb-color-tag-red);
		color: white;
		
		A {
			color: white;
		}
	}

	.cerb-alert-close {
		vertical-align: middle;
		float: right;
		font-size: 1.5em;
		cursor: pointer;
	}
}

#cerb-alerts .cerb-alert {
	margin: 0;
}

// Forms

DIV.cerb-form {
	margin: 0 0 10px 0;
	
	> DIV {
		margin: 0 0 5px 10px;
		
		LABEL {
			display: block;
			font-weight: bold;
			margin-left: -10px;
			padding-bottom: 5px;
		}
		
		INPUT[type=text] {
			width: 100%;
		}
		
		TEXTAREA {
			width: 100%;
			box-sizing: border-box;
			height: 50px;
		}
	}
}

DIV.cerb-form-flex {
	display: flex;
	flex-flow: row wrap;
	margin: 0 0 10px 0;
	box-sizing: border-box;

	> DIV {
		flex: 2 2 100%;
		min-width: 250px;

		LABEL {
			display: block;
			font-weight: bold;
		}

		INPUT[type=text] {
			width: 98%;
			padding: 2px;
		}

		TEXTAREA {
			width: 98%;
			padding: 2px;
			min-height: 50px;
		}
	}

	.cerb-form-flex--half {
		flex: 1 1 50%;
	}
}

// Fieldsets

FIELDSET.delete {
	color: var(--cerb-color-error-text);

	LEGEND {
		color: var(--cerb-color-error-text);
	}
}

FIELDSET.cerb-slider-container {
	margin-bottom: 0;
}

DIV.cerb-slider-container {
	margin-bottom: 0;
	display: inline-block;
	width: 225px;
	max-width: 225px;
	
	LABEL {
		font-weight: bold;
		padding: 0 0 5px 0;
		display: inline-block;
		
		&> SMALL {
			font-weight: normal;
			font-size: 100%;
		}
	}
}

FIELDSET.cerb-delta-slider-container {
	margin-bottom: 0;
}

DIV.cerb-delta-slider-container {
	margin-bottom: 0;
	margin-right: 20px;
	display: inline-block;
	width: 250px;
	max-width: 250px;
	position:relative;
	
	LABEL {
		font-weight: bold;
		display: inline-block;
		
		&> SMALL {
			font-weight: normal;
			font-size: 100%;
		}
	}
	
	SPAN.cerb-delta-slider-midpoint {
		display:inline-block;
		background-color: var(--cerb-color-background-contrast-200);
		height:22px;
		width:1px;
		position:relative;
		top:-7px;
		margin-left:1px;
		left:50%;
	}
	
	DIV.cerb-delta-slider {
		margin:5px 10px 5px 5px;
		width:250px;
		display:inline-block;
		position:relative;
		background-color: var(--cerb-color-background-contrast-230);
		border: 0;
		
		&.ui-slider-horizontal {
			height: 9px;
		}
		
		.ui-slider-handle {
			width: 15px;
			height: 15px;
			border-radius: 15px;
			margin-left: -8px;
			margin-top: -2px;
			border: 2px solid;
		}
		
		&.cerb-slider-gray {
			border-color: var(--cerb-color-background-contrast-190);
			
			.ui-slider-handle {
				background-color: var(--cerb-color-background-contrast-170);
				border-color: var(--cerb-color-background-contrast-150);
				cursor: pointer;
			}
			
			.ui-slider-range {
				background-color: var(--cerb-color-background-contrast-230);
			}
		}
		
		&.cerb-slider-green {
			border-color: var(--cerb-color-background-contrast-190);
			
			.ui-slider-handle {
				background-color: var(--cerb-color-ui-slider-low);
				border-color: var(--cerb-color-ui-slider-low-border);
				cursor: pointer;
			}
			
			.ui-slider-range {
				background-color: var(--cerb-color-background-contrast-230);
			}
		}
	
		&.cerb-slider-red {
			border-color: var(--cerb-color-background-contrast-190);
			
			.ui-slider-handle {
				background-color: var(--cerb-color-ui-slider-high);
				border-color: var(--cerb-color-ui-slider-high-border);
				cursor: pointer;
			}
			
			.ui-slider-range {
				background-color: var(--cerb-color-background-contrast-230);
			}
		}	
	}
}

// Special links

A.no-underline {
	cursor: pointer;
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

// Effects

.effects-transfer {
	border: 2px dotted var(--cerb-color-background-contrast-170);
	background-color: var(--cerb-color-background-contrast-230);
}

// Text input icons

@mixin form-input-icon($icon) {
	padding: 2px 2px 2px 25px;
	background: url(#{$icon}?v=#{$timestamp}) no-repeat scroll 5px 50% var(--cerb-color-form-input-background);
}

INPUT[type=text] {
	&.input_add {
		@include form-input-icon('input_icons/add.png');
	}

	&.input_color {
		@include form-input-icon('input_icons/colors.png');
	}

	&.input_email {
		@include form-input-icon('input_icons/mail.png');
	}

	&.input_location {
		@include form-input-icon('input_icons/location.png');
	}

	&.input_money {
		@include form-input-icon('input_icons/money.png');
	}

	&.input_number {
		@include form-input-icon('input_icons/number.png');
	}

	&.input_openid {
		@include form-input-icon('input_icons/openid.gif');
	}

	&.input_password {
		@include form-input-icon('input_icons/lock.png');
	}

	&.input_percent {
		@include form-input-icon('input_icons/percent.png');
	}

	&.input_phone {
		@include form-input-icon('input_icons/phone.png');
	}

	&.input_remove {
		@include form-input-icon('input_icons/forbidden.png');
	}

	&.input_search {
		@include form-input-icon('input_icons/view.png');
	}

	&.input_tags {
		@include form-input-icon('input_icons/tag.png');
	}

	&.input_url {
		@include form-input-icon('input_icons/link.png');
	}
}

// Password inputrs

INPUT[type=password] {
	@include form-input-icon('input_icons/lock.png');
}

// Email bodies
// 	See: http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/

PRE.emailbody, DIV.emailbody {
	// CSS3
	white-space: pre-wrap;
	// Mozilla, since 1999
	white-space: -moz-pre-wrap;
	// Opera 7
	white-space: -o-pre-wrap;
	// IE 5.5+
	word-wrap: break-word;
	// IE only hack to re-specify in addition to word-wrap
	_white-space: pre;
	
	word-break: break-word;
	font-family: inherit;
	font-size: 12px;
	line-height: 16px;
	margin: 0;

	A {
		color: var(--cerb-color-email-link);
	}

	.cerb-email-quote {
		font-style: italic;
		color: var(--cerb-color-email-quote);
	}
}

// Buttons

BUTTON {
	&:hover DIV.badge-count {
		background-color: var(--cerb-color-button-icon--hover);
		color: var(--cerb-color-text-inverse);
	}

	&.peek {
		visibility: hidden;
		width: 20px;
		height: 20px;
		padding: 0;
		margin: 0 0 0 5px;
	}
	
	&.cerb-button-enabled  {
		background: none;
		background-color: var(--cerb-color-button-icon-enabled-background);
	
		span.glyphicons {
			color: var(--cerb-color-button-icon-enabled);
		}
	}
}

BUTTON.green {
	//background: var(--cerb-color-button-confirm-gradient) linear-gradient(to bottom, var(--cerb-color-button-confirm-gradient), var(--cerb-color-button-confirm-gradient-to));
	//color: var(--cerb-color-button-confirm-text);
	//cursor: pointer;

	//&:hover {
	//	color: var(--cerb-color-button-icon--hover);
	//	background: var(--cerb-color-button-gradient) linear-gradient(to bottom, var(--cerb-color-button-gradient), var(--cerb-color-button-gradient-to--hover));
	//}

	DIV.badge-count {
		background-color: var(--cerb-color-button-confirm-badge);
		color: var(--cerb-color-button-confirm-badge-text);
	}
}

BUTTON.red {
	background: var(--cerb-color-button-reject-gradient) linear-gradient(to bottom, var(--cerb-color-button-reject-gradient), var(--cerb-color-button-reject-gradient-to));

	color: var(--cerb-color-button-reject-text);
	cursor: pointer;

	&:hover {
		background: var(--cerb-color-button-reject-gradient--hover) linear-gradient(to bottom, var(--cerb-color-button-reject-gradient--hover), var(--cerb-color-button-reject-gradient-to--hover));
	}
}

BUTTON.split-left {
	vertical-align: top;
	height: 26px;
	margin-right: 0;
	border-right: 0;

	border-radius: 5px 0 0 5px;

	SPAN {
		vertical-align: middle;
	}
}

BUTTON.split-right {
	vertical-align: top;
	height: 26px;
	margin-left: 0;
	padding: 5px 2px;
	border-radius: 0 5px 5px 0;
	
	.glyphicons-chevron-down {
		font-size: var(--cerb-font-size);
		color: var(--cerb-color-button-icon);
	}
}

// Notifications

#badgeNotifications {
	display: none;
	padding: 3px 5px 3px 5px;
	margin-left: 5px;
	background-color: var(--cerb-color-tag-red);
	border-radius: 5px;

	A {
		color: white;
		text-decoration: none;
		font-weight: bold;

		&:hover {
			text-decoration: underline;
		}
	}
}

// Navigation menu

UL {
	&.navmenu {
		overflow: hidden;
		clear: both;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
		color: var(--cerb-color-background-contrast-75);

		> LI {
			float: left;
			background-color: var(--cerb-color-background-contrast-240);
			border-right: 1px solid var(--cerb-color-background-contrast-220);
			padding: 5px 8px;
			margin: 0;
			min-height: 16px;
			cursor: pointer;
			white-space: nowrap;

			A {
				color: var(--cerb-color-background-contrast-75);
				font-weight: normal;
				text-decoration: none;
			}

			&:hover {
				background-color: var(--cerb-color-background-contrast-220);
			}

			&.selected {
				background-color: var(--cerb-color-ui-navmenu-selected);

				A {
					color: var(--cerb-color-ui-navmenu-selected-text);
				}
			}
		}
	}
}

.navmenu-submenu {
	background-color: var(--cerb-color-menu-submenu);
	height:5px;
}

// Sheets

.cerb-data-sheet {
	.cerb-data-sheet--fieldset {
		> TBODY:nth-child(even) TD {
			background-color: var(--cerb-color-table-row-alt-background);
		}
		
		.cerb-data-sheet--field-label {
			font-weight: bold;
			font-size: 0.75em;
			text-transform: uppercase;
			vertical-align: top;
			padding-right: 0.2em;
			width: 1%;
			text-wrap: nowrap;
			color: var(--cerb-color-background-contrast-100);
		}
		
		.cerb-data-sheet--field-title {
			font-weight: bold;
			font-size: 125%;

			div, img, svg {
				vertical-align: top;
			}
		}
		
		.cerb-data-sheet--field {
			TD {
				padding: 2px 5px;
				
				&:first-child {
					white-space: nowrap;
				}
	
				&:last-child {
					word-break: break-word;
					white-space: normal;
				}
			}
		}
	}

	.cerb-data-sheet--field {
		H1, H2, H3, H4, H5, H6 {
			color: var(--cerb-color-text);
		}
	}

	.commentBodyHtml p:nth-child(1) {
		margin-block-start: 0;
	}
}

.cerb-sheet-buttons {
	.cerb-sheet-buttons--button {
		background: var(--cerb-color-action-primary) none;
		color: var(--cerb-color-text-inverse);
		padding: 10px 10px;
		border-radius: 5px;
		margin: 5px 0 0 0;
		cursor: pointer;
		text-align: center;
	}
	
	.cerb-sheet-buttons--button:hover {
		filter: brightness(1.2);
	}
	
	.cerb-sheet-buttons--title {
		font-size: 120%;
		font-weight: bold;
	}
	
	.cerb-sheet-buttons--button input[type=checkbox],
	.cerb-sheet-buttons--button input[type=radio] {
		display: none;
	}
}

.cerb-sheet-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: stretch;
	align-items: stretch;
	gap: 5px;
	
	.cerb-sheet--row {
		padding: 5px;
		flex: 1 1 auto;
		text-align: center;
		cursor: pointer;
		word-break: break-word;
		background-color: var(--cerb-color-background-contrast-240);
		border: 1px solid var(--cerb-color-background-contrast-240);
		
		border-radius: 5px;
		
		p {
			margin: 0;
		}
		
		&:hover {
			background-color: var(--cerb-color-background-contrast-220);
			border: 1px solid var(--cerb-color-background-contrast-220);
		}
		
		DIV[data-cerb-column-type=selection] {
			font-weight: bold;
			font-size: 110%;
			
			INPUT[type=radio], INPUT[type=checkbox] {
				display: none;
			}
		}
	}

	.cerb-sheet--row-selected {
		background-color: var(--cerb-color-background-contrast-75);
		border-color: var(--cerb-color-background-contrast-75);
		color: var(--cerb-color-text-inverse);

		DIV[data-cerb-column-type=selection] {
			color: var(--cerb-color-text-inverse);
		}
		
		&:hover {
			background-color: var(--cerb-color-background-contrast-50);
			border: 1px solid var(--cerb-color-background-contrast-50);
		}
	}
}

.cerb-sheet-columns {
	columns: 200px 4;

	.cerb-sheet--row {
		padding-bottom: 0.25em;
		cursor: pointer;
		word-break: break-word;
		page-break-inside: avoid;
		break-inside: avoid-column;
		overflow: hidden;

		.cerb-sheet--row-item {
			padding: 5px;
			border-radius: 5px;
			background-color: var(--cerb-color-background-contrast-240);
			
			&:hover {
				background-color: var(--cerb-color-background-contrast-220);
			}
			
			p {
				margin: 0;
			}
		}
		
		DIV[data-cerb-column-type=selection] {
			font-weight: bold;
			font-size: 110%;

			INPUT[type=radio], INPUT[type=checkbox] {
				display: none;
			}
		}
	}

	.cerb-sheet--row-selected {
		.cerb-sheet--row-item {
			color: var(--cerb-color-text-inverse);
			background-color: var(--cerb-color-background-contrast-75);
			
			&:hover {
				background-color: var(--cerb-color-background-contrast-50);
			}
		}

		DIV[data-cerb-column-type=selection] {
			color: var(--cerb-color-text-inverse);
		}
	}
}

// Worklists

TABLE.worklist {
	background-color: var(--cerb-color-table-header-background);
	border-radius: 5px 5px 0 0;
	padding:2px;
	color: var(--cerb-color-table-header-text);

	TD {
		padding: 3px;
		color: inherit;

		A {
			color: inherit;
			font-weight: normal;
			padding-right:3px;
		}

		SPAN.title {
			padding: 5px 5px 5px 10px;
			color: inherit;
			font-weight:bold;
			font-size:14px;
		}
	}
	
	TD.title-toolbar {
		font-size: 14px;
		text-shadow:0 1px 0 var(--cerb-color-table-header--icons-shadow);
	}
}

TABLE.worklistBody {
	th {
		background: var(--cerb-color-background-contrast-240) linear-gradient(to bottom, var(--cerb-color-background-contrast-240), var(--cerb-color-background-contrast-200));
		color: var(--cerb-color-background-contrast-75);
		padding: 2px 0 2px 5px;
		border-right: 1px solid var(--cerb-color-background-contrast-170);
		text-align: left;
		cursor: pointer;
		
		.glyphicons {
			color: inherit;
		}

		A {
			vertical-align: middle;
			font-weight: bold;
			text-decoration: none;
			color: inherit;
		}
		
		&:hover {
			background: var(--cerb-color-background-contrast-200) linear-gradient(to bottom, var(--cerb-color-background-contrast-200), var(--cerb-color-background-contrast-150));

			A {
				text-decoration: none;
				color: var(--cerb-color-text-inverse);
			}
		}

		&.no-sort:hover {
			background: var(--cerb-color-background-contrast-240) linear-gradient(to bottom, var(--cerb-color-background-contrast-240), var(--cerb-color-background-contrast-200));
			cursor: default;
			
			A {
				color: var(--cerb-color-background-contrast-75);
				cursor: default;
			}
		}
	}

	TD {
		overflow: hidden;
		font-size: 11px;
		padding-top: 0.5em;
		padding-right: 0.5em;
		color: var(--cerb-color-table-row-text);
		
		&:not([colspan]) {
			padding-top: 0;
			padding-bottom: 0.5em;
		}

		A.subject, B.subject {
			font-size: 12px;
			font-weight: bold;
			text-decoration: none;
			color: var(--cerb-color-table-row-subject);
			
			&:hover {
				text-decoration: underline;
			}
		}
	}

	TR {
		&.even {
			background-color: var(--cerb-color-background);
		}

		&.odd {
			background-color: var(--cerb-color-background-contrast-240);
		}

		&.hover {
			background-color: var(--cerb-color-table-row-hover-background) !important;
		}

		&.selected {
			background-color: var(--cerb-color-table-row-selected-background) !important;

			&.hover {
				background-color: var(--cerb-color-table-row-hover-background) !important;
			}
		}
	}
	
	tbody {
		&.disabled {
			color: var(--cerb-color-background-contrast-160);
			
			A {
				color: var(--cerb-color-background-contrast-160);
			}
		}
	}
}

TABLE.cerb-table {
	border-spacing:0;
	border-collapse:collapse;

	tbody:nth-child(odd) {
		background-color:var(--cerb-color-table-row-alt-background);
	}

	tbody td {
		padding:0.25em 0.75em 0.25em 0.5em;
	}
}

// Calendar

TABLE.calendar {
	width:98%;
	border:0;

	TR.heading {
		height:1.5em;

		TH {
			width:14%;
			font-weight:normal;
			text-align:left;
		}
	}

	TR.week {
		height:75px;

		TD {
			width: 14%;
			border-top: 1px solid var(--cerb-color-background-contrast-200);
			border-left: 1px solid var(--cerb-color-background-contrast-200);
			vertical-align: top;

			DIV.day_header {
				padding-left:5px;

				A {
					text-decoration:none;

					&:hover {
						text-decoration:underline;
					}
				}
			}

			&.hover {
				background-color: var(--cerb-color-table-row-hover-background);
			}

			&.inactive {
				background-color: var(--cerb-color-background-contrast-230);
			}

			&.cellborder_r {
				border-right:1px solid var(--cerb-color-background-contrast-200);
			}

			&.cellborder_b {
				border-bottom:1px solid var(--cerb-color-background-contrast-200);
			}

			&.today {
				border:2px solid var(--cerb-color-action-primary);

				DIV.day_header {
					A {
						font-weight: bold;
						color: var(--cerb-color-action-primary);
					}
				}
			}

			DIV.day_contents {
				overflow:hidden;
				padding:5px;

				DIV {
					padding:0.25em 0.25em;
					background-color: var(--cerb-color-background-contrast-200);
					margin-top:2px;
					height:1em;
					overflow:hidden;
					border-radius: 0.25em;
					word-wrap:break-word;
					word-break:break-all;
				}

				A {
					text-decoration:none;
					color: rgb(32, 32, 32);
					font-weight: 500;

					&:hover {
						text-decoration:underline;
					}
				}

				.time {
					font-size: 80%;
					font-weight: normal;
					color: rgb(32, 32, 32);
					opacity:80%;
					float: right;
				}
			}

		}
	}
}

// Error Handling

DIV.error-box {
	background-color: var(--cerb-color-error-background);
	color: var(--cerb-color-error-text);
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 5px;

	H1 {
		color: var(--cerb-color-error-text);
		margin-bottom: 5px;
	}

	P {
		margin: 0 0 5px 5px;
	}
}

// Help box

DIV.help-box {
	background-color: var(--cerb-color-help-background);
	color: var(--cerb-color-help-text);
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 5px;

	H1 {
		color:var(--cerb-color-help-text);
		margin-bottom: 5px;
	}

	P {
		margin:0 0 5px 5px;
	}

	A {
		font-weight:bold;
		color: var(--cerb-color-help-text);
	}

	SPAN.help.callout-worklist {
		font-weight:bold;
		color: var(--cerb-color-table-header-text);
		background-color: var(--cerb-color-table-header-background);
		padding:5px 10px;

		border-radius: 5px 5px 0 0;
	}
}

// Misc common DIVs

.cerb-comment {
	.cerb-comment--content {
		display:block;
		margin-top:2px;
		margin-left:58px;
	}

	.toolbar {
		display:none;
		position:absolute;
		top:5px;
		right:5px;
	}
}

.cerb-draft {
	.cerb-draft--content {
		display:block;
		margin-left:58px;
	}

	.toolbar-minmax {
		position:absolute;
		top:5px;
		right:5px;
		display:none;
	}
}

.cerb-message {
	.cerb-message--content {
		display:block;
		margin-left:58px;
	}

	.toolbar-minmax {
		position:absolute;
		right:5px;
		display:none;
	}
}

.cerb-comments-thread {
	margin: 10px 0 0 15px;
	border-left:2px solid var(--cerb-color-background-contrast-200);

	.cerb-comments-thread--comment {
		&:first-child {
			margin-top: 25px;
		}

		position:relative;
		margin-top:10px;
		margin-left:-17px;
		padding: 0;
		border: 0;

		H3 {
			font-weight: bold;
			font-size: 18px;
			margin: 0;
			color: var(--cerb-color-background-contrast-100);
		}
	}

	.cerb-comments-thread--avatar {
		float: left;
		margin: 0 5px 10px 0;
	}
}

DIV.block {
	padding: 5px;
	background: var(--cerb-color-background) linear-gradient(to bottom, var(--cerb-color-background-contrast-240) 25px, var(--cerb-color-background) 75px);
	border: 1px solid var(--cerb-color-background-contrast-230);

	border-radius: 5px;

	&.hover-underline A {
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}

	H1, H2, H3, H4 {
		font-weight: bold;
		margin: 0;
	}

	H1 {
		font-size: 2em;
	}

	H2 {
		font-size: 1.75em;
		color: var(--cerb-color-h1);
	}

	H3 {
		font-size: 1.5em;
		color: var(--cerb-color-background-contrast-75);
	}

	H4 {
		font-size: 1.25em;
	}

	// Don't override HTML headings
	.emailBodyHtml, .emailBodyHtmlLight {
		H1, H2, H3, H4, H5, H6 {
			color: var(--cerb-color-text);
		}
	}
}

DIV.error {
	border: 1px solid var(--cerb-color-error-text);
	background-color: var(--cerb-color-error-background);
	color: var(--cerb-color-error-text);
	font-weight: bold;
	margin: 10px;
	padding: 5px;
}

DIV.success {
	border: 1px solid var(--cerb-color-success-text);
	background-color: var(--cerb-color-success-background);
	color: var(--cerb-color-success-text);
	font-weight: bold;
	margin: 10px;
	padding: 5px;
}

// Bubbles

DIV.bubble {
	line-height:1.5em;
	padding:0 0.2em 0 0.2em;
	margin:0;
	display:inline-block;
	color: var(--cerb-color-text);
	border:1px solid var(--cerb-color-background-contrast-200);
	white-space: normal;
	word-break: break-all;

	border-radius: 5px;
	background: var(--cerb-color-text-inverse) linear-gradient(to bottom, var(--cerb-color-background), var(--cerb-color-background-contrast-220));

	A {
		color: var(--cerb-color-text);
		text-decoration:none;

		&:hover {
			text-decoration:underline;
		}
	}
}

UL.bubbles {
	display:inline;
	margin:0;
	padding:0;

	LI {
		display:inline-block;
		position: relative;
		list-style: none;
		line-height:1.5em;
		padding:0 0.5em;
		margin:0;
		color: var(--cerb-color-text);
		border:1px solid var(--cerb-color-background-contrast-200);
		white-space:normal;
		word-break:break-all;

		border-radius: 5px;

		background: var(--cerb-color-background) linear-gradient(to bottom, var(--cerb-color-background), var(--cerb-color-background-contrast-200));

		A {
			color: var(--cerb-color-text);
			text-decoration:none;

			&:hover {
				text-decoration:underline;
			}
		}
		
		&.bubble-gray {
			background: var(--cerb-color-background) linear-gradient(to bottom, var(--cerb-color-background), var(--cerb-color-background-contrast-200));
			border:1px solid var(--cerb-color-background-contrast-200);
			color: var(--cerb-color-text);
			
			A {
				color: var(--cerb-color-text);
			}
		}
		
		&.bubble-blue {
			background: var(--cerb-color-bubble-background) linear-gradient(to bottom, var(--cerb-color-bubble-background), var(--cerb-color-bubble-background-gradient));
			color: var(--cerb-color-bubble-text);
			border: 1px solid var(--cerb-color-bubble-border);

			A {
				color: var(--cerb-color-bubble-text);
			}
		}
	}
	
	&.chooser-container {
		LI {
			margin: 3px;
			background: var(--cerb-color-background) linear-gradient(to bottom, var(--cerb-color-background), var(--cerb-color-background-contrast-200));
			
			color: var(--cerb-color-text);
			
			A {
				color: var(--cerb-color-text);
			}
		
			.glyphicons-circle-remove {
				cursor: pointer;
				position: absolute;
				top: -0.5em;
				right: -0.5em;
				visibility: hidden;
			}
			
			&:hover {
				.glyphicons-circle-remove {
					visibility: visible;
				}
			}
		}
	}
}

// Avatars

IMG.cerb-avatar {
	height:16px;
	width:16px;
	margin-right:3px;
	border-radius: 16px;
	vertical-align:middle;
}

IMG.cerb-rounded {
	border-radius: 100px;
	vertical-align:middle;
}

// Badges

DIV.badge-count {
	font-size: 12px;

	padding: 0 5px;
	font-weight: 500;
	display: inline-block;
	vertical-align: middle;

	margin-top: -1px;

	border-radius: 10px;

	background-color: var(--cerb-color-button-icon);
	color: var(--cerb-color-text-inverse);
}

DIV.badge {
	display:inline-block;

	font-weight:normal;
	padding:1px 4px 1px 4px;

	background: var(--cerb-color-background-contrast-180) linear-gradient(to bottom, var(--cerb-color-background-contrast-180), var(--cerb-color-background-contrast-160));
	border: 1px solid var(--cerb-color-background-contrast-150);
	border-radius: 5px;

	color: var(--cerb-color-text-inverse);

	A {
		color:var(--cerb-color-text-inverse);
	}

	&.selected {
		border: 1px dashed;
		background: var(--cerb-color-table-row-selected-background) none;
	}
}

DIV.badge-lightgray {
	background: var(--cerb-color-background-contrast-240) linear-gradient(to bottom, var(--cerb-color-background-contrast-240), var(--cerb-color-background-contrast-230));
	color: var(--cerb-color-background-contrast-125);
	border:1px solid var(--cerb-color-background-contrast-200);

	A {
		color: var(--cerb-color-background-contrast-125);
	}
}

DIV.badge-red {
	background-color: var(--cerb-color-tag-red);
	border: 1px solid var(--cerb-color-tag-red);
	color: white;
}

// Tags

SPAN.tag {
	padding:2px 4px;
	font-weight:bold;
	vertical-align:top;
	border-radius: 5px;

	&.tag-blue {
		background-color: var(--cerb-color-tag-blue);
		color: var(--cerb-color-text-inverse);
	}

	&.tag-green {
		background-color: var(--cerb-color-tag-green);
		color: var(--cerb-color-text-inverse);
	}

	&.tag-gray {
		background-color: var(--cerb-color-tag-gray);
		color: var(--cerb-color-text-inverse);
	}

	&.tag-red {
		background-color: var(--cerb-color-tag-red);
		color: var(--cerb-color-text-inverse);
	}

	&.tag-orange {
		background-color: var(--cerb-color-tag-orange);
		color: var(--cerb-color-text-inverse);
	}
}

DIV.cerb-fields-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
	grid-gap: 0 5px;
	align-items: stretch;
	justify-content: space-between;
	
	.cerb-fields-container-item {
		text-overflow: ellipsis;
		word-break: break-word;
		word-wrap: break-word;
		margin: 0.2em 0.5em;
		
		.bubbles LI {
			word-break: break-word;
			word-wrap: break-word;
		}
	}
}

DIV.cerb-properties {
	margin:0;

	> DIV {
		display:inline-block;
		margin:1px 10px 1px 0;

		> LABEL {
			font-weight:bold;
			margin-right:1px;
		}
	}
}

DIV.cerb-properties {
	margin:0;

	> DIV {
		display:inline-block;
		margin:1px 10px 1px 0;

		> LABEL {
			font-weight:bold;
			margin-right:1px;
		}
	}
}

// Property fieldsets

FIELDSET.properties {
	border-width: 1px 0 0 0;

	LEGEND {
		color: var(--cerb-color-background-contrast-50);
		
		A {
			color: inherit;
		}
	}

	DIV.property {
		width: 32%;
		padding-right: 1%;
		margin-bottom: 0.25em;
		display: block;
		float: left;
		line-height: 1.5em;
	}

	SMALL {
		font-size:90%;
		color: var(--cerb-color-background-contrast-100);
	}
}

DIV.cerb-properties-grid {
	font-size: 0;
	letter-spacing: 0;
	word-spacing: 0;

	> DIV {
		display:inline-block;
		font-size: var(--cerb-font-size);
		letter-spacing: 0;
		word-spacing: 0;
		padding:0 0 5px 0;
		vertical-align: top;
	}
	
	LABEL {
		display:block;
		font-weight:bold;
		width:100%;
		margin:0;
		padding:0;
		overflow:hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

// Peek fieldsets

FIELDSET.peek {
	border-width:1px 0 0 0;

	LEGEND {
		color: var(--cerb-color-fieldset-legend);

		A {
			color: inherit;
		}
	}
}

FIELDSET.block {
	border-width: 1px 0 0 5px;
	border-style: solid;
}

// [TODO] This is used in one place
FIELDSET.block-cell {
	border-width: 1px 1px 1px 8px;
	border-color: var(--cerb-color-background-contrast-220);
	border-style: solid;
	position: relative;
	margin-bottom: 10px;

	legend {
		color: var(--cerb-color-fieldset-legend);
		margin: 0;
	}
}

FIELDSET.no-legend {
	background: none;
	border: 0;
}

FIELDSET.peek-noborder {
	background:none;
	border-width:0;
	
	LEGEND {
		margin-left: 0;
		padding-left: 0;
		color: var(--cerb-color-fieldset-legend);
	}
}

FIELDSET.black {
	LEGEND {
		color: var(--cerb-color-background-contrast-50);
		
		A {
			color: var(--cerb-color-background-contrast-50);
		}
	}
}

DIV.cerb-profile-toolbar {
	margin-bottom: 10px;

	SMALL {
		font-size: 90%;
		color: var(--cerb-color-background-contrast-100);
	}
}

// Popup menu

DIV.cerb-popupmenu {
	min-width: 200px;
	margin: 5px 0 20px 0;
	padding: 5px;
	display: none;
	background-color: var(--cerb-color-background);
	border: 1px solid var(--cerb-color-background-contrast-200);
	box-shadow: 0 0 10px 3px var(--cerb-color-shadow-menu);
}

UL.cerb-popupmenu {
	min-width:200px;
	list-style:none;
	margin:5px 0 20px 0;
	padding:5px;
	display:none;
	background-color: var(--cerb-color-background);
	border: 0;
	box-shadow: 0 0 10px 3px var(--cerb-color-shadow-menu);

	> LI {
		padding:2px;
		font-weight:normal;
		cursor:pointer;
		break-inside: avoid-column;
		page-break-inside: avoid;

		A {
			text-decoration:none;
			color: var(--cerb-color-menu-item-text);
			font-weight:bold;
		}
		
		B {
			color: var(--cerb-color-menu-item-section);
		}

		HR {
			height:1px;
			padding:0;
			margin:5px 5px;
			border:0;
			border-top:1px dashed var(--cerb-color-background-contrast-200);
		}

		&:hover {
			background-color: var(--cerb-color-menu-item-hover);
			color: var(--cerb-color-text-inverse);

			A {
				color: inherit;
			}
		}
	}
}

// Utilities

.cerb-float {
	position: absolute;
	z-index: 2500;
	float: left;
	border: 0;
}

.cerb-hidden {
	display: none;
}

// Subpage

.cerb-subpage {
	H1 {
		color: var(--cerb-color-widget-header);
		margin-bottom: 5px;
	}
	
	H2 {
		color: var(--cerb-color-h2);
		margin-bottom: 5px;
	}
}

// KB

.cerb-kb-article-content {
	color: var(--cerb-color-background-contrast-50);
	font-size: 100%;
	line-height: 140%;

	H1, H2, H3, H4, H5, H6 {
		font-weight: bold;
		color: var(--cerb-color-background-contrast-50);
		margin:10px 0;
		line-height: normal;
	}

	H1 {
		font-size: 190%;
		color: var(--cerb-color-background-contrast-50);

		&.title {
			font-size: 200%;
			color: var(--cerb-color-background-contrast-50);
			font-weight: bold;
			text-align: left;
			border: none;
		}
	}

	H2 {
		font-size: 170%;
		color: var(--cerb-color-h2);
		border-bottom: 1px solid var(--cerb-color-background-contrast-230);
	}

	H3 {
		font-size: 150%;
		color: var(--cerb-color-background-contrast-50);
	}

	H4 {
		font-size: 130%;
		color: var(--cerb-color-background-contrast-50);
	}

	H5 {
		font-size: 120%;
		color: var(--cerb-color-background-contrast-50);
	}

	H6 {
		font-size: 110%;
		color: var(--cerb-color-background-contrast-50);
	}

	PRE {
		border-top: 1px solid var(--cerb-color-background-contrast-200);
		border-right: 1px solid var(--cerb-color-background-contrast-200);
		border-left: 3px solid var(--cerb-color-background-contrast-150);
		border-bottom: 3px solid var(--cerb-color-background-contrast-150);
		background-color: var(--cerb-color-background-contrast-240);
		color: var(--cerb-color-background-contrast-25);
		padding: 0.5em;
	}

	CODE {
		background-color: var(--cerb-color-background-contrast-240);
		color: var(--cerb-color-text);
		padding: 0 3px;
		font-weight: bold;
	}

	PRE > CODE {
		overflow-x: auto;
	}

	BLOCKQUOTE {
		font-style:italic;
		color: var(--cerb-color-background-contrast-50);
		border-left: solid 5px var(--cerb-color-background-contrast-240);
		margin-left: 20px;
		padding: 0 3px 0 5px;
	}

	IMG {
		max-width: 100%;
		height: auto;
	}

	SVG {
		max-width: 100%;
		height: auto;
	}
}

// Menu

DIV.cerb-menu {
	margin-top:-5px;

	> UL {
		padding:0;
		margin:0;
		list-style:none;

		> LI {
			padding: 5px 10px;
			background-color: var(--cerb-color-menu-submenu);
			float: left;

			&:hover {
				background-color: var(--cerb-color-menu-submenu-hover);
			}

			> DIV {
				cursor: pointer;

				> A {
					color: white;
					text-decoration: none;
					font-weight: normal;
				}
			}
		}
	}

	&.cerb-popupmenu {
		margin-top: 5px;
		margin-left: -10px;
	}
}

// Plugins

SPAN.plugin_icon_overlay_disabled {
	//noinspection CssUnknownTarget
	background: url(plugin_overlay_disabled.png?v=#{$timestamp}) no-repeat top left;
	width:100px;
	height:100px;
	position:absolute;
	left:1px;
	top:0;
}

// Markdown container

DIV.cerb-markdown-content {
	P {
		margin: 0.2em;
	}

	PRE {
		margin: 0.2em;
	}

	CODE {
		background-color: var(--cerb-color-background-contrast-240);
		padding: 2px;
	}
}

// HTML email container (reset styles)

.emailBodyHtml {
	overflow-x: auto;
	color: var(--cerb-color-text);
	padding: 5px;

	A {
		color: var(--cerb-color-email-link);
	}

	ABBR {
		border-bottom-color: var(--cerb-color-text);
	}

	BODY, FORM, TD {
		color: var(--cerb-color-table-row-text);
	}

	BLOCKQUOTE {
		color: var(--cerb-color-background-contrast-100);
		border-left: 5px solid;
		margin: 0 0 0 10px;
		padding: 0 0 0 10px;
	}

	PRE > CODE {
		display: block;
		overflow-x: auto;
		border: 1px solid var(--cerb-color-background-contrast-230);
		background-color: var(--cerb-color-email-code);
		padding: 10px;
		box-sizing: border-box;
		width: 0;
		min-width: 100%;
	}

	P > CODE {
		border: 1px solid var(--cerb-color-background-contrast-230);
		background-color: var(--cerb-color-email-code);
		font-weight: bold;
		padding: 0.1em 0.2em;
		line-height: 1.75em;
	}

	%heading {
		font-size: initial;
		color: inherit;
		margin: initial;
		font-weight: bold;
	}

	H1, H2, H3, H4, H5, H6 {
		@extend %heading;
	}

	IMG {
		max-width: 100%;
		height: auto;
	}

	SVG {
		max-width: 100%;
		height: auto;
	}

	DIV.block {
		H1, H2, H3, H4, H5, H6 {
			@extend %heading;
		}
	}

	UL, OL {
		padding-left: 2em;
	}
}

.emailBodyHtmlLight {
	overflow-x: auto;
	background-color: white;
	padding: 5px;
	color: black;

	A {
		color: rgb(43,109,173);
	}

	ABBR {
		border-bottom-color: black; 
	}
	
	BODY, FORM, TD {
		color: black;
	}

	BLOCKQUOTE {
		color: rgb(100,100,100);
		border-left: 5px solid;
		margin: 0 0 0 10px;
		padding: 0 0 0 10px;
	}

	PRE > CODE {
		display: block;
		overflow-x: auto;
		border: 1px solid rgb(230,230,230);
		background-color: rgb(246,242,240);
		padding: 10px;
		box-sizing: border-box;
		width: 0;
		min-width: 100%;
	}

	P > CODE {
		border: 1px solid rgb(230,230,230);
		background-color: rgb(246,242,240);
		font-weight: bold;
		padding: 0.1em 0.2em;
		line-height: 1.75em;
	}

	%heading {
		font-size: initial;
		color: inherit;
		margin: initial;
		font-weight: bold;
	}

	H1, H2, H3, H4, H5, H6 {
		@extend %heading;
	}

	IMG {
		max-width: 100%;
		height: auto;
	}

	SVG {
		max-width: 100%;
		height: auto;
	}

	DIV.block {
		H1, H2, H3, H4, H5, H6 {
			@extend %heading;
		}
	}

	UL, OL {
		padding-left: 2em;
	}
}

// Comment container (reset styles)

.commentBodyHtml {
	A {
		color: inherit;
	}

	ABBR {
		border-bottom: inherit;
	}

	BLOCKQUOTE {
		clear: both;
		color: var(--cerb-color-background-contrast-100);
		border-left: 5px solid;
		margin: 0 0 0 10px;
		padding: 0 0 0 10px;
	}

	PRE > CODE {
		clear: both;
		display: block;
		overflow-x: auto;
		border: 1px solid var(--cerb-color-background-contrast-230);
		background-color: var(--cerb-color-email-code);
		padding: 10px;
		box-sizing: border-box;
		width: 0;
		min-width: 100%;
	}

	P > CODE {
		border: 1px solid var(--cerb-color-background-contrast-230);
		background-color: var(--cerb-color-email-code);
		font-weight: bold;
		padding: 0.1em 0.2em;
		line-height: 1.75em;
	}

	%heading {
		font-size: initial;
		color: inherit;
		margin: initial;
		font-weight: bold;
		clear: both;
	}

	H1 {
		@extend %heading;
		font-size: 250%;
	}

	H2 {
		@extend %heading;
		font-size: 200%;
	}

	H3 {
		@extend %heading;
		font-size: 175%;
	}

	H4 {
		@extend %heading;
		font-size: 150%;
	}

	H5 {
		@extend %heading;
		font-size: 130%;
	}

	H6 {
		@extend %heading;
		font-size: 115%;
	}

	IMG {
		max-width: 100%;
		height: auto;
	}

	SVG {
		max-width: 100%;
		height: auto;
	}

	OL, UL {
		margin: 0 0 0.5em 1.5em;
		padding: 0;
	}

	PRE {
		clear: both;
	}

	TABLE {
		clear: both;
	}

	DIV.block {
		H1, H2, H3, H4, H5, H6 {
			@extend %heading;
		}
	}
}

.cerb-expression-editor {
	UL.expression-toolbar {
		width: 100%;
		border: 0;
		overflow-x: hidden;
		overflow-y: auto;
		max-height: 35em;
		
		LI {
			color: var(--cerb-color-text);
			
			&.ui-menu-item {
				background-color: var(--cerb-color-text-inverse);
			
				&:hover {
					background-color: var(--cerb-color-background-contrast-240);
					border-color: var(--cerb-color-background-contrast-240);
				}
			}
		}
		
		&::-webkit-scrollbar {
			width: 12px;
		}
		&::-webkit-scrollbar-track {
			background-color: var(--cerb-color-background-contrast-240);
			border-radius: 10px;
		}
		&::-webkit-scrollbar-thumb {
			background-color: var(--cerb-color-background-contrast-200);
			border-radius: 10px;
		}
	}
	
	.expression {
		&:focus {
			outline: none;
		}
		
		// [TODO] Tags
		SPAN {
			color: var(--cerb-color-text);
			font-weight: bold;
			border-radius: 10px;
			padding: 0 6px;
			background-color: var(--cerb-color-background-contrast-200);
			
			&.default {
				font-weight: normal;
				background-color: var(--cerb-color-background-contrast-200);
			}
			&.alias {
				background-color: var(--cerb-color-background-contrast-200);
			}
			&.avail {
				background-color: var(--cerb-color-background-contrast-200);
			}
			&.contact {
				color:rgb(0,120,0);
				background-color:rgb(235,255,205);
			}
			&.contact_method {
				background-color: var(--cerb-color-background-contrast-200);
			}
			&.context {
				background-color: var(--cerb-color-background-contrast-200);
			}
			&.date {
				color:rgb(68,147,224);
				background-color:rgb(217,239,255);
			}
			&.duration {
				color: rgb(188, 121, 20);
				background-color: rgb(255, 228, 16);
			}
			&.entity {
				background-color: var(--cerb-color-background-contrast-200);
			}
			&.event {
				background-color: var(--cerb-color-background-contrast-200);
			}
			&.number {
				background-color: var(--cerb-color-background-contrast-200);
			}
			&.org {
				background-color: var(--cerb-color-background-contrast-200);
			}
			&.phone {
				background-color: var(--cerb-color-background-contrast-200);
			}
			&.place {
				background-color: var(--cerb-color-background-contrast-200);
			}
			&.remind {
				background-color: var(--cerb-color-background-contrast-200);
			}
			&.status {
				background-color: var(--cerb-color-background-contrast-200);
			}
			&.temperature {
				color:rgb(212,4,30);
				background-color:rgb(245,200,200);
			}
			&.time {
				color:rgb(255,128,0);
				background-color:rgb(253,238,193);
			}
			&.worker {
				color: rgb(169,63,255);
				background-color: rgb(233,217,255);
			}
		}
	}
}

// Uploads

div.cerb-uploads {
	p {
		display: block;
		width: 70%;
		padding: 2px 5px;
		margin: 2px 0;
		border-radius: 5px;
		background-color: var(--cerb-color-background-contrast-200);
		color: var(--cerb-color-text-inverse);
		
		&.success {
			background: var(--cerb-color-action-primary) none 0 0 no-repeat;
			font-weight: bold;
		}
		
		&.failure {
			background: var(--cerb-color-tag-red) none 0 0 no-repeat;
			font-weight: bold;
		}
	}
}

// Packages Library

.package-library--container {
	display:grid;
	overflow-x:hidden;
	
	.package-library--package-chooser {
		grid-column:1;
		grid-row:1;
		opacity:1;
		transform:translateX(0%);
		transition:opacity 0.3s, transform 0.8s;
		
		input.input_search {
			width:100%;
			border-radius:10px;
			border:1px solid var(--cerb-color-background-contrast-200);
			box-sizing:border-box;
		}
		
		.package-library--package-container {
			margin:5px 0 20px 0;
			border:1px solid var(--cerb-color-background-contrast-240);
			padding:5px;
		}
		
		.package-library--package {
			width:250px;
			display:inline-block;
			vertical-align:top;
			border: 2px solid var(--cerb-color-text-inverse);
			padding:5px;
			text-align:center;
			cursor:pointer;
			
			.package-library--package-image {
				height:135px;
				width:240px;
				background-color: white;
				border:1px solid var(--cerb-color-background-contrast-200);
				margin-bottom:5px;
			}
			
			.package-library--package-title {
				font-size:16px;
				line-height:1.1em;
			}
			
			.package-library--package-description {
				margin-top:5px;
			}
		}
		
		.package-library--package-selected {
			border: 2px solid var(--cerb-library-border);
			background-color: var(--cerb-library-background-selected);
		}
	}
	
	.package-library--package-info {
		grid-column:1;
		grid-row:1;
		opacity:0;
		transform:translateX(100%);
		transition:opacity 0.3s, transform 0.8s;
		
		.package-library--cancel {
			position:relative;
			
			> div {
				position:absolute;
				right:0;
				top:0;
				cursor:pointer;
				font-size:200%;
				
				span.glyphicons-circle-remove {
					&:hover {
						color: var(--cerb-color-error-text);
					}
				}
			}
		}
		
		.package-library--package {
			.package-library--package-image {
				float:left;
				background-color: var(--cerb-color-background);
				border: 1px solid var(--cerb-color-background-contrast-200);
				margin: 0 10px 10px 0;
			}
			
			.package-library--package-title {
				font-size:2em;
			}
			
			.package-library--package-description {
			}
			
			.package-library--package-instructions {
				margin-top:5px;
				clear:both;
			}
			
			.package-library--package-metadata {
				vertical-align:top;
				display:block;
				margin-left:10px;
				
			}
		}
	}
}

// jQuery overrides

.ui-dialog .ui-dialog-titlebar-minmax {
	position: absolute;
	right: 2.0em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}

UL.ui-menu {
	li.ui-menu-item {
		break-inside: avoid-column;
		page-break-inside: avoid;
	}
	
	li.ui-menu-item.ui-state-focus {
		color: var(--cerb-color-background);
	}

	li.ui-state-focus {
		border: 0;
		margin: 0;
		background: var(--cerb-color-menu-item-text);
	}
}