﻿.votingContainer{    position: relative;
    width: calc(100% - 320px);
    float: right;margin-left:20px}
.votingContainer .featuredArea{width:100%;margin-left:0}

.votingContainer.fixed { width: 930px !important; position: fixed; top: 67px; right: calc(((100% - 1282px) / 2) + 16px); background: none !important }


.votingClip{    position:relative;width:100%;
    float: right;height:123px;background: #800000;display:flex;padding:0 40px;margin-bottom:20px;overflow:hidden}
.votingClip .cntnr:after{
    content:'';
    display:inline-block;
    background:url(../Images/afcon25/afconCupVote.webp) left center no-repeat;
    background-size:auto 100%;
      width: 290px;
    height: 100%;
    position: absolute;
    left: 48px;
    z-index: 0;
    pointer-events:none
}

.votingClip .cntnr:before{
    content:'';
    display:inline-block;
    background:url(../Images/afcon25/afconmainLogo.webp) left center no-repeat;
    background-size:auto 100%;
      width: 109px;
    height: 46px;
    position: absolute;
    left: 20px;
    top:20px;
    z-index: 1;
    pointer-events:none
}


.votingClip .cntnr{width:100%;height:123px;background: #800000;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:70px;z-index:1}

.votingClip .mainTxt{
    color: #FFF;
    width:193px;
text-align: right;

font-family:DroidKufiBold;
font-size: 30px;
font-style: normal;
font-weight: 700;
line-height: 48px;
    z-index:2
}
.votingClip .match{display:flex;justify-content:center;align-items:center;gap:14px;z-index:2}
.votingClip .match .team{
    width: 132px;
height: 95px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    border-radius: 12px;
background: rgba(100, 0, 0, 0.88);
box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.25);
cursor:pointer
}
.votingClip .match .logoCntr{
width: 60px;
    height: 40px;
}
.votingClip .match .logoCntr img{width:100%;height:100%}

.votingClip .match .team p{
color: #FFF;

text-align: right;
font-family: DroidKufiBold;
font-size: 10px;
line-height: 24px; 
}



.votingCount{background: rgba(100, 0, 0, 0.88);
    width: 90px;
    height: 95px;
    flex-direction: column;
    justify-content: center;
    align-items: center;display:none}
    
.votingCount span{
    color: #FFF;
    font-size: 10px;
line-height: 24px; 
font-weight:700
}
.votingClip .progress-container {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  height: 2.5px;
  overflow: hidden;
}

.votingClip .progress-bar {
  height: 100%;
  background: #007FFF;
  width: 0;
  transition: width 0.5s ease;
}
.votingClip .match.voted{gap:0}
.votingClip .match.voted .team{box-shadow: unset;pointer-events: none;}
.votingClip .match.voted .team.teamA{border-radius: 0 12px 12px 0;}
.votingClip .match.voted .team.teamB{border-radius: 12px 0 0 12px;}
.votingClip .match.voted .votingCount { display: flex;}
.match.voted .vs { display: none;}

/*article voting*/
article .votingClip{width:100%;padding:0 30px}

article  .votingClip .mainTxt{font-size:23px;    width: 150px;}
article  .votingClip .cntnr{gap:40px}
article .votingClip .match{gap:6px}
article .votingClip .cntnr:before{width:90px;height:38px;top:14px;left:14px}
article .votingClip .cntnr:after{background:url(../Images/afcon25/arabcupvoteArticle.webp) no-repeat center left}

 .eventEntryPoint {
    position: relative;
    margin-bottom:30px;
    width: 300px;
    float: none;
}

@media screen and (min-width:1360px) and (max-width:1919px) {

    .votingContainer.fixed {
        width: 748px !important;
        right: calc(((100% - 1100px) / 2) + 16px)
    }
}

@media screen and (min-width:1280px) and (max-width:1359px) {
    .votingContainer.fixed {
        width: 648px !important;
        right: calc(((100% - 1000px) / 2) + 16px)
    }
}

@media screen and (min-width:1024px) and (max-width:1279px) {

    .votingContainer.fixed {
        width: 448px !important;
        right: calc(((100% - 800px) / 2) + 16px)
    }
}
@media screen and (min-width: 1360px) and (max-width: 1919px) {
    .votingClip{padding:0 25px}
    .votingClip .cntnr{gap:25px}
   .votingClip .mainTxt{font-size: 22px;    line-height: 40px;         width: 144px;}
  .votingClip .match .team{    width: 120px;}
  .votingClip .match .vs{    width: 20px;
    height: auto;}

  .votingClip .cntnr:before{
      top:10px;left:10px;    width: 86px;
    height: 36px;
  }

  .votingClip .cntnr:after{
      left:18px
  }

  article .votingClip .mainTxt {
    font-size: 20px;
    width: 130px;
}

  article .votingClip .cntnr {
    gap: 20px;
}
  article .votingClip .match .team{
      width:112px
  }

    article .votingClip .cntnr:before {
        width: 66px;
        height: 26px;
    }
}


@media screen and (min-width: 1280px) and (max-width: 1359px) {
    .votingClip{padding:0 25px}
    .votingClip .cntnr{gap:25px}
   .votingClip .mainTxt{font-size: 18px; line-height: 36px; width: 118px;}
  .votingClip .match .team{   width: 96px;height: 106px;}
  .votingCount{height:106px}
  .votingClip .match .team p{text-align:center;line-height:16px}
  .votingClip .match .vs{    width: 20px; height: auto;}

  .votingClip .cntnr:before{  top:10px;left:10px;    width: 86px; height: 36px; }
  .votingClip .cntnr:after{ left:18px }

    article .votingClip .mainTxt {
    font-size: 20px;
    width: 130px;
}

  article .votingClip .cntnr {
    gap: 20px;
}
  article .votingClip .match .team{
      width:112px
  }

    article .votingClip .cntnr:before {
        width: 66px;
        height: 26px;
    }
}


@media screen and (min-width: 1024px) and (max-width: 1279px) {
    .votingClip{padding:0 10px}
    .votingClip .cntnr{gap:10px}
   .votingClip .mainTxt{        font-size: 16px; line-height: 28px;  width: 107px;}
  .votingClip .match .team{   width: 96px;height: 106px;}
  .votingCount{height:106px}
  .votingClip .match .team p{text-align:center;line-height:16px}
  .votingClip .match .vs{    width: 20px; height: auto;}

  .votingClip .cntnr:before{  top:10px;left:10px;         width: 70px; height: 28px; }
  .votingClip .cntnr:after{ left:18px;opacity: 0.5; }

   article .votingClip { width: 100%;padding:10px 11px;height:170px }
     article   .votingClip .cntnr{gap:10px;justify-content: center;   }
     article   .votingClip .mainTxt{width:100%;font-size:23px;text-align:center}
      article  .votingClip .cntnr:after{width:100%;height:100%;left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background:url(../Images/afcon25/afconcupvoteMob.webp) #800000 center center;
        }
      article  .votingClip .match{gap:10px}
     article   .votingClip .match .vs{width:40px;height:auto}
     article   .votingClip .cntnr:before{left:50%;transform:translateX(-50%);top:auto;bottom:5px;width:53px;height:22px}
       article  .votingClip .match .team {
        width: 125px;
        height: 85px;
    }
       article .votingCount{height:85px}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .votingContainer{width:100%;margin-left:0}
    .votingClip { width: 100%;padding:0 25px }
    .votingClip .cntnr{gap:25px}
   .votingClip .mainTxt{font-size: 22px;    line-height: 40px;         width: 144px;}
  .votingClip .match .team{    width: 120px;}
  .votingClip .match .vs{    width: 20px;
    height: auto;}

  .votingClip .cntnr:before{
      top:10px;left:10px;    width: 86px;
    height: 36px;
  }

  .votingClip .cntnr:after{
      left:18px
  }
}


@media screen and (min-width: 320px) and (max-width: 767px) {
        .votingContainer{width:100%;margin-left:0}

        .votingClip, 
       article votingClip { width: 100%;padding:0 11px;height:170px }

        .votingClip .cntnr,
       article .votingClip .cntnr{gap:0;justify-content: center;   }

        .votingClip .mainTxt,
       article .votingClip .mainTxt{width:100%;font-size:23px;text-align:center}
        article .votingClip .mainTxt{font-size:20px}

        .votingClip .cntnr:after,
       article .votingClip .cntnr:after{width:100%;height:100%;left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background:url(../Images/afcon25/afconcupvoteMob.webp) #800000 center center;
        }

        .votingClip .match,
       article .votingClip .match{gap:10px}
        .votingClip .match .team,
        .votingCount{background: #640000;}
        .votingClip .match .vs,
      article  .votingClip .match .vs{width:40px;height:auto}

        .votingClip .cntnr:before,
       article .votingClip .cntnr:before{left:50%;transform:translateX(-50%);top:auto;bottom:9px;width:53px;height:22px;z-index:3}
        .votingClip .match.voted .votingCount{justify-content: flex-start;    padding-top: 22px;}
        .votingClip .match.voted .team{width:110px}

            .votingContainer.fixed {width:100%!important;right:unset!important;top:unset!important;position:relative}

}