/*
 * Copyright (C) 2013 - 2018, Logical Clocks AB and RISE SICS AB. All rights reserved
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this
 * software and associated documentation files (the "Software"), to deal in the Software
 * without restriction, including without limitation the rights to use, copy, modify, merge,
 * publish, distribute, sublicense, and/or sell copies of the Software, and to permit
 * persons to whom the Software is furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all copies or
 * substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS  OR IMPLIED, INCLUDING
 * BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL  THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
 * DAMAGES OR  OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 */

.loadingwrap {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 11;
    left: 0;
    top: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.75);
    overflow-x: hidden;
    transition: 0.5s;
}

.loading-content {
    display: flex;
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.loader-in-wrap {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #69717d;  
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    margin: auto;
}

.loader { 
    position:fixed;
    border-radius: 50%;
    animation: spin 2s linear infinite;
    margin: auto;
    left: 50%;
    top: 50%;
}

.loader.loader-lg {
    border: 16px solid #f3f3f3;
    border-top: 16px solid #69717d; 
    width: 120px;
    height: 120px;
}

.loader.loader-md {
    border: 10px solid #f3f3f3;
    border-top: 10px solid #69717d; 
    width: 80px;
    height: 80px;
}

.loader.loader-sm {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #69717d;  
    width: 60px;
    height: 60px;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-dots {
  font: 100 2em/150% Impact;
  text-align: center;}

.loading-dots:after {
  content: ' .';
  animation: dots 1s infinite;}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: black;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 black,
      .5em 0 0 white;}
  80%, 100% {
    text-shadow:
      .25em 0 0 black,
      .5em 0 0 black;}
}
