/********** ROSTER ************************************************/


/* ROSTER - Logos */

#hk_overlay .nkstable_roster.fadeOutEnd  .team_logo,
#hk_overlay .nkstable_roster.fadeInInit  .team_logo{
  transform: scale3d(0,0,1);
}

#hk_overlay .nkstable_roster.fadeInStart .team_logo {
  /* animation: 0.5s 1 normal forwards cubic-bezier(0.51, 0.02, 0.54, 1) nkstable_roster_team_logo; */
  /* animation-delay: calc(var(--animdelay) - 0.2s); */
  transition-duration:0.5s;
  transition-delay: calc(var(--animdelay) - 0.2s);  
  transition-timing-function:cubic-bezier(0.51, 0.02, 0.54, 1);
}

#hk_overlay .nkstable_roster.fadeOutEnd  .team_logo{
  transition-delay: 0.5s;  
}


/*  ROSTER - team name */

#hk_overlay .nkstable_roster            .team_name{
  transition-property:transform, opacity;  
  transform-origin:top;  
}
#hk_overlay .nkstable_roster.fadeOutEnd .team_name,
#hk_overlay .nkstable_roster.fadeInInit .team_name{
  transform: translateX(-3rem);
  opacity:0;
}

#hk_overlay .nkstable_roster.fadeInStart .team_name {
  transition-delay: 0.6s;
  transition-duration: 0.3s, 0.5s;
  transition-timing-function:cubic-bezier(0.16, 0.41, 0.63, 0.99), cubic-bezier(0.37, 0.31, 0.77, 0.5) ;
  
}

#hk_overlay .nkstable_roster.fadeOutStart .team_name{
  transition-delay:0.5s;
  transition-duration: 0.4s, 0.4s;
  transition-timing-function:cubic-bezier(0.77, 0.04, 0.71, 0.69), cubic-bezier(0.37, 0.31, 0.77, 0.5) ;  
}
  
/*  ROSTER - header */

#hk_overlay .nkstable_roster            .panel_title{
  transition-property:transform, opacity;  
  transform-origin:top;  
}
#hk_overlay .nkstable_roster.fadeOutEnd .panel_title,
#hk_overlay .nkstable_roster.fadeInInit .panel_title{
  transform: translateY(-1rem);
  transform: none;
  opacity:0;
}

#hk_overlay .nkstable_roster.fadeInStart .panel_title {
  transition-delay: 0.7s;
  transition-duration: 0.3s, 0.5s;
  transition-timing-function:cubic-bezier(0.16, 0.41, 0.63, 0.99), cubic-bezier(0.37, 0.31, 0.77, 0.5) ;
  
}

#hk_overlay .nkstable_roster.fadeOutStart .panel_title{
  transition-delay:0.1s;
  transition-duration: 0.4s, 0.4s;
  transition-timing-function:cubic-bezier(0.77, 0.04, 0.71, 0.69), cubic-bezier(0.37, 0.31, 0.77, 0.5) ;  
}


/* ROSTER - Group title of Goalkeepers, defenders, forwards */

#hk_overlay .nkstable_roster.fadeOutEnd .group_title,
#hk_overlay .nkstable_roster.fadeInInit .group_title{
  opacity:0;
}
#hk_overlay .nkstable_roster.fadeInStart .group_title{
  transition-delay:500ms;
  transition-duration:300ms;
  transition-timing-function:ease-in-out;
  
  /* animation-delay: calc(var(--test) + var(--test2)*5); */
}

#hk_overlay .nkstable_roster.fadeOutStart .group_title{
   transition-timing-function:ease-in-out; 
}


/* ROSTER - Players name */

#hk_overlay .nkstable_roster .column:first-child .player .name{
  padding-right: 31px;
}

#hk_overlay .nkstable_roster.fadeOutEnd .player .name,
#hk_overlay .nkstable_roster.fadeInInit .player .name{
    opacity: 0;
}

#hk_overlay .nkstable_roster.fadeInStart .player .name{
  transition-duration:0.3s;
  transition-delay:calc((var(--n)*0.03s + 0.7s));
  transition-timing-function:cubic-bezier(0.32, 0.2, 0.88, 0.72);
}

