:root,
[data-bs-theme=light]{
  --ui-nav-link-color:#000;
  --ui-nav-link-hover-bg:#f2f3f7; /* background:rgba(0, 0, 0, .05); */
  --ui-nav-link-border-radius:8px;
  --ui-nav-link-padding-x:12px;
  --ui-nav-link-padding-y:12px;

  /**
   * Form
   */
  --form-border-width:1.5px;
  --form-border-style:solid;
  --form-border-color:#e2e5eb;
  --form-border-radius:4px;
  --form-input-box-shadow:0px 0px 1px 0px #e2e5eb;
  --form-input-focus-border-color:#bbc1c7;
  --form-input-focus-box-shadow:0 0 3px 0 rgba(0, 0, 0, .05);
  --form-valid-color:#28a745;
  --form-invalid-color:#e51818;
  --form-invalid-box-shadow:0 0 3px 0 rgba(220, 53, 69, .25);
  --form-invalid-focus-box-shadow:0px 0px 1px 0px #e51818;
  /* --form-invalid-box-shadow:0px 0px 1px 0px #dc3545;; */
  /* --form-invalid-color:#dc3545; */
  /**
   * Height
   */
  --height-xxl:5.2rem; /* 52px */
  --height-xl:4.8rem; /* 48px */
  --height-l:4.4rem; /* 44px */
  --height-m:4.0rem; /* 40px !!! */
  --height-s:3.6rem; /* 36px */
  --height-xs:3.2rem; /* 32px */
  --height-xxs:2.8rem; /* 28px */
  /**
   * Background
   */
  --bg-primary:#cce5ff;
  --bg-success:#d4edda;
  --bg-warning:#fff3cd;
  --bg-danger:#fce4eb;
  --bg-light:#ddd;
  --bg-dark:#000;
  /**
   * Background color
   */
  --bg-color-primary:#004085;
  --bg-color-success:#155724;
  --bg-color-warning:#856404;
  --bg-color-danger:#ed4c78;
  --bg-color-light:#212529;
  --bg-color-dark:#fff;
  /**
   * json highlighter
   */
  --app-language-json-key-color:#871094;
  --app-language-json-string-color:#067d17;
  --app-language-json-number-color:#1750eb;
  --app-language-json-boolean-color:#0033b3;
  --app-language-json-null-color:#0033b3;
  --app-language-json-comment-color:#8c8c8c;

  /**
   * font-size
   */
  /*   --ui-font-size-10:1rem;
    --ui-font-size-12:1.2rem;
    --ui-font-size-14:1.4rem;
    --ui-font-size-16:1.6rem;
    --ui-font-size-18:1.8rem;
    --ui-font-size-20:2rem;
    --ui-font-size-22:2.2rem;
    --ui-font-size-24:2.4rem; */

  /**
   * font-size
   */
  --ui-font-size-h1:21px;
  --ui-font-size-h2:19px;
  --ui-font-size-h3:17px;
  --ui-font-size-h4:15px;
  --ui-font-size-h5:13px;
  --ui-font-size-h6:11px;

  /*
   * @media
   */
  /* :root{
    --bs-breakpoint-xs:0;
    --bs-breakpoint-sm:576px;
    --bs-breakpoint-md:768px;
    --bs-breakpoint-lg:992px;
    --bs-breakpoint-xl:1200px;
    --bs-breakpoint-xxl:1400px;
  } */

  @media (min-width:576px){
  }
  @media (min-width:768px){
    --ui-font-size-h1:22px;
    --ui-font-size-h2:20px;
    --ui-font-size-h3:18px;
    --ui-font-size-h4:16px;
    --ui-font-size-h5:14px;
    --ui-font-size-h6:12px;
  }
  @media (min-width:992px){

  }
  @media (min-width:1200px){
    --ui-font-size-h1:24px;
    --ui-font-size-h2:22px;
    --ui-font-size-h3:20px;
    --ui-font-size-h4:18px;
    --ui-font-size-h5:16px;
    --ui-font-size-h6:14px;
  }
  @media (min-width:1400px){
  }

}

[data-bs-theme=dark]{
  --ui-nav-link-hover-bg:#f2f3f7; /* background:rgba(255, 255, 255, .1); */

  /**
   * json highlighter
   */
  --app-language-json-key-color:#9876aa;
  --app-language-json-string-color:#ff9c91;
  --app-language-json-number-color:#6897bb;
  --app-language-json-boolean-color:#cc7832;
  --app-language-json-null-color:#cc7832;
  --app-language-json-comment-color:#808080;
}

/*
 * @media
 */
@media (min-width:576px){
}
@media (min-width:768px){
}
@media (min-width:992px){
}
@media (min-width:1200px){
}
@media (min-width:1400px){
}