/* Copyright Kidimedia BVBA, 2014.
   Niels Vanspauwen
*/

.keypad-popup {
	position: absolute;
	left: 0px;
	top: 0px;
}
.keypad-wrapper {
	display: inline-block;
}
.keypad {
	padding: 10px;
	display: inline-block;
	border-radius: 6px;
	box-shadow: 4px 4px 6px 0px rgba(50,50,50,0.75);
}

.key {
	display: inline-block;
	width: 50px;
	height: 50px;
	border: 1px ridge #474747;
	border-radius: 6px;
	margin: 4px;
	text-align: center;
	font-size: 28px;
	line-height: 58px;
	box-shadow: 1px 1px 1px 0px rgba(50,50,50,0.35);
  cursor: pointer;
}

.shiftup {
  position: relative;
  top: -3px;
}

.key.down {
	color: white;
}
.hidden-key {
	opacity: 0;
	pointer-events: none;
}
.clear-key {
	color: white;
}
.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 12px solid rgba(204, 204, 204, 0.6);
	margin-left: auto;
	margin-right: auto;
}

.numeric-input {
	background: white;
        vertical-align:text-top;
	border-radius: 4px;
	border: 2px solid gray;
	border-style:inset;
	min-width: 100px;
	display: inline-block;
        position: relative;
        padding: 4px 4px 0px 4px;
        top: -4px;
	font-size: 72px;
	/*line-height: 78px;*/
}
.numeric-input.narrow {
	/*width: 76px;*/
	text-align: center;
}
.numeric-input.focus {
	border-color: #34AADC;
}
.hider {
	opacity: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.numeric-value {
        vertical-align: top;
	min-width: 100px;
	display: inline-block;
	/*height: 76px;*/
	padding: 4px;
	/*font-size: 72px;*/
	/*line-height: 78px;        	*/
}
.numeric-value.narrow {
	min-width: 76px;
	text-align: center;
}

.numeric-partitioner {
	display: inline-block;
	vertical-align: top;
	margin-left: -90px;
	margin-right: -80px;
	position: relative;
}

.numeric-partitioner > div {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.numeric-partitioner-top-row .numeric-value {
	width: 100%;
	margin-bottom: 80px;
}

.numeric-partitioner-bottom-row .numeric-value, .numeric-partitioner-bottom-row .numeric-input {
	margin-left: 20px;
	margin-right: 20px;
}

.numeric-partitioner-connector {
	padding: 0px;
	margin: 0px; 
	height: 4px; 
	background-color: #000; 
	line-height:1px; 
	position:absolute; 
}

.numeric-input.numeric-input-correct {
	color: white;
	background: green;
	border-width: 0px;
}

.numeric-input.numeric-input-wrong {
	color: white;
	background: red;
	border-width: 0px;
}

.numeric-partitioner > svg {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top: 105px;
}