.dashbox {								/* desktop screen */
	float: left;
	display: flex;
	flex-direction: column; 
	width: 32%;							/* 32% = 3 Spalten, 48% = 2 Spalten */
	min-width: 320px;
	min-height: 300px;
	height: 300px;
	margin: 1% 1% 1% 0px;
	background: var(--dashbox-B);
	color: var(--dashbox-B-text);
	border-radius: 6px;
	box-sizing: border-box;
	user-select: none;
}

@media screen and (max-width: 1024px) 	/*   tablet portrait / smartphone */
{
	.dashbox {
		width: 48%;
	}
}
@media screen and (max-width: 640px) 	/* hier wirds wirklich eng */
{
	.dashbox {
		width: 99%;
	}
}

.dashcontent {
	margin-top: 8px;
	flex-grow: 1; 
	overflow-y: auto;
}

#dashboard {
    margin: 50px auto auto auto;
	max-width: 1280px;
    margin-top: 80px;
    margin-bottom: 200px;
}
@media screen and (max-width: 767px) {		/* stopping with 768px */

    #dashboard {
        margin: 50px 5px auto 5px;
    }
}

#dashboardHead {
        position: relative;
        border-bottom: 1px dotted transparent;
}

@media screen and (min-width: 768px) {	
	#dashboardHead > div.cueConnectWrap {
		position: absolute;
		right: 24px;
		bottom: 20px;
	}
}

@media screen and (max-width: 767px) {		
	#dashboardHead > div.cueConnectWrap {
		display: block;
		float: right;
		margin-bottom: 20px;
		margin-right: 5px;
	}
}

#dashboardHead > div.cueConnectWrap > div.cueConnect {
    font-size: 16px;
    background-color: var(--ce-active);
    color: var(--ce-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-weight: 300;
    padding: 5px 10px 5px 10px;
    vertical-align: middle;
    margin: 0px 0px 0px 10px;
    cursor: pointer;
}
@media screen and (max-width: 767px) {		/* stopping with 768px */
    #dashboardHead > div.cueConnect {
        display: inline-block;
        position: relative;
        margin-top: 10px;
    }
 
}
#dashboardHead > div.cueConnectWrap > div.cueConnect:hover {
    background-color: var(--ce-hover-2);
}
#dashboardHead > div.cueConnectWrap > div.cueConnect span {
    vertical-align: sub;
}

#dashboard h2 {
    text-align: left;
    font-weight: 400;
    margin-bottom: 1em;
}
#dashboardHead h2 {					/* must be inline, for editme to work correctly */
    display: inline-block;
}

#dashboard a:hover {
    color: var(--ce-hover-1);
}

.dashbig {
	width: 100%;
	height: 500px;
}

.dashbox p {
	padding: 0px 10px 5px 10px;
}

.dashbox > .dbTitle {
	position: relative;
/*	display: block;
*/
	flex-shrink: 0; 

	background: var(--ce-bg-2);
	color: var(--ce-text);
	padding: 6px;
	font-weight: 500;
	margin-bottom: 0px;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

.dashbox > .dbTitle > i {
	position: absolute;
	right: 0px;
	top: 8px;
	font-size: 21px;
}

.dashbox > .dbTitle > i:hover {
	color: var(--icon-hover);
}

.dashbox .message {
	font-size: 16px;
	font-weight: 300;
	font-style: italic;
}

.dashbox .messageTime {
	display: block;
	font-size: 14px;
	font-weight: 300;
	font-style: normal;
	
}
/*
.dashbox select {
	font-size: 16px;
	background-color: var(--dropdown-bg);
	color: var(--dropdown-text);
	border: 1px solid var(--dropdown-border);

}

.dashbox select:hover {
	background-color: var(--dropdown-bg-hover);
	color: var(--dropdown-text-hover);
}
*/
.dashbox button {
	display:block;
	width: 90%;
	margin: 20px auto 0px auto;
	background-color: var(--ce-button);
	border: none;
	color: var(--ce-text);
	border-radius: 3px;
	padding: 10px;
}
.dashbox button:hover {
	background-color: var(--ce-hover-2);
}

.dashbox p {
	padding: 10px;
}

/* eigentlich müsste die box oben links auch ein border-radius haben, mir gelang es aber nicht,
 wenn ich den goldenen border um die ganze box setze, diese obere linke ecke korrekt zu runden,
 daher hier bei premium bis zu einer idee, eine eckige ecke */
 
.dashbox.premium span.dbTitle {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	background: radial-gradient(ellipse farthest-corner at left top, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
	radial-gradient(ellipse farthest-corner at right bottom, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
/*	text-shadow: 2px 2px 5px rgba(0, 0, 0, 1); */
}

.dashbox.premium {
	border: 1px solid transparent; /* Setze die Breite des Borders */
	border-image: radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%) 1;

}
/****************************************************/
/* dashbox > roles								*/
/****************************************************/
.dashboxRoles {
	border-collapse: collapse;
	width: 100%;
}

.dashboxRoles tr:hover {
		background-color: var(--ce-hover-0);
}

.dashboxRoles td,th {
	text-align: left;
	padding: 3px 10px 3px 10px;
	border: none;
}

/* gewaltsamer umbruch von langen rollennamen oder mailadressen */
.dashboxRoles td:first-child {
	word-break: break-word; 
	overflow-wrap: break-word; 
}

.dashboxRoles td > i:hover {
	color:  var(--ce-hover-1);
}
.dashboxRoles td:last-child {
	text-align: right;
}

.dashboxRoles .roleOptions i {
	opacity: 0.5;
	margin-left: 5px;
}
/****************************************************/
/* dashbox > roles									*/
/****************************************************/
.dashboxGeneric {
	border-collapse: collapse;
	width: 100%;
}

.dashboxGeneric tr:hover {
	background-color: var(--ce-hover-0);
}

.dashboxGeneric td,th {
	text-align: left;
	padding: 3px 10px 3px 10px;
	border:  var(--dashbox-B);
	vertical-align: top;
}

.dashboxGeneric td > i {
	color: var(--dashbox-B-icon);
}

.dashboxGeneric td > i:hover {
	color:  var(--icon-hover);
}