@layer utilities {
	:root {
		--widget_height: 180px;
	}

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

	.dashboard > div {
		flex: 1;
		margin: 6px;
		cursor: default;
		/* box-shadow: 1px 2px 6px 0px rgba(0, 0, 0, 0.1); 
	border-radius: 10px;*/
		border-radius: 5px;
		border: solid 1px var(--input_border-color);
		background-color: var(--root-ribbon-menu-background-color);
		transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
		max-width: 450px;
		flex-wrap: wrap;
	}

	.dashboard > div > div {
		min-width: 350px;
		flex-wrap: wrap;
		position: relative;
		max-height: 180px;
		overflow: hidden;
	}

	/* #region Accounts Overview */
	.dashboard > div.accounts-overview > div.tickets {
		display: flex;
		padding: 10px 10px;
	}

	.dashboard > div.accounts-overview > div.tickets > span {
		flex: 1 1 0;
		text-align: center;
		padding: 10px 0px;
		min-height: 88px;
		min-width: 90px;
	}

	.dashboard > div.accounts-overview > div.tickets > span:hover {
		font-size: 1em;
		/* 
	outline: solid 2px var(--outline-border-color);
	border-radius: 2px;
	text-decoration: none;
 */
	}

	.dashboard > div.accounts-overview > div.tickets > span > h1 {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		font-weight: normal;
		font-size: 0.9em;
		line-height: 1em;
		text-transform: uppercase;
		color: #999;
		margin: 0;
		height: 24px;
	}

	.dashboard > div.accounts-overview > div.tickets > span > h2 {
		font-weight: normal;
		padding: 0;
		line-height: 1em;
		margin: 0;
		margin-top: 5px;
		height: 34px;
	}

	.dashboard > div.accounts-overview > div.tickets > span > span {
		display: block;
		font-weight: bold;
		font-size: 1.1em;
		height: 20px;
		font-family: Verdana, sans-serif;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		margin-top: 5px;
		transition: color var(--transition-speed) ease;
	}

	.dashboard > div.accounts-overview > div.tickets > span > cite {
		display: block;
		font-weight: normal;
		font-style: normal;
		font-size: 0.9em;
		font-family: Verdana, sans-serif;
		color: #999;
		margin-top: 0px;
	}

	.dashboard > div.accounts-overview > div.tickets > span > div.plot {
		margin-top: 10px;
		display: inline-block;
		padding: 0px;
	}

	.dashboard > div.accounts-overview > div.tickets > span > div.plot {
		max-width: 70px;
	}

	/* #endregion */
	/* #region Full Chart */
	.dashboard > div.full-chart {
		background: rgb(18, 123, 124);
		background: linear-gradient(150deg, rgb(18, 123, 124) 0%, rgb(96, 65, 0) 100%);
		height: 180px;
	}

	.dashboard > div.full-chart > div.chart {
		display: flex;
		padding: 10px 10px;
		align-items: flex-end;
		height: 100%;
		color: white;
	}

	.dashboard > div.full-chart > div.chart > div.chart-icon {
		background-color: white;
		width: 60px;
		height: 60px;
		border-radius: 50px;
		font-family: icomoon4;
		font-size: 2em;
		line-height: 2em;
		position: absolute;
		right: 25px;
		top: 25px;
		text-align: center;
		padding-top: 3px;
	}

	.dashboard > div.full-chart > div.chart > div.chart-title {
		flex: 1;
		padding-left: 15px;
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: space-between
	}

	.dashboard > div.full-chart > div.chart > div.chart-title > h1 {
		margin: 0;
		padding: 0px;
		padding-bottom: 10px;
		font-size: 1.1em;
		line-height: 1em;
		padding-top: 18px;
		font-weight: normal;
		text-transform: uppercase;
	}

	.dashboard > div.full-chart > div.chart > div.chart-title > h2 {
		margin: 0;
		font-size: 2.8em;
		font-weight: normal;
		font-family: monospace;
		line-height: 1em;
		padding-top: 30px;
	}

	.dashboard > div.full-chart > div.chart > div.chart-title > h2 > span {
		font-size: 0.5em;
		opacity: 0.5;
		font-weight: normal;
		font-family: monospace;
	}

	.dashboard > div.full-chart > div.chart > div.chart-title > h2 > span::before {
		content: "/";
	}

	.dashboard > div.full-chart > div.chart > div.chart-title > h3 {
		margin: 0;
		opacity: 0.5;
		font-size: 0.8em;
		padding-bottom: 5px;
	}

	.dashboard > div.full-chart > div.chart > div.plot {
		display: flex;
		padding-right: 15px;
		font-size: 1em;
		align-items: center;
		flex: 2;
	}

	.dashboard > div.full-chart > div.chart > div.plot .svg-plot_point {
		display: none;
		fill: rgba(255, 255, 255, 0.5);
	}

	.dashboard > div.full-chart > div.chart > div.plot:hover .svg-plot_point {
		display: block;
	}

	.dashboard > div.full-chart > div.chart > div.plot .svg-plot_point > text,
	.dashboard > div.full-chart > div.chart > div.plot .svg-plot_point > rect {
		display: none;
		font-size: 20px;
		padding: 5px;
	}

	.dashboard > div.full-chart > div.chart > div.plot .svg-plot_point > rect {
		fill: rgba(255, 255, 255, .7)
	}

	.dashboard > div.full-chart > div.chart > div.plot .svg-plot_point > text {
		fill: black;
	}

	.dashboard > div.full-chart > div.chart > div.plot .svg-plot_point:hover > text,
	.dashboard > div.full-chart > div.chart > div.plot .svg-plot_point:hover > rect {
		display: block;
	}

	.dashboard > div.full-chart > div.chart > div.plot .svg-plot_point:hover {
		fill: white;
		r: 10;
		z-index: 2;
	}

	/* #endregion */
	/* #region Account Ticket */
	.dashboard > div.account-ticket {
		height: 180px;
		background: rgb(0, 0, 0);
		background: linear-gradient(150deg, rgb(34, 18, 104) 0%, rgb(0, 96, 96) 100%);
		/* background: rgb(1, 20, 28);
	background: linear-gradient(149deg, rgba(1, 20, 28, 1) 0%, rgba(41, 10, 34, 1) 90%); */
	}

	.dashboard > div.account-ticket > div {
		position: relative;
	}

	.dashboard > div.account-ticket > div > div.ticket-title {
		padding: 25px 25px 15px 25px;
		font-size: 1.3em;
		line-height: 0.9em;
		color: white;
		opacity: 0.6;
		text-transform: uppercase;
	}

	.dashboard > div.account-ticket > div > div.ticket-title > span {
		font-size: 0.8em;
		color: rgba(255, 255, 255, 0.7);
	}

	.dashboard > div.account-ticket > div > div.ticket-value {
		color: white;
		font-size: 2.3em;
		padding: 0px 25px 15px 25px;
		line-height: 1em;
	}

	.dashboard > div.account-ticket > div > div.ticket-value > span {
		display: block;
		font-size: 0.6em;
		line-height: 0.7em;
		opacity: 0.5;
		font-family: monospace;
		padding-top: 7px;
		padding-left: 2px;
	}

	.dashboard > div.account-ticket > div > div.plot {
		display: flex;
		padding-left: 20px;
		font-size: 1em;
		align-items: center;
	}

	.dashboard > div.account-ticket > div > div.plot > span {
		font-size: 1em;
		/* background-color: rgba(255,255,255,.051); */
	}

	.dashboard > div.account-ticket > div > div.plot > div > span.state {
		font-size: 1em;
		padding: 3px 10px 0px 10px;
		display: block;
	}

	.dashboard > div.account-ticket > div > div.plot > div > span.state > i {
		font-family: icomoon4;
		font-style: normal;
		padding-right: 5px;
		font-size: 0.9em;
	}

	.dashboard > div.account-ticket > div > div.plot > div > h2 {
		display: inline-block;
		margin: 0;
		padding: 0;
		font-weight: normal;
		color: rgba(255, 255, 255, 0.5);
		padding-left: 10px;
	}

	.dashboard > div.account-ticket > div > div.ticket-icon {
		background-color: white;
		width: 60px;
		height: 60px;
		border-radius: 50px;
		font-family: icomoon4;
		font-size: 2em;
		line-height: 2em;
		position: absolute;
		right: 25px;
		top: 25px;
		text-align: center;
		padding-top: 3px;
	}

	/* #endregion */
	/* #region tablewidget */
	.dashboard > div.tablewidget {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 180px;
		max-height: 180px;
		flex: 2;
	}

	.dashboard > div.tablewidget > div {
		position: relative;
		overflow: auto;
		padding: 4px;
		height: 100%;
	}

	.dashboard > div.tablewidget > div::after {
		top: 60px;
		right: 10px;
		font-size: 10em;
		pointer-events: none;
		color: var(--root-font-lightcolor);
		opacity: 0.10;
		position: absolute;
		font-family: glyphs;
		content: "\e963";
		display: block;
	}

	.dashboard > div.tablewidget > div > table {
		background: none;
	}

	.dashboard > div.tablewidget > div > table > tbody > tr > td {
		padding-top: 10px;
		padding-bottom: 10px;
		background: none;
	}

	.dashboard > div.tablewidget > div::-webkit-scrollbar {
		width: 5px;
	}

	.dashboard > div.tablewidget > div:hover::-webkit-scrollbar-thumb {
		background-color: var(--input-hover_border-color);
	}

	.dashboard > div.tablewidget > div::-webkit-scrollbar-thumb {
		background-color: var(--input_border-color);
	}

	.dashboard > div.tablewidget > div,
	.dashboard > div.tablewidget {
		padding: 0px !important
	}

	.dashboard > div.tablewidget > div > div.table {
		& {
			grid-template-columns: 40px 1fr 1fr 2fr;
		}

		> a {
			&:first-child > div {
				border-top: none;

				&:first-child {
					border-top-left-radius: 4px;
				}

				&:last-child {
					border-top-right-radius: 4px;
				}
			}

			&:last-child > div {
				border-bottom: none;
				padding-bottom: 34px;

				&:first-child {
					border-bottom-left-radius: 4px;
				}

				&:last-child {
					border-bottom-right-radius: 4px;
				}
			}

			> div {
				padding: 11px 10px 32px 10px;
				height: 44px;
			}

			> .sup {
				line-height: 0.9em;

				> div {
					font-size: 0.8em;
					color: var(--root-font-lightcolor)
				}

				> sub {
					font-size: 0.8em;
					position: relative;
					top: -3px
				}
			}

			> .padge {
				position: relative;

				> span {
					position: absolute;
					inset: 5px 0 0 10px;
					display: block;
					margin-top: 2px;
					height: 30px;
					width: 30px;
					background-repeat: no-repeat;
					background-size: 100% auto;
					background-position: 50% 50%;
					border-radius: 100%;
				}

				&.initials {
					> b {
						position: absolute;
						inset: 7px 0 0 10px;
						display: flex;
						align-items: center;
						justify-content: center;
						text-wrap: nowrap;
						height: 30px;
						width: 30px;
						text-align: center;
						font-size: 0.8em;
						font-style: normal;
						border-radius: 100%;
						background-color: #000;
						color: white;
						font-family: Arial, Helvetica, sans-serif;
					}
				}
			}
		}
	}

	/* #endregion rowclicks */
	/* #region rowclicks */
	.dashboard > div.rowclicks {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 180px;
		max-height: 180px;
	}

	.dashboard > div.rowclicks > div {
		overflow: auto;
		display: flex;
		justify-content: space-around;
		align-items: stretch;
		flex: 1;
		padding: 5px;
	}

	.dashboard > div.rowclicks > div::-webkit-scrollbar {
		width: 5px;
	}

	.dashboard > div.rowclicks > div:hover::-webkit-scrollbar-thumb {
		background-color: var(--input-hover_border-color);
	}

	.dashboard > div.rowclicks > div::-webkit-scrollbar-thumb {
		background-color: var(--input_border-color);
	}

	.dashboard > div.rowclicks > div > a > div {
		color: var(--root-font-color);
		transition: color var(--transition-speed) ease;
	}

	.dashboard > div.rowclicks > a,
	.dashboard > div.rowclicks > span {
		text-align: center;
		display: block;
		padding: 10px;
	}

	/* #endregion rowclicks */
	/* #region Links */
	.dashboard > div.links > div > a {
		flex: 1;
		min-height: 50%;
		height: 125px;
		min-width: 80px;
		align-content: center;
		align-items: center;
		text-align: center;
		padding: 5px;
		margin: 5px;
	}

	.dashboard > div.links > div > a:hover,
	.dashboard > div.links > div > a:focus {
		outline: solid 2px var(--root-link-color);
		border-radius: 4px;
		text-decoration: none;
	}

	.dashboard > div.links > div > a > span {
		display: inline-block;
		font-family: icomoon4;
		font-size: 1.7em;
		line-height: 1em;
		padding: 17px;
		color: #fff;
		border-radius: 4px;
		margin-bottom: 12px;
		border: solid 1px var(--input_border-color);
		/* background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.4)); */
		transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease;
	}

	.dashboard > div.links > div > a > div {
		color: var(--root-font-color);
		transition: color var(--transition-speed) ease;
	}

	/* #endregion */
	/* #region quickstatement */
	.dashboard > div.quickstatement > div > a {
		display: flex;
		align-content: center;
		align-items: center;
		margin: 5px;
		flex: 1 1 25%;
		min-height: 42%;
		color: var(--root-font-color);
		transition: color var(--transition-speed) ease;
		border-radius: 4px;
		border: solid 1px var(--input_border-color);
		background-color: var(--static-bgcolor);
		line-height: 1.5em;
	}

	.dashboard > div.quickstatement > div > a > span {
		flex: 1;
		text-align: center;
	}

	.dashboard > div.quickstatement > div > a:hover,
	.dashboard > div.quickstatement > div > a:focus {
		outline: solid 2px var(--root-link-color);
		text-decoration: none;
	}

	.dashboard > div.quickstatement > span {
		display: block;
		padding: 10px;
		padding-bottom: 5px;
	}

	/* #endregion */
	/* #region Addons */
	.dashboard > div.addons {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		min-height: 180px;
		max-height: 180px;
		padding: 5px;
	}

	.dashboard > div.addons > a {
		display: flex;
		flex-direction: column;
		min-width: 100px;
		align-content: center;
		align-items: center;
		text-align: center;
		justify-content: center;
		padding: 5px;
		margin: 5px;
	}

	.dashboard > div.addons > a:hover,
	.dashboard > div.addons > a:focus {
		outline: solid 2px var(--root-link-color);
		border-radius: 4px;
		text-decoration: none;
	}

	.dashboard > div.addons > a > span {
		display: block;
		font-family: icomoon4;
		font-size: 1.7em;
		line-height: 1em;
		padding: 17px;
		color: #fff;
		border-radius: 4px;
		margin-bottom: 12px;
		border: solid 1px var(--input_border-color);
		background-color: var(--static-bgcolor);
		transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease;
	}

	.dashboard > div.addons > a > div {
		color: var(--root-font-color);
		transition: color var(--transition-speed) ease;
	}

	.dashboard > div.addons > div {
		min-width: auto;
	}

	/* #endregion */
}