svg {
   float: left;
}




@font-face {
	font-family: titleFont;
	src: url('fonts/F25_Executive.otf');
}


@font-face {
	font-family: labelFont;
	src: url('fonts/RobotoCondensed-Regular.ttf');
}

.scenario.card {
	height: 250px;
}


.type {
	display: inline-block;
		font-family: 'Roboto', sans-serif;

	display: inline-flex;
	flex-direction: row;
	padding: 2px;

	
}



.type .item-label {
	font-size: 85%;
	padding: 0px 7px 2px 2px;
	display: block;
}

.item {
	
	font-family: labelFont;
	font-weight: bold;
	display: inline-flex;
	flex-direction: row;
	
	width: 250px;
}



.type .tile {
	width: 28px;
	height: 28px;

	display: block;
}
.item .tile {
	width: 28px;
	height: 28px;

	display: inline-block;
}

.item-description {
	flex: 1;
	font-style: italic;
	display: inline-block;
	font-size: 10px;
}


.item-label {
	padding: 0px 9px 9px 9px;
	display: inline-block;
}

.card {
	font-family: labelFont;
	 vertical-align: top;
	position: relative;
	overflow: hidden;
	display: inline-flex;
	flex-direction: column;
    page-break-inside: avoid;
   
    text-align: center;
    background-color: white;
box-shadow: 1px 1px 20px rgba(0, 0, 0, .3);
    width: 250px;
    height: 170px;
    border: solid .5px rgba(0, 0, 0, .3);


}

.card-background {

}

.socket-col {
	position: relative;
}
.socket-col-side {

flex: .01;
}

.socket-col-main {

flex: 1;
display: flex;
flex-direction: row;
}

.socket-row {
	position: relative;
min-height: 10px;
	display: inline-flex;
}

.socket {
	 display: flex;
	 flex-direction: column;
	position: relative;
	flex: 1;
	
}

.socket-label {
	flex: 1;
		line-height: 90%;
	font-size: 12px;
}


.tile {
	
	vertical-align: bottom;
	margin: 0px auto;
border-radius: 10px;
border: 2px solid black;
		width: 40px;
	height: 40px;
	 background-size: 100% 100%;
    background-repeat: no-repeat;
}

.tile-optional {
	
	vertical-align: bottom;
	margin: 0px auto;
border-radius: 10px;
border: 2px dashed black;
		
}

.main {
display: flex;
	flex: 1;

}

.content-col {
	display: flex;
	flex-direction: column;
flex: 1;
display: flex;
	justify-content: center; /* align horizontal */
	align-items: center; /* align vertical */

}

.mod-col {
	flex: .02;
}



.card-content {
	min-height: 40px;
	min-width: 100px;
}




.card-details {
	font-size: 14px;
	line-height: 90%;
	font-style: italic;
}


.card-name {
	font-size: 20px;
	font-family: titleFont;
}



.scenario {
	text-align: center;

}
.scenario-title {
	padding: 10px;
	font-size: 16px;
	font-family: titleFont;
}
.scenario-details {
	font-size: 14px;
	padding: 10px;
}

.scenario-constraint {
	padding: 5px;

}