html, body {
    height: 100%;
  }
  
  /* body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Roboto", sans-serif;
    background-color: #123456;
  } */
  
  .spinner {
    display: inline-block;
    vertical-align: middle;
    -moz-animation: rotator 1.4s linear infinite;
    -webkit-animation: rotator 1.4s linear infinite;
    animation: rotator 1.4s linear infinite;
  }
  
  .path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    transform-origin: center;
    -moz-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
    -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
    animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
  }
  
  @-moz-keyframes rotator {
    0% {
      -moz-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -moz-transform: rotate(270deg);
      transform: rotate(270deg);
    }
  }
  @-webkit-keyframes rotator {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
    }
  }
  @keyframes rotator {
    0% {
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -moz-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -webkit-transform: rotate(270deg);
      transform: rotate(270deg);
    }
  }
  @-moz-keyframes colors {
    0%, 100% {
      stroke: #db4437;
    }
    25% {
      stroke: #0f9d58;
    }
    50% {
      stroke: #4285f4;
    }
    75% {
      stroke: #f4b400;
    }
  }
  @-webkit-keyframes colors {
    0%, 100% {
      stroke: #db4437;
    }
    25% {
      stroke: #0f9d58;
    }
    50% {
      stroke: #4285f4;
    }
    75% {
      stroke: #f4b400;
    }
  }
  @keyframes colors {
    0%, 100% {
      stroke: #db4437;
    }
    25% {
      stroke: #0f9d58;
    }
    50% {
      stroke: #4285f4;
    }
    75% {
      stroke: #f4b400;
    }
  }
  @-moz-keyframes dash {
    0% {
      stroke-dashoffset: 187;
    }
    50% {
      stroke-dashoffset: 46.75;
      -moz-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    100% {
      stroke-dashoffset: 187;
      -moz-transform: rotate(450deg);
      transform: rotate(450deg);
    }
  }
  @-webkit-keyframes dash {
    0% {
      stroke-dashoffset: 187;
    }
    50% {
      stroke-dashoffset: 46.75;
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    100% {
      stroke-dashoffset: 187;
      -webkit-transform: rotate(450deg);
      transform: rotate(450deg);
    }
  }
  @keyframes dash {
    0% {
      stroke-dashoffset: 187;
    }
    50% {
      stroke-dashoffset: 46.75;
      -moz-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
    }
    100% {
      stroke-dashoffset: 187;
      -moz-transform: rotate(450deg);
      -ms-transform: rotate(450deg);
      -webkit-transform: rotate(450deg);
      transform: rotate(450deg);
    }
  }
  .loading-pay-container {
    padding: 20px;
    position: relative;
    width: 300px;
    height: auto;
  }
  .loading-pay-container div {
    text-align: center;
  }
  .loading-pay-container div:not(:last-child) {
    margin-bottom: 30px;
  }
  .loading-pay-container div:nth-of-type(1) svg {
    width: 80px;
    height: 80px;
  }
  .loading-pay-container div:nth-of-type(2) svg {
    width: 40px;
    height: 40px;
  }
  .loading-pay-container div:nth-of-type(3) svg {
    width: 26.66667px;
    height: 26.66667px;
  }
  .loading-pay-container div:nth-of-type(4) svg {
    width: 20px;
    height: 20px;
  }
  [v-cloak] {
    display: none;
  }

  .btn-default {
    background-color: darkslategrey;
    color: #fff !important;
  }

  .btn-default:hover, .btn-default:focus {
    background-color: rgb(96, 110, 110);
    color: #fff !important;
  }