/* 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;
  }
}

/* Switch Common
	========================== */
	.switch {
		position: relative;
		display: block;
		/*vertical-align: top;*/
		width: 100px;
		height: 25px;
		padding: 2px;
		margin: 0 5px 5px 0;
		background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
		background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
		border-radius: 18px;
		box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
		cursor: pointer;
		box-sizing:content-box;
	}
	.switch-input {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		box-sizing:content-box;
	}
	.switch-label {
		position: relative;
		display: block;
		height: inherit;
		font-size: 10px;
		text-transform: uppercase;
		background: #eceeef;
		border-radius: inherit;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
		box-sizing:content-box;
	}
	.switch-label:before, .switch-label:after {
		position: absolute;
		/*top: 50%;*/
		top: 0%;
		margin-top: -.5em;
		line-height: 1;
		-webkit-transition: inherit;
		-moz-transition: inherit;
		-o-transition: inherit;
		transition: inherit;
		box-sizing:content-box;
	}
	.switch-label:before {
		content: attr(data-off);
		right: 11px;
		color: #aaaaaa;
		text-shadow: 0 1px rgba(255, 255, 255, 0.5);
	}
	.switch-label:after {
		content: attr(data-on);
		left: 11px;
		color: #FFFFFF;
		text-shadow: 0 1px rgba(0, 0, 0, 0.2);
		opacity: 0;
	}
	.switch-input:checked ~ .switch-label {
		background: #E1B42B;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
	}
	.switch-input:checked ~ .switch-label:before {
		opacity: 0;
	}
	.switch-input:checked ~ .switch-label:after {
		opacity: 1;
	}
	.switch-handle {
		position: absolute;
		top: 4px;
		left: 4px;
		width: 28px;
		height: 28px;
		background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
		background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
		border-radius: 100%;
		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
	}
	.switch-handle:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -6px 0 0 -6px;
		width: 12px;
		height: 12px;
		background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
		background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
		border-radius: 6px;
		box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
	}
	.switch-input:checked ~ .switch-handle {
		left: 74px;
		box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
	}
	
/* Transition
	========================== */
	.switch-label, .switch-handle {
		transition: All 0.3s ease;
		-webkit-transition: All 0.3s ease;
		-moz-transition: All 0.3s ease;
		-o-transition: All 0.3s ease;
	}

/* Switch Yes No
==========================*/
	.switch-yes-no {
		padding: 0;
		margin: 15px 0 0;
		background: #FFF;
		border-radius: 0;
		background-image: none;
	}
	.switch-yes-no .switch-label {
		box-shadow: none;
		background: none;
	}
	.switch-yes-no .switch-label:after, .switch-yes-no .switch-label:before {
		width: 100%;
		height: 70%;
		top: 5px;
		left: 0;
		text-align: center;
		padding-top: 10%;
		box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
	}
	.switch-yes-no .switch-label:after {
		color: #FFFFFF;
		background: #32CD32;
		backface-visibility: hidden;
		transform: rotateY(180deg);
	}
	.switch-yes-no .switch-label:before {
		background: #eceeef;
		backface-visibility: hidden;
	}
	.switch-yes-no .switch-handle {
		display: none;
	}
	.switch-yes-no .switch-input:checked ~ .switch-label {
		background: #FFF;
		border-color: #0088cc;
	}
	.switch-yes-no .switch-input:checked ~ .switch-label:before {
		transform: rotateY(180deg)
	}
	.switch-yes-no .switch-input:checked ~ .switch-label:after {
		transform: rotateY(0)
	}


/* Toggle Switch - Checkbox
==========================*/
	.toggle {
		position: relative; width: 155px;
		user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
	}
	.toggle-checkbox {
		display: none;
	}
	.toggle-label {
		display: block; overflow: hidden; cursor: pointer;
		border: 2px solid #999999; border-radius: 20px;
	}
	.toggle-inner {
		display: block; width: 200%; margin-left: -100%;
		transition: margin 0.3s ease-in 0s;
	}
	.toggle-inner:before, .toggle-inner:after {
		display: block; float: left; width: 50%; height: 20px; padding: 0; line-height: 20px;
		font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
		box-sizing: border-box;
	}
	.toggle-inner:before {
		content: attr(data-on);
		padding-left: 10px;
		background-color: green; color: #FFFFFF;
	}
	.toggle-inner:after {
		content: attr(data-off);
		padding-right: 10px;
		background-color: red; color: #FFFFFF;
		text-align: right;
	}
	.toggle-switch {
		display: block; width: 46px; margin: 2px;
		background: #FFFFFF;
		position: absolute; top: 0; bottom: 0;
		right: 101px;
		border: 2px solid #999999; border-radius: 20px;
		transition: all 0.3s ease-in 0s; 
	}
	.toggle-checkbox:checked + .toggle-label .toggle-inner {
		margin-left: 0;
	}
	.toggle-checkbox:checked + .toggle-label .toggle-switch {
		right: 0px; 
	}    


/* Toggle Switch - Button
==========================*/
	.btn-container {
		height:100%; 
		width:100%; 
		position:relative;
		padding: 10px;
		/*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
	}

/* LOADER ANIMATION */
	.loader-spinner {
		--b: 10px;    /* border thickness */
		--n: 10;      /* number of dashes*/
		--g: 10deg;   /* gap  between dashes*/
		--c: red;   /* the color */
		
		width:20px;  /* size */
		aspect-ratio: 1;
		border-radius: 50%;
		padding: 1px; /* get rid of bad outlines */
		background: conic-gradient(#0000,var(--c)) content-box;
		-webkit-mask: /* we use +/-1deg between colors to avoid jagged edges */
		repeating-conic-gradient(#0000 0deg,
			#000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
			#0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
		radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
				mask:
		repeating-conic-gradient(#0000 0deg,
			#000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
			#0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
		radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
		-webkit-mask-composite: destination-in;
				mask-composite: intersect;
		animation: spinner 1s infinite steps(var(--n));
  }
  @keyframes spinner {to{transform: rotate(1turn)}}