/* =========================================================
   KUNDALI EXPERT
   Learn Astrology Analytics Premium UI
   R8Z258G.1
   ========================================================= */

#ke-learn-analytics-v1 {
  --ke-gold: #9b5d08;
  --ke-gold-dark: #754204;
  --ke-gold-soft: #d8b374;
  --ke-gold-border: #e7cda5;

  --ke-bg: #faf7f1;
  --ke-panel: #fffdf9;
  --ke-card: #ffffff;
  --ke-cream: #fff7e9;
  --ke-cream-2: #f8ecd7;

  --ke-text: #211711;
  --ke-muted: #6f685f;
  --ke-line: #eadcc8;

  position: relative;

  box-sizing: border-box;

  width: 100%;

  margin: 18px 0 28px;

  padding:
    24px 22px 26px;

  background:
    radial-gradient(
      circle at 3% 0%,
      rgba(218,176,102,.13),
      transparent 24%
    ),
    linear-gradient(
      180deg,
      #fcfaf6 0%,
      #faf6ef 100%
    );

  border:
    1px solid
    rgba(193,137,61,.45);

  border-radius: 22px;

  box-shadow:
    0 14px 38px
    rgba(88,53,14,.06);

  overflow: hidden;
}


/* =========================================================
   HEADER
   ========================================================= */

#ke-learn-analytics-v1 > div:first-of-type {
  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  flex-wrap: wrap;

  gap: 18px;

  margin-bottom: 4px;
}


#ke-learn-analytics-v1 h2 {
  position: relative;

  display: flex;

  align-items: center;

  gap: 14px;

  margin: 0 !important;

  color: var(--ke-gold-dark) !important;

  font-size:
    clamp(
      24px,
      2vw,
      34px
    ) !important;

  font-weight: 800 !important;

  line-height: 1.15 !important;

  letter-spacing: -.4px;
}


#ke-learn-analytics-v1 h2::before {
  content: "▥";

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: 0 0 54px;

  width: 54px;

  height: 54px;

  border-radius: 15px;

  color: var(--ke-gold);

  font-size: 28px;

  background:
    linear-gradient(
      145deg,
      #fff5df,
      #f7e6c4
    );

  border:
    1px solid
    rgba(190,133,44,.14);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.9);
}


/* =========================================================
   STATUS
   ========================================================= */

#ke-learn-analytics-v1 .ke-learn-status {
  margin:
    0 0 20px 69px !important;

  min-height: 20px;

  color: var(--ke-muted) !important;

  font-size: 13px !important;

  font-weight: 500;

  letter-spacing: .05px;
}


/* =========================================================
   SORT / RANGE CONTROL
   ========================================================= */

#ke-learn-analytics-v1 select[data-ke-learn-range-select] {
  min-width: 190px !important;

  height: 48px !important;

  padding:
    0 40px 0 16px !important;

  color: #31271d !important;

  font-weight: 600 !important;

  background:
    #fffdf9 !important;

  border:
    1px solid
    var(--ke-gold-border) !important;

  border-radius:
    14px !important;

  box-shadow:
    0 4px 14px
    rgba(112,70,11,.07) !important;

  outline: none !important;

  cursor: pointer;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}


#ke-learn-analytics-v1 select[data-ke-learn-range-select]:hover {
  border-color:
    #cb9e5b !important;

  box-shadow:
    0 6px 18px
    rgba(112,70,11,.11) !important;
}


#ke-learn-analytics-v1 select[data-ke-learn-range-select]:focus {
  border-color:
    #b87b25 !important;

  box-shadow:
    0 0 0 3px
    rgba(184,123,37,.12) !important;
}


/* =========================================================
   METRIC GRID
   ========================================================= */

#ke-learn-analytics-v1 .ke-learn-grid {
  display: grid !important;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    ) !important;

  gap: 14px !important;

  margin:
    4px 0 24px !important;
}


/* All metric cards */
#ke-learn-analytics-v1 .ke-learn-grid > * {
  position: relative;

  box-sizing: border-box;

  min-width: 0;

  min-height: 132px;

  padding:
    20px 18px 18px 84px !important;

  border:
    1px solid
    var(--ke-gold-border) !important;

  border-radius:
    17px !important;

  background:
    radial-gradient(
      circle at 104% 118%,
      rgba(223,184,117,.14) 0,
      rgba(223,184,117,.14) 32%,
      transparent 33%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fffdfa 100%
    ) !important;

  box-shadow:
    0 7px 18px
    rgba(83,52,12,.045) !important;

  overflow: hidden;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}


