/*Centro Estadistico*/
.centroEstadistico{
   .top{
      width: 100%;
      min-height:100px;
      #gradient .vertical-three-colors(@bg, @bg, 25%, darken(@bg,10%));
      display:block;
      border-bottom: 2px solid @color01;
   }
   .content{
      border-top: 1px solid darken(@bg,20%);
      border-bottom: 3px solid @color02;
      padding: 5% 0;
      .space{
         width: 12%;
         float: left;
         min-height: 1px;
      }
      .colLeft, .colRight{
         .data{
            padding:6% 0 0;
            span{
               display: block;
               color: @bg_dest_type;
               font-size: 16px;
               font-weight: bold;
               &:nth-child(2){
                  color: @bg_type;
                  text-transform: uppercase;
               }
            }
            div{
               background: @color01;
               color: @bg_type;
               min-height: 30px;
               width: 136px;
               line-height: 30px;
               text-transform: uppercase;
               text-align: center;
               font-size: 12px;
               font-weight: bold;
               margin: 5% 0 0;
               cursor: pointer;
            }
         }
         .positionCircle{
            .circle{
               margin: 50% auto 0;
               float: none;
            }
            img{
               margin: 42% auto 0;
            }
         }
      }
      .colRight{
         .data{
            text-align: right;
            div{
               float: right;
            }
         }
      }
      .colMiddle{
         .circle{
            float: none;
            margin: 20% auto 0;
            width: 80px;
            height: 80px;
            font-size: 40px;
            line-height: 80px;
         }
         img{
            margin: 0 auto;
         }
      }
      @media (max-width: @md) {
         .space{
            width: 10%;
         }
         .colMiddle{
            .circle{
               width: 60px;
               height: 60px;
               font-size: 30px;
               line-height: 60px;
            }
         }
      }
      @media (max-width: @sm) {
         .space{
            width: 4%;
         }
         .colMiddle{
            .circle{
               width: 40px;
               height: 40px;
               font-size: 20px;
               line-height: 40px;
            }
         }
      }
      @media (max-width: @xs) {
         .space{
            width: 0%;
         }
         .colMiddle{
            .circle{
               margin-top: 5%;
            }
         }
      }
   }
   .dialog{
      width: 50%;
      min-height: 300px;
      background:@bg;
      display: none;
      position: absolute;
      top: 10%;
      left: 0;
      right: 0;
      margin: 0 auto;
      box-shadow: 0 0 8px 1px lighten(@color02,80%);
      border-radius: 5px;
      padding:5px;
      .caption{
         height: 30px;
         border:0;
         .homeBar{
            width: 100%;
            line-height: 30px;
         }
      }
      .lineUpFull{
         .team-name{
            border:0;
            position: relative;
            width: 48%;
            float: left;
            .starting{
               border:1px solid darken(@bg,15%);
               border-top:0;
            }
         }
         .container-substitutes{
            width: 48%;
            float: right;
            .substitutes-content{
               border:1px solid darken(@bg,15%);
               border-top:0;
               height: auto;
            }
         } 
      }   
      .footer{
         background: lighten(@color02, 80%);
         height: 30px;
         text-align: center;
         border-top: 1px solid lighten(@color02, 70%);
         span{
            line-height: 30px;
            color: @bg_type;
         }
      }
      @media (max-width: @md) {
         width: 70%;
         .lineUpFull{
            .container-substitutes{
               clear: none;
            } 
         }
      }
      @media (max-width: @sm) {
         .lineUpFull{
            height: 250px;
            overflow: auto;
            .team-name{
               width: 100%;
               float: none;
            }
            .container-substitutes{
               width: 100%;
               float: none;
            }
         }
      }
      @media (max-width: @xs) {

      }
   }
}
/*Fin Centro Estadistico*/

