:root {
	--ms-blue: #0067b8;
}

.jsgif-canvas-wrap {
	display: inline-flex;
	height: 0;
	max-width: 100%;
	position: relative;
	width: 100%;
}

.jsgif-canvas {
	height: auto;
	left: 0;
	max-width: 100%;
	position: absolute;
	top: 0;
	width: 100%;
}

.jsgif-canvas__button {
	background-color: rgba(47, 47, 47, 0.2);
	border: none;
	border-radius: 0;
	bottom: 0;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transition: background-color 300ms cubic-bezier(0.8, 0, 0.2, 1);
	width: 100%;
}

.jsgif-canvas__button::after,
.jsgif-canvas__button::before {
	background-color: var(--ms-blue);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50%;
	border-radius: 100%;
	content: "";
	height: 6rem;
	left: 50%;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition-duration: 300ms;
	transition-property: background-color, opacity, visibility;
	transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
	visibility: hidden;
	width: 6rem;
}

.jsgif-canvas__button::after {
	background-image: url("data:image/svg+xml,%3Csvg height='48' viewBox='0 0 48 48' width='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m17.75 7c1.7949254 0 3.25 1.45507456 3.25 3.25v27.5c0 1.7949254-1.4550746 3.25-3.25 3.25h-5.5c-1.7949254 0-3.25-1.4550746-3.25-3.25v-27.5c0-1.79492544 1.4550746-3.25 3.25-3.25zm18 0c1.7949254 0 3.25 1.45507456 3.25 3.25v27.5c0 1.7949254-1.4550746 3.25-3.25 3.25h-5.5c-1.7949254 0-3.25-1.4550746-3.25-3.25v-27.5c0-1.79492544 1.4550746-3.25 3.25-3.25z' fill='%23fff'/%3E%3C/svg%3E");
}

.jsgif-canvas__button::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M13.75 8.412l24.417 12.705a3.25 3.25 0 010 5.766L13.75 39.588A3.25 3.25 0 019 36.705v-25.41a3.25 3.25 0 014.549-2.98l.201.097z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E");
}

.jsgif-canvas__button:focus, .jsgif-canvas__button:hover {
	background-color: rgba(47, 47, 47, 0.1);
}

.jsgif-canvas__button:focus:not(.focus-visible), .jsgif-canvas__button:hover:not(.focus-visible) {
	outline: none;
}

.jsgif-canvas__button:focus:not(:focus-visible), .jsgif-canvas__button:hover:not(:focus-visible) {
	outline: none;
}

.jsgif-canvas__button[data-playing=false]::after {
	opacity: 0;
	visibility: hidden;
}

.jsgif-canvas__button[data-playing=false]::before {
	opacity: 1;
	visibility: visible;
}

.jsgif-canvas__button[data-playing=true] {
	background-color: transparent;
}

.jsgif-canvas__button[data-playing=true]::after, .jsgif-canvas__button[data-playing=true]::before {
	opacity: 0;
	visibility: hidden;
}

.jsgif-canvas__button[data-playing=true]:hover::after {
	opacity: 1;
	transition-delay: 1s;
	visibility: visible;
}

.jsgif-canvas__button[disabled] {
	cursor: wait;
}

.jsgif-canvas__button[disabled]::after, .jsgif-canvas__button[disabled]::before {
	background-color: #737373;
}

.jsgif-canvas__button[disabled]:focus, .jsgif-canvas__button[disabled]:hover {
	background-color: rgba(47, 47, 47, 0.2);
}