#ke-learn-analytics-v1 .ke-learn-grid > *:hover {
  transform:
    translateY(-2px);

  border-color:
    #d9b170 !important;

  box-shadow:
    0 12px 26px
    rgba(83,52,12,.085) !important;
}


/* icon circle */
#ke-learn-analytics-v1 .ke-learn-grid > *::before {
  position: absolute;

  left: 17px;

  top: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  color: var(--ke-gold);

  background:
    linear-gradient(
      145deg,
      #fff6e4,
      #f8e5bd
    );

  border:
    1px solid
    rgba(186,124,31,.08);

  font-size: 21px;

  font-weight: 800;

  line-height: 1;
}


/* Card-specific symbols */
#ke-learn-analytics-v1 .ke-learn-grid > *:nth-child(1)::before {
  content: "●●";
  letter-spacing: -4px;
  font-size: 15px;
}

#ke-learn-analytics-v1 .ke-learn-grid > *:nth-child(2)::before {
  content: "▤";
}

#ke-learn-analytics-v1 .ke-learn-grid > *:nth-child(3)::before {
  content: "▧";
}

#ke-learn-analytics-v1 .ke-learn-grid > *:nth-child(4)::before {
  content: "+";
  font-size: 27px;
}

#ke-learn-analytics-v1 .ke-learn-grid > *:nth-child(5)::before {
  content: "◫";
}

#ke-learn-analytics-v1 .ke-learn-grid > *:nth-child(6)::before {
  content: "▦";
}

#ke-learn-analytics-v1 .ke-learn-grid > *:nth-child(7)::before {
  content: "▷";
}

#ke-learn-analytics-v1 .ke-learn-grid > *:nth-child(8)::before {
  content: "◇";
}

#ke-learn-analytics-v1 .ke-learn-grid > *:nth-child(9)::before {
  content: "⌂";
}

#ke-learn-analytics-v1 .ke-learn-grid > *:nth-child(10)::before {
  content: "●●";
  letter-spacing: -4px;
  font-size: 15px;
}


/* Text inside metrics */

#ke-learn-analytics-v1 .ke-learn-grid > * > * {
  position: relative;

  z-index: 2;
}


#ke-learn-analytics-v1 .ke-learn-grid > * > :first-child {
  display: block;

  margin-bottom: 9px;

  color: #5f5a53 !important;

  font-size: 13px !important;

  font-weight: 600 !important;

  line-height: 1.35 !important;
}


#ke-learn-analytics-v1 .ke-learn-grid > * > :last-child {
  display: block;

  color: var(--ke-text) !important;

  font-size: 29px !important;

  font-weight: 800 !important;

  line-height: 1 !important;

  letter-spacing: -.5px;
}


/* =========================================================
   COURSE ANALYTICS PANEL
   ========================================================= */

#ke-learn-analytics-v1 .ke-learn-table-wrap {
  position: relative;

  box-sizing: border-box;

  margin-top: 28px !important;

  padding:
    94px 18px 18px !important;

  background:
    rgba(255,255,255,.78) !important;

  border:
    1px solid
    rgba(218,184,131,.42) !important;

  border-radius:
    19px !important;

  box-shadow:
    0 7px 20px
    rgba(77,49,14,.035) !important;

  overflow-x: auto !important;

  overflow-y: hidden !important;
}


/* Course Analytics heading */
#ke-learn-analytics-v1 .ke-learn-table-wrap::before {
  content:
    "▤   Course Analytics";

  position: absolute;

  left: 22px;

  top: 20px;

  color:
    var(--ke-gold-dark);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 24px;

  font-weight: 700;

  line-height: 1.2;
}


/* Course Analytics subtitle */
#ke-learn-analytics-v1 .ke-learn-table-wrap::after {
  content:
    "Performance of all courses in Learn Astrology";

  position: absolute;

  left: 66px;

  top: 55px;

  color:
    var(--ke-muted);

  font-size: 13px;

  font-weight: 500;
}


/* =========================================================
   TABLE
   ========================================================= */

#ke-learn-analytics-v1 table {
  width: 100% !important;

  min-width: 1120px !important;

  border-spacing: 0 !important;

  border-collapse:
    separate !important;

  background:
    #ffffff !important;

  border:
    1px solid
    rgba(224,200,163,.62) !important;

  border-radius:
    14px !important;

  overflow: hidden !important;

  table-layout: auto !important;
}


#ke-learn-analytics-v1 thead {
  background:
    linear-gradient(
      180deg,
      #fff7e7 0%,
      #fbefd9 100%
    ) !important;
}


#ke-learn-analytics-v1 thead tr {
  height: auto !important;
}


