: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-radius: 0;
  border: none;
  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%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition-property: background-color, opacity, visibility;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
  width: 6rem;
  opacity: 0;
  visibility: hidden;
}
.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;
  visibility: visible;
  transition-delay: 1s;
}
.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);
}