/*
 * -----------------------------------------------------------------------------
 *  Lucom Interaction Platform
 *  (C) Lucom GmbH, Erkrath. All rights reserved.
 * -----------------------------------------------------------------------------
 */

.dashboard {
	--dashboard-max-width: 1400px;
	--dashboard-box-padding: 10px;

	--font: 'Open Sans', 'sans serif';
	--font-size: 18px;
	--font-color: #424242;
	--font-weight: 400;
	--dashboard-background-color: #FFFFFF;

	display: block;
	padding: 30px 0;

	--font: Open Sans, Verdana, Arial, Helvetica, sans-serif;
	--font-size: 18px;
	--font-weight: 400;
	--font-color: #1A181B;
	--dashboard-background-color: #FFFFFF;
}

.dashboard {
	font-family: var(--font);
	font-size: var(--font-size);
	font-weight: var(--font-weight);
	color: var(--font-color);
}

.dashboard .link {
	background-color: transparent;
	border: 0 none;
	border-radius: 5px;
	text-decoration: none;
	color: var(--font-color);
	font-family: var(--font);
	font-size: var(--font-size);
	font-weight: var(--font-weight);
	cursor: pointer;
}

.dashboard .link:focus,
.dashboard .link:hover {
	outline: 2px solid var(--font-color);
	outline-offset: -2px;
	border: none;
	box-shadow: none;
}

.dashboard .link:hover {
	text-decoration: underline;
	color: #004291;
}

.dashboard ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dashboard.flex-wrapper {
	display: flex;
}

.dashboard .dashboard-row {
	padding: 0 30px 40px;
	max-width: var(--dashboard-max-width);
	width: 100%;
}

.dashboard .dashboard-row.full-width {
	padding: 0 30px 40px;
	max-width: 100%;
}

.dashboard .search-help-container {
	display: grid;
	grid-template-columns: 1fr minmax(0, 700px) 1fr;
	column-gap: 2px;
	padding-top: 10px;
}

.dashboard .search-help-container .global-search-container {
	grid-column: 2;
	width: 100%;
	justify-self: center;
}

.dashboard .search-help-container .help {
	grid-column: 3;
	justify-self: end;
}

.dashboard .text-container {
	font-weight: var(--font-weight);
	font-size: 24px;
}

.dashboard .text-container h1,
.dashboard .text-container h2,
.dashboard .text-container h3,
.dashboard .text-container h4,
.dashboard .text-container h5,
.dashboard .text-container h6 {
	font-size: 36px;
	font-weight: 700;
	padding-bottom: 10px;
}

.dashboard .text-container img {
	max-width: 100%;
}

.dashboard .help .svg-button {
	padding: 10px;
}

.dashboard .help .svg-button.badged {
	display: block;
	position: relative;
}

.dashboard .help .svg-button.badged .counter {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 60%;
	left: 60%;
	border-radius: 50%;

	background-color: #004291;
}

.dashboard .help .svg-button.badged .counter .count {
	font-weight: var(--font-weight);
	font-size: 14px;

	color: #FFFFFF;
}

.dashboard .help .system-notes-container,
.dashboard .help .system-notes-icon-templates,
.dashboard .help .help-container,
.dashboard .help .help-icon-templates{
	display: none;
}

.dashboard .svg-button {
	cursor: pointer;
	font-size: var(--font-size);
	padding: 0;
	margin: 0;
	background-color: var(--dashboard-background-color);
	border: 0 none;
	border-radius: 5px;
}

.dashboard .svg-button:hover,
.dashboard .svg-button:focus {
	outline: 2px solid var(--font-color);
	outline-offset: -2px;
}

.dashboard .svg-button:hover .svg-container {
	fill: #004291;
}

.dashboard .svg-button .svg-container {
	width: 1.333334em;
	height: 1.333334em;
}

.dashboard h3 {
	font-size: 1.333334em;
	overflow-wrap: anywhere;
	margin: 0 0 0.5em 0;
	padding: 0 var(--dashboard-box-padding);
}

.dashboard h3 .svg-container {
	width: 1.5em;
	height: 1.5em;
}

.dashboard h3 .svg-container-large {
	width: 2em;
	height: 2em;
}

.dashboard h3 .svg-container,
.dashboard h3 .svg-container-large {
	margin-right: 10px;
}

.dashboard h3.flex-wrapper .svg-container,
.dashboard h3.flex-wrapper .svg-container-large {
	flex-shrink: 0;
}

.dashboard .widget.hidden {
	display: none;
}

.dashboard .widget.loading {
	height: 200px;
}

.dashboard .widget .loading-notification {
	position: absolute;
	align-self: center;
}

.dashboard .widget .widget-header {
	justify-content: space-between;
}

.dashboard .widget .widget-description {
	padding-bottom: 10px;
}

.dashboard .widget[data-widget-type="form"] .widget-description,
.dashboard .widget[data-widget-type="dataBrowser"] .widget-description {
	padding-top: 10px;
}