#ke-learn-analytics-v1 th {
  height: auto !important;

  padding:
    15px 14px !important;

  color:
    #84500c !important;

  background:
    transparent !important;

  border-bottom:
    1px solid
    #ead7b6 !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;

  line-height:
    1.25 !important;

  text-align:
    left !important;

  vertical-align:
    middle !important;

  white-space:
    nowrap !important;

  letter-spacing:
    .05px;
}


#ke-learn-analytics-v1 td {
  height: auto !important;

  padding:
    14px 14px !important;

  color:
    #312b25 !important;

  background:
    #ffffff !important;

  border-bottom:
    1px solid
    #eee2d1 !important;

  font-size:
    13px !important;

  line-height:
    1.25 !important;

  vertical-align:
    middle !important;
}


#ke-learn-analytics-v1 tbody tr:nth-child(even) td {
  background:
    #fffcf7 !important;
}


#ke-learn-analytics-v1 tbody tr:hover td {
  background:
    #fff8ea !important;
}


#ke-learn-analytics-v1 tbody tr:last-child td {
  border-bottom:
    0 !important;
}


/* first column - course key */
#ke-learn-analytics-v1 tbody td:first-child {
  width: 92px;

  color:
    #7f4a08 !important;

  font-weight:
    700 !important;

  text-transform:
    lowercase;
}


#ke-learn-analytics-v1 tbody td:first-child::before {
  content: "";

  position: absolute;
}


#ke-learn-analytics-v1 tbody td:first-child {
  background-image:
    linear-gradient(
      transparent,
      transparent
    ) !important;
}


/* Create pill without modifying JS */
#ke-learn-analytics-v1 tbody td:first-child {
  border-radius:
    0 !important;
}


#ke-learn-analytics-v1 tbody td:first-child {
  text-decoration:
    none;
}


/* second column course */
#ke-learn-analytics-v1 tbody td:nth-child(2) {
  min-width: 210px;

  color:
    #302920 !important;

  font-weight:
    650 !important;

  white-space:
    nowrap;
}


/* numeric columns */
#ke-learn-analytics-v1 td.num {
  text-align:
    center !important;

  font-variant-numeric:
    tabular-nums;
}


/* table header visual separation */
#ke-learn-analytics-v1 th + th,
#ke-learn-analytics-v1 td + td {
  border-left:
    1px solid
    rgba(238,226,207,.32);
}


/* =========================================================
   FOOTNOTE
   ========================================================= */

#ke-learn-analytics-v1 .ke-learn-notes {
  margin:
    16px 4px 0 !important;

  padding:
    12px 15px !important;

  color:
    #746a5f !important;

  background:
    #fff8eb !important;

  border:
    1px solid
    #edd9b8 !important;

  border-radius:
    12px !important;

  font-size:
    12px !important;

  line-height:
    1.5 !important;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

#ke-learn-analytics-v1 .ke-learn-table-wrap::-webkit-scrollbar {
  height: 8px;
}

#ke-learn-analytics-v1 .ke-learn-table-wrap::-webkit-scrollbar-track {
  background:
    #f5ecde;

  border-radius: 10px;
}

#ke-learn-analytics-v1 .ke-learn-table-wrap::-webkit-scrollbar-thumb {
  background:
    #d7b77f;

  border-radius: 10px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1450px) {

  #ke-learn-analytics-v1 .ke-learn-grid {
    grid-template-columns:
      repeat(
        4,
        minmax(0,1fr)
      ) !important;
  }
}


@media (max-width: 1120px) {

  #ke-learn-analytics-v1 .ke-learn-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;
  }
}


@media (max-width: 820px) {

  #ke-learn-analytics-v1 {
    padding:
      18px 14px 20px;
  }


  #ke-learn-analytics-v1 > div:first-of-type {
    align-items:
      flex-start !important;

    flex-direction:
      column;
  }


  #ke-learn-analytics-v1 .ke-learn-status {
    margin-left:
      0 !important;
  }


  #ke-learn-analytics-v1 .ke-learn-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }


  #ke-learn-analytics-v1 h2 {
    font-size:
      24px !important;
  }
}


@media (max-width: 540px) {

  #ke-learn-analytics-v1 .ke-learn-grid {
    grid-template-columns:
      1fr !important;
  }


  #ke-learn-analytics-v1 .ke-learn-grid > * {
    min-height:
      116px;

    padding-left:
      78px !important;
  }


  #ke-learn-analytics-v1 select[data-ke-learn-range-select] {
    width:
      100% !important;

    min-width:
      0 !important;
  }


  #ke-learn-analytics-v1 .ke-learn-table-wrap {
    padding:
      90px 10px 12px !important;
  }
}