/* Planteles */
.planteles{
   .nav-pills{
      padding: 5px;
      background-color:@bg;
      >li{
         cursor: pointer;
         &.active >a,&.active >a:hover,&.active >a:focus, {
            background-color:@bg;
         }
         a{
            padding: 5px;
            &:hover{
               background: none;
               .teamLogo{
                  border: 3px solid @color02;
               }
            }
         }
         &.active{
            .teamLogo{
               border: 3px solid @color02;
            }
         }
      }
   }
   .show .teamLogo{
      border: 3px solid @color02;
   }
   .teamLogo{
      background-color: #FFFFFF;
      border: 3px solid transparent;
      border-radius: 50%;
      box-shadow: 0 0 5px 0 darken(@bg, 10%);
      display: inline-block;
      height: 40px;
      line-height: 40px;
      position: relative;
      text-align: center;
      width: 40px;
      img{
         margin: 5px auto;
      }
   }
   .head{
      float: left;
      width: 100%;
      .title{
         float: left;
         width: 100%;
         text-align: center;
         font-size: 14px;
         text-transform: uppercase;
         background-color: @color01;
         color: @color01_type;
         font-weight: normal;
         height: 20px;
         line-height: 20px;
      }
      .country{
         #gradient .vertical(mix(@color01,@bg,15%),@bg);
         text-align: center;
         width: 100%;
         float: left;
         height: 60px;
         line-height: 60px;
         padding: 10px 0;

      }
      .name{
         color:@bg_type;
         font-size: 14px;
         text-transform: uppercase;
      }
   }
   .table{
      float: left;

      th{
         font-size: 11px;    
         background-color:@color02;
         color:@color02_type;
         font-weight: normal;
         text-transform:uppercase;
         text-align: center;
         &.jugador{
            text-align: left;
         }
      }



      tbody > tr{
         td{
            &.nombre{
               text-align: left;
               padding: 2px 0;
            }
         }
         &.cabezal{
            background-color:@color02;
            color:@color02_type;
            th{
               &.ocultar{
                  display: none; 
               }

            }
         }

      }
   }
   div.table-wrapper div.scrollable table.responsive th.ocultar {
      display: block;
      width: 232%;
   }
   .button-style{display:none;}
}
@media (max-width: @xs) {
   .plantel{
      table {
         border-collapse: separate;
         &.responsive{
            margin-bottom: 0px;
            td,th{
               position: relative; 
               white-space: nowrap; 
               overflow: hidden;
            }
            th:first-child, td:first-child, &.pinned td{
               display: none;
            } 
         }
      }
      .pinned{
         padding-bottom: 16px;
         position: absolute;
         left: 0;
         top:0;
         background: @color01_h_type;
         width: 210px;
         overflow: hidden;
         overflow-x:hidden;

         table{
            border-right: none; border-left: none; width: 100%;
            th, td{
               white-space: nowrap;
            }
         }
         td:last-child {
            border-bottom: 0;
         }

      }
      .table-wrapper{
         position: relative; 
         margin-bottom: 20px; 
         overflow: hidden;
         float: left; 
         width: 100%;
         .scrollable{
            overflow: scroll;
            overflow-y:hidden; 
            .responsive{
               th.ocultar{
                  display: block;
               }
            }
            table{
               margin-left: 210px;
               tr.cabezal{
                  th{
                     display: none;
                     span{
                        color:@color02;
                     }
                  }
               }
            }
         }
      }
   }
   .fase{
      margin-top: 5px;
   }
   .table tbody > tr td .border{
      border-right: none !important;
      position:relative
   }
   .button-style{
      display:block !important;
      position:absolute;
      right:0;
      top:0;
      box-shadow:0px -1px 6px 0px darken(@color01,30%) inset;
      background:@color01;
      width: 27px;
      height: 25px;
      padding: 0 8px !important;
      vertical-align: middle !important;
      cursor: pointer;
      color: @color01_type;
      text-align: center;
      font-size: 18px !important;
      line-height: 23px !important;
      &.active{
         background:@color01_h;
         color: @color01_h_type;
         box-shadow:0px -1px 6px 0px darken(@color01_h,30%) inset;
      }

   }
   .content-style{
      background:darken(@bg,10%);
      padding:12px 0 !important;
      margin-top: 3px !important;
      box-shadow:0px -1px 6px 0px darken(@bg,20%) inset;
      width: 100%;
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -ms-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
   }
   .content-style ul{
      margin:0 0 0 30px;
      width:90%;
   }
   .content-style li{
      border-bottom: 1px solid darken(@bg,20%);
      line-height: 24px;
      border-top: 1px solid @bg;
   }
   .content-style li:first-child{
      border-top: none;
   }
   .content-style li:last-child{
      border-bottom: none;
   }
   .select-menu {
      display: none;
      width: 100%;
      -moz-appearance: none;
      text-indent: 0.01px;
      text-overflow: '';
      background: url('../images/arrow_select.png') no-repeat scroll right center @color02;
      color: @color02_type;
      height: 30px;
      line-height: 23px;
      margin-bottom: 1px !important;
      padding-left: 10px !important; 
      font-weight: bold;
      text-align: left;
      -moz-appearance: none;
      -webkit-appearance: none;
      appearance: none;
      text-transform: uppercase;
      cursor:pointer;
      font-weight: bold;
      padding-top: 5px !important;
      border-radius: 0;
   }
   .select-menu option{
      background: @bg;
      color:@bg_type;
      cursor:pointer;
   }
   .select-menu:focus{
      outline:none;
   }

}
@media (max-width: 290px){
   .content-style ul {
      width: 75% !important;
   }
}
/* Fin Planteles */