@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');


	/* Inserting this collapsed row between two flex items will make 
	 * the flex item that comes after it break to a new row */
	.flex_row_break {
	  flex-basis: 100%;
	  height: 0;
	}

	.card_container{
		display: flex;
		flex-wrap: wrap;
		gap:5px;
		padding-right:10px;
		padding-bottom:30px;
	}

	.card_menu{
		padding:20px;
	}

	.card_item{
		position: relative;

		flex-grow: 0;
		border:1px solid #ccc;
		border-radius: 3px;

		padding:10px;
		width: 70px;
		height: 110px;
		background-color: white;

		font-size: 13px;
		font-family: 'Oswald';
		color: gray;
		cursor: pointer;
		text-decoration: none;
	}

	.card_item img{

		width:81px;
		position:absolute;
		top:4px;
		left:4px;
		filter: grayscale(1);
		opacity: 1;
		border-radius: 3px;
		border: 0px solid black;
	}



	.card_item:hover{
		border:1px solid black;
		background-color: #f1f3f4;
		color: black;
		/*
		width: 110px;
		height: 120px;
		transition: height 1.0s;
		transition: width 1.0s;
		transition-delay: 0.5s;
		*/
	}

	.card_item_name{
		word-spacing: 100vw;
	}
	

	.card_item_category{
		font-size:10px;
		position:absolute;
	  	bottom: 15px;
		left:6px;
		text-transform: uppercase;
	}
	
	.card_item_category_stars{
		font-size:10px;
		position:absolute;
	  	bottom: 15px;
		right:8px;
	}

	.card_item_experience_meter{
		font-size:10px;
		position:absolute;
	  	bottom: 30px;
	  	width: 81px;
		left: 4px;
		border:0px solid red;
		opacity: 0.7;
		font-family: courier;

	}

	.card_item_company{
		
		font-size:10px;
		position: absolute;
	  	bottom: 2px;
	  	left: 5px;
	}


	.card_item_on{
		display: inline;
	}

	.card_item_off{
		display: none;
	}

	.card_over{
		background-color: yellow;
		transition: 0.4s;
		border: 1px solid black;
		/*display: none;*/
	}
	.card_out{
		background-color: white;
		border:1px solid #ccc;
		transition: 3.4s;
	}

	
.card_item_popup{
	display: none;

	position: absolute;
	z-index: 15;
	left: 15px;
	bottom: 9px;

	border: 1px solid gray;
	border-radius: 3px;
	box-shadow: 2px 2px 10px #bbbbbb;

	width:180px;
	min-height:160px;
	padding:10px;
	background-color: white;
	font-size:13px;
}