@media only screen and (min-device-width: 801px) {
	.summary {
		grid-area: summary;
		display: grid;
		grid-template-columns: 69px 69px 69px 69px 69px;
		grid-template-rows: 50px 30px;
		grid-template-areas: 
			"ps_icon motivation_icon recon_icon risk_icon supply_icon"
			"ps_value motivation_value recon_value risk_value supply_value";
		font-size: 130%;
		font-style: italic;
		font-weight: bold;
		text-align: left;
		background-repeat: no-repeat;
	}
}
@media only screen and (max-device-width: 800px) {
	.summary {
		grid-area: summary;
		display: grid;
		grid-template-columns: 69px 69px 69px 69px 69px;
		grid-template-rows: 50px 30px;
		grid-template-areas: 
			"ps_icon motivation_icon recon_icon risk_icon supply_icon"
			"ps_value motivation_value recon_value risk_value supply_value";
		font-size: 100%;
		font-style: italic;
		font-weight: bold;
		text-align: left;
		background-repeat: no-repeat;
	}
}
.rosterRecon>.rosterTitle>.summary {
	background-image: url(../../../img/statistic-recon.png);
}
.rosterTask>.rosterTitle>.summary {
	background-image: url(../../../img/statistic-task.png);
}

.summaryStrengthValue {
	grid-area: ps_value;
	text-align: center;
}

.summaryReconValue {
	grid-area: recon_value;
	text-align: center;
}

.summarySupplyValue {
	grid-area: supply_value;
	text-align: center;
}

.summarySupplyValueForbiden {
	color: red !important;
}

.summaryMotivationValue {
	grid-area: motivation_value;
	text-align: center;
}

.summaryRiskValue {
	grid-area: risk_value;
	text-align: center;
}

@media only screen and (min-device-width: 801px) {
	.summaryStrengthValue,
	.summaryReconValue,
	.summarySupplyValue,
	.summaryMotivationValue,
	.summaryRiskValue {
		margin-top: 9px;
		margin-left: 32px;
		color: #ffffff;
	}
}

@media only screen and (max-device-width: 800px) {
	.summaryStrengthValue,
	.summaryReconValue,
	.summarySupplyValue,
	.summaryMotivationValue,
	.summaryRiskValue {
		margin-top: 11px;
		margin-left: 32px;
		color: #ffffff;
	}
}


.summaryStrengthImg {
	grid-area: ps_icon;
}

.summaryReconImg {
	grid-area: recon_icon;
}

.summarySupplyImg {
	grid-area: supply_icon;
}

.summaryMotivationImg {
	grid-area: motivation_icon;
}

.summaryRiskImg {
	grid-area: risk_icon;
}

.summaryStrengthImg,
.summaryReconImg,
.summarySupplyImg,
.summaryMotivationImg,
.summaryRiskImg {
	margin-top: 10px;
}

.strengthImgHeader,
.reconImgHeader,
.supplyImgHeader,
.motivationImgHeader,
.riskImgHeader {
	width: 25px;
}

.tooltipSummary {
	position:relative;
}
  
.tooltipSummary:before {
	display: none;
    content: attr(data-text);
    position: absolute;
    margin-left: 15px;
	top: 25px;
    background-color: #b7aba3;
    color: #000;
    text-align: left;
    border-radius: 6px;
    border: 5px solid #5d5f62;
    padding: 5px;
    position: absolute;
    z-index: 3;
    transition: opacity 1s;
    box-shadow: 0px 0px 0px 1px #fff inset;
}

.tooltipSummary:hover:before {
	display:block;
}