/*
 * Licensed Materials - Property of IBM
 *
 * IBM Cognos Products: SHARE
 *
 * (C) Copyright IBM Corp. 2015, 2018
 *
 * US Government Users Restricted Rights - Use, duplication or disclosure
 * restricted by GSA ADP Schedule Contract with IBM Corp.
 */

/*Bar animation*/

.wait_loading_bar{
  background-image: linear-gradient(to right, $secondary1 50%, $neutral1 50%);
  background-image: linear-gradient(to right, var(--secondary1) 50%, $neutral1 50%);
  width: 400px;
  height: 8px;
  background-position: 0px 0px;
  background-repeat: repeat;
  -webkit-animation: loadingIndefBar 1s linear infinite;
  -ms-animation: loadingIndefBar 1s linear infinite;
  -moz-animation: loadingIndefBar 1s linear infinite;
  animation: loadingIndefBar 1s linear infinite;
}

.glass.highcontrast .wait_loading_bar:before {
  	content:attr(aria-label);
}

.glass.highcontrast .wait_loading_bar{
  	width: 0px;
  	height: 0px;
  	background-position: 0px 0px;
}

 @keyframes loadingIndefBar {
0% {background-position: 0 0;}
100% {background-position: 400px 0;}
}

/* Wave ADN*/
 .wait_loading_animation {
	width: 26px;
	height: 22px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 10px;
}

.wait_loading_animation.loginWorking{
	top: 0px;
	height: 40px;
	width: 32px;
}

.wait_loading_animation div {
	width: 84.6%;
	height: 4.54%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 7.96%;
}

#wait_loader_div1 {
    @include theming(background-color, secondary1);
	-webkit-animation-name: wait_loading_div1;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	animation-name: wait_loading_div1;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
}

@-webkit-keyframes wait_loading_div1 {
    0%   {width: 84.6%; @include theming(background-color, secondary1);}
    30%  {width: 100%; background-color: $gray2;}
    40%  {width: 100%; background-color: $gray2;}
    60%  {width: 15.4%; @include theming(background-color, secondary1);}
    70% {width: 15.4%; @include theming(background-color, secondary1);}
    90% {width: 84.6%; @include theming(background-color, secondary1);}
    100% {width: 84.6%; @include theming(background-color, secondary1);}
}

@keyframes wait_loading_div1 {
    0%   {width: 84.6%; @include theming(background-color, secondary1);}
    30%  {width: 100%; background-color: $gray2;}
    40%  {width: 100%; background-color: $gray2;}
    60%  {width: 15.4%; @include theming(background-color, secondary1);}
    70% {width: 15.4%; @include theming(background-color, secondary1);}
    90% {width: 84.6%; @include theming(background-color, secondary1);}
    100% {width: 84.6%; @include theming(background-color, secondary1);}
}

#wait_loader_div2 {
	@include theming(background-color, secondary1);
	-webkit-animation-name: wait_loading_div2;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	animation-name: wait_loading_div2;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
}

@-webkit-keyframes wait_loading_div2 {
    0%   {width: 84.6%; @include theming(background-color, secondary1);}
    30%  {width: 92.3%; background-color: $gray2;}
    40%  {width: 92.3%; background-color: $gray2;}
    60%  {width: 53.85%; background-color: $gray2;}
    70% {width: 53.85%; background-color: $gray2;}
    90% {width: 84.6%; @include theming(background-color, secondary1);}
    100% {width: 84.6%; @include theming(background-color, secondary1);}
}

@keyframes wait_loading_div2 {
    0%   {width: 84.6%; @include theming(background-color, secondary1);}
    30%  {width: 92.3%; background-color: $gray2;}
    40%  {width: 92.3%; background-color: $gray2;}
    60%  {width: 53.85%; background-color: $gray2;}
    70% {width: 53.85%; background-color: $gray2;}
    90% {width: 84.6%; @include theming(background-color, secondary1);}
    100% {width: 84.6%; @include theming(background-color, secondary1);}
}

#wait_loader_div3 {
	background-color: $secondary1;
	-webkit-animation-name: wait_loading_div3;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	animation-name: wait_loading_div3;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
}

@-webkit-keyframes wait_loading_div3 {
    0%   {width: 84.6%; @include theming(background-color, secondary1);}
    30%  {width: 76.9%; background-color: $gray2;}
    40%  {width: 76.9%; background-color: $gray2;}
    60%  {width: 69.23%; @include theming(background-color, secondary1);}
    70% {width: 69.23%; @include theming(background-color, secondary1);}
    90% {width: 84.6%; @include theming(background-color, secondary1);}
    100% {width: 84.6%; @include theming(background-color, secondary1);}
}

@keyframes wait_loading_div3 {
    0%   {width: 84.6%; @include theming(background-color, secondary1);}
    30%  {width: 76.9%; background-color: $gray2;}
    40%  {width: 76.9%; background-color: $gray2;}
    60%  {width: 69.23%; @include theming(background-color, secondary1);}
    70% {width: 69.23%; @include theming(background-color, secondary1);}
    90% {width: 84.6%; @include theming(background-color, secondary1);}
    100% {width: 84.6%; @include theming(background-color, secondary1);}
}

#wait_loader_div4 {
	@include theming(background-color, secondary1);
	-webkit-animation-name: wait_loading_div4;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	animation-name: wait_loading_div4;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
}

