/* In Progress */

.loading-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 1055;
}

.loading-wrapper.loading-ajax {
    position: absolute;
    padding: 1rem;
    background-color: transparent;
    display: block !important;
}

.loading-text {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #eee;
    font-size: 15px;
    text-align: center;
    text-transform: uppercase;
}

.loading-wrapper.loading-ajax .loading-text {
    color: #333;
}

.loading-text-table {
    display: block;
    color: rgb(0, 0, 0);
    font-size: 15px;
    text-align: center;
    text-transform: uppercase;
}

.loading-content {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 170px;
    height: 170px;
    /* margin: -85px 0 0 -85px; */
    border: 3px solid #fff;
}

.loading-content:after {
    content: "";
    position: absolute;
    border: 3px solid #fff;
    left: 15px;
    right: 15px;
    top: 15px;
    bottom: 15px;
}

.loading-content:before {
    content: "";
    position: absolute;
    border: 3px solid #fff;
    left: 5px;
    right: 5px;
    top: 5px;
    bottom: 5px;
}

.loading-content {
    border: 3px solid transparent;
    border-top-color: #ABF8FF;
    border-bottom-color: #ABF8FF;
    border-radius: 50%;
    -webkit-animation: loaders 2s linear infinite;
    -moz-animation: loaders 2s linear infinite;
    -o-animation: loaders 2s linear infinite;
    animation: loaders 2s linear infinite;
}

.loading-content:before {
    border: 3px solid transparent;
    border-top-color: #ABF8FF;
    border-bottom-color: #ABF8FF;
    border-radius: 50%;
    -webkit-animation: loader 3s linear infinite;
    -moz-animation: loader 2s linear infinite;
    -o-animation: loader 2s linear infinite;
    animation: loader 3s linear infinite;
}

.loading-content:after {
    border: 3px solid transparent;
    border-top-color: #ABF8FF;
    border-bottom-color: #ABF8FF;
    border-radius: 50%;
    -webkit-animation: loader 1.5s linear infinite;
    animation: loader 1.5s linear infinite;
    -moz-animation: loader 2s linear infinite;
    -o-animation: loader 2s linear infinite;
}

@keyframes loaders {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        -ms-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        -ms-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

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


/** Pulse */

div.dataTables_wrapper div.dataTables_processing {
    height: calc(170px + 2em);
    z-index: 9998
}

.pulse {
    overflow: visible;
    position: relative;
    z-index: 0;
}

i.pulse:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

i.pulse {
    width: 1.5rem;
    height: 1.5rem;
}

.pulse:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    transition: opacity .3s, transform .3s;
    animation: pulse-animation 1.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
    z-index: 1;
}

@keyframes pulse-animation {
    0% {
        opacity: 1;
        transform: scale(1)
    }
    50% {
        opacity: 0;
        transform: scale(1.5)
    }
    100% {
        opacity: 0;
        transform: scale(1.5)
    }
}

.pulse-warning:after {
    background-color: #ffc107
}

.pulse-danger:after {
    background-color: #ff0707
}


.ping {
	-webkit-animation: ping 1.2s ease-in-out infinite both;
	        animation: ping 1.2s ease-in-out infinite both;
}

/**
 * ----------------------------------------
 * animation ping
 * ----------------------------------------
 */
 @-webkit-keyframes ping {
    0% {
      -webkit-transform: scale(0.2);
              transform: scale(0.2);
      opacity: 0.8;
    }
    80% {
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(2.2);
              transform: scale(2.2);
      opacity: 0;
    }
  }
  @keyframes ping {
    0% {
      -webkit-transform: scale(0.2);
              transform: scale(0.2);
      opacity: 0.8;
    }
    80% {
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(2.2);
              transform: scale(2.2);
      opacity: 0;
    }
  }
  

/**
 * ----------------------------------------
 * animation ping
 * ----------------------------------------
 */
 @-webkit-keyframes ping {
    0% {
      -webkit-transform: scale(0.2);
              transform: scale(0.2);
      opacity: 0.8;
    }
    80% {
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(2.2);
              transform: scale(2.2);
      opacity: 0;
    }
  }
  @keyframes ping {
    0% {
      -webkit-transform: scale(0.2);
              transform: scale(0.2);
      opacity: 0.8;
    }
    80% {
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(2.2);
              transform: scale(2.2);
      opacity: 0;
    }
  }
  

.heartbeat {
	-webkit-animation: heartbeat 6s ease-in-out infinite both;
	        animation: heartbeat 6s ease-in-out infinite both;
}

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
 @-webkit-keyframes heartbeat {
    from {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    2% {
      -webkit-transform: scale(0.91);
              transform: scale(0.91);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    4% {
      -webkit-transform: scale(0.98);
              transform: scale(0.98);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    8% {
      -webkit-transform: scale(0.87);
              transform: scale(0.87);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    10% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  @keyframes heartbeat {
    from {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-transform-origin: center center;
              transform-origin: center center;
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    2% {
      -webkit-transform: scale(0.91);
              transform: scale(0.91);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    4% {
      -webkit-transform: scale(0.98);
              transform: scale(0.98);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    6% {
      -webkit-transform: scale(0.87);
              transform: scale(0.87);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    10% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
  }
  

.enabledDot.active {
    color: #adff2f
}

.enabledDot.active::before {
    box-shadow: 0 0 8px #adff2f;
    border-radius: 50%
}

.enabledDot.inactive {
    color: red
}

.enabledDot.inactive::before {
    box-shadow: 0 0 8px red;
    border-radius: 50%
}

.enabledDot {
    overflow: visible;
    position: relative
}

.enabledDot:hover {
    cursor: pointer
}

i.enabledDot:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1
}

i.enabledDot {
    width: 1.5rem;
    height: 1.5rem
}

i.enabledDot.shake {
    animation: shake .5s;
    animation-iteration-count: 1
}

@keyframes shake {
    0% {
        transform: translate(1px, 0)
    }
    10% {
        transform: translate(-1px, 0)
    }
    20% {
        transform: translate(-3px, 0px)
    }
    30% {
        transform: translate(3px, 0)
    }
    40% {
        transform: translate(1px, 0)
    }
    50% {
        transform: translate(-1px, 0)
    }
    60% {
        transform: translate(-3px, 0)
    }
    70% {
        transform: translate(3px, 0)
    }
    80% {
        transform: translate(-1px, 0x)
    }
    90% {
        transform: translate(1px, 0)
    }
    100% {
        transform: translate(1px, 0)
    }
}