/* Cards and Bricks */

#list {
	text-align: center;
}

#list dwrap {
	text-align: left;
}

.brick-wrap {
    display: inline-block;
	border-radius: 7px;
	box-shadow: 0 7px 7px -4px rgba(0, 0, 0, 0.32);
	min-height: 40px;
    margin: 16px;	
	padding: 16px;
	width: 428px;
	vertical-align: top;
	overflow: hidden;
	background-color: white;
}

.brick-wrap.size-med,
.brick-wrap.size-big {
	width: 440px;
	min-height: 64px;
	padding-top: 20px;
	padding-bottom: 20px;
}
.brick-wrap.size-big {
	width: 560px;
}

.brick-wrap.size-auto {
	width:		auto;
	display:	block;
}

.brick-wrap .left-logo {
	font-size: 44px;
	width: 1em;
	height: 1em;
	background: center center no-repeat;
	background-size: cover;
	border-radius: 50%;
}
.brick-wrap.size-big .left-logo {
    margin-top: 8px;
}

.brick-wrap .central-content {
	font-size:		14px;
}

/* Bar stack (manual) */

.bar-stack {
	position: 	relative;
	display:	block;
	padding:	64px 16px 64px 16px;
}
.bar-stack .dbar {
	position: 	relative;
	height:		8px;
	border-radius: 4px;
	background-color: #D0D0D0;
}
.bar-stack .dbar .part {
	position:	relative;
	height:		100%;
	float: 		left;
	border-radius: 4px;
}
.bar-stack .dbar .part:not(:first-child) {
	box-sizing: content-box !important;
	padding:	0 4px;
	margin-left: -8px;
}

/* labels liked to bar */
.bar-stack .dbar .part .part-label {
	position: absolute;
	right: 	0;
	/*-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
			transform: translateX(-50%);*/
	top:  	100%;
	margin-top: 4px;

	padding: 2px 8px;
    border-radius: 10px;
    color: white;

	font-size:	12px;
	font-weight: bold;
	z-index:	1000;
}
.bar-stack .dbar .part:nth-child(1) .part-label {
	right: auto;
	left: 0;
}
.bar-stack .dbar .part:nth-child(2n+1) .part-label {
	top: auto;
	margin-top: 0;
	bottom: 110%;
	margin-bottom: 4px;
}
.bar-stack .dbar .part:nth-child(3n) .part-label {
    /*margin-bottom: 28px;*/
}

/* line of labels non-sync above bar (not used atm) */
.bar-stack .dlabels {
	position: relative;
	margin-bottom: 8px;
	white-space: nowrap;
	overflow: hidden;
	max-width: 100%;
	text-align: right;
}
.bar-stack .dlabel {
	position: relative;
    display: inline-block;
	padding: 2px 8px;
    border-radius: 10px;
    color: white;

	font-size:	12px;
	font-weight: bold;
}


.form-group.d-element label[data-right-icon] {
	position: relative;
}
.form-group.d-element label[data-right-icon]::after {
content: attr(data-right-icon);
    position: absolute;
    font-family: 'Material Icons';
    font-size: 14px;
    right: -1em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-right: -10px;
    margin-top: 0;
    width: 1.32em;
    height: 1.32em;
    line-height: 1.32em;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
}

@media (min-width: 640px) {
	div.dataTables_length,
	div.dataTables_info {
		float: left;
		padding-left: 0;
		margin-right: 8px;
	}
	div.dataTables_filter {
		padding-right: 0;
	}
}


/* v3 blocks with green label */

.block-titled-green {
	--tg-pad: 16px;
	--tg-pad-title: 8px;
	--tg-top: 32px;

	position: relative;
	margin-bottom: 44px;
	padding: var(--tg-pad);
	padding-top: var(--tg-top);

	background-color: white;
	border-radius: 10px;
	box-shadow: 0 7px 7px -6px rgb(0 0 0 / 16%);
}
.block-titled-green .tg-title {
	position: relative;
	margin: calc(var(--tg-top) * -1) auto calc(var(--tg-pad) * 1);

	text-align: center;
}
.block-titled-green .tg-title > .sub {
	position: relative;
	display: inline-block;
	padding: var(--tg-pad-title);
	min-width: 160px;
	max-width: 64%;
	font-size: 13px;
	background-color: var(--c-green2);
	color: white;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.block-titled-green .tg-title > .tg-corner-right {
	position: absolute;
	top: 4px;
	right: 0;

}

.logo-2letters {
	font-size: var(--f-sm);
	--size: 2.8em;
	position: relative;
	display: inline-block;
	width: var(--size);
	height: var(--size);
	line-height: var(--size);
	border-radius: var(--size);
	vertical-align: middle;
	text-align: center;
	text-transform: uppercase;
	color: white;
	background-color: var(--bg-light);
	cursor: default;
}