body {
  background-color: #f2f6fa;
}

.splash-screen {
  height: 100%;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: lighter !important;
  font-size: 14px !important;
  font-weight: bold;
  line-height: normal !important;
}


.splash-screen-line{
  -webkit-animation: splashing 1s ease forwards;
  border-top: 1px dotted #6303dc;
  position: absolute;
  top: calc(50% - 10px);
  left: 50%;
}

.splash-spinner {
  position: absolute;
  top: calc(50% - 100px);
  left:calc(50% - 40px);
  animation-duration: 2s;
}

.splash-screen-text {
   padding-top: 10px;
   position: absolute;
   top: calc(50% - 30px);
   left:calc(50% - 150px);
   text-align: center;
   color: #6303dc;
   margin-top: 20px;
   font-weight: bold;
   width: 300px;
  animation-duration: 2s;
 }

.splash-jump-in {
  animation-name: splash-jump-in;
  animation-timing-function: ease;
}

@keyframes splash-jump-in {
  0%   { transform: scale(1,1)      translateY(-100px); }
  10%  { transform: scale(1.1,.9)   translateY(0); }
  30%  { transform: scale(.9,1.1)   translateY(-100px); }
  50%  { transform: scale(1.05,.95) translateY(0); }
  57%  { transform: scale(1,1)      translateY(-7px); }
  64%  { transform: scale(1,1)      translateY(0); }
  98% { transform: scale(1,1)      translateY(0); }
  100% { transform: scale(1,1)      translateY(0); }
}

@-webkit-keyframes splashing {
  from { width: 0; }
  to { left: calc(50% - 150px); width: 300px; }
}


.sympl-spinner svg text {
  fill:#6100dc;
}

.sympl-spinner svg path {
  fill:#6100dc;
}

sympl-spinner .sympl-spinner-line line {
  stroke:#6100dc;
  stroke-linecap: round;
  stroke-width: 4px;
}