/*-
 * ============LICENSE_START=======================================================
 * ONAP Policy Engine
 * ================================================================================
 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
 * ================================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *      http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  };
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  };
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  };
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  };
}

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

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

@keyframes colors {
  0% {
    stroke: #4285F4;
  }

  25% {
    stroke: #DE3E35;
  }

  50% {
    stroke: #F7C223;
  }

  75% {
    stroke: #1B9A59;
  }

  100% {
    stroke: #4285F4;
  };
}

@keyframes dash {
  0% {
    stroke-dasharray: 1,150;
    stroke-dashoffset: 0;
    stroke: red;
  }

  50% {
    stroke-dasharray: 90,150;
    stroke-dashoffset: -35;
    stroke: yellow;
  }

  100% {
    stroke-dasharray: 90,150;
    stroke-dashoffset: -124;
    stroke: green;
  };
}

@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1,150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90,150;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 90,150;
    stroke-dashoffset: -124;
  };
}

.animated {
  -webkit-animation-duration: .7s;
  animation-duration: .7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.modal.animated,
.animated.fast {
  -webkit-animation-duration: .2s;
  animation-duration: .2s;
}

.animated.slow {
  -webkit-animation-duration: 1.1s;
  animation-duration: 1.1s;
}

.animated.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

.animated.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.spinner-container {
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  z-index: 2;
  width: 65px;
  height: 65px;
}

.spinner-container .path {
  stroke-dasharray: 1,150;
  stroke-dashoffset: 0;
  stroke: #2196F3;
  stroke-linecap: round;
  -webkit-animation: dash 1.5s ease-in-out infinite, colors 5.6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}