// data box used for dashboard
.dcard{
	font-size: 1.2em;
	margin: 0 5px 10px;
	border-radius: 0.25rem;
	background-color: rgba(255,255,255,0.8);
	color: #555;
	padding: 10px 1.5em;
	opacity: 0.8;
	transition-duration:0.3s;
	transition-property:opacity, background-color, border;
	min-height: 100px;
	max-height:100px;
	border:1px solid transparent;
	position:relative;
	overflow:hidden;

	@include flexbox();
	@include align-items(center);
	@include justify-content(center);
	@include flex-direction(column);
}
.dcard:hover{
	opacity: 1;
	background-color: rgba(255,255,255,1);
}
a.dcard:hover{
	border-color:#bbb;
}
.dcard h1,.dcard h2,.dcard h3,.dcard h4,.dcard h5{
	margin:0;
}
.dcard .fc-mute{
	font-weight: 100;
}


.dcard.x07{height:70px;min-height:70px;max-height:70px;overflow: hidden;padding: 0;display:block;}
.dcard.x1{height:100px;min-height:100px;max-height:100px;overflow: hidden;}
.dcard.x2{height:210px;min-height:210px;max-height:210px;overflow: hidden;}
.dcard.x3{height:320px;min-height:320px;max-height:320px;overflow: hidden;}
.dcard.x4{height:430px;min-height:430px;max-height:430px;overflow: hidden;}
.dcard.x5{height:540px;min-height:540px;max-height:540px;overflow: hidden;}


.dcard .chart{height:100px;}
.dcard.x2 .chart{height:210px;}
.dcard.x3 .chart{height:320px;}
.dcard.x4 .chart{height:430px;}

.dcard.x07 .value{font-size: 2em;text-align:center;font-weight:100;color: #363049;height: 50px;line-height:50px;}
.dcard.x07 .label{font-size: 0.8em;text-align:center;position: absolute;bottom: 0;right: 0;left: 0;min-height:20px;line-height: 10px;}



.dcard .progress{margin: 0}

.dcard.active{border-color:$blue;}
.dcard.active:before{
	position: absolute;
	display: block;
	border-top: 28px solid $blue;
	border-left: 28px solid transparent;
	right: 0;
	content: "";
	top: 0;
	z-index: 1;
}
.dcard.active:after{
    position: absolute;
    display: block;
    content: "";
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    height: 5px;
    width: 10px;
    right: 2px;
    top: 4px;
    z-index: 2;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.dcard[data-kerkere-status="open"]{border-color:$blue;}
.dcard[data-kerkere-status="open"]:before{
	position: absolute;
	display: block;
	border-top: 15px solid $blue;
	border-left: 15px solid transparent;
	right: 0;
	content: "";
	top: 0;
	z-index: 1;
}

.dcard img{width: 100%;}


.ltr .f .c:first-child .dcard{
	margin-left:0;
}
.ltr .f .c:last-child .dcard{
	margin-right:0;
}
.rtl .f .c:first-child .dcard{
	margin-right:0;
}
.rtl .f .c:last-child .dcard{
	margin-left:0;
}