.js-cf7__field--valid,
.js-cf7__field--invalid,
.js-cf7__container--valid .selectric,
.js-cf7__container--invalid .selectric { transition: border .2s ease-in; }

/** Avoid overlapping with checkmark */
.js-cf7__field--valid,
.js-cf7__field--invalid { padding-right: 45px; }

/* Regular inputs */
.js-cf7__field--valid { border-color: #7cbf80; }
.js-cf7__field--invalid { border-color: #f43a3b; }

/* For Selectric */
.js-cf7__container--valid .selectric { border-color: #7cbf80; }
.js-cf7__container--invalid .selectric { border-color: #f43a3b; }


.js-cf7__container--valid:before,
.js-cf7__container--valid:after { 
	content: ''; 
	position: absolute;
	display: block;
	background-color: #7cbf80;
}

.js-cf7__container--valid:before {
	top: 20px;
	left: calc( 100% - 32px );
	right: 20px;
	width: 8px;
	height: 2px;
	transform: rotate( 45deg );
	transform-origin: left top;
	animation: checkLeft .1s ease-in;
	animation-fill-mode: forwards;
}

.js-cf7__container--valid:after {
	top: 25px;
	left: calc( 100% - 30px );
	right: 7px;
	width: 2px;
	height: 18px;
	transform: rotate( -135deg );
	transform-origin: right top;
	animation: checkRight .2s ease-in;
	animation-fill-mode: forwards;
}

@keyframes checkLeft {
	0% 		{ width: 0; }
	100% 	{ width: 8px; }
}

@keyframes checkRight {
	0% 		{ height: 0; } /* Cheating on the delay */
	50% 	{ height: 0; }
	100% 	{ height: 18px; }
}