/*
 * Fonts
 */

@font-face {
    font-family: "Inter UI";
    font-weight: 400;
    src: url("/woff2/inter-ui/Inter-UI-Regular.woff2") format('woff2');
}

@font-face {
    font-family: "Inter UI";
    font-weight: 700;
    src: url("/woff2/inter-ui/Inter-UI-Bold.woff2") format('woff2');
}

@font-face {
    font-family: "Inter UI";
    font-weight: 400;
    font-style: italic;
    src: url("/woff2/inter-ui/Inter-UI-RegularItalic.woff2") format('woff2');
}

@font-face {
    font-family: "Inter UI";
    font-weight: 700;
    font-style: italic;
    src: url("/woff2/inter-ui/Inter-UI-BoldItalic.woff2") format('woff2');
}

/*
 * Core
 */

body {
    font-family: "Inter UI", sans-serif;
}
body.pf-unscrollable {
    overflow: hidden;
}
nav {
    -moz-user-select: none;
    user-select: none;
}
#pf-load-font-button-label,
#pf-load-svg-button-label {
    left: 1em;
    margin: 0;
}
#pf-settings-container {
    position: absolute;
    right: 1rem;
    bottom: 2rem;
    pointer-events: none;
    text-align: right;
}
#pf-toolbar {
    margin-right: 1rem;
}
#pf-settings {
    text-align: initial;
    user-select: none;
    -moz-user-select: none;
    opacity: 1.0;
    transition: opacity 300ms, transform 300ms, visibility 300ms;
    transform: translateY(0);
}
#pf-settings:not(.pf-invisible) {
    pointer-events: auto;
}
.pf-toolbar-button {
    pointer-events: auto;
}
.pf-toolbar-button.btn-outline-secondary:not(:hover) {
    background: rgba(255, 255, 255, 0.75);
}
#pf-file-select {
    position: absolute;
    visibility: hidden;
}
#pf-settings.pf-invisible {
    opacity: 0.0;
    transform: translateY(1em);
    visibility: hidden;
}
button > svg {
    width: 1.25em;
    display: block;
}
button > svg path {
    fill: currentColor;
}
.pf-pointer-events-none {
    pointer-events: none;
}
.pf-pointer-events-auto {
    pointer-events: auto;
}
#pf-rendering-options-group {
    right: 1em;
}
#pf-canvas {
    display: block;
    position: absolute;
    touch-action: none;
}
#pf-canvas.pf-draggable {
    cursor: grab;
    cursor: -webkit-grab;
}
#pf-canvas.pf-draggable.pf-grabbing {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}
#pf-fps-label {
    color: white;
    background: rgba(0, 0, 0, 0.75);
    width: 17em;
}
#pf-svg, #pf-svg * {
    visibility: hidden !important;
}
.pf-spinner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.pf-spinner-hidden {
    display: none !important;
}
.pf-display-none {
    display: none !important;
}
#pf-benchmark-results-modal .modal-body {
    overflow: scroll;
    max-height: 75vh;
}
.pf-benchmark-results-global {
    padding: 0.75rem;
}
.pf-benchmark-results-label {
    font-weight: bold;
}

/*
 * Arrow
 *
 * http://www.cssarrowplease.com/
 */

.pf-arrow-box:after, .pf-arrow-box:before {
	top: 100%;
	right: 22px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.pf-arrow-box:after {
	border-color: rgba(0, 0, 0, 0);
	border-top-color: white;
	border-width: 14px;
	margin-right: -14px;
}
.pf-arrow-box:before {
	border-color: rgba(0, 0, 0, 0);
	border-top-color: rgba(0, 0, 0, 0.125);
	border-width: 15px;
	margin-right: -15px;
}

#pf-zoom-pulse-button {
    padding: 16px 30px 16px 14px;
}

/* https://www.h3xed.com/web-development/how-to-make-css-play-pause-icons-with-a-single-div */
#pf-play-icon {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    margin: -6px 3px 0;
    border-top: 6px solid transparent;
    border-left: 12px solid currentColor;
    border-bottom: 6px solid transparent;
}

.github-corner {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    text-align: right;
}
.github-corner > svg {
    fill: #151513;
    color: #fff;
    height: 100%;
    width: auto;
}
.github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
}
@keyframes octocat-wave{
    0%, 100% {
        transform: rotate(0);
    }
    20%, 60% {
        transform: rotate(-25deg);
    }
    40%, 80% {
        transform: rotate(10deg);
    }
}
@media (max-width: 500px) {
    .github-corner:hover .octo-arm {
        animation: none;
    }
    .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out;
    }
}

/*
 * Spinner
 *
 * http://tobiasahlin.com/spinkit/
 */

.sk-fading-circle {
  margin: auto;
  width: 40px;
  height: 40px;
}

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}