/*Preview*/
.preview{
   padding: 15px 0;
   .caption{
     display: block;
   }
   .boxWrapper{
      .boxContent{
         &.boxEvolution{
            .home{
               .boxElements{
                  float: right;
                  margin-right: 10px;
               }
            }
            .away{
               .boxElements{
                  float: left;
                  margin-left: 10px;
               }
            }
            .boxGraphic{
               margin: 10px 0;
               position: relative;
               .chartContainer{
                  position: relative;
                  width:50%;
                  margin: 0 auto;
                  canvas{
                     margin: 0 auto;
                     width: 100% !important;
                     height:100% !important;
                  }
                  div{
                     position: absolute;
                     width: 80%;
                     padding: 10px 0;
                     background: @color02;
                     left: 0;
                     right: 0;
                     margin: 0 auto;
                     top: 42%;
                     text-align: center;
                     span{
                        color: @color02_type;
                        font-size: 14px;
                        text-transform: uppercase;
                        width: 100%
                     }
                  }
               }
               .titleBox{
                  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%;
                  }
               }
            }
         }
         &.boxGoalsPer{
            .home, .away{
               padding: 20px 0;
               height: 320px;
               .canavasPreview{
                  position: relative;
                  width: 230px;
                  margin: 0 auto;
                  div{
                     position: absolute;
                     width: 80%;
                     padding: 10px 0;
                     background: @color02;
                     left: 0;
                     right: 0;
                     margin: 0 auto;
                     top: 42%;
                     text-align: center;
                     span{
                        color: @color02_type;
                        font-size: 14px;
                        text-transform: uppercase;
                     }
                  }
                  canvas{
                     margin: 25px auto;
                     width: 230px !important;
                     height: 230px !important;
                  }
               }
               .boxSetTime{
                  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;
                     font-size: 12px;
                     z-index: 1;
                  }
               }
            }
         }
      }
   }
   &.maxSize-767 {
      .boxWrapper{
         .boxContent{
            &.boxEvolution{
               .boxGraphic{
                  .chartContainer{
                     width:75%;
                  }
                  .titleBox{
                     &.points{
                        left: -2%;
                     }
                  }
               }
            }
            &.boxGoalsPer{
               .home, .away{
                  height: 245px;
                  .canavasPreview{
                     width: 160px;
                     canvas{
                        width: 160px !important;
                        height: 160px !important;
                     }
                  }
                  .boxSetTime{
                     width:230px;
                     height:204px;
                  }
               }
            }
         }
      }
      .boxArc{
        width: 222px;
        background-position: -108px;
        padding: 22px 0 0;
        &.right{
          background-position: 85px;
        }
      }
   }
   &.maxSize-479 {
      .boxWrapper{
         .boxContent{
            &.boxEvolution{
               .boxGraphic{
                  .chartContainer{
                     width:70%;
                     div{
                        top: 30%;
                        span{
                           font-size: 10px;
                        }
                     }
                  }
                  .titleBox{
                     font-size: 10px;
                     width: 60px;
                     padding: 2px 0;
                     &.points{
                        left: -5%;
                        top: 38%;
                     }
                  }
               }
            }
            &.boxGoalsPer{
               .home, .away{
                  height: 250px;
                  .canavasPreview{
                     width: 150px;
                     canvas{
                        width: 150px !important;
                        height: 150px !important;
                     }
                  }
                  .boxSetTime{
                     width:204px;
                     height:204px;
                  }
               }
            }
         }
      }
      .boxArc{
        width: auto;
        padding: 0;
      }
   }
}
/*Fin Preview*/