/* Publicador */
@import "mc.mixins.less";
@import "mc.configuration.less";
@import "../../customization/less/mc.customVariables.less";
@import "mc.reset.less";

@xs: 480px;
@sm: 768px;
@md: 992px;
@lg: 1200px;

div[class*="dfMc-"]{
   .publisher{
      h5{
         color: @bg_dest_type;
         text-transform: uppercase;
         font: 14px @baseFontFamily;
         font-weight: bold;
      }
      .versus{
         background: @color02;
         clear: both;
         display: none;
         h5{
            color: @color01_type;
            line-height: 30px;
            text-indent: 4px;
         }

      }
      .panel-title{
         position: relative;
         cursor: pointer;
         >a{
            background: @color02;
            width: 100%;
            height: 100%;
            display: block;
            color: @color02_type;
            padding:7px;
            line-height:30px;
            text-transform: uppercase;
            font: 12px @baseFontFamily;
            font-weight: bold;
            border-bottom: 1px solid @color02_type;
            &:hover{
               text-decoration: none;
            }
         }
         span{
            color: @color02_type;
            font: 25px @baseFontFamily;
            font-weight: bold;
            position: absolute;
            right: 10px;
            top: 2px;
            height: 26px;
            line-height: 30px;
            width: 20px;
            text-align: center;
         }
         &:hover{
            a, span{
               background-color: @color02_h;
               color: @color02_h_type;
            }
            span{
               text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7);
            }
         }
      }
      .panel-body{
         .panel-title{
            a{
               background: lighten(@color02, 10%);
               color: @color02_type;
               border-bottom: 1px solid @color02_type;
            }
            &:hover{
               a, span{
                  background: lighten(@color02, 15%);
                  color: lighten(@color02_type, 5%);
               }
            }
         }
      }
      .contentPublisher{
         padding: 20px;
         display: none;
         position: relative;
         margin-top: 24px;
         .section{
            margin: 20px 0;
            color: @bg_type;
            text-transform: uppercase;
            font: 12px @baseFontFamily;
            font-weight: bold;
            min-height: 30px;
            label{
               width: 25%;
               &.no-content{
                  width: auto;
                  position: absolute;
                  top: 50%;
               }
            }
            .option{
               height: 42px;
               span{
                  line-height: normal;
                  margin-left: 25px;
                  display: block;
                  position: relative;
                  top: 50%;
                  transform: translateY(-50%);
               }
               &.otpLineup, &.optTeamComparison, &.optCoordinates, &.optHeatMap, &.optLeaders{
                  display: none;
               }
            }
         }
         .boxWrapper{
            .boxContent{
               padding: 10px;
               &.errorCtn{
                  text-align: center;
                  img{
                     margin: 0 auto;
                  }
               }
            }
         }
         .tabsWrapper{
            > ul{
               > li{
                  a{
                     span{
                        &:last-child{
                           background: @color02;
                           color: @color02_type;
                           border-radius: 4px;
                           font-size: 12px;
                           font-weight: 100;
                           margin-left: 30px;
                           padding: 1px 10px;
                        }
                     }
                  }
               }
            }
            .tabContent{
               span{
                  background: @color02;
                  color: @color02_type;
                  border-radius: 4px;
                  font-size: 12px;
                  padding: 10px;
               }
            }
         }
         input, textarea{
            border: 1px solid lighten(@bg_type, 80%);
            height: 25px;
            line-height: 25px;
            margin: 0 10px;
            padding: 0 5px;
            font-size: 12px;
         }
         textarea{
            padding: 5px;
            margin: 10px 0;
            height: 47px;
         }
         .loadPreview{
            text-align: center;
            iframe{
               margin: 0 auto;
            }
         }
         .roundedOne {
            background: -moz-linear-gradient(center top , #FCFFF4 0%, #DFE5D7 40%, #B3BEAD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
            border-radius: 50px;
            box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 3px rgba(0, 0, 0, 0.5);
            height: 20px;
            position: relative;
            width: 20px;
            float: left;
            display: block;
            margin: 10px 0;
         }
         .roundedOne .roundedIn:hover:after {
            .opacity(30);
         }
         .roundedOne .roundedIn:after {
            #gradient .vertical-three-colors(darken(@color01,10%), @color01, 28%,@color01 );
            border-radius: 50px;
            box-shadow: 0 1px 1px #FFFFFF inset, 0 1px 3px rgba(0, 0, 0, 0.5);
            content: "";
            height: 9px;
            left: 2px;
            .opacity(0);
            position: absolute;
            top: 2px;
            width: 9px;
         }
         .roundedOne .roundedIn {
            background: -moz-linear-gradient(center top , #222222 0%, #45484D 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
            border-radius: 50px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #FFFFFF;
            cursor: pointer;
            height: 13px;
            left: 4px;
            position: absolute;
            top: 4px;
            width: 13px;
         }
         .roundedOne .roundedIn.selected:after {
            .opacity(100);
         }
      }
      .volver{
         background: @color01;
         border-bottom: 2px solid darken(@color01, 10%);
         float: right;
         padding: 5px 20px;
         position: absolute;
         top: 10px;
         right: 20px;
         color: @color01_type;
         cursor: pointer;
         font-weight: bold;
         &:before{
            content: "";
            border-top: 16px solid transparent;
            border-bottom: 16px solid transparent;
            border-right:16px solid @color01;
            position: absolute;
            left: -16px;
            top: 0px;
         }
      }
      .maxSize-479.fixture .fecha .match .link a.btn{
         width: 25%;
         span{
            display: block;
         }
      }
   }
}
/* Fin Publicador */