@import url('https://fonts.googleapis.com/css2?family=TikTok+Sans:opsz,wght@12..36,300..900&display=swap');

:root {
  --color-white: #FFF;
  --color-black: #141414;
  --color-gray-1: #EEE;
  --color-gray-2: #DDD;
  --color-gray-3: #999;
  --color-gray-4: #666;
  --color-primary: #1B54FF;
  --color-primary-dark: #0039E5;
  --color-secondary: #E5E5FF;
  --color-secondary-light: #FAFAFF;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Typography */
  --font-family: "TikTok Sans", sans-serif;

  /* Display */
  --font-size-display: 80px;
  --line-height-display: 1.0;
  --letter-spacing-display: -0.025em;
  --font-weight-display: 500;
  --font-opsz-display: 36;

  /* Heading Large */
  --font-size-heading-large: 40px;
  --line-height-heading-large: 1.0;
  --letter-spacing-heading-large: -0.02em;
  --font-weight-heading-large: 500;
  --font-opsz-heading-large: 36;

  /* Heading Small */
  --font-size-heading-small: 28px;
  --line-height-heading-small: 1.2;
  --letter-spacing-heading-small: -0.01em;
  --font-weight-heading-small: 500;
  --font-opsz-heading-small: 28;

  /* Body Large */
  --font-size-body-large: 17px;
  --line-height-body-large: 1.4;
  --letter-spacing-body-large: -0.005em;
  --font-weight-body-large: 450;
  --font-opsz-body-large: 17;

  /* Body Small */
  --font-size-body-small: 14px;
  --line-height-body-small: 1.4;
  --letter-spacing-body-small: 0px;
  --font-weight-body-small: 450;
  --font-opsz-body-small: 13;
  --font-weight-bold: 700;

  /* Caption */
  --font-size-caption: 10px;
  --line-height-caption: 1.5;
  --letter-spacing-caption: 0.025em;
  --font-weight-caption: 500;
  --font-opsz-caption: 12;
}

.body {
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-family);
}

/* Typography Utility Classes */

.text-display {
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  font-weight: var(--font-weight-display);
  font-variation-settings: 'opsz' var(--font-opsz-display);
}

.text-display-bold {
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  font-weight: var(--font-weight-bold);
  font-variation-settings: 'opsz' var(--font-opsz-display);
}

.text-heading-large {
  font-size: var(--font-size-heading-large);
  line-height: var(--line-height-heading-large);
  letter-spacing: var(--letter-spacing-heading-large);
  font-weight: var(--font-weight-heading-large);
  font-variation-settings: 'opsz' var(--font-opsz-heading-large);
}

.text-heading-large-bold {
  font-size: var(--font-size-heading-large);
  line-height: var(--line-height-heading-large);
  letter-spacing: var(--letter-spacing-heading-large);
  font-weight: var(--font-weight-bold);
  font-variation-settings: 'opsz' var(--font-opsz-heading-large);
}

.text-heading-small,
.ModuleItem__moduleTitle {
  font-size: var(--font-size-heading-small);
  line-height: var(--line-height-heading-small);
  letter-spacing: var(--letter-spacing-heading-small);
  font-weight: var(--font-weight-heading-small);
  font-variation-settings: 'opsz' var(--font-opsz-heading-small);
}

.text-heading-small-bold {
  font-size: var(--font-size-heading-small) !important;
  line-height: var(--line-height-heading-small) !important;
  letter-spacing: var(--letter-spacing-heading-small) !important;
  font-weight: var(--font-weight-bold) !important;
  font-variation-settings: 'opsz' var(--font-opsz-heading-small) !important;
}

.text-body-large,
body,
.ModuleItem__moduleDescription,
.BreadCrumbs__breadcrumbList {
  font-size: var(--font-size-body-large) !important;
  line-height: var(--line-height-body-large) !important;
  letter-spacing: var(--letter-spacing-body-large) !important;
  font-weight: var(--font-weight-body-large) !important;
  font-variation-settings: 'opsz' var(--font-opsz-body-large) !important;
}

.text-body-large-bold {
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
  letter-spacing: var(--letter-spacing-body-large);
  font-weight: var(--font-weight-bold);
  font-variation-settings: 'opsz' var(--font-opsz-body-large);
}

.text-body-small,
.ModuleItem__moduleCount {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  letter-spacing: var(--letter-spacing-body-small);
  font-weight: var(--font-weight-body-small);
  font-variation-settings: 'opsz' var(--font-opsz-body-small);
}

.text-body-small-bold {
  font-size: var(--font-size-body-small);
  line-height: var(--line-height-body-small);
  letter-spacing: var(--letter-spacing-body-small);
  font-weight: var(--font-weight-bold);
  font-variation-settings: 'opsz' var(--font-opsz-body-small);
}

.text-caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  font-weight: var(--font-weight-caption);
  font-variation-settings: 'opsz' var(--font-opsz-caption);
}

.Header__searchLink {
  box-shadow: none !important;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-4);
  background: var(--color-white);
}

.AvatarText__circle {
  border: none !important;
}

.Readingprogress__progressBar {
  display: none !important;
}

.SearchBox__searchpart {
  border-radius: var(--radius-md) !important;
}

.SearchBox__searchpart input,
.SearchBox__searchpart span {
  border-radius: var(--radius-md) !important;
  font-size: var(--font-size-body-large);
  line-height: var(--line-height-body-large);
  letter-spacing: var(--letter-spacing-body-large);
  font-variation-settings: 'opsz' var(--font-opsz-body-large);
}

.SearchBox__searchicon:hover {
  box-shadow: none !important;
}

.BreadCrumbs__breadcrumbList {
  color: var(--color-gray-4);
}

.Header__containerLi {
  box-shadow: none;
  border-radius: var(--radius-md);
  border: none;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 12px 16px;
}


.Header__containerLi:hover,
.Header__containerLink:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.KBSubCategoryContainer__boxView {
  border: none !important;
  background: var(--color-white);
  box-shadow: none;
  padding-bottom: 12px;
  font-size: 17px;
}

.ModuleItem__moduleItem {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-secondary) !important;
  margin-top: 12px;
  margin-bottom: 12px;
  background-color: var(--color-secondary-light);
}

.ModuleItem__moduleItem:hover {
  background-color: var(--color-white);
}

.ModuleItem__moduleTitle {
  color: var(--color-black);

}

.ArticleDetailLeftContainer__box {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-secondary) !important;
}