.itemStyles{
  .item{
    background: @bg;
    padding: 0px;
    margin: 0 2px;
    .border-radius(0);
    border: 1px solid lighten(@color02, 90%);
    .contentItem{
       .title{
          background: @color01;
          font-size: 9px;
          color: @color01_type;
          padding: 3px 8px;
          height: 18px;
          overflow: hidden;
          span{
             height: 18px;
             line-height: 14px;
          }
          &:hover{
            animation-play-state: paused;
          }
          &.longTitle{
            width: 100%;
            position: relative;
            span{
              transform:translateX(100%);
              display: block;
              position: absolute;
              width: 100%;
              height: 100%;
              margin: 0;
              text-align: center;
              &:nth-child(1) {
                animation: left-one 10s ease infinite;
              }
              &:nth-child(2) {
                animation: left-two 10s ease infinite;
              }
            }
          }
       }
       .col{
          border-top: 1px solid @bg;
          width: 100%;
          .date{
             padding: 3px 8px;
             width: 70%;
             background: @color02;
             color: @color02_type;
             display: block;
             float: left;
             text-transform: uppercase;
             font-size: 9px;
             height: 18px;
             overflow: hidden;
             span{
                line-height: 14px;
             }
             &.onTime{
                background: @color01;
                color: @color01_type;
             }
             &.start{
                background: lighten(@color02, 90%);
                color: @color02_type;
             }
          }
          .details{
             width: 30%;
             background: @color02;
             color: @color02_type;
             border-left: 1px solid @bg;
             display: block;
             float: left;
             text-transform: uppercase;
             height:18px;
             overflow:hidden;
             text-align:center;
             line-height: 18px;
             border:0;
             border-radius: 0;
             span{
                margin-left:3px;
                font-size: 9px;
                vertical-align: middle;
             }
             .iconMore{
                font-weight: bold;
                font-size: 15px;
             }
             &:hover{
                text-decoration: none;
                background: @color01;
                color:@color01_h_type;
                height: 15px;
                line-height: 15px;
                margin-top: 3px;
             }
          }
       }
       &.hideDetailsButton{
          .col .date{
             width: 100%;
          }
          .col .details{
             display: none;
          }
       }
       .teams{
          padding: 4px;
          line-height: 24px;
          position:relative;
          .first, .second{
             border-bottom:1px dotted @color02;
             padding-bottom: 8px;
             img{
                float: left;
             }
             .name{
                color: @bg_type;
                text-transform: uppercase;
                font-size: 9px;
                margin-left: 5px;
                float: left;
                display: block;
             }
             .circle{
                width: 18px;
                height: 18px;
                font-size: 10px;
                color: @color02_type;
                background: @color02;
                .border-radius(50%);
                text-align: center;
                line-height: 18px;
                float: right;
                display: block;
                margin-right: 10px;
                margin-top: 2px;
             }
             .number{
                float: right;
                color: @bg_dest_type;
                font-size: 22px;
             }
          }
          .second{
             border-bottom:0;
             padding-top: 6px;
             padding-bottom: 4px;
          }
          .definicionTribunal{
             height: auto;
             div{
             position: absolute;
                width: auto;
                left: 50%;
                right: initial;
                -webkit-transform: translate(-50%, 0);
                -moz-transform: translate(-50%, 0);
                -ms-transform: translate(-50%, 0);
                -o-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
                top: 14px;
             }
          }
       }
       .information{
          background: darken(@bg,10%);
          box-shadow:0px 2px 10px -1px darken(@bg,20%) inset;
          padding: 1px 4px;
          min-height: 22px;
          text-align: center;
          position: relative;
          span{
             font-size: 9px;
             color: @bg_type;
          }
          marquee{
             span{
                display: inline-block;
             }
          }
       }
       .vs-{
         display: none;
       }
    }
    &.status-playing{
       .col{
          .date{
             background: @color01;
             color: @color01_type;
             .iMam-date, .iMam-hour{
                display: none;
             }
          }
       }
       .information{
          background:@color02;
          box-shadow:0 0 0 0;
          span{
             font-size: 9px;
             color: @color02_type;
          }
       }
    }
    &.status-penalties{
       .col{
          .date{
             background: @color01;
             color: @color01_type;
             .iMam-time, .iMam-aditionalTime{
                display: none;
             }
             .iMam-date, .iMam-hour{
                display: none;
             }
          }
       }
    }
    &.status-notStarted{
       .col{
          .date{
             background: darken(@bg,10%);
             color: @bg_type;
             .iMam-status, .iMam-time, .iMam-aditionalTime{
                display: none;
             }
          }
       }
    }
    &.status-half{
       .col {
          .date{
             background: @color01;
             color: @color01_type;
             .iMam-time, .iMam-aditionalTime{
                display: none;
             }
             .iMam-date, .iMam-hour{
                display: none;
             }

          }
       }
       .information{
          background:@color02;
          box-shadow:0 0 0 0;
          span{
             font-size: 9px;
             color: @color02_type;
          }
       }
    }
    &.status-finished{
      .col{
        .date{
           background: darken(@bg,20%);
           color: @bg_type;
           .iMam-date, .iMam-hour, .iMam-time, .iMam-aditionalTime{
              display: none;
           }
        }
      }
    }
    &.status-suspended{
       .col{
          .date{
             .iMam-time{
                display: none;
             }
             .iMam-aditionalTime{
                display: none;
             }
             .iMam-date{
                display: none;
             }
             .iMam-hour{
                display: none;
             }
          }
       }
    }
    &.status-postponed{
       .col{
          .date{
             background: darken(@bg,10%);
             color: @bg_type;
             .iMam-status, .iMam-time, .iMam-aditionalTime{
                display: none;
             }
             .iMam-time{
                display: none;
             }
             .iMam-aditionalTime{
                display: none;
             }
             .iMam-date{
                display: none;
             }
             .iMam-hour{
                display: none;
             }
          }
       }
    }
    .timeSetting{
      &.leftPosition{
        border-top: 1px solid darken(@bg, 10%);
        border-bottom:0;
      }
    }
    .mark{
      position: absolute;
      width: 13px;
      height: 13px;
      right: 30px;
      margin-top: 4px;
      display: none;
      svg{
        fill: #ffbf00;
      }
    }
  }
  &.status-half{
     .col {
        .date{
           .iMam-aditionalTime{
              display: none;
           }
        }
     }
  }
  &.status-finished{
    .tag{
      &.secondary{
        &.mc-deferredLabel{
          display: none;
        }
      }
    }
  }
  &.rdsnItem{
    .item{
      border: 0;
      .border-radius(4px);
      overflow: hidden;
      box-shadow: 0px 2px darken(@bg,15%);
      .contentItem {
        .object, .vs-{
          display: block;
          left: 50%;
          margin-top: 10px;
        }
        .teams{
          line-height: normal;
          position: relative;
          border-top: 1px solid darken(@bg, 10%);
          padding: 2px;
          .first, .second{
            width: 50%;
            display: block;
            float: left;
            padding:0;
            position: relative;
            min-height: 32px;
            .name{
              line-height: normal;
              color: @bg_type;
              top: 50%;
              .translate(0, -50%);
              position: absolute;
              font-size: 10px;
              margin: 0;
            }
            img{
              top: 5px;
              position: absolute;
            }
            .number{
              color: @color01_type;
              font-size: 16px;
              background: @color01;
              width: 30px;
              height: 30px;
              text-align: center;
              display: block;
              .border-radius(50%);
              position: absolute;
              line-height: 30px;
            }
            .circle{
              background-color:@color02;
              color:@color02_type;
              height: 18px;
              width: 18px;
              line-height: 18px;
              font-size: 12px;
              text-align: center;
              position: absolute;
              .border-radius(50%);
              position: absolute;
              margin: 16px 0 0 0;
              float: none;
            }
          }
          .first{
            border: 0;
            .name{
              right: 75px;
            }
            img{
              right:42px;
            }
            .number{
              right: 7px;
            }
            .circle{
              right: 2px;
            }
          }
          .second{
            .name{
              left: 75px;
            }
            img{
              left: 42px;
            }
            .number{
              left: 7px;
            }
            .circle{
              left: 2px;
            }
          }
          &:after,&:before{
            display: table;
            content: "";
            line-height: 0;
          }
          &:after{
            clear: both;
          }
          .object{
            &.secondary{
              display: none;
            }
          }
        }
       .col {
         position: relative;
         border-top: 0;
         .date{
           width: 100%;
           height: 24px;
           background: @bg;
           color: @bg_type;
           text-align: left;
           line-height: normal;
           span{
             line-height: 18px;
           }
         }
         .details{
           position: absolute;
           right: 0;
           background: @color01;
           color: @color01_type;
           line-height: 22px;
           width: 10%;
           height: 22px;
           margin: 1px 0;
           border-left: 0;
           width: 22px;
           top: 0;
           .border-radius(4px);
           border-bottom: 3px solid darken(@color01, 20%);
           span{
             display: none;
             margin: 0;
             &.iconMore{
               display: block;
             }
           }
           &:hover, &:focus, &:active{
             height: 19px;
             line-height: 19px;
             margin-top: 3px;
           }
         }
        }
      }
      .information{
        box-shadow: none;
        padding: 0px 4px;
      }
    }
    &.status-playing{
      .contentItem {
        .col {
          .date{
            background: @color02;
            color: @color02_type;
          }
        }
      }
    }
    &.status-notStarted{
      .item{
        .contentItem {
          .teams {
            .first, .second {
              .number, .circle{
                display: none;
              }
            }
            .object{
              display: none;
              &.secondary{
                display: inline-block;
              }
             }
          }
        }
      }
    }
    &.status-notStarted{
      .item{
        .contentItem {
          .teams {
            .first, .second {
              .number, .circle{
                display: none;
              }
            }
            .object{
              display: none;
              &.secondary{
                display: inline-block;
              }
             }
          }
        }
      }
    }
  }
  &.itemMaM-noClock{
    &.status-playing, &.status-penalties, &.status-notStarted, 
    &.status-half, &.status-finished, &.status-suspended, &.status-postponed{
      .item{
        .col{
          .date{
            .iMam-time, .iMam-aditionalTime{
              display: none;
            }
          }
        }
      }
    }
  }
  &.type2{
    .item{
      border: 0;
      .border-radius(4px);
      overflow: hidden;
      .contentItem{
        .teams{
          border-top: 1px solid darken(@bg, 10%);
          padding: 2px;
          .first, .second{
            border-bottom: none;
            padding: 0px;
            .name{
              font-size: 10px;
            }
            .number{
              background: @color01;
              color: @color01_type;
              .border-radius(50%);
              font-size: 12px;
              display: block;
              min-height: 22px;
              padding: 0;
              text-align: center;
              min-width: 24px;
            }
          }
          .middle{
            position: relative;
            ul{
              .border-radius(4px);
              background: darken(@bg, 10%);
              margin: 2px 0;
              .flex-display(flex);
              .flex-wrap(wrap);
              .flex-direction();
              .justify-content(space-around);
              li{
                height: 15px;
                text-align: center;
                padding: 0;
                .flex(1);
                span{
                  display: block;
                  .verticalAlign();
                  font-size: 12px;
                  color: lighten(@bg_type, 40%);
                  sup{
                    top: -0.3em;
                  }
                }
              }
            }
            .tag{
              top: 18%;
            }
          }
        }
        .col {
           position: relative;
           border-top: 0;
           .date{
             width: 100%;
             height: 24px;
             background: @bg;
             color: @bg_type;
             text-align: left;
             line-height: normal;
             span{
               line-height: 18px;
             }
           }
           .details{
             position: absolute;
             right: 3px;
             background: @color01;
             color: @color01_type;
             line-height: 22px;
             width: 10%;
             height: 22px;
             margin: 1px 0;
             border-left: 0;
             width: 22px;
             .border-radius(4px);
             border-bottom: 3px solid darken(@color01, 20%);
             span{
               display: none;
               margin: 0;
               &.iconMore{
                 display: block;
               }
             }
             &:hover, &:focus, &:active{
               height: 19px;
               line-height: 19px;
               margin-top: 3px;
             }
           }
        }
      }
    }
    &.status-playing{
      .item{
        .contentItem {
          .col {
            .date{
              background-color: @color02;
              color: @color02_type;
            }
          }
        }
      }
    }
  }
  &.mini{
    .item{
      border: 0;
      .border-radius(4px);
      overflow: hidden;
      position: relative;
      .contentItem{
        .title{
          height: 22px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-right: 18%;
          span{
            text-transform: uppercase;
            line-height: 18px;
          }
        }
        .col {
           border-top: 0;
           .date{
             display: none;
           }
           .details{
             position: absolute;
             right: 3px;
             background: lighten(@color01, 10%);
             color: @color01_type;
             line-height: 20px;
             width: 10%;
             height: 20px;
             margin: 0;
             border-left: 0;
             width: 20px;
             .border-radius(4px);
             border-bottom: 3px solid darken(@color01, 20%);
             top: 1px;
             span{
               display: none;
               margin: 0;
               &.iconMore{
                 display: block;
               }
             }
             &:hover, &:focus, &:active{
               height: 19px;
               line-height: 19px;
               margin-top: 3px;
             }
           }
        }
        .teams {
          padding: 0 4px;
          .first{
            border-bottom: 1px solid darken(@bg, 10%);
          }
          .first, .second{
            padding:0;
            height: 24px;
            .flex-display();
            .justify-content(space-between);
            .align-items();
            .name{
              text-transform: none;
              .verticalAlign();
              float: none;
              .align-self(stretch);
              .flex(1 1);
              margin:0;
            }
            .number{
              float: none;
              display: block;
              .align-self(flex-end);
              float: none;
              background: @color01;
              .border-radius(50%);
              height: 20px;
              width: 20px;
              margin: 0 auto;
              text-align: center;
              margin-bottom: 2px;
              span{
                color: @color01_type;
                .verticalAlign();
                font-size: 10px;
                display: block;
              }
            }
            img{
              display: none;
            }
          }
        }
        .information{
          display: none;
        }
      }
    }
    &.status-playing{
      .item {
        .contentItem {
          .title{
            background: @color02;
            color: @color02_type;
            span{
              display: none;
            }
          }
        }   
        .col {
          .date{
            display: block;
            background: transparent;
            position: absolute;
            top: 0;
            line-height: 18px;
          }
        }
      }   
    }
    &.status-notStarted{
      .item {
        .contentItem {
          .teams {
            width: 80%;
            .first, .second {
              .number {
                display: none;
              }
            }
          }
        }
        .col {
          .date{
            display: block;
            background: transparent;
            width: 20%;
            position: absolute;
            right: 0;
            height: 70%;
            text-align: center;
            padding: 12px 0 0;
            .iMam-hour, .iMam-date{
              display: block;
            }
          }
        }
      } 
    }
  }
  &.maxSize-479{
    .item{
      margin: 0;
      .col {
        .date{
          width: 60%;
        }
        .details{
          width: 40%;
        }
      }
      &.hideDetailsButton{
        .col .date{
          width: 100%;
        }
        .col .details{
          display: none;
        }
      }
    } 
  }
  &.maxSize-310{
    &.rdsnItem{
      .item{
        .contentItem {
          .teams{
            padding: 4px 0;
            .first, .second{
              min-height: 58px;
              .name{
                position: absolute;
                top: 48px;
                left: 0;
                right: 0;
                margin: 0 auto;
                text-align: center;
                width: auto;
                line-height: normal;
              }
            }
            .first{
              img{
                right: 50%;
              }
            }
            .second{
              img{
                left: 50%;
              }
            }
          }
        }
      }
    }
  }
}