﻿      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      
      #startup {
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: #eeeeee;
        -moz-user-select: none;
        -webkit-user-select: none;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .spinner-container {
        animation: rotate 2s linear infinite;
        -webkit-animation: rotate 2s linear infinite;
      }
      
      .spinner-container .path {
        stroke-dasharray: 1, 150;
        /* 1%, 101% circumference */
        stroke-dashoffset: 0;
        stroke: rgba(209, 215, 219);
        stroke-linecap: round;
        animation: dash 1.5s ease-in-out infinite;
        -webkit-animation: dash 1.5s ease-in-out infinite;
      }
      
      @keyframes rotate {
        100% {
          transform: rotate(360deg);
        }
      }
      
      @keyframes dash {
        0% {
          stroke-dasharray: 1, 150;
          /* 1%, 101% circumference */
          stroke-dashoffset: 0;
        }
        50% {
          stroke-dasharray: 90, 150;
          /* 70%, 101% circumference */
          stroke-dashoffset: -35;
          /* 25% circumference */
        }
        100% {
          stroke-dasharray: 90, 150;
          /* 70%, 101% circumference */
          stroke-dashoffset: -124;
          /* -99% circumference */
        }
      }
      
      @-webkit-keyframes rotate {
        100% {
          transform: rotate(360deg);
        }
      }
      
      @-webkit-keyframes dash {
        0% {
          stroke-dasharray: 1, 150;
          /* 1%, 101% circumference */
          stroke-dashoffset: 0;
        }
        50% {
          stroke-dasharray: 90, 150;
          /* 70%, 101% circumference */
          stroke-dashoffset: -35;
          /* 25% circumference */
        }
        100% {
          stroke-dasharray: 90, 150;
          /* 70%, 101% circumference */
          stroke-dashoffset: -124;
          /* -99% circumference */
        }
      }
      
      .app-wrapper {
        width: 100%;
        height: 100%;
      }
      
      @media screen and (max-width: 600px) {
        body {
          overflow-x: auto;
        }
        .app-wrapper {
          width: 600px;
        }
      }