@-webkit-keyframes wait_loading_div4 {
    0%   {width: 84.6%; @include theming(background-color, secondary1);}
    30%  {width: 69.23%; background-color: $gray2;}
    40%  {width: 69.23%; background-color: $gray2;}
    60%  {width: 76.9%; background-color: $gray2;}
    70% {width: 76.9%; background-color: $gray2;}
    90% {width: 84.6%; @include theming(background-color, secondary1);}
    100% {width: 84.6%; @include theming(background-color, secondary1);}
}

@keyframes wait_loading_div4 {
    0%   {width: 84.6%; @include theming(background-color, secondary1);}
    30%  {width: 69.23%; background-color: $gray2;}
    40%  {width: 69.23%; background-color: $gray2;}
    60%  {width: 76.9%; background-color: $gray2;}
    70% {width: 76.9%; background-color: $gray2;}
    90% {width: 84.6%; @include theming(background-color, secondary1);}
    100% {width: 84.6%; @include theming(background-color, secondary1);}
}

#wait_loader_div5 {
	background-color: $gray2;
	-webkit-animation-name: wait_loading_div5;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	animation-name: wait_loading_div5;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
}

@-webkit-keyframes wait_loading_div5 {
    0%   {width: 84.6%; background-color: $gray2;}
    30%  {width: 53.85%; @include theming(background-color, secondary1);}
    40%  {width: 53.85%; @include theming(background-color, secondary1);}
    60%  {width: 76.9%; @include theming(background-color, secondary1);}
    70% {width: 76.9%; @include theming(background-color, secondary1);}
    90% {width: 84.6%; background-color: $gray2;}
    100% {width: 84.6%; background-color: $gray2;}
}

@keyframes wait_loading_div5 {
    0%   {width: 84.6%; background-color: $gray2;}
    30%  {width: 53.85%; @include theming(background-color, secondary1);}
    40%  {width: 53.85%; @include theming(background-color, secondary1);}
    60%  {width: 76.9%; @include theming(background-color, secondary1);}
    70% {width: 76.9%; @include theming(background-color, secondary1);}
    90% {width: 84.6%; background-color: $gray2;}
    100% {width: 84.6%; background-color: $gray2;}
}

#wait_loader_div6 {
	background-color: $gray2;
	-webkit-animation-name: wait_loading_div6;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	animation-name: wait_loading_div6;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
}

@-webkit-keyframes wait_loading_div6 {
    0%   {width: 84.6%; background-color: $gray2;}
    30%  {width: 38.46%; @include theming(background-color, secondary1);}
    40%  {width: 38.46%; @include theming(background-color, secondary1);}
    60%  {width: 69.23%; background-color: $gray2;}
    70% {width: 69.23%; background-color: $gray2;}
    90% {width: 84.6%; background-color: $gray2;}
    100% {width: 84.6%; background-color: $gray2;}
}

@keyframes wait_loading_div6 {
    0%   {width: 84.6%; background-color: $gray2;}
    30%  {width: 38.46%; @include theming(background-color, secondary1);}
    40%  {width: 38.46%; @include theming(background-color, secondary1);}
    60%  {width: 69.23%; background-color: $gray2;}
    70% {width: 69.23%; background-color: $gray2;}
    90% {width: 84.6%; background-color: $gray2;}
    100% {width: 84.6%; background-color: $gray2;}
}

#wait_loader_div7 {
	background-color: $gray2;
	-webkit-animation-name: wait_loading_div7;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	animation-name: wait_loading_div7;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
}

@-webkit-keyframes wait_loading_div7 {
    0%   {width: 84.6%; background-color: $gray2;}
    30%  {width: 23.07%; @include theming(background-color, secondary1);}
    40%  {width: 23.07%; @include theming(background-color, secondary1);}
    60%  {width: 53.85%; @include theming(background-color, secondary1);}
    70% {width: 53.85%; @include theming(background-color, secondary1);}
    90% {width: 84.6%; background-color: $gray2;}
    100% {width: 84.6%; background-color: $gray2;}
}

@keyframes wait_loading_div7 {
    0%   {width: 84.6%; background-color: $gray2;}
    30%  {width: 23.07%; @include theming(background-color, secondary1);}
    40%  {width: 23.07%; @include theming(background-color, secondary1);}
    60%  {width: 53.85%; @include theming(background-color, secondary1);}
    70% {width: 53.85%; @include theming(background-color, secondary1);}
    90% {width: 84.6%; background-color: $gray2;}
    100% {width: 84.6%; background-color: $gray2;}
}

#wait_loader_div8 {
	background-color: $gray2;
	-webkit-animation-name: wait_loading_div8;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	animation-name: wait_loading_div8;
	animation-duration: 1.5s;
	animation-iteration-count: infinite;
}

@-webkit-keyframes wait_loading_div8 {
    0%   {width: 84.6%; background-color: $gray2;}
    30%  {width: 7.7%; @include theming(background-color, secondary1);}
    40%  {width: 7.7%; @include theming(background-color, secondary1);}
    60%  {width: 15.4%; background-color: $gray2;}
    70% {width: 15.4%; background-color: $gray2;}
    90% {width: 84.6%; background-color: $gray2;}
    100% {width: 84.6%; background-color: $gray2;}
}

@keyframes wait_loading_div8 {
    0%   {width: 84.6%; background-color: $gray2;}
    30%  {width: 7.7%; @include theming(background-color, secondary1);}
    40%  {width: 7.7%; @include theming(background-color, secondary1);}
    60%  {width: 15.4%; background-color: $gray2;}
    70% {width: 15.4%; background-color: $gray2;}
    90% {width: 84.6%; background-color: $gray2;}
    100% {width: 84.6%; background-color: $gray2;}
}