/*Preview*/
.preview{
   .gamesContent{
      .content{
         max-height: 235px;
         overflow-y: auto;
      }
      .games{
         padding:10px;
         .circle{
            width: 16px;
            height: 16px;
            line-height: 18px;
            margin: 10px 0 0 5px;
            color:#FFFFFF;
            font-size: 11px;
            text-shadow: 0 0 3px #000000;
            &.lost{
               background: @refColor04;
            }
            &.tied{
               background: lighten(@bg_type, 70%);
            }
         }
         .description{
            .data{
               min-height: 40px;
               margin:0;
               color: @bg_type;
               text-align: center;
               font-size: 11px;
               text-transform: uppercase;
               font-weight: bold;
               line-height: 12px;
               .namesTeam{
                  padding-top: 10px;
               }
               .won{
                  color:@refColor05_type;
               }
               .lost{
                  color:@refColor06_type;
               }
               .tied{
                  color: lighten(@bg_type, 70%);
               }
               .date{
                  text-align: center;
                  line-height: 12px;
                  font-size: 12px;
                  padding-top: 8px;
                  border-right: 1px solid darken(@bg,20%);
                  min-height: 40px;
                  span{
                     display: block;
                     color: @bg_type;
                     font-weight: normal;
                     &:nth-child(2){
                        font-weight: bold;
                     }
                  }
               }
            }
         }
      }
      .visitant{
         &:after{
            .G_divider;
         }
      }
   }
   .evolution{
      text-align: center;
      margin: 0;
      .teams{
         height: 35px;
         margin: 10px 0;
         .colRight{
            position: relative; 
            height: 35px;
            &:after{
               .G_divider;     
            }
            .position{
               position: absolute;
               left: 0;
               .circle{
                  margin-right: 15px;
               }
            }
         }
         .colLeft{
            position: relative; 
            .position{
               position: absolute;
               right: 0;
               margin-right: 20px;
            }
         }
         .circle{
            background-repeat: no-repeat;
            background-position: center center;
            margin-right: 0;
            line-height: 30px;
            &.refTeam{
               width: 20px;
               height: 20px;
               margin-top: 8px;
               margin-right: 15px;
            }
            &.white{
               background: #FFFFFF;
            }
         } 
      }
      .graphicalArea{
         margin-bottom: 10px;
         position: relative;
         .canvasPosition{
            position: relative;
            width:50%;
            margin: 0 auto;
            .noData{
               position: absolute;
               width: 80%;
               padding: 10px 0;
               background: @color02;
               left: 0;
               right: 0;
               margin: 0 auto;
               top: 42%;
               .dataText{
                  color: @color02_type;
                  font-size: 14px;
                  text-transform: uppercase;
                  width: 100%
               }
            }
         }
         canvas{
            margin: 0 auto;
            width: 100% !important;
            height:100% !important;
         }
         span{
            display: block;
            width: 70px;
            margin: 0 auto;
            background: @color02;
            color:@color02_type;
            padding: 3px 0;
            font-size: 12px;
            text-align: center;
            &.points{
               float: left;
               -webkit-transform: rotate(270deg);
               -moz-transform: rotate(270deg);
               -o-transform: rotate(270deg);
               position: absolute;
               left: 16%;
               top: 50%;
            }
         }
      }
   }
   .goalsPerMinute{
      position: relative;
      text-align: center;
      .home, .visitant{
         padding: 20px 0;
         height: 320px;
         .canvasPosition{
            position: relative;
            width: 230px;
            margin: 0 auto;
            .noData{
               position: absolute;
               width: 80%;
               padding: 10px 0;
               background: @color02;
               left: 0;
               right: 0;
               margin: 0 auto;
               top: 42%;
               span{
                  color: @color02_type;
                  font-size: 14px;
                  text-transform: uppercase;
               }
            }
         }
         canvas{
            margin: 25px auto;
            width: 230px !important;
            height: 230px !important;
         }
         .timeCanvas{
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            width:330px; 
            height:284px;
            span{
               background: @color02;
               color: @color02_type;
               padding: 2px 0;
               text-align: center;
               width: 38px;
               display: block;
               position: absolute;
               margin: 0 auto;
               left: 0;
               right: 0;
            }
         }
         .timeCanvasWS{
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            width:330px; 
            height:284px;
            span{
               background: @color02;
               color: @color02_type;
               padding: 2px 0;
               text-align: center;
               width: 38px;
               display: block;
               position: absolute;
               margin: 0 auto;
               left: 0;
               right: 0;
            }
         }
      }
      .visitant{
         &:after{
            .G_divider;     
         }
      }
      .team-name{
         position: relative;
         border: 0;
         .caption{
            div{
               width: 100%;
            }
         }
      }
   }
   .blockPasses{
      .content {
         .teamComparison{
            .comparing {
               .bar{
                  width: 80%;
               }
            }
         }
      }
   }
   &.maxSize-991{
      .teamComparison {
         .comparing {
            .bar{
                 width: 85%;
            }
            .num{
               width: 6%;
            }
         }
      }
   }
   &.maxSize-767 {
      .passes{
         &.colLeft, &.colRight{
            .effectivity{
               .graphic{
                  float: none;
               }
               .data{
                  float: none;
                  width: 50%;
                  margin: 10px auto;
               }
            }
            .correct, .incorrect{
               line-height: 20px;
            }
         }
      }
      .gamesContent{
         .games{
            .description{
               .data{
                  font-size: 10px;
               }
            }
            .circle{
               margin: 10px 0 0;
            }
         }
      }
      .evolution{
         .graphicalArea{
            .canvasPosition{
               position: relative;
               width:85%;
            }
            span{
               &.points{
                  left: -2%;
               }
            }
         }
      }
      .teamComparison {
         .comparing {
            .bar{
                 width: 80%;
            }
            .num{
               width: 10%;
            }
         }
      }
      .goalsPerMinute{
         .home, .visitant{
            height: 245px;
            .canvasPosition{
               width: 160px;
               .noData{
                  span{
                     font-size: 12px;
                  }
               }
            }
            canvas{
               margin: 25px auto;
               width: 160px !important;
               height: 160px !important;
            }
            .timeCanvas{
               width:230px; 
               height:204px;
            }
            .timeCanvasWS{
               width:230px; 
               height:204px;
            }
         }
      }
      .blockShots {
         .content{
            .colLeft, .colRight{
               .arc{
                  .tp-arc-top{
                     .tooltip{
                        margin-right: 0;
                     }
                  }
               }
            }
         }
      }
   }
   &.maxSize-479 {
      .gamesContent{
         .games{
            padding: 0;
            &.mobile{
               .firstRow, .secondRow{
                  min-height: 55px;
                  padding: 10px;
                  .teamLogo{
                     .circle{
                        height: 33px;
                        line-height: 30px;
                        width: 33px;
                        margin: 0;
                     }
                  }
                  .results{
                     height: 40px;
                     overflow-y: auto;
                     .position{
                        display: inline-block;
                        float: left;
                        width:20%;
                        padding-left: 1%;
                        height: 40px;
                        .circle{
                           cursor: pointer;
                           margin:10px 0;
                           &.selected{
                              width: 25px;
                              height: 25px;
                              line-height: 25px;
                              margin: 6px 0;
                           }
                        }
                     }
                     /* one item */
                     .position:nth-child(1):nth-last-child(1) {
                        width: 100%;
                     }

                     /* two items */
                     .position:nth-child(1):nth-last-child(2),
                     .position:nth-child(2):nth-last-child(1) {
                        width: 50%;
                     }

                     /* three items */
                     .position:nth-child(1):nth-last-child(3),
                     .position:nth-child(2):nth-last-child(2),
                     .position:nth-child(3):nth-last-child(1) {
                        width: 33.3333%;
                     }

                     /* four items */
                     .position:nth-child(1):nth-last-child(4),
                     .position:nth-child(2):nth-last-child(3),
                     .position:nth-child(3):nth-last-child(2),
                     .position:nth-child(4):nth-last-child(1) {
                        width: 25%;
                     }
                  }
               }
               .secondRow{
                  &.showLine{
                     border-top: 1px solid darken(@bg,20%);
                  }
               }
               .rowDescription{
                  position: relative;
                  .description{
                     .data{
                        margin: 0 auto;
                        z-index: 999;
                     }
                  }
                  &:after{
                     content: "";
                     width:100%;
                     border-bottom: 1px solid darken(@bg,20%);
                     margin: 0 auto;
                     position: absolute;
                     top: 50%;
                  }
               }
            }
         }
         >.local, >.visitant{
            position: relative;
            height: 74px;
            .games{
               position: absolute;
               width: 100%;
               .left{
                  width: 25%;
                  margin-left: 20%;
               }
               .middle{
                  width: 25%;
                  margin-left: 48%;
               }
               .right{
                  width: 25%;
                  margin-left: 76%;
               }
               .description{
                  position: absolute;
                  width: 96%;
                  top: 100%;
                  z-index: 999;
                  .data{
                    // width: 100%;
                  }
               }
               .circle{
                  &.white{
                     width: 33px;
                     height: 33px;
                     line-height: 34px;
                     margin: 0;
                  }
               }
            }
         }
      }
      .passes{
         &.colLeft, &.colRight{
            .effectivity{
               .data{
                  width: 70%;
               }
            }
         }
      }
      .blockCards{
         .content{
            .colRight {
               .position{
                  margin: 0 auto;
                  width: 65%;
               }
            }
            .colLeft {
               .position{
                  margin: 0 auto;
                  width: 65%;
               }
            }
         }
      }
      .teamComparison {
         .comparing {
            .bar{
                 width: 74%;
            }
            .num{
               width: 13%;
               font-size: 12px;
            }
         }
      }
      .goalsPerMinute{
         .home, .visitant{
            height: 250px;
         }
      }
      .blockPasses  {
         .content {
            .mobileTablet {
               .colLeft, .colRight {
                  .data {
                     .number{
                        text-align: center;
                        width: 100%;
                     }
                     .text{
                        text-align: center;
                        display: inline-block;
                        width: 100%;
                     }
                     .incorrect{
                        padding: 0;
                     }
                  }
               }
            }
         }
      }
      .evolution{
         .graphicalArea{
            span{
               &.points{
                  left: -6%;
               }
            }
            .canvasPosition{
               width:80%;
               .noData{
                  top: 30%;
                  .dataText{
                     font-size: 10px;
                  }
               }
            }
         }
      }
   }
}
/*Fin Preview*/