.image-container-highlight{
  width: 40vw;
  padding-bottom: 20px;
}
.player-img-highlight{
  width: 35vw;
  height: 35vw;
  border-radius: 100px;
  border: 2px solid #ffffff;
    border-radius: 100px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#highlight-most-freq-partner{
  overflow: auto;
}
#highlight-most-freq-opponent{
  overflow: auto;
}

.player-img{
    width: 25vw;
    
    margin-top: 10px;
    border: 2px solid #ffffff;
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /*object-fit: cover;*/
}

.player-detail-img{
    width: 35vw;
    height: 45vw;
    margin-top: 10px;
    border: 2px solid #ffffff;
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.player-img:hover {
    transform: scale(1.05); /* Slight zoom effect */
    transition: transform 0.3s ease;
}

.image-container {
    position: relative;
    width: 100%;
    margin-top: 5%;
    padding-left: 5%;
    /*max-width: 600px;*/
    
  }
  
  .image-container img {
    
    height: 25%;
    width: 90%;
    /*border-radius: 50%;*/
  }

.details-container{
    margin-top: 2%;
   /* height: 25%;*/
   /* width: 90%;*/
}

  
#player-details-head-1{
    min-height: 120vw;
    background: #000000;
    background: linear-gradient(120deg, rgba(0, 0, 0, 1) 0%, rgba(92, 92, 92, 1) 50%, rgba(0, 0, 0, 1) 100%);
}

#player-details-head-1 *{
    color: white;
}
  
/*  .image-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); 
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
  }*/
  
  .image-container:hover .overlay {
    opacity: 1;
  }

.player-level-badge {
  display: inline-block;
  padding: 2px 2px;
  font-size: 40px;
  font-weight: 600;
  border-radius: 25px; /* pill shape */
  color: #fff;
  /*background-color: #000000; /* default gray */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  width: 75%;
  font-family: 'Courier New', Courier, monospace;
}




.matches-box {
  /*background-color: #f8f9fa; /* Light background (Bootstrap light) */
  border: 0.5px solid #dee2e6;
  border-radius: 0.75rem;
  text-align: center;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
  width: 70px;
  display: inline-block;
}

.matches-number {
  font-size: 20px;
  font-weight: 700;
  color: rgb(255, 255, 255) !important; /* Bootstrap primary */
}

.matches-label {
  background-color: #f8f9fa;
  font-size: 0.875rem;
  color: rgb(0, 0, 0) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
  font-weight: 600;
}

.level-label{
    top: -16px;
    position: relative;
    background-color: red;
    width:50%;
    left: 25%;
}

.head-2-title{
    border-bottom: 3px solid red;
    border-top: 1px dotted red;
    border-left: 10px solid red;
    font-size: 30px;
    margin-top: 20px;
   
}


.ranking-box {
  /*background-color: #f8f9fa; /* Light background (Bootstrap light) */
  /*border: 0.5px solid #dee2e6;*/
  border-radius: 0.75rem;
  text-align: center;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
  width: 50vw;
  display: inline-block;
}
.ranking-label {
  border-bottom: 3px solid red;
}

.ranking-label.performance {
  border-bottom: 3px solid rgb(245, 131, 0);
}

.ranking-number{
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.ranking-show-label{
    top: -16px;
    position: relative;
    background-color: rgb(0, 112, 204);
    width:50%;
    left: 25%;
}
.player-ranking-badge{
    display: inline-block;
  padding: 2px 2px;
  font-size: 60px;
  font-weight: 600;
  border-radius: 25px; /* pill shape */
  color: #fff;
  /*background-color: #000000; /* default gray */
  text-transform: uppercase;
  letter-spacing: 0.005em;
  width: 75%;
  font-family: 'Courier New', Courier, monospace;
}


.matches-box.style2{
  width: 70px;
   border: 0.5px solid rgb(64, 224, 0);
}
.matches-label.style2{
  background-color: rgb(64, 224, 0);
 
}