.attackBox {
  position: relative;
  height: 56px;
  width: 56px;
  /* Поля */
  background-color: #111111;/* Цвет фона */
  /* border: 2px solid #020202; Параметры рамки */

  display: grid;
  grid-template-rows: 16fr 32px 16fr;

  overflow: visible;
  z-index: 9;

}

 .attackBox:disabled {
   background-color: #424242;
 }

.skillImage {
  position: relative;
  top: 5px;
  align-self: center;
}

.skillName {
  position: absolute;
  text-align: left;
  font-size: 11px;
  overflow: hidden;
  padding: 1px;
  top: 0px;
  color: #ababab;
  z-index: 1000;


  //border: 1px solid #020202;

  background-color: #424242;
//text-shadow: 1px 1px 1px black;
}

.skillSubText {
  position: absolute;
  text-align: right;
  right: 0px;
  bottom: 0px;
  font-size: 12px;
  color: #ababab;
  background-color: #424242;
  z-index: 1000;
  //border: 1px solid #020202;
}

.skillLeftSubText {
  position: absolute;
  text-align: right;
  left: 0px;
  bottom: 0px;
  font-size: 12px;
  color: #ababab;
  background-color: #424242;
  z-index: 1000;
//border: 1px solid #020202;
}

.textFloating {
  //background: red;
  color: white;
  position: relative;
  animation-name: mymove;
  animation-duration: 3s;
}

.fillEnemyAction {

  animation-name: fillGradual;
  animation-duration: 1s;
}

.fillEnemyActionFast {

  animation-name: fillGradual;
  animation-duration: 0.5s;
}


@keyframes mymove {
  from {bottom: 0; opacity: 100%}
  to {bottom: 50px; opacity: 0}
}

@keyframes fillGradual {
  from {height: 0%;}
  to {height: 100%;}
}


.fillNotification {
  animation-name: fillGradual;
  animation-duration: 1.5s;
}

@keyframes fillGradual {
  from {opacity: 0; transform:scale(0);}
  to {opacity: 100; transform:scale(1);}
}