/* Sliding Squares Loading Spinner
   Inspired by https://www.uplabs.com/posts/slidin-squares-loader by Vitaly Silkin
   Implemented in CSS by Tom Adey */

@square: 26px;
@offset: 30px;
@squareSmall: 20px;
@offsetSmall: 24px;
@duration: 2.4s;
@delay: 0.2s;
@timing: ease-in-out;
@inDuration: 0.4s;
@inDelay: 0.1s;
@inTiming: ease-out;
@color: #2ee636;
#vc_overlay_spinner:before {
  display: none !important;
}
#ut_preloader,.ut_preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 50022;
  background: #fff;
  .loadingspinner {
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: rgba(0, 0, 0, 0.65);
    border-bottom-color: rgba(0, 0, 0, 0.15);
    border-left-color: rgba(0, 0, 0, 0.65);
    border-right-color: rgba(0, 0, 0, 0.15);
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
    div {
      display: none;
    }
  }

  @keyframes spin {
    to { -webkit-transform: rotate(360deg); }
  }
  @-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
  }
  //.loadingspinner {
  //  width: calc( 3 * @offset + @square);
  //  height: calc( 2 * @offset + @square);
  //  padding: 0;
  //  position: absolute;
  //  margin: auto;
  //  top: 0;
  //  left: 0;
  //  right: 0;
  //  bottom: 0;
  //}
  //&.small {
  //  .loadingspinner {
  //    width: calc(3 * @offsetSmall + @squareSmall);
  //    height: calc(2 * @offsetSmall + @squareSmall);
  //    div {
  //      width: @squareSmall;
  //      height: @squareSmall;
  //    }
  //  }
  //  .loadingspinner #square1,.loadingspinner .square1  {
  //    left: calc( 0 * @offsetSmall );
  //    top:  calc( 0 * @offsetSmall );
  //    animation: square1_small @duration @delay @timing infinite,
  //  }
  //
  //  .loadingspinner #square2,.loadingspinner .square2 {
  //    left: calc( 0 * @offsetSmall );
  //    top:  calc( 1 * @offsetSmall );
  //    animation: square2_small @duration @delay @timing infinite,
  //  }
  //
  //  .loadingspinner #square3,.loadingspinner .square3 {
  //    left: calc( 1 * @offsetSmall );
  //    top:  calc( 1 * @offsetSmall );
  //    animation: square3_small @duration @delay @timing infinite,
  //
  //  }
  //
  //  .loadingspinner #square4,.loadingspinner .square4 {
  //    left: calc( 2 * @offsetSmall );
  //    top:  calc( 1 * @offsetSmall );
  //    animation: square4_small @duration @delay @timing infinite,
  //
  //  }
  //
  //  .loadingspinner #square5,.loadingspinner .square5 {
  //    left: calc( 3 * @offsetSmall );
  //    top:  calc( 1 * @offsetSmall );
  //    animation: square5_small @duration @delay @timing infinite,
  //  }
  //}
  //
  //&.side {
  //  background: transparent;
  //  .loadingspinner {
  //    left: unset;
  //    top: unset;
  //    right: 60px;
  //    bottom: 60px;
  //    margin: unset;
  //  }
  //}
  //
  //.loadingspinner div {
  //  display: inline-block;
  //  background: @color;
  //  /*background: var(--text-color);*/
  //  /*box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);*/
  //  border: none;
  //  border-radius: 2px;
  //  width: @square;
  //  height: @square;
  //  position: absolute;
  //  padding: 0px;
  //  margin: 0px;
  //  font-size: 6pt;
  //  color: black;
  //}
  //
  //.loadingspinner #square1,.loadingspinner .square1 {
  //  left: calc( 0 * @offset );
  //  top:  calc( 0 * @offset );
  //  animation: square1 @duration @delay @timing infinite,
  //  squarefadein @inDuration calc(1 * @inDelay) @inTiming both;
  //}
  //
  //.loadingspinner #square2,.loadingspinner .square2 {
  //  left: calc( 0 * @offset );
  //  top:  calc( 1 * @offset );
  //  animation: square2 @duration @delay @timing infinite,
  //  squarefadein @inDuration calc(1 * @inDelay) @inTiming both;
  //}
  //
  //.loadingspinner #square3,.loadingspinner .square3 {
  //  left: calc( 1 * @offset );
  //  top:  calc( 1 * @offset );
  //  animation: square3 @duration @delay @timing infinite,
  //  squarefadein @inDuration calc(2 * @inDelay) @inTiming both;
  //}
  //
  //.loadingspinner #square4,.loadingspinner .square4 {
  //  left: calc( 2 * @offset );
  //  top:  calc( 1 * @offset );
  //  animation: square4 @duration @delay @timing infinite,
  //  squarefadein @inDuration calc(3 * @inDelay) @inTiming both;
  //}
  //
  //.loadingspinner #square5,.loadingspinner .square5 {
  //  left: calc( 3 * @offset );
  //  top:  calc( 1 * @offset );
  //  animation: square5 @duration @delay @timing infinite,
  //  squarefadein @inDuration calc(4 * @inDelay) @inTiming both;
  //}
  //@keyframes square1 {
  //  0%      {left: calc( 0 * @offset ); top: calc( 0 * @offset ); }
  //  8.333%  {left: calc( 0 * @offset ); top: calc( 1 * @offset ); }
  //  100%    {left: calc( 0 * @offset ); top: calc( 1 * @offset ); }
  //}
  //
  //@keyframes square2 {
  //  0%      {left: calc( 0 * @offset ); top: calc( 1 * @offset ); }
  //  8.333%  {left: calc( 0 * @offset ); top: calc( 2 * @offset ); }
  //  16.67%  {left: calc( 1 * @offset ); top: calc( 2 * @offset ); }
  //  25.00%  {left: calc( 1 * @offset ); top: calc( 1 * @offset ); }
  //  83.33%  {left: calc( 1 * @offset ); top: calc( 1 * @offset ); }
  //  91.67%  {left: calc( 1 * @offset ); top: calc( 0 * @offset ); }
  //  100%    {left: calc( 0 * @offset ); top: calc( 0 * @offset ); }
  //}
  //
  //@keyframes square3 {
  //  0%,100% {left: calc( 1 * @offset ); top: calc( 1 * @offset ); }
  //  16.67%  {left: calc( 1 * @offset ); top: calc( 1 * @offset ); }
  //  25.00%  {left: calc( 1 * @offset ); top: calc( 0 * @offset ); }
  //  33.33%  {left: calc( 2 * @offset ); top: calc( 0 * @offset ); }
  //  41.67%  {left: calc( 2 * @offset ); top: calc( 1 * @offset ); }
  //  66.67%  {left: calc( 2 * @offset ); top: calc( 1 * @offset ); }
  //  75.00%  {left: calc( 2 * @offset ); top: calc( 2 * @offset ); }
  //  83.33%  {left: calc( 1 * @offset ); top: calc( 2 * @offset ); }
  //  91.67%  {left: calc( 1 * @offset ); top: calc( 1 * @offset ); }
  //}
  //
  //@keyframes square4 {
  //  0%      {left: calc( 2 * @offset ); top: calc( 1 * @offset ); }
  //  33.33%  {left: calc( 2 * @offset ); top: calc( 1 * @offset ); }
  //  41.67%  {left: calc( 2 * @offset ); top: calc( 2 * @offset ); }
  //  50.00%  {left: calc( 3 * @offset ); top: calc( 2 * @offset ); }
  //  58.33%  {left: calc( 3 * @offset ); top: calc( 1 * @offset ); }
  //  100%    {left: calc( 3 * @offset ); top: calc( 1 * @offset ); }
  //}
  //
  //@keyframes square5 {
  //  0%      {left: calc( 3 * @offset ); top: calc( 1 * @offset ); }
  //  50.00%  {left: calc( 3 * @offset ); top: calc( 1 * @offset ); }
  //  58.33%  {left: calc( 3 * @offset ); top: calc( 0 * @offset ); }
  //  66.67%  {left: calc( 2 * @offset ); top: calc( 0 * @offset ); }
  //  75.00%  {left: calc( 2 * @offset ); top: calc( 1 * @offset ); }
  //  100%    {left: calc( 2 * @offset ); top: calc( 1 * @offset ); }
  //}
  //
  //@keyframes squarefadein {
  //  0%      {transform: scale(0.75); opacity: 0.0;}
  //  100%    {transform: scale(1.0); opacity: 1.0;}
  //}
  //
  //@keyframes square1_small {
  //  0%      {left: calc( 0 * @offsetSmall ); top: calc( 0 * @offsetSmall ); }
  //  8.333%  {left: calc( 0 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //  100%    {left: calc( 0 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //}
  //
  //@keyframes square2_small {
  //  0%      {left: calc( 0 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //  8.333%  {left: calc( 0 * @offsetSmall ); top: calc( 2 * @offsetSmall ); }
  //  16.67%  {left: calc( 1 * @offsetSmall ); top: calc( 2 * @offsetSmall ); }
  //  25.00%  {left: calc( 1 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //  83.33%  {left: calc( 1 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //  91.67%  {left: calc( 1 * @offsetSmall ); top: calc( 0 * @offsetSmall ); }
  //  100%    {left: calc( 0 * @offsetSmall ); top: calc( 0 * @offsetSmall ); }
  //}
  //
  //@keyframes square3_small {
  //  0%,100% {left: calc( 1 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //  16.67%  {left: calc( 1 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //  25.00%  {left: calc( 1 * @offsetSmall ); top: calc( 0 * @offsetSmall ); }
  //  33.33%  {left: calc( 2 * @offsetSmall ); top: calc( 0 * @offsetSmall ); }
  //  41.67%  {left: calc( 2 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //  66.67%  {left: calc( 2 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //  75.00%  {left: calc( 2 * @offsetSmall ); top: calc( 2 * @offsetSmall ); }
  //  83.33%  {left: calc( 1 * @offsetSmall ); top: calc( 2 * @offsetSmall ); }
  //  91.67%  {left: calc( 1 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //}
  //
  //@keyframes square4_small {
  //  0%      {left: calc( 2 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //  33.33%  {left: calc( 2 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //  41.67%  {left: calc( 2 * @offsetSmall ); top: calc( 2 * @offsetSmall ); }
  //  50.00%  {left: calc( 3 * @offsetSmall ); top: calc( 2 * @offsetSmall ); }
  //  58.33%  {left: calc( 3 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //  100%    {left: calc( 3 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //}
  //
  //@keyframes square5_small {
  //  0%      {left: calc( 3 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //  50.00%  {left: calc( 3 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //  58.33%  {left: calc( 3 * @offsetSmall ); top: calc( 0 * @offsetSmall ); }
  //  66.67%  {left: calc( 2 * @offsetSmall ); top: calc( 0 * @offsetSmall ); }
  //  75.00%  {left: calc( 2 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //  100%    {left: calc( 2 * @offsetSmall ); top: calc( 1 * @offsetSmall ); }
  //}

}