.shiftPattern {

    width: 100%;
    margin-bottom: 50px;
   
    display:flex;
    flex-direction:column;
    background:url(../Images/afcon25/CIFF-Article-Clip-bk.webp) #800000 no-repeat center center;
    background-size:90%
}

.shiftPattern .shiftHeader {
 display:flex;
 flex-direction:row;
 width:100%;
 justify-content:space-between;
 align-items:center;
height: 48px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.20)!important;
 padding:0 10px;
overflow:hidden
}
.shiftPattern .shiftHeader .more{color:#fff;font-size:13px}
.shiftPattern .shiftHeader .more:before{color:#fff}
.shiftPattern .shiftHeader p{
    display: flex;
    align-items: center;
    justify-content: center;
}
.shiftPattern .shiftHeader .title {
    display: inline-block;
    color: #fff;
    font-family: DroidKufiBold, Arial;
    font-size: 17px;
    line-height: 48px;
}


.shiftPattern .shiftHeader .logo{
   display: flex;
   flex-direction: row;
   justify-content:center;
   align-items:center;
   gap: 21px; 
       margin-right: auto;
}

.shiftPattern .shiftHeader .logo img:first-child {
  width: 136px;
  height: 18px;
  display: block;        
  object-fit: contain;
    }

.shiftPattern .shiftHeader .logo img:last-child {
  width: 138px;
  height: 59px;
  display: block;        
  object-fit: contain;   
}

.matchDiv .matchItem.soon .resultDiv .matchStatus .status:before{content:"لم تبدأ";}
/** Live **/
.matchDiv .matchItem.live .resultDiv .matchStatus .status:before{content:"مباشر";}
/** Done **/
.matchDiv .matchItem.done .resultDiv .matchStatus .status:before{content:"إنتهت";}

/** Postponed **/
.matchDiv .matchItem.postponed .resultDiv .matchStatus .status:before{content:"مؤجل";}
.matchDiv .matchItem.postponed .resultDiv .matchStatus .time{display:none}
.matchDiv .matchItem.postponed .resultDiv .matchTime{display:none}
.matchDiv .matchItem.postponed .resultDiv .moreDtls{display:none}
.matchDiv .matchItem.postponed .resultDiv .matchResult{display:none}

.shiftPattern .shiftContainer {
  display: flex;
  flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  width:100%;
  padding:25px 10px;
  gap:15px;
  border-bottom:1px solid rgba(255, 255, 255, 0.20);
}

.shiftContainer .shiftContent {
    display: inline-block;
    width: 100%;

}
.shiftContent ul{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:20px
}
.shiftContent ul li {
    display: inline-block;
    position: relative;
    width:100%;
   
   
}

.shiftContent ul li:nth-of-type(2n) {
            margin-left: 0
}

.shiftContent ul li:nth-of-type(5), .shiftPattern ul li:last-child {
            margin-bottom: 0
}

.shiftContent ul li .imageCntnr {
    float: right;
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 100px;
    padding-bottom: calc((100px * 56.25) /100);
    margin-left: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
}


.shiftContent ul li .imageCntnr img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border: none;
}

.shiftContent ul li .desc {
    float: right;
    width: calc(100% - 120px);
    height: auto;
    cursor: pointer;
    display: inline-block;
}

.shiftContent ul li .desc p {
  color: #fff;
  overflow: hidden;
  font-size: 13px;
  font-family: 'DroidKufiLight', Arial;
  line-height: 20px;
  height:60px;
  overflow:hidden;
  gap:4px;
  transition: all 0.2s ease-in-out 0s;
  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  -o-transition: all 0.2s ease-in-out 0s;
}

.shiftContainer .shiftClipRotate {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:24px;
    width: 100%;
}

.shiftClipRotate p{color: #FFF;font-size: 15px;font-family:DroidKufiBold, arial}
.shiftClipRotate ul{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px 4px;  }
.shiftClipRotate ul li{width:67px;}
.shiftClipRotate ul li a{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;flex-direction:column;gap: 4px}
.shiftClipRotate ul li .imgCntnr{width:50px;height:50px;display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius: 50%;}
.shiftClipRotate ul li .imgCntnr img{width:auto;height:100%}
.shiftClipRotate ul li p{font-size: 11px;color: #FFF;line-height: 18px;     height: 36px;; font-family: 'DroidKufiLight', Arial;text-align:center}
.shiftClipRotate ul li:last-child img{margin-left: 27px;}
.shiftPattern  .logo{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
    padding:10px 10px 25px

}
.shiftPattern .logo img:first-child{width:96px;height: auto;}
.shiftPattern .logo img:nth-of-type(2){width:83px;height: auto;border-right:1px solid rgba(255, 255, 255, 0.20)!important;    padding-right: 15px;}


.matchDiv{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:0 10px;}

.matchDiv .allMatchesBtn{
    width:100%;
    color: #EEBC2F;
font-family: DroidKufiBold, Arial;
font-size: 10px;
line-height: 35px; text-align:left}

.matchDiv .matchesHpCntnr{
    border-radius: 6px;
background: #700000;
display:flex;
height:120px;
width:100%;
overflow:hidden
}

.matchDiv .matchesSlider {display:flex;width:100%;height:100%;position:relative}
.matchDiv .flickity-viewport{width:100%;height:100%}
.matchDiv .flickity-slider{width:100%;height:100%;}
.matchDiv .matchItem {
    width:100%;
    height:120px;
    display:flex;
    align-items: center;
    justify-content:center;
    gap:20px;
      
}
.matchDiv .matchItem .team{
    display:flex;
    flex-direction:column;
    width:58px;
    gap:5px
}

.matchDiv .matchItem .team  .teamlogo{    width: 54px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
 }
.matchDiv .matchItem .team img{
    width:auto;
    height:100%;
}
    .matchDiv .matchItem .team p {
        color: #FFF;
        font-family: "DroidKufiLight", Arial;
        font-size: 10px;
        line-height: 15px;
        text-align:center;
        height: 30px;
    }

    .matchDiv .matchItem .resultDiv{
        display:flex;
              flex-direction:column;    
              gap:8px
    }

    .matchDiv .matchItem .resultDiv .matchResult{
        width:100%;display:flex;gap:20px;justify-content: center;
    }
    .matchDiv .matchItem .resultDiv .matchResult span{
        font-size:15px;
        color:#fff;
        font-weight: 700;
    }
   .matchDiv .matchItem .resultDiv .matchStatus{
       width:100%;
       display:flex;
       flex-direction:column;
       justify-content:center
   }

  .matchDiv .matchItem .resultDiv .status{
      color: #FFF;
      font-size: 8px;
      font-family: DroidKufiBold, Arial;
  }

   .matchDiv .matchItem .resultDiv .time{
      color: #FFF;
      font-size: 10px;
      font-family: DroidKufiBold, Arial;
      font-weight:bold
  }
   .matchDiv .flickity-button{
    margin-top:0;transform:translateY(-50%);opacity: 1;width: 20px;right:10px
}
.matchDiv .flickity-button.next{left:10px;right:auto}
.matchDiv .flickity-button:before{
    font-size:15px
}

.matchDiv  button:disabled{opacity:0.5}

@media screen and (min-width: 1360px) and (max-width: 1919px) {
   

  

}

@media screen and (min-width:1280px) and (max-width:1359px) {


}


@media screen and (min-width: 768px) and (max-width:1279px) {

   .shiftPattern .shiftHeader .title{font-size:18px}
  

   
    .shiftContent ul li {
        margin-bottom: 20px
    }

}






@media screen and (min-width: 320px) and (max-width:767px) {

    .shiftClipRotate ul{width:320px}

}