/*
bg-card is a basic card block that adds shadow.
This block is outdated and not used much in modern templates.
TODO: refactor.
*/
.bg-card {
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.28);
}

.bg-card--gray-border {
  border: 1px solid #ccc;
}

.bg-card .card-header p {
  font-size: 23px;
  margin-left: 16px;
}

.bg-blue {
  background: #f5f5f5;
}

/*
card block is present mainly in the analytics page
and home pages of user and dist.
*/
.card-header {
  padding: 1px;
  margin-bottom: 14px;
  width: 100%;
  background: #f5f5f5;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

.card__container--float-right {
  float: right;
}

.card__title--s{
	font-size: 18px;
}

.card__title-container{
	float: left;
	max-width:1000px;
}

.card__body {
  border-radius: 4px;
  background-color: #ffff;
}

.card__body--empty{
	height:240px;
}

.card__header-half {
  width: 50%;
  float: left;
}

@media all and (max-width: 980px) {
  .card__container--float-right {
    float: none;
  }
}

.card{
	/* background-color:#ffff;
	box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.28); */
	padding:12px;
	border-radius: 6px;
	background-color: #f6f6f6;
}

.card::after{
	clear: both;
	display: table;
	content:""

}

.card__header-container{
	position:relative;
}

.card__header{
	margin:0px;
	margin-top:2px;
	color:#ef7d00;

}

.card__text{
	text-align:justify;
	max-height:40px;
	transition:all .3s;
	overflow:hidden;

}


.card__date{
    font-weight: 300;
    margin: 2px 0px;
	display: block;
	
}

.card__expand-button{
	float:right;
	margin-bottom:-10px;
	color:#ef7d00;
	transition:all .2s;
}

.card__expand-input:checked ~ .card__expand-button--rotate-180{
	transform:rotateZ(-180deg);
}

.card__expand-input{
	display:none;
}

.card__expand-body{
	/* display: none; */
	max-height:0px;
	overflow:hidden;
	visibility: hidden;
	transition: max-height .5s, visibility .4s ease-in, display 10s ease;
}

.test-expand{
	border: 1px solid transparent;
}

.card__expand-input:checked ~ .card__text {
	max-height:1000px;
}

.card__expand-input:checked ~ .card__expand-body {
	max-height:1000px;
	visibility:visible;
	/* display:block; */
}

.gray-bottom-border-item:not(:last-child) {
	border-bottom: 4px solid #f6f6f6;
}

@media all and (max-width: 1690px) {
	.card--number-box .card__title-container{
		max-width: 120px;
	}

}

@media all and (max-width: 1280px) {
	.card--number-box .card__title-container{
		max-width:90px;
	}

	.card--number-box .card__title--s{
		font-size:13px;
	} 
 }
@media all and (max-width: 980px) {
	.card--number-box .card__title-container{
		max-width:none;
	}
	.card--number-box .card__title--s{
		font-size:24px;
	} 
}