/* 
 * Style used by the label output mode.
 * Applied to the error labels that get positioned after an input.
 */

.validity-tooltip:hover {
	background-color: #F3F3F3;
	text-decoration: underline;
	cursor:not-allowed;
}
.validity-tooltip{
	position:absolute;
	height: auto;
	width: auto;
	margin-left:22px;
	margin-right:22px;
	display:inline-block;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: outset;
	border-right-style: outset;
	border-bottom-style: outset;
	border-left-style: outset;
	padding-top: 6px;
	padding-right: 6px;
	padding-bottom: 7px;
	padding-left: 6px;
	border-radius:8px;
	background-color: #F8F8F8;
	-o-box-shadow: 6px 6px 6px 0px #BFBFBF;
	-moz-box-shadow:  6px 6px 6px 0px #BFBFBF;
	-webkit-box-shadow:  6px 6px 6px 0px #BFBFBF;
	box-shadow:  6px 6px 6px 0px #BFBFBF;
	text-align:center;
	font-size:0.7rem;
	text-shadow:3px 3px 8px #bbb;
	white-space:pre-line;
	z-index: 99999;
}

.validity-tooltip:before, .validity-tooltip:after{
content:'';
position:absolute;
}
.validity-tooltip:before{
	bottom:-4px;
	left: 2px;
	width:13px;
	height:10px;
	-webkit-transform:rotate(30deg) skewX(45deg);
	-moz-transform:rotate(30deg) skewX(45deg);
	-ms-transform:rotate(30deg) skewX(45deg);
	-o-transform:rotate(30deg) skewX(45deg);
	transform:rotate(30deg) skewX(45deg);
	-o-box-shadow: 6px 6px 6px 0px #BFBFBF;
	-moz-box-shadow:  6px 6px 6px 0px #BFBFBF;
	-webkit-box-shadow:  6px 6px 6px 0px #BFBFBF;
	box-shadow:  6px 6px 6px 0px #BFBFBF;
	background-color: #F3F3F3;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-left-radius:200px;
	border-top-color: #EBEBEB;
	border-right-color: #646464;
	border-bottom-color: #646464;
	border-left-color: #EBEBEB;
	z-index:2;
}

.validity-tooltip:after {
	bottom: 1px;
	width: 12px;
	height: 8px;
	left: 3px;
	background-color:#F8F8F8;
	z-index: 5;
}

/* реверсивный т.е. нога  справо*/
.validity-tooltip.reverse:before{
	left:calc(100% - 15px);
	-webkit-transform:rotate(90deg) skewX(45deg);
	-moz-transform:rotate(90deg) skewX(45deg);
	-ms-transform:rotate(90deg) skewX(45deg);
	-o-transform:rotate(90deg) skewX(45deg);
	transform:rotate(90deg) skewX(45deg);
}

.validity-tooltip.reverse:after {
	bottom: 1px;
	left: calc(100% - 14px);
}