/* green_tick.css - the animated green tick drawn by ui_view.render_green_tick() (and its JS twin, green_tick_html()
   in ats/js/ats_and_hub.js), which the admin, ATS, hub and candidate helpers all call. Linked in every head:
   admin/zheaderadmin.cfm, ats/zoneverypage-recruiters.cfm, hub_view's head and candidate_header_bootstrap_v5.cfm.
   The green-tick skill has the rest.

   The ring draws itself round, floods green, then the white tick draws in and the whole thing gives a
   small bounce - about 1.2s end to end. Plays once each time the markup lands in the page, so a tick
   injected into a modal by AJAX animates as well as one rendered with the page. */

.green_tick {
	display: block;
	width: 60px;
	height: 60px;
	margin: 0 auto;
	border-radius: 50%;
	stroke: #fff;
	stroke-width: 3;
	stroke-miterlimit: 10;
	box-shadow: inset 0 0 0 #5cb85c;
	animation: green_tick_fill 0.4s ease-in-out 0.4s forwards, green_tick_bounce 0.3s ease-in-out 0.9s both;
}

.green_tick_circle {
	fill: none;
	stroke: #5cb85c;
	stroke-width: 2;
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	animation: green_tick_draw 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.green_tick_check {
	fill: none;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: green_tick_draw 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes green_tick_draw {
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes green_tick_fill {
	100% {
		box-shadow: inset 0 0 0 40px #5cb85c;
	}
}

@keyframes green_tick_bounce {
	0%, 100% {
		transform: none;
	}
	50% {
		transform: scale(1.1);
	}
}