#hk_overlay .nkstable_roster.fadeOutStart .player .name{
  transition-delay:calc((var(--n)*0.02s));
  
}


/* ROSTER - Players num */

#hk_overlay .nkstable_roster.fadeOutEnd .player .nom,
#hk_overlay .nkstable_roster.fadeInInit .player .nom{
  clip-path:inset(0% 100% 0 0 ); 
}

#hk_overlay .nkstable_roster.fadeInStart .player .nom{
  transition-duration:0.3s;
  transition-delay: calc((var(--n)*0.03s + 0.7s));
  transition-timing-function: cubic-bezier(0.02, 0.5, 0.58, 1);
}

#hk_overlay .nkstable_roster.fadeOutStart .player .nom{
  transition-delay: calc((var(--n)*0.02s));

}

/* Roster - Player Num background */

#hk_overlay .nkstable_roster .player .nom_bg{
    animation: 0.3s 3 forwards common_blink_1;
    animation-delay:  calc((var(--n)*0.03s + 0.7s));
}


/* ROSTER - Background */


#hk_overlay .nkstable_roster.fadeOutEnd .roster_bg,
#hk_overlay .nkstable_roster.fadeInInit .roster_bg{
  transform:scale(1.2,0.002);
  
}

#hk_overlay .nkstable_roster.fadeInStart .roster_bg{
    transition-property:transform, opacity, visibility;
    transition-duration:0.7s,0.1s,0s;
    transition-timing-function: cubic-bezier(1, 0.02, 0.76, 0.5);
    transition-delay:0.05s;
  
}

#hk_overlay .nkstable_roster.fadeOutStart .roster_bg{
  transition: transform, visibility;
    transition-duration:0.6s; 
    transition-timing-function: cubic-bezier(0.79, 0, 0.6, 0.74);  
    transition-delay:0.5s, 0.55s;
    /* opacity:0; */
    visibility:hidden; 
}


/* ROSTER - design 0-elements */


#hk_overlay .nkstable_roster[class*="-roster"] .roster_o_des_el{
    animation: 0.25s 1 forwards common_blink_1;
}




#hk_overlay .nkstable_roster[class*="-roster"].fadeInStart .roster_o_des_el1{
    animation-delay:1s;
    transition-delay:1s;  
}

#hk_overlay .nkstable_roster[class*="-roster"].fadeInStart .roster_o_des_el2{
    animation-delay:1.2s; 
    transition-delay:1.2s;  
  
}

#hk_overlay .nkstable_roster[class*="-roster"].fadeInStart .roster_o_des_el3{
    animation-delay:1.4s; 
    transition-delay:1.4s;  
}

#hk_overlay .nkstable_roster.away-roster-both.fadeInStart .roster_o_des_el1{
    animation-delay:1.1s; 
    transition-delay:1.1s;    
}

#hk_overlay .nkstable_roster.away-roster-both.fadeInStart .roster_o_des_el2{
    animation-delay:1.3s;
    transition-delay:1.3s;    
  
}

#hk_overlay .nkstable_roster.away-roster-both.fadeInStart .roster_o_des_el3{
    animation-delay:1.5s; 
    transition-delay:1.5s;    
}



#hk_overlay .nkstable_roster[class*="-roster"] .roster_o_des_el{
}

#hk_overlay .nkstable_roster[class*="-roster"].fadeOutEnd .roster_o_des_el,
#hk_overlay .nkstable_roster[class*="-roster"].fadeInInit .roster_o_des_el{
    opacity:0;  
}

#hk_overlay .nkstable_roster[class*="-roster"].fadeInStart .roster_o_des_el{
  transition-duration:0s; 
  transition-delay:1s;
}
body #hk_overlay .nkstable_roster[class*="-roster"].fadeOutInit .roster_o_des_el[class*="el"]{
  animation:none;
}

body #hk_overlay .nkstable_roster[class*="-roster"].fadeOutStart .roster_o_des_el[class*="el"]{
  transition-duration:0.3s; 
  transition-delay:0s;
  animation: 0.25s 1 common_blink_1;
  animation-delay:0s;

}