/* Please ❤ this if you like it! */

@import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext,vietnamese');
@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext');

:root {
	font-size: 20px;
	--red: #da2c4d;
	--yellow: #f8ab37;
	--green: #2ecc71;
	--white: #ffffff;
	--grey: #ecedf3;
	--black-blue: #1f2029;
	--black-blue-light-3: #4b4d64;
	--theme-color: #ffaa46;
	--theme-shadow: rgba(255,170,70,0.75);
}

/* Monte page CrazySpirits */
.progress-wrap {
    position: fixed;
    right: 24px;
    bottom: 28px;
    width: 58px;
    height: 58px;
    cursor: pointer;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(
        circle,
        rgba(205,92,92,0.45) 0%,
        rgba(170,55,55,0.25) 35%,
        rgba(70,15,15,0.12) 68%,
        rgba(0,0,0,0.03) 100%
    );
    box-shadow:
        0 0 0 2px rgba(205,92,92,0.25),
        0 0 8px rgba(205,92,92,0.35),
        0 0 18px rgba(120,20,20,0.50),
        0 0 24px rgba(0,0,0,0.75),
        inset 0 0 10px rgba(255,255,255,0.04);
    filter: drop-shadow(0 0 3px rgba(205,92,92,0.30));
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.progress-wrap.active-progress {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.progress-wrap:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--theme-shadow) 65%, transparent),
        0 0 10px color-mix(in srgb, var(--theme-shadow) 65%, transparent),
        0 0 18px rgba(0,0,0,0.80),
        inset 0 0 10px rgba(255,255,255,0.10);
    filter: drop-shadow(0 0 4px var(--theme-shadow));
    border-radius: 50%;
}

.progress-wrap::before,
.progress-wrap::after {
	display: none !important;
	content: none !important;
}

.progress-arrow {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: Arial, sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #ffffff;
	line-height: 1;
	z-index: 5;
	pointer-events: none;
	text-shadow:
		0 0 5px #000,
		0 0 10px var(--theme-shadow),
		0 0 18px rgba(255,170,70,0.75);
	transition: all 200ms linear;
}

.progress-wrap:hover .progress-arrow {
	transform: translate(-50%, -62%) scale(1.15);
	color: #fff;
	text-shadow:
		0 0 6px #000,
		0 0 14px var(--theme-shadow),
		0 0 22px rgba(255,170,70,0.9);
}

.progress-wrap svg {
	position: absolute;
	top: 49%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 58px;
	height: 58px;
	z-index: 3;
}

.progress-wrap svg path {
	fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: #f5f5f5;
    stroke-width: 3;

    stroke-dasharray: 307;
    stroke-dashoffset: 307;

    filter:
        drop-shadow(0 0 4px #000)
        drop-shadow(0 0 5px var(--theme-shadow));

    transition: stroke-dashoffset 10ms linear;
}