/* CHECKMARK ANIM */
#infoContainer,.center-align,td.center-align,th.center-align{text-align:center}
#infoContainer{width:200px;vertical-align:middle;background:white;overflow:hidden;padding:10px;border-radius:8px;border:1px solid black;color:#fff;position:fixed;left:calc(50% - 100px);top:calc(50% - 100px);z-index:9999;opacity:1;}
/*#infoContainer .lw-loading-status{background:rgba(255,255,255,.6);padding:8px;border-radius:8px;-webkit-box-shadow:inset 2px 2px 0 0 rgba(0,0,0,.2);box-shadow:inset 2px 2px 0 0 rgba(0,0,0,.2)}*/

.infoLoader{
  font-size:10px;
  margin:5em auto;
  width:1em;
  height:1em;
  border-radius:50%;
  position:relative;
  text-indent:-9999em;
  -webkit-animation:load4 1.3s infinite linear;
  animation:load4 1.3s infinite linear
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}

/* Toggle Switch - Button
==========================*/
.toggle-btn-container {
  height:100%; 
  /*width:100%; */
  width:100px;
  position:relative;
  /*padding: 10px;*/
  padding: 0px;
  /*transform: translate(50%, 50%)*/
}

.toggle-btn {
  width: 90px;
  height: 20px;
  background: red;
  border-radius: 5px;
  padding: 3px;
  cursor: pointer;
  -webkit-transition: all 0.3s 0.1s ease-in-out;
  -moz-transition: all 0.3s 0.1s ease-in-out;
  -o-transition: all 0.3s 0.1s ease-in-out;
  transition: all 0.3s 0.1s ease-in-out
}

.toggle-btn>.inner-circle {
  width: 40px;
  height: 13px;
  background: #fff;
  border-radius: 5px;
  -webkit-transition: all 0.3s 0.1s ease-in-out;
  -moz-transition: all 0.3s 0.1s ease-in-out;
  -o-transition: all 0.3s 0.1s ease-in-out;
  transition: all 0.3s 0.1s ease-in-out
}

.toggle-btn.active {
  background: green !important
}

.toggle-btn.active>.inner-circle {
  margin-left: 40px
}