.dashboard .widget .widget-actions button {
	padding: 10px;
}

.dashboard .widget .box {
	border-radius: 3px;
	padding: var(--dashboard-box-padding);

	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: var(--dashboard-box-padding);

	background-color: #F5F5F5;
}

.dashboard .widget .box .tile {
	min-width: 300px;
	border-width: 1px;
	border-style: solid;
	border-radius: 3px;
	background-color: var(--dashboard-background-color);

	border-color: #E0E0E0;
}

.dashboard .widget .box .tile .button-container {
	height: 100%;
}

.dashboard .widget .box .tile .tile-button {
	display: block;
	cursor: pointer;
	width: 100%;
	height: 100%;
	appearance: none;
	background-color: var(--dashboard-background-color);
	border: 1px none;
	padding: 15px 20px;
	margin: 0;
	border-radius: 3px;
	color: var(--font-color);
	font-family: var(--font);
	font-size: 1em;
	font-weight: var(--font-weight);
	text-align: left;
	text-decoration: none;
}

.dashboard .widget .box .tile .tile-button.flex-wrapper {
	display: flex;
}

.dashboard .widget .box .tile .tile-button.icon-button {
	padding: 10px 20px;
	height: 100%;
}

.dashboard .widget .box .tile .tile-button:first-of-type {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.dashboard .widget .box .tile .tile-button:not(:first-of-type) {
	margin-left: 2px;
	width: auto;
	height: 100%;
	border-radius: 0;
}

.dashboard .widget .box .tile .tile-button:last-of-type {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.dashboard .widget .box .tile .tile-button:hover .svg-container {
	fill: #004291;
}

.dashboard .widget .box .tile .tile-button:hover,
.dashboard .widget .box .tile .tile-button:focus {
	text-decoration: underline;
	outline: 2px solid var(--font-color);
	outline-offset: 0;
}

.dashboard .widget .box .tile .tile-button:hover {
	color: #004291;
}

.dashboard .widget .box .tile .tile-button .icon {
	margin-right: 10px;
}

.dashboard .widget .box .tile .tile-button.flex-wrapper .icon {
	flex-shrink: 0;
}

.dashboard .widget .box .tile .tile-button .align-right {
	margin-left: auto;
}

.dashboard .widget .box .tile .svg-button.tile-button-menu {
	padding: 0 12px;
}

/* ------------------------------------------------------------------- postboxes
 */

.dashboard .widget .box .tile.postbox-tile .tile-button .overall {
	font-size: .85em;
	color: #757575;
}

.dashboard .widget .box .tile.postbox-tile .tile-button .unread {
	padding: 5px 7px;
	border-radius: 3px;

	background-color: #004291;
	color: #FFFFFF;
}

/* ------------------------------------------------------------------- favorites
 */

.dashboard .widget .box .tile.favorite-tile .svg-button.tile-button-extra {
	padding: 0 10px;
}

.dashboard .widget .box .tile.favorite-tile .svg-button.tile-button-extra .svg-container {
	width: 28px;
	height: 28px;
}

/* ----------------------------------------------------------------- form widget
 */

.dashboard .form-container {
	overflow-y: hidden;
	border-radius: 5px;
	border-width: 1px;
	border-style: solid;
	border-color: #EEEEEE;
}

.dashboard .form-container.hidden,
.dashboard .form-container.hidden .form-toolbar .container {
	visibility: hidden;
}

.dashboard .dashboard-row.full-width[data-widget-type="form"],
.dashboard .dashboard-row.full-width[data-widget-type="dataBrowser"] {
	padding-left: 0;
	padding-right: 0;
}

.dashboard .form-container.empty,
.dashboard .dashboard-row.full-width .form-container {
	border: 0 none transparent;
	border-radius: 0;
}

/* -------------------------------------------------------------- dropdown menus
 */

.dashboard .widget .box .tile .dropdown {
	margin: 2px 0 0;
	max-height: 300px;
}

.dashboard .widget .box .tile .dropdown:before,
.dashboard .widget .box .tile .dropdown:after {
	display: none;
}

.dashboard .widget .box .tile .dropdown .item-container:not(:last-child) {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-radius: 0;

	border-bottom-color: #CCCCCC;
}

.dashboard .widget .box .tile .dropdown .item-container:first-child,
.dashboard .widget .box .tile .dropdown .item-container:first-child .tile-button {
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.dashboard .widget .box .tile .dropdown .item-container:last-child,
.dashboard .widget .box .tile .dropdown .item-container:last-child .tile-button {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.dashboard .widget .box .tile .dropdown .item.tile-button {
	border-radius: 0;
	outline-offset: -2px;
}

@media (max-width: 719px) {

	.dashboard {
		padding: 30px 10px;
	}

	.dashboard .widget.flex-wrapper.column {
		align-self: stretch;
	}

	.dashboard .widget .box {
		grid-template-columns: auto;
	}

	.dashboard .widget .box .tile {
		min-width: auto;
	}
}

.dashboard .skeleton {
	color: transparent;
	background-color: var(--dashboard-background-color);
	position: relative;
	overflow: hidden;
	height: 70px;
}

.dashboard .skeleton::before {
	content: "";
	height: 100%;
	width: 50px;
	position: absolute;
	filter: blur(8px);
	background: linear-gradient(to right, var(--dashboard-background-color) 25%, #F5F5F5 50%, var(--dashboard-background-color) 100%);
	animation-iteration-count: infinite;
	animation-name: skeleton-animation;
	animation-duration: 4s;
	animation: fadeIn 1s ease-in-out;
	opacity: 0;
}

@keyframes skeleton-animation {
	from {
		left: 0%;
	}
	to {
		left: 100%;
	}
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* --------------------------------------------------------------- modal dialogs
 */

.lip-modal-window .dialog.dashboard-system-notes,
.lip-modal-window .dialog.dashboard-help {
	--font: 'Open Sans', 'sans serif';
	--font-size: 18px;
	--font-color: #424242;
	--font-weight: var(--font-weight);

	--font: Open Sans, Verdana, Arial, Helvetica, sans-serif;
	--font-size: 18px;
	--font-weight: normal;
	--font-color: #1A181B;
}

.lip-modal-window .dialog.dashboard-system-notes,
.lip-modal-window .dialog.dashboard-help {
	font-family: var(--font);
	font-size: var(--font-size);
	font-weight: var(--font-weight);
	color: var(--font-color);
}

.lip-modal-window .dialog.dashboard-system-notes .header .svg-container,
.lip-modal-window .dialog.dashboard-help .header .svg-container {
	margin-right: 10px;
}

.lip-modal-window .dialog.dashboard-system-notes .content h1,
.lip-modal-window .dialog.dashboard-system-notes .content h2,
.lip-modal-window .dialog.dashboard-system-notes .content h3,
.lip-modal-window .dialog.dashboard-help .content h1,
.lip-modal-window .dialog.dashboard-help .content h2,
.lip-modal-window .dialog.dashboard-help .content h3 {
	font-size: 1em;
	font-weight: 700;
	margin: 0 0 0.5em 0;
	padding: 0;
}

.lip-modal-window .dialog.dashboard-system-notes .system-notes {
	padding: 10px;
	margin: 0;
	border-radius: 5px;
}

.lip-modal-window .dialog.dashboard-system-notes ul.system-notes {
	list-style: none;
}

.lip-modal-window .dialog.dashboard-system-notes .system-notes .system-note {
	border-bottom-width: 1px;
	border-bottom-style: solid;

	padding: 20px 45px;
	margin-bottom: 10px;
	max-height: 150px;
	overflow: hidden;

	background-color: #FFFFFF;
	border-color: #CCCCCC;
}

.lip-modal-window .dialog.dashboard-system-notes .system-notes .system-note:last-child {
	border-bottom: none;
}

.lip-modal-window .dialog.dashboard-system-notes .system-notes .system-note:focus {
	outline: 2px solid var(--font-color);
	outline-offset: -2px;
}

.lip-modal-window .dialog.dashboard-system-notes .system-notes .system-note .content {
	align-self: flex-start;
	position: relative;
	overflow: hidden;
	max-height: none;
	padding: 0;
}

.lip-modal-window .dialog.dashboard-system-notes .system-notes .system-note .content .warn {
	font-weight: bold;
	color: #F6C342;
}

.lip-modal-window .dialog.dashboard-system-notes .system-notes .system-note .content .error {
	font-weight: bold;
	color: #BC4949;
}

.lip-modal-window .dialog.dashboard-system-notes .system-notes .system-note:not(.expanded) .content:after {
	content: '';
	pointer-events: none;
	position: absolute;
	top: calc(130px - 1lh);
	height: 1lh;
	width: 100%;
	-webkit-backdrop-filter: blur(1.75px) brightness(1.1);
	backdrop-filter: blur(1.75px) brightness(1.1);
}

.lip-modal-window .dialog.dashboard-system-notes .system-notes .system-note:last-of-type {
	margin-bottom: 0;
}

.lip-modal-window .dialog.dashboard-system-notes .system-notes .system-note.expanded {
	max-height: none;
}

.lip-modal-window .dialog.dashboard-system-notes .system-notes .system-note .expander-button {
	display: none;
}

.lip-modal-window .dialog.dashboard-system-notes .system-notes .system-note.expandable .expander-button {
	display: block;
	cursor: pointer;
	background-color: transparent;
	border: 2px solid transparent;
	border-radius: 5px;
	align-self: stretch;
}

.lip-modal-window .dialog.dashboard-system-notes .system-notes .system-note.expandable .expander-button:hover,
.lip-modal-window .dialog.dashboard-system-notes .system-notes .system-note.expandable .expander-button:focus {
	outline: 2px solid var(--font-color);
}