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


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



.padding {
	flex: 1;
}

.card {
	vertical-align: top;
	position: relative;
	overflow: hidden;
	display: inline-flex;
	flex-direction: column;
    page-break-inside: avoid;
   
    text-align: center;
	
}

.card.selected {

	box-shadow: 0px 0px 0px 5px hsla(220, 50%, 50%, 1), 0px 3px 5px 5px hsla(0, 0%, 0%, 1) !important;
}

.label {
	font-family: labelFont;
	line-height: 90%;

}

.row {
	flex-direction: row;
		 display: flex;
}


.row-content {

  justify-content: center;
  align-items: center;
	flex: 1;
}

.row-side {
	display: flex;
}

.row-left .socket {
	text-align: left;
}

.row-right .socket {
	text-align: right;
}


.row-center .socket {
	text-align: center;
}

.row-input .label {
	margin-top: 0px;
}
.row-output .sublabel {
	margin-top: auto;
	vertical-align: bottom;
}


.row-content .row-center {
	flex-direction: column;
}

.row-center {
	 justify-content: space-around;
	flex: 1;
	
	display: flex;
}


i {
	font-size: 110%;
}

.title {
	font-family: titleFont;

}

.desc {
	font-size: 80%;
	font-family: labelFont;
}


.desc-holder {
	flex: 1;
	flex-direction: column;
	display: flex;
}

.desc-spacer {
	
	flex: 1;
}



.card-input .row-input {

	background: hsla(220, 90%, 60%, .5);
}


.card-output .row-output {

	background: hsla(3, 90%, 60%, .5);
}

.card-inputMod .row-input {

	background: hsla(220, 90%, 60%, .5);
}


.card-outputMod .row-output {

	background: hsla(3, 90%, 60%, .5);
}

.tile {
box-sizing: border-box;
	
background: hsla(290, 50%, 30%, .5);
 background-size: 100% 100%;
    background-repeat: no-repeat;
	border-style: solid;
	

}

.tile.optional {
	border-style: dotted;

}



.socket {
	margin: 2px;
	flex: 1;
	display: flex;
	flex-direction: column;

	
	text-align: center;
	font-family: labelFont;
}

.tile {
margin-left: auto;
margin-right: auto;
width: 50px;
height: 50px;
 
}

.row-right .tile {

margin-right: 0px;
}

.row-left .tile {

margin-left: 0px;
}



.ifblock {
	display: flex;
	flex-direction: row;
}

.arrow-center {
}
.arrow-left {
	width: 0; 
  height: 0; 
  
  border-right:10px solid black; 
}

.arrow-right {
	 width: 0; 
  height: 0; 
  
  border-left: 10px solid black;
}


.scenario-card .title  {

	padding: 10px;
}
.scenario-card p {
	margin: 10px;
}
.scenario-card .desc  {

	padding: 10px;
}