.card {
	position: relative;
	display: inline-block;

	width: calc(100% - 16px);
	max-width: 900px;
	padding: 5px;

	margin:auto;
	//margin-top: 8px;
	//margin-bottom: 16px;
	
	background-color: $c-w;

	@include clearfix;	
	@include bs-1;

	left: 50%;
	transform:translateX(-50%);
	@include transition(0.300s, stan)
	
	//pointer-events: none;
	//border: 0.2px solid red;               //←←←←←←←←←←←←←←←←←←←← 

}

.card-min-height{ 
	min-height: 106px !important;
	//border: 2px solid red;

}



//this is blank container that we use 
//to get others elements in the same proportion than the cards
.card-cont {
	position: relative;
	display: inline-block;
  
	width: calc(100% - 16px);
	max-width: 900px;
	left: 50%;
	top: 2px; /* kelvin */
	transform: translateX(-50%);
  
	@include clearfix;
  
	/* kelvin */
	& .textfield {
	  color: cs-black;
	  font-size: 14px;
	  letter-spacing: 0.25px;
	  font-weight: 500;
	  font-family: "Roboto" sans-serif;
  
	  margin-bottom: -5px;
  
	  & .label {
		color: $c-fb;
		font-size: 12px;
		font-weight: normal;
		letter-spacing: 0.4px;
		font-family: "Roboto" sans-serif;
	  }
	  /* kelvin */
	}
	//border: 0.2px solid red; //←←←←←←←←←←←←←←←←←←←←
  }

// .card-collapsed{
// 	transform: scaleY(0);
// 	border: 0.2px solid red;               //←←←←←←←←←←←←←←←←←←←← 
// }


.card-transparent {
	background-color: transparent;
	box-shadow: none;
  
	/* kelvin */
	& .font-card-title {
	  color: $cs-black;
	  font-size: 14px;
	  letter-spacing: 0.25px;
	  font-weight: 500;
	  font-family: "Roboto" sans-serif;
	}
  
	/* kelvin */
	& .checkbox {
	  & input[type="checkbox"] {
		transform: scale(0.7);
	  }
  
	  & label {
		color: $cs-black;
		font-size: 14px;
		letter-spacing: 0.25px;
		font-weight: 500;
		font-family: "Roboto" sans-serif;
	  }
	}
  
	//border: 1px solid $c-divider;
  }



// .card-click{
// 	pointer-events: auto !important;
// 	@include interaction-white;
// }