.dashboard-widget {
  @apply pb-12;
  &__title {
    @apply !text-2xl text-center !font-semibold !text-lhoist;
  }
  &__preview-picture {
    @apply !w-full mx-auto my-8;
    max-width: 240px;
    display: block;
  }
  &__cta {
    @apply bg-lhoist text-lg !text-white py-4 px-6 rounded-full block w-fit mx-auto;
    text-decoration: none;
    transition: all 0.3s;
    cusror: pointer;
    &:hover {
      filter: hue-rotate(10deg);
      scale: 1.05;
    }
  }
  p {
    @apply text-lg text-slate-500 text-center max-w-xs mx-auto;
  }
}

.page-sessions-datas {
  .game_stats,
  .rating_stats {
    @apply bg-white my-12 !px-16 !py-6;
    h2 {
      @apply text-3xl font-semibold text-neutral-800 mt-0;
    }
    h3 {
      @apply text-blue-600 uppercase font-bold text-base my-0 tracking-widest mb-4;
    }
    h4 {
      @apply font-normal text-lg font-medium text-slate-400 my-0;
    }
    box-sizing: border-box;

    .page-title {
      @apply text-5xl font-semibold  text-neutral-800 pb-16;
    }
    &__stats-container {
      @apply grid md:grid-cols-2 gap-16 overflow-hidden;
    }

    &__statistics-section {
      p,
      li {
        @apply text-lg text-slate-600;
      }
    }

    &__scores-distribution {
      ul {
        @apply flex gap-x-8;
      }
    }

    .donut-average {
      width: 80px;
      height: 80px;
      border: 20px solid rgba(0, 0, 0, 0.1);
      border-left-color: #7983ff;
      border-radius: 50%;
      transform: rotate(90deg);
    }

    .average-score {
      /* @apply relative w-fit; */
      @apply w-48  relative;
      .text {
        @apply top-0 left-0;
        @apply font-bold text-6xl text-blue-600  absolute top-1/2 left-1/2 m-0 p-0;
        transform: translate(-60%, -50%);
      }
      .circular-chart {
        display: block;
        max-width: 100%;
        max-height: 250px;
        /* background: red; */
      }

      .circle {
        @apply stroke-blue-600;
        /* stroke: #4cc790; */
        fill: none;
        stroke-width: 2.8;
        stroke-linecap: round;
        animation: progress 1s ease-out forwards;
        padding: 20px;
      }

      @keyframes progress {
        0% {
          stroke-dasharray: 0 100;
        }
      }
    }

    @apply py-12 text-base max-w-screen-xl mx-auto px-4;

    /* .geopraphy-statistics,
    .game-statistics {
      @apply grid grid-cols-2 gap-8 overflow-hidden;
    } */

    .section-title {
      @apply col-span-2 mb-4;
    }
    .data-label {
      @apply font-medium text-blue-500 underline underline-offset-2;
      underline-offset: 2px;
      text-decoration-color: rgba(59, 130, 246, 0.5);
    }
    .data-value {
      @apply font-semibold text-slate-800;
    }
    .joueurs {
      @apply text-slate-400;
    }

    .countries .data-label {
      @apply capitalize;
    }
  }
  .rating_stats {
    @apply grid grid-cols-2;
    h2 {
      @apply col-span-2;
    }
    .average-score {
      height: fit-content;
    }
  }
  .download-btns {
    @apply flex flex-col md:flex-row gap-x-12 gap-y-4 justify-center my-12;
    .dowload-stats {
      @apply bg-blue-600 text-white font-medium uppercase tracking-widest   block  py-4 px-6 rounded-full  w-fit;
      transition: all 0.3s;
    }
    .dowload-stats:hover {
      transform: scale(1.05);
    }
  }
  .block-data-score {
    @apply mb-16;
  }
}

.page-rating-datas {
  section {
    @apply bg-white my-12 !px-16 !py-6;
  }
}
#graphic-rating-repartition,
#graphic-score-repartition {
  max-height: 400px;
  @apply w-fit mt-8;
}