/*  CSS CITATIONS 
This CSS file is released under the MIT License (MIT)

Copyright (c) 2022 r4ms3s (https://codepen.io/r4ms3s/pen/gajVBG)
Copyright (c) 2022 Emanuel Gonçalves (https://codepen.io/emanuelgsouza/pen/YVJOZo)
Copyright (c) 2022 Lokesh Mehra (https://codepen.io/creators-sin/pen/ExayLM) 

960 Grid System ~ Core CSS.
  Learn more ~ http://960.gs/

  Licensed under GPL and MIT.
*/

.saber {
  height: 20px;
  width: 150px;

 /*position: absolute;
  /*top: 140px;
  left: 90px;
	z-index:13;*/
  
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  
  background-image: -webkit-gradient(  
    linear,
    right top,
    left top,
    color-stop(0.17, #000000),
    color-stop(0.18, #B2B2B2),
    color-stop(0.26, #949494),
    color-stop(0.27, #000000),
    color-stop(0.41, #000000),
    color-stop(0.42, #FFFFFF),
    color-stop(0.52, #FFFFFF),
    color-stop(0.53, #474747),
    color-stop(1.00, #474747)
  );
      
}

.saber:after{
  position: absolute;
  top: 5px;
  left: 150px;    
  /* z-index:-1; */
  
  width: 300px;
  height: 10px;
  
  background: #fff;
 /* box-shadow: 0px 0px 0 #00f,
    0px 0px 4px #6be,
    0px 0px 8px #9cf,
    0px 0px 16px #29d; */
  
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  
  content: '';
  display:block;  
  -webkit-animation: sword 150ms linear infinite;
}

@-webkit-keyframes sword {
  0%   {
    box-shadow: 0px 0px 0 #00f,
      0px 0px 4px #6be,
      0px 0px 8px #9cf,
      0px 0px 16px #29d;   
  }
  100% {  
    box-shadow: 0px 0px 0 #fff,
      0px 0px 4px #6ee,
      0px 0px 8px #9ff,
      0px 0px 16px #2ff;
  }
}

.saber2 {
  height: 20px;
  width: 150px;
  
  /*position: absolute;
  top: 140px;
  left: 725px;
	z-index:13;*/
  
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  
  background-image: -webkit-gradient(  
    linear,
    right top,
    left top,
    color-stop(0.17, #000000),
    color-stop(0.18, #B2B2B2),
    color-stop(0.26, #949494),
    color-stop(0.27, #000000),
    color-stop(0.41, #000000),
    color-stop(0.42, #FFFFFF),
    color-stop(0.52, #FFFFFF),
    color-stop(0.53, #474747),
    color-stop(1.00, #474747)
  );
      
}

.saber2:after{
  position: absolute;
  top: 5px;
  left: 150px;    
  /* z-index:-1; */
  
  width: 300px;
  height: 10px;
  
  background: #fff;
 /* box-shadow: 0px 0px 0 #00f,
    0px 0px 4px #6be,
    0px 0px 8px #9cf,
    0px 0px 16px #29d; */
  
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  
  content: '';
  display:block;  
  -webkit-animation: sword 150ms linear infinite;
}

@-webkit-keyframes sword {
  0%   {
    box-shadow: 0px 0px 0 #00f,
      0px 0px 4px #6be,
      0px 0px 8px #9cf,
      0px 0px 16px #29d;   
  }
  100% {  
    box-shadow: 0px 0px 0 #fff,
      0px 0px 4px #6ee,
      0px 0px 8px #9ff,
      0px 0px 16px #2ff;
  }
}