/*Likelihood*/

.blur-out {
    -webkit-filter: blur(8px);
    opacity: 0.1;
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    /*visibility: hidden;*/
}

#coinWrapper {
	display: inline-flex;
	align-items: center;
}

#coin {
	width:100px;
	height: 100px;
	background-image: url(../img/head.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
}

#coinButtons {
	display: inline-flex;
	flex-direction: column;
}

#coinButtons .btn {
	margin: 5px 0px;
}


.obserwowana rect {
	fill: #00d0a1;
}

.prawdopodobieństwa rect {
	fill: #64bdff;
	cursor: row-resize;
}


/*Expectation*/

#dieWrapper {
	display: inline-flex;
	align-items: center;
}

#die {
	width:100px;
	height: 100px;
	background-image: url(../img/dice_6.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
}

#dieButtons {
	display: inline-flex;
	flex-direction: column;
}

#dieButtons .btn {
	margin: 5px 0px;
}

#expected {
	fill: none;
	stroke:	#00d0a1;
	stroke-width: 2px;
}
#actual {
	fill: none;
	stroke:	#64bdff;
	stroke-width: 2px;
}

.axis path,
.axis line {
	fill: none;
	stroke: black;
	stroke-width: 2;
	shape-rendering: crispEdges;
}

.axis text {
	font-family: "Helvetica Neue";
	font-size: 11px;
	fill: black;
}

#avgFocus {
	color: #00d0a1;
	font-size: bold;
}

#expFocus {
	color: #64bdff;
}

#focusLine {
	fill: none;
	stroke: black;
	stroke-width: 1px;
}

.expectedCircle {
	fill: #64bdff;
	stroke: white;
	stroke-width: 2px;
}

.averageCircle {
	fill: #00d0a1;
	stroke: white;
	stroke-width: 2px;
}

/*Estimation*/
/*

.error {
	fill: none;
	stroke:	red;
	stroke-width: 0;
}

.estProperties{
	display: none;
	margin-top: 10px;
}

#estimation td {
	vertical-align: middle;
}*/


/*Variance*/

#cardWrapper {
	display: inline-flex;
	align-items: center;
}

#card {
	width: 75px;
	height: 100px;
	margin: 0 12.5px;
	background-image: url(../img/card_1.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	display: inline-block;
}

#cardButtons {
	display: inline-flex;
	flex-direction: column;
}

#cardButtons .btn {
	margin: 5px 0px;
}



input[type=checkbox] {
    display:none;
}

input[type=checkbox] + label {
    display:inline-block;
    padding: 0 0 0 0px;
    height: 80px;
    width: 50px;
    cursor: pointer;
}

input[type=checkbox]:checked + label {
	opacity: 0.25;
}

.label {
	fill: white;
	font-size: 15px;
	alignment-baseline: middle;
}

#one + label{
	background: url("../img/card_1.png") no-repeat;
	background-size: 100%;
}
#two + label{
	background: url("../img/card_2.png") no-repeat;
	background-size: 100%;
}
#three + label{
	background: url("../img/card_3.png") no-repeat;
	background-size: 100%;
}
#four + label{
	background: url("../img/card_4.png") no-repeat;
	background-size: 100%;
}
#five + label{
	background: url("../img/card_5.png") no-repeat;
	background-size: 100%;
}
#six + label{
	background: url("../img/card_6.png") no-repeat;
	background-size: 100%;
}
#seven + label{
	background: url("../img/card_7.png") no-repeat;
	background-size: 100%;
}
#eight + label{
	background: url("../img/card_8.png") no-repeat;
	background-size: 100%;
}
#nine + label{
	background: url("../img/card_9.png") no-repeat;
	background-size: 100%;
}
#ten + label{
	background: url("../img/card_10.png") no-repeat;
	background-size: 100%;
}