/*
Theme Name: Docly
Theme URI: https://wordpress-theme.spider-themes.net/docly
Author: CreativeGigs
Author URI: https://themeforest.net/user/creativegigs
Description: Docly is a powerful, responsive, and high-performance online documentation WordPress theme that can assist you quickly develop your next product’s documentation. It can be used for documenting API, frameworks, plugins, templates, software, manual etc.
Version: 2.1.3
Requires at least: 5.0
Tested up to: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: docly
*/

:root {
  --brand_color: var(--accent_solid_color_opt, #10b3d6);
  --secondary_color: var(--secondary_color_opt, #1d2746);
  --p_color: var(--paragraph_color_opt, #6b707f);
  --black_100: #d6d9dc;
  --black_150: #c8ccd0;
  --black_200: #bbc0c4;
  --black_300: #9fa6ad;
  --black_350: #9199a1;
  --black_400: #848d95;
  --black_500: #6a737c;
  --black_600: #535a60;
  --black_700: #3c4146;
  --black_750: #2f3337;
  --black_800: #242729;
  --black_900: #0c0d0e;
  --bs_sm: 0 1px 2px rgb(0 0 0 / 5%), 0 1px 4px rgb(0 0 0 / 5%), 0 2px 8px rgb(0 0 0 / 5%);
  --bs_md: 0 1px 3px rgb(0 0 0 / 6%), 0 2px 6px rgb(0 0 0 / 6%), 0 3px 8px rgb(0 0 0 / 9%);
  --bs_lg: 0 1px 4px rgb(0 0 0 / 9%), 0 3px 8px rgb(0 0 0 / 9%), 0 4px 13px rgb(0 0 0 / 13%);
}

.black-100 {
  color: var(--black_100) !important;
}

.black-150 {
  color: var(--black_150) !important;
}

.black-200 {
  color: var(--black_200) !important;
}

.black-300 {
  color: var(--black_300) !important;
}

.black-350 {
  color: var(--black_350) !important;
}

.black-400 {
  color: var(--black_400) !important;
}

.black-500 {
  color: var(--black_500) !important;
}

.black-600 {
  color: var(--black_600) !important;
}

.black-700 {
  color: var(--black_700) !important;
}

.bs-sm {
  box-shadow: var(--bs_sm) !important;
}

.bs-md {
  box-shadow: var(--bs_md) !important;
}

.bs-lg {
  box-shadow: var(--bs_lg) !important;
}

/** Hover Classes **/
.h\:bs-md:hover {
  box-shadow: var(--bs_md) !important;
}

.h\:bs-lg:hover {
  box-shadow: var(--bs_md) !important;
}

.h\:bc:hover {
  color: var(--brand_color) !important;
}