.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid $color-dark-blue;

  &.unselected {
      position: absolute;
      margin: auto;
      top: -70px;
      left: 0;
      right: 0;
      width: 137px;
      height: 137px;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      border-right: 5px solid $color-dark-blue;
      border-bottom: 5px solid $color-dark-blue;
  }
}

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid $color-dark-blue;

  &.unselected {
      position: absolute;
      margin: auto;
      top: -70px;
      left: 0;
      right: 0;
      width: 137px;
      height: 137px;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      border-right: 5px solid $color-dark-blue;
      border-bottom: 5px solid $color-dark-blue;
  }

}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid $color-black;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid $color-black;
}

.status-green {
  background-color: $color-status-green;
}

.status-running {
  background-color: $color-status-green;
  animation: blinker 1s linear infinite;
}

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.status-yellow {
  background-color: $color-status-yellow;
}

.status-red {
  background-color: $color-status-red;
  background-image: url('../assets/svgs/status-error-icon.svg');
  @include icon-helper;
  width: 20px;
  height: 20px;
  // cursor: pointer;
  opacity: 0.7;
  border: none;
  &:hover {
    opacity: 1;
  }
  margin-top: 5px;
}

.button-icon {
  background: $color-light-blue;
  margin: 0px;
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: top;
  border-width: 0;
  outline: none;
  position: relative;
  left: -2px;
}

.button-icon:hover {
  background-color: $color-hover-blue;
}
  
.button-icon:active {
  background-color: $color-active-blue;
}

.magnifying-glass
{
  font-size: 1.15em;
  width: 0.5em;
  height: 0.5em;
  border: 0.1em solid #FFFFFF;
  position: relative;
  border-radius: 0.35em;
  margin: 0px;
}
.magnifying-glass::before
{
 content: "";
 display: inline-block;
 position: absolute;
 right: -0.3em;
 bottom: -0.1em;
 border-width: 0;
 background: $color-white;
 width: 0.35em;
 height: 0.08em;
 -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
}

.close-button {
  $size: 16px;
  height: $size;
  width: $size;
  position: relative;
  box-sizing: border-box;
  line-height: $size;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  outline: none;
  border: none;
  margin-right: 5px;

  &:before, &:after {
      $width: 10px;
      $height: 2px;
      transform: rotate(-45deg);
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -$height/2;
      margin-left: -$width/2;
      display: block;
      height: $height;
      width: $width;
      background-color: $color-white;
      transition: all 0.25s ease-out;
  }

  &:after {
      transform: rotate(-135deg);
  }

  &:hover {
      background: $color-hover-blue;
  }

  &:active {
    background: $color-active-blue;
  }
}

#circle-orbit-container {
  position: relative;
  top: 25px;
  left: 25px;
  height: 300px;
  width: 300px;
}

#sun {
  position: absolute;
  top: 110px;
  left: 97px;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: $color-light-blue;
}

#first-orbit {
  position: absolute;
  top: 85px;
  left: 70px;
  width: 80px;
  height: 80px;
  border: 1.5px dashed $color-hover-blue;
  opacity: 0.3;
  border-radius: 100%;
  -webkit-animation: spin-right 4s linear infinite;
  animation: spin-right 4s linear infinite;
}

.first-orbit-circle {
  position: absolute;
  top: 62px;
  left: 6px;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  background-color: $color-negation-blue-hover;
}

#second-orbit {
  position: absolute;
  top: 35px;
  left: 35px;
  width: 160px;
  height: 160px;
  border: 1.5px dashed $color-hover-blue;
  opacity: 0.5;
  border-radius: 100%;
  -webkit-animation: spin-right 6s linear infinite;
  animation: spin-right 6s linear infinite;
}

.second-orbit-circles {
  position: absolute;
  top: 25px;
  left: 5px;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: $color-negation-blue;
}

#third-orbit {
  position: absolute;
  top: 13px;
  left: 0;
  width: 210px;
  height: 210px;
  border: 1.5px dashed $color-hover-blue;
  opacity: 0.3;
  border-radius: 100%;
  -webkit-animation: spin-right 8s linear infinite;
  animation: spin-right 8s linear infinite;
}

.third-orbit-circles {
  position: absolute;
  top: -17px;
  left: 121px;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background-color: $color-negation-blue-active;
}

@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


[class*="icono"] {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: #666;
  box-sizing: border-box;
  &:after, &:before {
    content: "";
    box-sizing: border-box;
  }
}
[class*="icono-arrow1"]{
  width: 9px;
  height: 9px;
  border-width: 2px 2px 0 0;
  border-style: solid;
  margin: 10px;
  margin-right: 20px;
  &:before{
    right: 0;
    top: -2.5px;
    position: absolute;
    height: 2px;
    box-shadow: inset 0 0 0 32px;
    transform: rotate(-45deg);
    width: 19px;
    transform-origin: right top;
  }
  &[class*="-left"]{
    transform: rotate(45deg);
    &[class*="-up"]{
      transform: none;
    }
    &[class*="-down"]{
      transform: rotate(90deg);
    }
  }
  &[class*="-right"]{
    transform: rotate(-135deg);
    &[class*="-up"]{
      transform: rotate(-90deg);
    }
    &[class*="-down"]{
      transform: rotate(180deg);
    }
  }
  &[class*="-up"]{
    transform: rotate(-45deg);
  }
  &[class*="-down"]{
    transform: rotate(135deg);
  }
}

.close {

}

.close:hover {
  opacity: 1;
  cursor: pointer;
  &:before, &:after {
    background-color: $color-black;
  }
}

.close:before, .close:after {
  position: absolute;
  content: ' ';
  top: 6px;
  height: 17px;
  width: 2px;
  background-color: $color-border-bottom;
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}



// spinner
// Here is where the magic happens

$offset: 187;
$duration: 3s;

.spinner {
  animation: rotator $duration linear infinite;
}

@keyframes rotator {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(270deg); }
}

.path {
  stroke-dasharray: $offset;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation:
    dash $duration ease-in-out infinite, 
    colors ($duration*4) ease-in-out infinite;
}

@keyframes colors {
	0% { stroke: #00B086; }
	25% { stroke: #00B086; }
	50% { stroke: #00B086; }
	75% { stroke: #00B086; }
  100% { stroke: #00B086; }
}

@keyframes dash {
 0% { stroke-dashoffset: $offset; }
 50% {
   stroke-dashoffset: $offset/4;
   transform:rotate(135deg);
 }
 100% {
   stroke-dashoffset: $offset;
   transform:rotate(450deg);
 }
}