/*Centro Estadistico Equipos*/
.centroEstadisticoTeams{
   .top{
      width: 100%;
      min-height:50px;
      #gradient .vertical-three-colors(@bg, @bg, 25%, darken(@bg,10%));
      display:block;
      border-bottom: 1px solid @color01;
      >span{
         font-weight: bold;
         padding: 10px 0 0 20px;
         width: 60%;
         float: left;
         display: block;
      }
      div{
         float: right;
         width: 30px;
         height: 30px;
         background: @color01;
         margin: 10px 30px;
         display: block;
         position: relative;
         cursor: pointer;
         span{
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 8px 6px 0 6px;
            border-color: @color02 transparent transparent transparent;
            position: absolute;
            top: 11px;
            left: 0;
            right: 0;
            margin: 0 auto;
         }
      }
   }
   .planteles{
      border-bottom: 1px solid @color01;
   }
   .itemsRanking{
      margin: 2%;
      .home{
         margin-right:1%;
         margin-bottom: 2%;
         border: 1px solid darken(@bg,20%);
         border-top: 0;
         width: 24%;
         float: left;
         position: relative;
         img{
            position: absolute;
            top: 0;
            right: 25%;
         }
      }

      .G_ranking{

      }
   }
   .lineUpFull{
      &.itemsRanking{
         margin: 0;
      }
      .subHeader{
         text-align: left;
         padding-left: 20px;
      }
      .team-name{
         border:none;
         .player{
            padding: 10px 20px;
            min-height: 62px;
            cursor: auto;
            &:hover, &:active{
               background-color:@color02;
               #gradient .vertical-three-colors(darken(@bg,10%), @bg, 20%, @bg);
               box-shadow:none;
            }
            .G_ranking{
               width: 30%;
               margin: 12px 0 0;
               height: 22px;
               .G_barsRanking{
                  div{
                     height: 100%;
                     float: left;
                     background: @color01;
                  }
                  .won{
                     background: @color01;
                  }
                  .empty{
                     background: @color02;
                  }
                  .lost{
                     background: lighten(@color02, 60%);
                  }
               }
               .num{
                  float: right;
                  line-height: 16px;
                  font-size: 18px;
                  small{
                     font-size: 14px;
                  }
               }
            }
            .teamLogo {
               background-color:@bg;
               border: 3px solid transparent;
               border-radius: 50%;
               box-shadow: 0 0 5px 0 darken(@bg, 10%);
               display: block;
               height: 40px;
               line-height: 40px;
               position: relative;
               text-align: center;
               width: 40px;
               float: left;
               img{
                  margin: 5px auto;
               }
            }
            .name{
               margin: 15px 12px 0;
               display: block;
               width: 20%;
               float: left;
            }
         }
         .content{
            float: left;
            width: 30%;
            margin:15px 0 0 2%;
            .box{
               float: left;
               width: 33%;
               .num{
                  width: 16px;
                  height: 10%;
                  display: block;
                  float: left;
                  font-size: 10px;
                  color:@color02_type;
                  border-radius: 4px;
                  text-align: center;
                  margin-right: 4px;
                  background: @color01;
                  &.won{
                     background: @color01;
                  }
                  &.empty{
                     background: @color02;
                  }
                  &.lost{
                     background: lighten(@color02, 60%);
                  }
               }
               .text{
                  text-transform: uppercase;
                  color: @bg_type;
                  font-size: 10px;
                  font-weight: bold;
               }
            }
         }
      }
      &.goals{
         .team-name{
            .content{
               .box{
                  width: 50%;
               }
            }
         }  
      }
      &.type{
         .team-name{
            .player{
               .name{
                  width: auto;
               }
               .G_ranking{
                  margin-left: 8%;
                  div{
                     &.second{
                        background: @color02;
                     }
                     &.third{
                        background: lighten(@color02, 60%)
                     }
                     &.fourth{
                        background: lighten(@color02, 80%)
                     }
                     &.fifth{
                        background: lighten(@color02, 40%)
                     }
                  }
               }
            }
            .content{
               width: 45%;
               .box{
                  width: 20%;
                  .num{
                     &.second{
                        background: @color02;
                     }
                     &.third{
                        background: lighten(@color02, 60%)
                     }
                     &.fourth{
                        background: lighten(@color02, 80%)
                     }
                     &.fifth{
                        background: lighten(@color02, 40%)
                     }
                  }
               }
            }
         } 
      }
   }
   .graphical, .data{
      .table {
         thead > tr th{
            text-align: left;
            padding: 0;
            vertical-align: middle;
            width: 10%;
            &.team{
               padding: 0 0 0 20px;
               width: 40%;
            }
         }
         tbody > tr td{
            text-align: left;
            padding: 10px 0;
         }
         .minutes{
            width: 40%;
            background: @color01;
            padding: 2px 0 8px;
            position: relative;
            margin: 0 auto;
            .num{
               display: block;
               text-align: center;
            }
            .down{
               width: 0; 
               height: 0; 
               border-left: 5px solid transparent;
               border-right: 5px solid transparent;                             
               border-top: 5px solid @bg;
               position: absolute;
               right: 10px;
               cursor: pointer;
            }
            .up{
               width: 0; 
               height: 0; 
               border-left: 5px solid transparent;
               border-right: 5px solid transparent;
               border-bottom: 5px solid @bg;
               position: absolute;
               left: 10px;
               cursor: pointer;
            }
            &.second{
               background: @color02;
               border-left: 1px solid @bg;
               border-right: 1px solid @bg;
            }
            &.third{
               background: lighten(@color02, 60%)
            }
            &.fourth{
               background: lighten(@color02, 80%)
            }
            &.fifth{
               background: lighten(@color02, 40%)
            }
            &.sixth{
               background: darken(@color01, 30%);
            }
         }
         .teamLogo{
            background-color: @bg;
            border: 3px solid transparent;
            border-radius: 50%;
            box-shadow: 0 0 5px 0 darken(@bg, 10%);
            display: inline-block;
            height: 40px;
            line-height: 40px;
            position: relative;
            text-align: center;
            width: 40px;
            margin: 0 10px;
            float: left;
            img{
               margin: 5px auto;
            }
         }
         .teamName{
            display: block;
            float: left;
            margin-top: 6px;
         }
         .point{
            background: @color01;
            width: 25px;
            border-radius: 50%;
            display: block;
            height: 25px;
            margin: 12px auto 0;
            &.second{
               background: @color02;
            }
            &.third{
               background: lighten(@color02, 60%)
            }
            &.fourth{
               background: lighten(@color02, 80%)
            }
            &.fifth{
               background: lighten(@color02, 40%)
            }
            &.sixth{
               background: darken(@color01, 30%);
            }
         }
         .number{
            text-align: center;
            span{
               display: block;
               margin-top: 6px;
            }
         }
      }
   }
   @media (max-width: @md){
      .lineUpFull{
         .team-name{
            .player{
               .name{
                  width: 15%;
               }
            }
            .content{
               width: 42%;
            }
         }
      }
      .graphical, .data{
         .table {
            thead > tr th{
               width: 12%;
               &.team{
                  width: 25%;
               }
            }
         }
      }
   }
   @media (max-width: @sm) {
      .itemsRanking{
         .home{
            width: 32%;
         }
      }
      .lineUpFull{
         &.itemsRanking{
            .G_ranking{
               width: 50%;
               float: right;
            }
         }
         .team-name{
            .player{
               min-height: 90px;
               .name{
                  width: 20%;
               }
            }
            .content{
               width: 70%;
               display: block;
               float: right;
               clear: both;
            }
         }
      }
      .graphical, .data{
         .table {
            .minutes{
               width: 80%;
               padding: 8px 0 14px;
               .down{
                  border-width: 8px;
                  border-bottom-width: 0;
               }
               .up{
                  border-width: 8px;
                  border-top-width: 0;
               }
            }
         }
      }
   }
   @media (max-width: @xs) {
      .itemsRanking{
         .home{
            width: 100%;
            margin-right:0%;
         }
      }
      .lineUpFull{
         .team-name{
            .content{
               width: 100%;
               .box{
                  .text{
                     font-size: 8px;
                  }
               }
            }
         }
      }
      .graphical, .data{
         .table {
            thead > tr th{
               width: 14%;
               &.team{
                  padding: 0;
                  width: 10%;
               }
            }
            tbody > tr td{
               text-align: center;
               line-height: 10px;
            }
            .teamLogo{
               width: 15px;
               height: 15px;
               line-height: 15px;
               display: block;
               float: none;
               margin: 0 auto;
               img{
                  margin: 0 auto;
               }
            }
            .minutes{
               width: 100%;
               .down{
                  right: 2px;
               }
               .up{
                  left:2px;
               }
            }
         }
      }
   }
}
/*Fin Centro Estadistico Equipos*/