/*Relato*/
.commentary{
   .boxCommentary{
      background: url('../images/linea-punteada.png') 10.8% 0 repeat-y, url('../images/linea-punteada.png') 89% repeat-y;
      display:block;
      margin:0 auto;
      float: none;
      .teamsShields{
         .boxElements{
            padding: 10px 0 0;
            &.local, &.away{
               >div {
                  background-repeat: no-repeat;
                  background-position: center;
               }
            }
            &.away{
               float: right;
            }
         }
      }
      .commentaryFilter {
         margin: 0px auto;
         border-radius: 4px;
         text-align: center;
         width: 68%;
         .menuFilter {
            border-radius: 4px;
            margin-left: 0px;
            padding: 0px;
            width: auto;
            height: auto;
            .text{
               color:@color02;
               text-transform: uppercase;
               text-align:center;
               font-size: 10px;
               font-weight: 600;
               margin-top: 15px;
               margin-left: 0px;
               margin-right: -20px;
               font-family: @baseFontFamily;
               letter-spacing: -1px;
            }
            .menuButtons{
               background: darken(@bg,30%);
               height: 37px;
               border-radius:4px;
               font-size: 8px;
               text-align: center;
               padding-top:0px;
               .sevenColumns{
                  display: grid;
                  grid-template-columns: repeat(7, auto);
                  height: 37px;
                  button{
                     background: none;
                  }
                  .titleButton{
                     color:@color02;
                     font-weight: 700;
                     font-size: 8px;
                     margin-top: 0px auto;
                     letter-spacing:0px
                  }   
                  .all, .goals, .yellowCard, .redCard, .corners, .offside, .change{
                     .imgButton{
                        background-image: url(../images/icons_sheet.png);
                        height:21px;
                        width: 23px;
                        margin-left: auto;
                        margin-right: auto;
                        margin-top: 2px;
                        display: block;
                     }  
                     &:hover, &.active {
                        background:@bg;
                        height: 37px;
                        border-radius:4px;
                        .box-shadow(0 3px 4px -2px darken(@bg, 60%));
                     }
                  }
                  .all{
                     .imgButton{
                        background-position: 155px -75px;
                     }    
                  }
                  .goals{
                     .imgButton{
                        background-position: 772px -75px;
                     }   
                  }
                  .yellowCard{
                     .imgButton{
                        background-position: 425px -21px;
                     }   
                  }
                  .redCard{
                     .imgButton{
                        background-position: 408px -21px;
                     }   
                  }
                  .corners{
                     .imgButton{
                        background-position: 824px -126px;
                     }   
                  }
                  .offside{
                     .imgButton{
                        background-position: 793px -126px;
                     }   
                  }
                  .change{
                     .imgButton{
                        background-position: 115px -21px;
                     }   
                  }
               } 
            }
         }
      }
      .commentaryContent{
         .hasMinHeight {
            .boxDescription {
               .data {
                  background:@color02;
                  .text{
                     color:@color02_type;
                     padding-bottom: 25px;
                     text-transform: uppercase;
                  }
               }
            }
         }
         .outstanding {
            .boxDescription {
               float: none;
               .data{
                  background:@bg;
                  border: 1px solid @color01;
                  border-bottom: 3px solid @color01;
                  border-radius: 0;
                  .text{
                    color: @bg_type;
                    .flex-display(@display: flex);
                    .flex-wrap(@wrap: nowrap);
                     .profilePicture{
                        overflow: hidden;
                        border-radius: 5px;
                        height: 48px;
                        width: 66px;
                        img{
                          width: 48px;
                          .border-radius(6px);
                          height: 48px;
                        }
                     }
                     .profileText{
                        vertical-align: top;
                        width:100%;
                        span{
                          display: block;
                          padding-left: 10px;
                          a{
                            word-break: break-word;
                          }
                        }
                        div{
                          color: darken(@bg_type, 10%);
                          font-size: 12px;
                          margin-bottom: 10px;
                          padding-left: 10px;
                        }
                     }
                  }
                  a{
                     color: @bg_type;
                     text-decoration: underline;
                     font-weight: bold;
                  }
               }
            }
         }
         .boxDescription {
            margin:0 auto 0;
            .data{
               width: 95%;
               min-height:20px;
               background:@bg;
               margin:10px auto 0;
               .border-radius(4px);
               .box-shadow(0 0 3px darken(@bg, 60%));
               position: relative;
               color: @bg_type;
               .arrowLeft{
                  border-bottom: 12px solid transparent;
                  border-right: 20px solid darken(@bg, 60%);
                  border-top: 12px solid transparent;
                  position: absolute;
                  top: 7px;
                  left: -20px;
                  width: 0;
                  height: 0;
                  &:after{
                     content:"";
                     width:0;
                     height:0;
                     border-bottom: 12px solid transparent;
                     border-right: 20px solid @bg;
                     border-top: 12px solid transparent;
                     position:absolute;
                     top: -12px;
                     left: 0px;
                  }
               }
               .arrowRight {
                  border-top: 12px solid transparent;
                  border-bottom: 12px solid transparent;
                  border-left: 20px solid darken(@bg, 60%);
                  position: absolute;
                  top: 7px;
                  right: -20px;
                  width: 0;
                  height: 0;
                  &:after{
                     content:"";
                     width:0;
                     height:0;
                     border-top: 12px solid transparent;
                     border-bottom: 12px solid transparent;
                     border-left: 20px solid @bg;
                     position:absolute;
                     top: -12px;
                     right: 0;
                  }
               }
               .media{
                  .showMedia{
                     border-top: 1px dotted #000000;
                     padding-bottom: 12px;
                  }
               }
               .text{
                  font-size: 14px;
                  text-transform: none;
                  padding:0px 10px 16px;
                  word-wrap: break-word;
               }
            }
            &.expandLeft, &.expandRight{
               .boxSocial {
                  &.showSocial{
                     border-top: 1px dotted @color02;
                     position: relative;
                     min-height: 40px;
                     .facebookCommentsButton{
                        display: inline-block;
                        margin: 12px 12px 0 0;
                        vertical-align: top;
                        background: #4c69ba;
                        background: -webkit-gradient(linear, center top, center bottom, from(#4c69ba), to(#3b55a0));
                        background: -webkit-linear-gradient(#4c69ba, #3b55a0);
                        border: none;
                        -webkit-border-radius: 2px;
                        color: #fff;
                        cursor: pointer;
                        font-weight: bold;
                        height: 20px;
                        line-height: 20px;
                        padding: 0 6px;
                        text-shadow: 0 -1px 0 #354c8c;
                        white-space: nowrap;
                        font-size: 12px;
                        text-shadow: 0 -1px 0 #354c8c;
                        .fbIcon{
                           background-image: url("../images/fb_icons.png");
                           background-size: auto;
                           background-repeat: no-repeat;
                           background-position: 0 -42px;
                           display: inline-block;
                           height: 14px;
                           width: 14px;
                           margin: 3px 3px 0 0;
                           float: left;
                        }
                        .text{
                           -webkit-user-select: none;
                           -khtml-user-select: none;
                           -moz-user-select: none;
                           -o-user-select: none;
                           -ms-user-select: none;
                           user-select: none;
                        }
                        &:hover{
                           background:#5b7bd5;
                           background:-webkit-gradient(linear, center top, center bottom, from(#5b7bd5), to(#4864b1));
                           background:-webkit-linear-gradient(#5b7bd5, #4864b1);
                           border-color:#5874c3 #4961a8 #41599f;
                           -webkit-box-shadow:inset 0 0 1px #607fd6
                        }
                     }
                     .twitterButton {
                        display: inline-block;
                        padding: 9px 12px 5px;
                     }
                  }
               }
            }
            &.expandLeft{
               .boxSocial{
                  &.showSocial{
                     text-align: right;
                  }
               }
            }
         }
         .boxTime {
            position: relative;
            .dataSmall{
               width: 100%;
               min-height:27px;
               background:@bg;
               .border-radius(4px);
               .box-shadow(0 0 5px darken(@bg, 60%));
               position: relative;
               margin-top: 2px;
               color: @bg_type;
               .arrowRight {
                  border-top: 8px solid transparent;
                  border-bottom: 8px solid transparent;
                  border-left: 14px solid darken(@bg, 60%);
                  position: absolute;
                  top: 14px;
                  right: -14px;
                  width: 13px;
                  height: 14px;
                  &:after{
                     content:"";
                     width:0;
                     height:0;
                     border-top: 8px solid transparent;
                     border-bottom: 8px solid transparent;
                     border-left: 14px solid @bg;
                     position:absolute;
                     top: -8px;
                     right: 0px;
                  }
               }
               .arrowLeft {
                  border-bottom: 8px solid transparent;
                  border-right: 14px solid darken(@bg, 60%);
                  border-top: 8px solid transparent;
                  position: absolute;
                  top: 14px;
                  left: -14px;
                  width: 13px;
                  height: 14px;
                  &:after{
                     content:"";
                     width:0;
                     height:0;
                     border-bottom: 8px solid transparent;
                     border-right: 14px solid @bg;
                     border-top: 8px solid transparent;
                     position:absolute;
                     top: -8px;
                     left: 0px;
                  }
               }
            }
            &.right{
               .dataSmall{
                  float: right;
               }
            }
         }
         .boxIcons{
            .boxElements{
                  > div{
                     background: #FFF;
                     margin-top: 14px;
                     &.incTypeIcon{
                        width: 10px;
                        height: 10px;
                        line-height: 16px;
                        .box-shadow(0 0 3px darken(@bg, 25%));
                        margin-top: 25px;
                     }
                     .goal{
                        .iconsheet();
                        background-position: -145px -67px;
                        width: 35px;
                        height: 35px;
                        &.own{
                           .iconsheet();
                           background-position: -119px -67px;
                        }
                     }
                     .change{
                        .iconsheet();
                        background-position: -803px -13px;
                        width: 35px;
                        height: 35px;
                     }
                     .cornerKick{
                        .iconsheet();
                        background-position: -94px -120px;
                        width: 35px;
                        height: 35px;
                     }
                     .offside{
                        .iconsheet();
                        background-position: -125px -120px;
                        width: 35px;
                        height: 35px;
                     }
                     .yellowCard{
                        .iconsheet();
                        background-position: -501px -21px;
                        width: 18px;
                        height: 21px;
                        margin: 8px auto 0;
                     }
                     .redCard{
                        .iconsheet();
                        background-position: -518px -21px;
                        width: 18px;
                        height: 21px;
                        margin: 8px auto 0;
                     }
                     .redByDoubleYellowCard{
                        .iconsheet();
                        background-position: -547px -21px;
                        width: 24px;
                        height: 24px;
                        margin: 8px auto 0;
                     }
                  }
            }
         }
         .boxSocial {
            .facebookLikeButton {
               display: none;
            }
            .facebookComments {
               display: none;
            }
            .twitterButton {
               display: none;
            }
            .facebookCommentsButton{
               display: none;
            }
         }
      }
   }
   &.maxSize-1199{
      .boxCommentary{
         .commentaryFilter{
            width: 65%;
               .menuFilter{
                  .text{
                     font-size: 9px;
                     }                  
               }
         
         }
      }
   }
   &.maxSize-1199{
      .boxCommentary{
         .commentaryContent{
            .boxDescription{
               .data{
                  width: 90%;
               }
            }
            .boxTime{
               .dataSmall{
                  width: 90%;
               }
            }
         }
      }
   }
   &.maxSize-991{
       .boxCommentary{
         .commentaryFilter{
               width: 57%;
            .menuFilter{
               .text{
                  }

                  
            }
         }
      }
   }
   &.maxSize-991 {
      .boxCommentary{
         .commentaryContent{
            .boxDescription{
               .data{
                  width: 85%;
               }
            }
            .boxTime{
               .dataSmall{
                  width: 80%;
               }
            }
          }
      }
   }
   &.maxSize-767 {
      .boxCommentary{
         background-position: 19.5% 0, 80.55% 0;
         .commentaryContent{
         }
      }
   }
   &.maxSize-767 {
      .boxCommentary{
         .commentaryFilter{
              width: 65%;
            .menuFilter{
               .text{ 
               }


            }
        
         }
         
            
      }   
   }
   &.maxSize-479 {  
      .boxCommentary{
         .commentaryFilter{
              width: 100%;
            .menuFilter{
               .text{ 
               }


            }
        
         }
         
            
      }   

   }
   &.maxSize-479 {
      .BG_title{
         margin:15px 15px 0;
      }
      .boxCommentary{
         background-position: 0%  0, 100% 0;
         .teamsShields{
            .local{
               div{
                  float: left;
               }
            }
            .away{
               div{
                  float: right;
               }
            }
         }
         .commentaryContent{
            .boxDescription{
               .data{
                  width: 90%;
                  .arrowRight {
                     border-top: 8px solid transparent;
                     border-bottom: 8px solid transparent;
                     border-left: 12px solid darken(@bg, 60%);
                     right: -12px;
                     &:after{
                        border-top: 8px solid transparent;
                        border-bottom: 8px solid transparent;
                        border-left: 12px solid @bg;
                        position:absolute;
                        top: -8px;
                     }
                  }
                  .arrowLeft {
                     border-bottom: 8px solid transparent;
                     border-right: 12px solid darken(@bg, 60%);
                     border-top: 8px solid transparent;
                     left: -12px;
                     top: 7px;
                     &:after{
                        border-bottom: 8px solid transparent;
                        border-right: 12px solid @bg;
                        border-top: 8px solid transparent;
                        top: -8px;
                     }
                  }
               }
               &.expandRight{
                  width:83.4%;
                  .data{
                     width: 85%;
                     float: right;
                  }
               }
               &.expandLeft{
                  width:83.4%;
                  .data{
                     width: 85%;
                     float: left;
                  }
               }
               &.expandLeft,&.expandRight{
                  .boxSocial {
                     &.showSocial{
                        .facebookCommentsButton{
                           margin: 12px;
                        }
                     }
                  }
               }
            }
            .boxTime{
               .dataSmall{
                  width: 30px;
                  margin-left: 3px;
                  margin-right: 3px;
                  .arrowTop{
                     border-left: 8px solid transparent;
                     border-right: 8px solid transparent;
                     border-bottom: 14px solid darken(@bg, 60%);
                     position: absolute;
                     top: -13px;
                     left: 0;
                     width: 13px;
                     height: 14px;
                     margin: 0 auto;
                     right: 0;
                     &:after{
                        content:"";
                        width:0;
                        height:0;
                        border-left: 8px solid transparent;
                        border-right: 8px solid transparent;
                        border-bottom: 14px solid @bg;
                        position:absolute;
                        top: 1px;
                        left: -8px;
                     }
                  }
               }
            }
            .boxIcons{
               width: 8.3%;
               .boxElements{
                  >div{
                     margin-bottom: 10px;
                     &.incTypeIcon{
                        float: left;
                        margin: 16px 5px 13px 12px;
                     }
                  }
               }
               &.right{
                  .boxTime{
                     .dataSmall{
                        float: right;
                     }
                  }
                  .boxElements{
                     >div{
                        float: right;
                        margin: 16px 13px 12px 12px;
                     }
                  }
               }
            }
         }
      }
   }
   &.maxSize-310{
     .boxCommentary {
       .commentaryContent {
         .outstanding {
           .boxDescription {
             .data {
               .text{
                 display: block;
                 .profilePicture{
                   display: block;
                   width: 48px;
                   margin: 0 auto 10px;
                 }
                 .profileText{
                   text-align: center;
                 }
               }
             }
           }
         }
       }
     }
   }
   .commentaryView-1 {
      .boxCommentary{
         background: darken(@bg, 0.75%);
         .commentaryContent{
            .commentaryItem{
               &.teamChanged{
                  .boxIcons >div{
                     //top: 15px;
                  }
                  .boxInfo{
                     //padding-top: 15px;
                  }
               }
               &.outstanding .boxInfo{
                  margin-left: 16.66666%;
               }
               &.incType-status{
                  .boxInfo{                  
                     border-left-color: darken(@bg, 41%);
                     border-left-style: dotted;
                     .boxIcons{
                        .boxElements{
                           .iconIncidence{
                              svg{                              
                                 fill: darken(@bg, 60%);
                              }

                           }
                        }
                     }
                     .boxDescription{
                        //width: 100%;
                        .data{
                           background: transparent !important;
                           .text{
                              color: @color02;
                           }
                        }
                     }
                  }
               }
               .boxTime{
                  .dataSmall{
                     width: 100%;
                     background: none;
                     box-shadow: none;
                     .text{
                        &.number{
                           color: lighten(@bg_type, 40%);
                           font-family: @type_Special;
                           font-weight: bold;   
                           padding: 10px;
                           transform: translateY(-15px);
                           background-color: darken(@bg, 0.75%);                     
                        }
                     }


                  }
               }
               .boxInfo{
                  border-left: 2px solid transparent;
                  background: darken(@bg, 0.75%);
                  box-shadow: none;
                  border-radius: 0;
                  padding-bottom: 15px;
                  .boxIcons{
                   >div{
                     position: absolute;
                     top: 0;
                     left: -21px;
                     z-index: 1;
                  }
                  .boxElements{
                     box-shadow: none;
                     >div{
                        .mc-incTypeIcon{                              
                           background-image: none !important;
                        }
                        &:not(.tooltip){
                           width: 40px;
                           height: 40px;
                           border: none;
                           box-shadow: none;
                           margin-top: 10px;
                           margin-bottom: 10px;
                           overflow: visible;
                        }
                     }
                     .iconIncidence{
                        padding: 3px;
                        width: 40px;
                        height: 40px;
                        border-radius: 40px;
                        .box-shadow( 0 0px 10px 5px fade(darken(@bg,20%), 50%));
                        #gradient .vertical-three-colors(@bg, @bg, 20%, darken(@bg,20%));
                        div{  
                           width: 34px;
                           height: 34px;
                           border-radius: 40px;
                           .box-shadow(inset 5px 8px 11px 7px darken(@bg, 10%));
                           background: @bg;
                           svg{
                              max-height: 25px;
                              max-width: 25px;
                              margin: 5px;
                           }
                        }
                     }
                  }

               }
               .boxDescription{
                  padding-left: 59px;
                  .data{
                     background: transparent;
                     border: none;
                     box-shadow: none;
                     width: 98%;
                     .mc-message{
                        span{
                           font-weight: bold;
                        }
                     }
                     .media{
                        margin: 10px;
                        .showMedia{
                           border-top: none;
                        }
                     }
                     .text{
                        padding-bottom: 0;
                     }
                  }
                  .profilePicture{
                     display: none;
                  }
               }
               .boxPlayers{
                  clear: both;
               }
            }
            .boxTimer{
               text-align: left;
               display: inline-block;
                  span{                     
                     color: lighten(@bg_type,60%);
                     font-size: 12px;
                  }
                  svg{
                     margin-top: 5px;
                     margin-right: 5px;
                  }
                  *{
                     fill: lighten(@bg_type,60%);
                     transform: translateY(1px); 
                  }
            }
         .boxPlayers{
            .boxStuff{
               border: 3px solid transparent;
               width: 100px;
               height: 100px;
               &.m-homeBorder{
                  border-color: @homeColor;
               }
               &.m-awayBorder{
                  border-color: @awayColor;
               }
               svg{
                  width: 100px;
                  height: 100px;
                  left: 0;
               }
            }
            .boxData{
               margin-top: 10px;
               .square{
                  padding: 5px;
                  background: @homeColor;
                  color: @homeColor_type;
                  margin: 0px 10px 10px 0;
                  float: left;
                  width: 30px;
                  height: 30px;
                  text-align: center;
                  &.m-homeBG{                          
                     background: @homeColor;
                     color: @homeColor_type;
                  }
                  &.m-awayBG{                          
                     background: @awayColor;
                     color: @awayColor_type;
                  }
               }
               .position{
                  &.m-homeType{                          
                     color: @homeColor;
                  }
                  &.m-awayType{                          
                     color: @awayColor;
                  }                        
               }
               svg{
                  height: 30px;
               }
            }
         }
         &.homeInc{
            .boxInfo{
               border-left-color: @homeColor;
               .boxIcons{
                  .boxElements{
                     .iconIncidence{
                              //border-color: @homeColor;
                              svg{                              
                                 fill: @homeColor;
                              }

                           }
                        }
                     }
                  }
               }
               &.awayInc{
                  .boxInfo{
                     .boxIcons{
                        .boxElements{
                           .iconIncidence{
                              //border-color: @awayColor;
                              svg{                              
                                 fill: @awayColor;
                              }

                           }
                        }
                     }
                  }
               }
               &.incType-goal{ 
                  .boxDescription{
                     .box-shadow( 0px 0px 11px 5px darken(@bg, 10%));
                     width: 98%;
                     .data{
                        margin-top: 5px;
                     }
                     .secondPlayer{
                        .boxStuff{
                           width: 70px;
                           height: 70px;
                           svg{
                              width: 70px;
                              height: 70px;
                           }
                        }
                        .boxData{
                           .square{
                              width: 20px;
                              height: 20px;
                              font-size: 10px;
                           }
                           svg{
                              height: 20px;
                           }
                           .text.name, .position{ font-size: 13px; }
                        }
                     }
                  }   
               }
               &.incType-twitter{
                  .boxInfo{
                     border-left-color: #00acee;
                     .boxIcons .boxElements .iconIncidence div svg{
                        fill: #00acee;                        
                     }
                     .boxDescription{
                        .data{
                           border: 1px solid darken(@bg,20%);
                           border-radius: 5px;
                        }
                        .profilePicture{
                           display: block;
                        }

                     }
                  } 
               }

            }
         }
         .commentaryFilterView-1{
            background: @bg;
            .box-shadow( 0px 0px 11px 5px darken(@bg, 10%));
            height: 65px;
            margin-bottom: 10px;
            .menuFilter{
               .text{
                 margin-top: auto;
                 margin-left: auto;
                 margin-right: auto;
                 letter-spacing: initial;
               }
               .menuButtons{
                  background: @bg;
                  padding: 9px 0;
                  .sevenColumns{
                     text-align: center;
                     display: flex;
                     button{                     
                           background-image: none;
                           margin-top: 10px;
                           width: 36px;
                           height: 36px;
                           border-radius: 36px;
                           text-align: center;
                           #gradient .directional-three-colors(darken(@bg,15%), 0%, darken(@bg,3%), 50%, darken(@bg,20%), 80%, -45deg);    
                           position: relative;
                           margin: 7px auto;                  
                           div{
                              width: 30px;
                              height: 30px;
                              border-radius: 30px;
                              background: @bg;
                              margin: 0 auto;
                              svg{
                                 max-height: 20px;
                                 max-width: 20px;
                                 margin: 5px;
                              }
                           }
                           &:hover, &.active,&:focus {                
                              #gradient .vertical(darken(@bg,10%), darken(@bg,2%));
                              width: 46px;
                              height: 46px;
                              border-radius: 46px;
                              outline: 0;
                              margin: 0 auto;
                              .box-shadow(0 0 3px darken(@bg, 25%));
                              div{  
                                 .box-shadow( 0 0px 10px 5px fade(darken(@bg,20%), 50%));
                                 #gradient .vertical-three-colors(@bg, @bg, 20%, darken(@bg,20%));
                                 width: 40px;
                                 height: 40px;
                              }
                              a{  
                                 width: 34px;
                                 height: 34px;
                                 border-radius: 34px;
                                 .box-shadow(inset 5px 8px 11px 7px darken(@bg, 10%));
                                 background: @bg;
                                 display: block;
                                 position: absolute;
                                 top: 6px;
                                 left: 6px;
                              }
                              svg{
                                 z-index: 99999;
                                 position: absolute;
                                 top: 8px;
                                 left: 8px;
                              }
                           }
                     }
                  }
               }
            }
         }
      }
      &.maxSize-479{
         .boxCommentary {
            .commentaryContent {
               .boxInfo{
                  .boxDescription {
                     padding-left: 25px;
                     .data {
                        margin-top: 10px;
                     }
                  }
               }
               .commentaryItem .boxTime .dataSmall .text.number{
                 font-size: 17px;
                 background: transparent;
                 transform: translate(-10px, -35px);
               }
            }
            .commentaryFilter{
               width: 100%;
               .menuFilter{
                  .menuButtons{
                     .sevenColumns{
                        grid-template-columns: repeat(5, auto);

                     }
                  }
               }
            }
         }
      }
   }

}
/*Fin Relato*/