/*Heat Map*/
.heatMap {
   position: relative;
   padding: 15px 0;
   background: darken(@bg, 5%);
   .borderColor(@bg);
   .fields{
      margin: 50px 0;
      .arrowHome, .arrowAway{
         position: relative;
         margin: 30% 0 0;
         width: 0px;
         height: 0px;
         border-style: solid;
         border-top-color: transparent;
         border-bottom-color: transparent;
         &:after{
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            box-sizing: border-box;
            border-color: transparent transparent transparent transparent;
            transform-origin: 0 0;
         }
      }
      .arrowHome{
         border-right-color: transparent;
         border-width: 20px 0 20px 20px;
         float: right;
         &:after{
            top: 22px;
            left: -22px;
            transform: rotate(-135deg);
         }
      }
      .arrowAway{
         border-width: 20px 20px 20px 0;
         border-left-color: transparent;
         float: left;
         &:after{
           right: -52px;
           transform: rotate(45deg);
           top: -21px;
         }
      }
      .boxHeat{
         position: relative;
         svg.frames, canvas.frames{
            position: absolute;
            top: -4%;
            width: 84%;
            left: 0;
            right: 0;
            margin: 0 auto;
            height: 100%;
            filter:alpha(opacity=70);
            opacity:.70;
            .pl{
               -webkit-animation: fadeInFromNone 3s 1;
               -moz-animation:    fadeInFromNone 3s 1;
               animation:         fadeInFromNone 3s 1;
            }
            @-webkit-keyframes fadeInFromNone{
               0%{
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
                  opacity:0;
               }
               100% {
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);
                  opacity:1;
               }
            }
            @-moz-keyframes fadeInFromNone {
               0%{
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
                  opacity:0;
               }
               100% {
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);
                  opacity:1;
               }
            }
            @-o-keyframes fadeInFromNone {
               0%{
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
                  opacity:0;
               }
               100% {
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);
                  opacity:1;
               }
            }
            @keyframes fadeInFromNone {
               0%{
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
                  opacity:0;
               }
               100% {
                  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);
                  opacity:1;
               }
            }
         }
      }
      .barHeatMap{
         text-align: center;
         margin: 20px auto;
         .boxElements{
            display: inline-block;
            margin: 0 10px;
            .data{
               font-size: 18px;
               font-weight: bold;
            }
         }
         ul{
            float: none;
            display: inline-block;
            vertical-align: top;
            margin-top: 10px;
            li{
               background: @referenceColor01;
               width: 30px;
               height: 12px;
               float: none;
               display: inline-block;
            }
         }
      }
   }
   .borderColor (@a) when (lightness(@a) >= 75%) {
      .fields{
         .arrowHome{
            &:after{
               border: 15px solid #000;
               box-shadow: -3px 3px 3px 0 rgba(0,0,0,0.5);
            }
         }
         .arrowAway{
            &:after{
               border: 15px solid #000;
               box-shadow: -3px 3px 3px 0 rgba(0,0,0,0.5);
            }
         }
      }
   }
   .borderColor (@a) when (lightness(@a) < 75%) {
      .fields{
         .arrowHome{
            &:after{
               border: 15px solid #FFF;
               box-shadow: -3px 3px 3px 0 rgba(256, 256, 256, 0.5);
            }
         }
         .arrowAway{
            &:after{
               border: 15px solid #FFF;
               box-shadow: -3px 3px 3px 0 rgba(256, 256, 256, 0.5);
            }
         }
      }
   }
   .caption{
      display: block;
      &.nav{
         display: none;
      }
   }
   &.maxSize-767{
      .fields{
         .barHeatMap{
            position: absolute;
            top: 50%;
         }
         .away{
            margin-top:70px;
         }
      }
   }
   &.maxSize-479{
      .caption{
         display: none;
         &.nav{
            display: block;
         }
      }
      .fields{
         .barHeatMap{
            position: relative;
            top: 0;
            ul{
               li{
                  width: 16px;
               }
            }
            .boxElements{
               margin:0 3px;
            }
         }
         .away{
            margin-top:0;
         }
         .V_divider{
            &:after{
               width: 0;
            }
         }
      }
   }
}
/*Fin HeatMap*/