body {
  margin: 0;
  min-block-size: 100vh;
  color: var(--primary-text-color);
  background-color: var(--bg-color);

  --primary-input-color: rgb(0 0 0 / 50%);
  --link-color: var(--accent-color);
  --link-visited-color: var(--accent-color-visited);
  --instance-menu-color: var(--search-bar-color);
  --red-500: #f44336;
  --top-bar-push-down-adjustment-default: -35px;

  /* Value of 0 without 'px' does not work inside calc() */
  /* stylelint-disable length-zero-no-unit */
  --top-bar-push-down-adjustment-no-description: 0px;
  --top-bar-push-down-adjustment-edit-mode: 0px;
  --top-bar-push-down-adjustment-one-or-fewer: 0px;
  /* stylelint-enable length-zero-no-unit */

  --destructive-color: #f44336;
  --destructive-text-color: #000;
  --destructive-hover-color: #e53935;
  --destructive-active-color: #c62828;

  /* For the 'About' page, show the logo with the primary text color by default */
  --logo-primary-color: var(--primary-text-color);
  --logo-secondary-color: var(--primary-text-color);
  --logo-tertiary-color: var(--primary-text-color);
}


/*************** RULE TWEAKS ***************/

/* Default sidenav hover text color and primary input color not needed to be changed for most themes */
body:not(.hotPink) {
  --primary-input-color: rgb(0 0 0 / 50%);
  --side-nav-hover-text-color: var(--primary-text-color);
}

/* Default side nav active text color and scrollbar text color hover not needed to be changed for most themes */
body:not(.hotPink, .pastelPink) {
  --side-nav-active-text-color: var(--primary-text-color);
  --scrollbar-text-color-hover: var(--primary-text-color);
}

/* Themes that use the main FreeTube logo */
.system[data-system-theme*='light'],
.light,
.system[data-system-theme*='dark'],
.dark,
.black,
.gray {
  --logo-icon: url('../../_icons/iconColorSmall.svg');
  --logo-text: url('../../_icons/textColorSmall.svg');
  --logo-primary-color: #f33;
  --logo-secondary-color: #29abe1;
  --logo-tertiary-color: #000;
}

/* Given that the Hot Pink theme does not need link underlining due to meeting
WCAG 2 Level AA (https://webaim.org/resources/linkcontrastchecker/?fcolor=FFFFFF&bcolor=DE1C85&lcolor=000000),
it can be safely elided. This looks quite pleasant on this theme. */
.hotPink a:not(:hover, :focus),
.hotPink .navOption:hover,
.hotPink .navOption:focus,
.hotPink *:not(:hover, :focus) {
  text-decoration: none;
}

.hotPink a:hover,
.hotPink a:focus {
  text-decoration: underline;
}

.hotPink .shaka-range-container {
  --primary-color: #fff;
}


/*************** DARK THEME ADJUSTMENTS ***************/

/* stylelint-disable no-descending-specificity */

/* Dark theme Youtube and Invidious logo styling (in ft-share-button) */
.system[data-system-theme*='dark'],
.dark,
.dracula,
.catppuccinMocha,
.hotPink,
.nordic,
.solarizedDark,
.gruvboxDark,
.catppuccinFrappe {
  --primary-shadow-color: rgb(0 0 0 / 75%);

  .invidiousLogo {
    background-image: url('./assets/img/invidious-logo-dark.svg');
  }

  .youtubeLogo {
    filter: brightness(0.868);
  }
}

.black .youtubeLogo {
  filter: brightness(0.933);
}

.black .invidiousLogo {
  background-image: url('./assets/img/invidious-logo-dark.svg');
}


/*************** LIGHT THEME ADJUSTMENTS ***************/

/* Light theme Youtube and Invidious logo styling (in ft-share-button) */
.invidiousLogo {
  background-image: url('./assets/img/invidious-logo-light.svg');
}

.youtubeLogo {
  filter: invert(0.87);
}

/* stylelint-enable no-descending-specificity */


/*************** MAIN THEME DEFINITIONS ***************/

/*
  IMPLEMENTATION NOTE:
  When adding a new base theme, add that --bg-color to src/main/index.js.
*/

.system[data-system-theme*='light'],
.light {
  --primary-text-color: #212121;
  --secondary-text-color: #424242;
  --tertiary-text-color: #757575;
  --primary-shadow-color: rgb(232 232 232 / 100%);
  --title-color: #3f7ac6;
  --bg-color: #f1f1f1;
  --favorite-icon-color: #0c0;
  --card-bg-color: #fff;
  --secondary-card-bg-color: #eee;
  --scrollbar-color: #ccc;
  --scrollbar-color-hover: #bdbdbd;
  --side-nav-color: #fff;
  --side-nav-hover-color: #e0e0e0;
  --side-nav-active-color: #757575;
  --search-bar-color: #f5f5f5;
}

.system[data-system-theme*='dark'],
.dark {
  --primary-text-color: #eee;
  --secondary-text-color: #ddd;
  --tertiary-text-color: #999;
  --title-color: #eee;
  --bg-color: #212121;
  --favorite-icon-color: #0f0;
  --card-bg-color: #303030;
  --secondary-card-bg-color: rgb(0 0 0 / 75%);
  --scrollbar-color: #414141;
  --scrollbar-color-hover: #757575;
  --side-nav-color: #262626;
  --side-nav-hover-color: #212121;
  --side-nav-active-color: #303030;
  --search-bar-color: #262626;
}

.black {
  --primary-text-color: #eee;
  --secondary-text-color: #ddd;
  --tertiary-text-color: #eee;
  --title-color: #eee;
  --bg-color: #000;
  --favorite-icon-color: #0f0;
  --card-bg-color: #000;
  --secondary-card-bg-color: rgb(0 0 0 / 75%);
  --scrollbar-color: #515151;
  --scrollbar-color-hover: #424242;
  --side-nav-color: #0f0f0f;
  --side-nav-hover-color: #212121;
  --side-nav-active-color: #303030;
  --search-bar-color: #262626;
}

.gray {
  --primary-text-color: #eee;
  --secondary-text-color: #e0e0e0;
  --tertiary-text-color: #f5f5f5;
  --title-color: #eee;
  --bg-color: #212121;
  --card-bg-color: #303030;
  --secondary-card-bg-color: rgb(0 0 0 / 75%);
  --side-nav-color: #262626;
  --side-nav-hover-color: #212121;
  --side-nav-active-color: #303030;
  --search-bar-color: #212121;
}

.nordic {
  --primary-text-color: #eee;
  --secondary-text-color: #ddd;
  --tertiary-text-color: #eee;
  --title-color: #eee;
  --bg-color: #2b2f3a;
  --favorite-icon-color: #0f0;
  --card-bg-color: #2e3440;
  --secondary-card-bg-color: rgb(59 66 82 / 75%);
  --scrollbar-color: #4b566a;
  --scrollbar-color-hover: #4b566a;
  --side-nav-color: #2e3440;
  --side-nav-hover-color: #3b4252;
  --side-nav-active-color: #3b4252;
  --search-bar-color: #4b566a;
  --logo-icon: url('../../_icons/iconNordicLightSmall.svg');
  --logo-text: url('../../_icons/textNordicLightSmall.svg');
}

.hotPink {
  --primary-text-color: #ffff;
  --secondary-text-color: #ffff;
  --tertiary-text-color: #ffff;
  --title-color: #000;
  --bg-color: #ff008a;
  --favorite-icon-color: #0f0;
  --card-bg-color: #de1c85;
  --secondary-card-bg-color: rgb(0 0 0 / 75%);
  --scrollbar-color: #fff;
  --scrollbar-color-hover: #c0f6ff;
  --scrollbar-text-color-hover: #000;
  --side-nav-color: #ee1e90;
  --side-nav-hover-color: #fff;
  --side-nav-hover-text-color: #000;
  --side-nav-active-color: #959595;
  --side-nav-active-text-color: #000;
  --search-bar-color: #9c2d5d;
  --logo-icon: url('../../_icons/iconWhiteSmall.svg');
  --logo-text: url('../../_icons/textWhiteSmall.svg');

  /* The hot pink theme does not have a great color contrast with
  many other colors than black and white. This means that the primary and
  secondary theme colors are forced here to be black so as to avoid any
  accessibility concerns. */
  --primary-color: #000 !important;
  --primary-color-hover: #000 !important;
  --primary-color-active: #000 !important;
  --text-with-main-color: #fff !important;
  --text-with-accent-color: #fff !important;
  --accent-color: #000 !important;
  --accent-color-hover: #808080 !important;
  --accent-color-active: #6a739a !important;
  --accent-color-light: #000 !important;
  --accent-color-visited: #000 !important;
  --accent-color-opacity1: rgb(0 0 0 / 4%) !important;
  --accent-color-opacity2: rgb(0 0 0 / 12%) !important;
  --accent-color-opacity3: rgb(255 255 255 / 16%) !important;
  --accent-color-opacity4: rgb(255 255 255 / 24%) !important;
}

.pastelPink {
  --primary-text-color: #1f002b;
  --secondary-text-color: #361836;
  --tertiary-text-color: #5a285a;
  --primary-shadow-color: rgb(255 240 240 / 50%);
  --title-color: #185eb4;
  --bg-color: #ffeadd;
  --favorite-icon-color: #760278;
  --card-bg-color: #ffd1dc;
  --secondary-card-bg-color: #fff;
  --scrollbar-color: #f5c8d3;
  --scrollbar-color-hover: #760278;
  --scrollbar-text-color-hover: var(--scrollbar-color);
  --side-nav-color: #ffd1dc;
  --side-nav-hover-color: #cef4f1;
  --side-nav-active-color: #3124e7;
  --side-nav-active-text-color: #ffff;
  --search-bar-color: #fff0dd;
  --logo-icon: url('../../_icons/iconBlackSmall.svg');
  --logo-text: url('../../_icons/textBlackSmall.svg');
}

.catppuccinMocha {
  --primary-text-color: #cdd6f4;
  --secondary-text-color: #bac2de;
  --tertiary-text-color: #a6adc8;
  --title-color: var(--accent-color);
  --bg-color: #1e1e2e;
  --favorite-icon-color: #0f0;
  --card-bg-color: #181825;
  --secondary-card-bg-color: #1e1e2e;
  --scrollbar-color: #313244;
  --scrollbar-color-hover: #3d4051;
  --side-nav-color: #181825;
  --side-nav-hover-color: #11111b;
  --side-nav-active-color: #11111b;
  --search-bar-color: #313244;
  --logo-icon: url('../../_icons/iconCatppuccinMochaLightSmall.svg');
  --logo-text: url('../../_icons/textCatppuccinMochaLightSmall.svg');
}

.dracula {
  --primary-text-color: #f8f8f2;
  --secondary-text-color: #c6cee6;
  --tertiary-text-color: #e5e8f3;
  --title-color: #bd93f9;
  --bg-color: #282a36;
  --favorite-icon-color: #0f0;
  --card-bg-color: #33353f;
  --secondary-card-bg-color: #282a36;
  --scrollbar-color: #44475a;
  --scrollbar-color-hover: #3d4051;
  --side-nav-color: #44475a;
  --side-nav-hover-color: #57596b;
  --side-nav-active-color: #3d4051;
  --search-bar-color: #3e3f4a;
  --logo-icon: url('../../_icons/iconDraculaLightSmall.svg');
  --logo-text: url('../../_icons/textDraculaLightSmall.svg');
}

.solarizedDark {
  --primary-text-color: #fdf6e3;
  --secondary-text-color: #ddd6c3;
  --tertiary-text-color: #ddd6c3;
  --title-color: #fdf6e3;
  --bg-color: #002b36;
  --favorite-icon-color: #0f0;
  --card-bg-color: #204b56;
  --secondary-card-bg-color: #102b36;
  --scrollbar-color: #608b96;
  --scrollbar-color-hover: #406b76;
  --side-nav-color: #204b56;
  --side-nav-hover-color: #608b96;
  --side-nav-active-color: #406b76;
  --search-bar-color: #073642;
  --logo-icon: url('../../_icons/iconSolarizedLightSmall.svg');
  --logo-text: url('../../_icons/textSolarizedLightSmall.svg');
}

.solarizedLight {
  --primary-text-color: #002b36;
  --secondary-text-color: #204b56;
  --tertiary-text-color: #204b56;
  --title-color: #002b36;
  --bg-color: #fdf6e3;
  --favorite-icon-color: #0f0;
  --card-bg-color: #eee8d5;
  --secondary-card-bg-color: #fdf6e3;
  --scrollbar-color: #a9a895;
  --scrollbar-color-hover: #839496;
  --side-nav-color: #eee8d5;
  --side-nav-hover-color: #fdf6e3;
  --side-nav-active-color: #839496;
  --search-bar-color: #c9c8b5;
  --logo-icon: url('../../_icons/iconSolarizedDarkSmall.svg');
  --logo-text: url('../../_icons/textSolarizedDarkSmall.svg');
}

.gruvboxDark {
  --primary-text-color: #ebdbb2;
  --secondary-text-color: #d5c4a1;
  --tertiary-text-color: #d5c4a1;
  --title-color: #ebdbb2;
  --bg-color: #282828;
  --favorite-icon-color: #0f0;
  --card-bg-color: #504945;
  --secondary-card-bg-color: #3c3836;
  --scrollbar-color: #665c54;
  --scrollbar-color-hover: #282828;
  --side-nav-color: #504945;
  --side-nav-hover-color: #665c54;
  --side-nav-active-color: #504945;
  --search-bar-color: #1d2021;
  --logo-icon: url('../../_icons/iconGruvboxLightSmall.svg');
  --logo-text: url('../../_icons/textGruvboxLightSmall.svg');
}

.gruvboxLight {
  --primary-shadow-color: rgb(255 241 199 / 100%);
  --primary-text-color: #3c3836;
  --secondary-text-color: #282828;
  --tertiary-text-color: #282828;
  --title-color: #3c3836;
  --bg-color: #fbf1c7;
  --favorite-icon-color: #0f0;
  --card-bg-color: #ebdbb2;
  --secondary-card-bg-color: #d5c4a1;
  --scrollbar-color: #bdae93;
  --scrollbar-color-hover: #fbf1c7;
  --side-nav-color: #ebdbb2;
  --side-nav-hover-color: #bdae93;
  --side-nav-active-color: #ebdbb2;
  --search-bar-color: #a89984;
  --logo-icon: url('../../_icons/iconGruvboxDarkSmall.svg');
  --logo-text: url('../../_icons/textGruvboxDarkSmall.svg');
}

.catppuccinFrappe {
  --primary-text-color: #c6d0f5;
  --secondary-text-color: #c6d0f5;
  --tertiary-text-color: #a5adce;
  --title-color: var(--accent-color);
  --bg-color: #303446;
  --favorite-icon-color: #0f0;
  --card-bg-color: #292c3c;
  --secondary-card-bg-color: #303446;
  --scrollbar-color: #414559;
  --scrollbar-color-hover: #515569;
  --side-nav-color: #292c3c;
  --side-nav-hover-color: #232634;
  --side-nav-active-color: #232634;
  --search-bar-color: #414559;
  --logo-icon: url('../../_icons/iconCatppuccinFrappeLightSmall.svg');
  --logo-text: url('../../_icons/textCatppuccinFrappeLightSmall.svg');
}


/*************** PRIMARY THEME COLOR DEFINTIONS ***************/

.mainRed,
.mainPink,
.mainPurple,
.mainDeepPurple,
.mainIndigo,
.mainBlue,
.mainLightBlue,
.mainCyan,
.mainTeal,
.mainGreen {
  --text-with-main-color: #fff;
  --logo-icon-bar-color: url('../../_icons/iconWhiteSmall.svg');
  --logo-text-bar-color: url('../../_icons/textWhiteSmall.svg');
}

/* light primary theme colors */
.mainLightGreen,
.mainLime,
.mainYellow,
.mainAmber,
.mainOrange,
.mainDeepOrange {
  --text-with-main-color: #000;
  --logo-icon-bar-color: url('../../_icons/iconBlackSmall.svg');
  --logo-text-bar-color: url('../../_icons/textBlackSmall.svg');
}

.mainRed {
  --primary-color: #f44336;
  --primary-color-hover: #e53935;
  --primary-color-active: #c62828;
}

.mainPink {
  --primary-color: #e91e63;
  --primary-color-hover: #d81b60;
  --primary-color-active: #ad1457;
}

.mainPurple {
  --primary-color: #9c27b0;
  --primary-color-hover: #8e24aa;
  --primary-color-active: #6a1b9a;
}

.mainDeepPurple {
  --primary-color: #673ab7;
  --primary-color-hover: #5e35b1;
  --primary-color-active: #4527a0;
}

.mainIndigo {
  --primary-color: #3f51b5;
  --primary-color-hover: #3949ab;
  --primary-color-active: #283593;
}

.mainBlue {
  --primary-color: #2196f3;
  --primary-color-hover: #1e88e5;
  --primary-color-active: #1565c0;
}

.mainLightBlue {
  --primary-color: #03a9f4;
  --primary-color-hover: #039be5;
  --primary-color-active: #0277bd;
}

.mainCyan {
  --primary-color: #00bcd4;
  --primary-color-hover: #00acc1;
  --primary-color-active: #00838f;
}

.mainTeal {
  --primary-color: #009688;
  --primary-color-hover: #00897b;
  --primary-color-active: #00695c;
}

.mainGreen {
  --primary-color: #4caf50;
  --primary-color-hover: #43a047;
  --primary-color-active: #2e7d32;
}

.mainLightGreen {
  --primary-color: #8bc34a;
  --primary-color-hover: #7cb342;
  --primary-color-active: #558b2f;
}

.mainLime {
  --primary-color: #cddc39;
  --primary-color-hover: #c0ca33;
  --primary-color-active: #9e9d24;
}

.mainYellow {
  --primary-color: #ffeb3b;
  --primary-color-hover: #fdd835;
  --primary-color-active: #f9a825;
}

.mainAmber {
  --primary-color: #ffc107;
  --primary-color-hover: #ffb300;
  --primary-color-active: #ff8f00;
}

.mainOrange {
  --primary-color: #ff9800;
  --primary-color-hover: #fb8c00;
  --primary-color-active: #ef6c00;
}

.mainDeepOrange {
  --primary-color: #ff5722;
  --primary-color-hover: #f4511e;
  --primary-color-active: #d84315;
}


/* PRIMARY THEME COLORS CORRESPONDING TO BASE THEMES */

.mainCatppuccinMochaRosewater,
.mainCatppuccinMochaFlamingo,
.mainCatppuccinMochaPink,
.mainCatppuccinMochaMauve,
.mainCatppuccinMochaRed,
.mainCatppuccinMochaMaroon,
.mainCatppuccinMochaPeach,
.mainCatppuccinMochaYellow,
.mainCatppuccinMochaGreen,
.mainCatppuccinMochaTeal,
.mainCatppuccinMochaSky,
.mainCatppuccinMochaSapphire,
.mainCatppuccinMochaBlue,
.mainCatppuccinMochaLavender {
  --text-with-main-color: #1e1e2e;
  --logo-icon-bar-color: url('../../_icons/iconCatppuccinMochaDarkSmall.svg');
  --logo-text-bar-color: url('../../_icons/textCatppuccinMochaDarkSmall.svg');
}

.mainCatppuccinMochaRosewater {
  --primary-color: #f5e0dc;
  --primary-color-hover: #fceeec;
  --primary-color-active: #e1c8c3;
}

.mainCatppuccinMochaFlamingo {
  --primary-color: #f2cdcd;
  --primary-color-hover: #f2e1e1;
  --primary-color-active: #ddb7b7;
}

.mainCatppuccinMochaPink {
  --primary-color: #f5c2e7;
  --primary-color-hover: #f3d2ea;
  --primary-color-active: #dca3cd;
}

.mainCatppuccinMochaMauve {
  --primary-color: #cba6f7;
  --primary-color-hover: #d4b7f8;
  --primary-color-active: #b38fdf;
}

.mainCatppuccinMochaRed {
  --primary-color: #f38ba8;
  --primary-color-hover: #f0a4b9;
  --primary-color-active: #de7693;
}

.mainCatppuccinMochaMaroon {
  --primary-color: #eba0ac;
  --primary-color-hover: #eabbc3;
  --primary-color-active: #d68895;
}

.mainCatppuccinMochaPeach {
  --primary-color: #fab387;
  --primary-color-hover: #f7c7a9;
  --primary-color-active: #e1996d;
}

.mainCatppuccinMochaYellow {
  --primary-color: #f9e2af;
  --primary-color-hover: #feeecd;
  --primary-color-active: #dec48d;
}

.mainCatppuccinMochaGreen {
  --primary-color: #a6e3a1;
  --primary-color-hover: #bfebbb;
  --primary-color-active: #86c780;
}

.mainCatppuccinMochaTeal {
  --primary-color: #94e2d5;
  --primary-color-hover: #aceae0;
  --primary-color-active: #6fc5b7;
}

.mainCatppuccinMochaSky {
  --primary-color: #89dceb;
  --primary-color-hover: #a3e4f0;
  --primary-color-active: #68bcca;
}

.mainCatppuccinMochaSapphire {
  --primary-color: #74c7ec;
  --primary-color-hover: #93d1ed;
  --primary-color-active: #59a9cf;
}

.mainCatppuccinMochaBlue {
  --primary-color: #89b4fa;
  --primary-color-hover: #a6c8ff;
  --primary-color-active: #6593df;
}

.mainCatppuccinMochaLavender {
  --primary-color: #b4befe;
  --primary-color-hover: #c9d0ff;
  --primary-color-active: #8d98e4;
}

.mainDraculaCyan,
.mainDraculaGreen,
.mainDraculaOrange,
.mainDraculaRed,
.mainDraculaYellow {
  --text-with-main-color: #282a36;
  --logo-icon-bar-color: url('../../_icons/iconDraculaDarkSmall.svg');
  --logo-text-bar-color: url('../../_icons/textDraculaDarkSmall.svg');
}

.mainDraculaPink,
.mainDraculaPurple {
  --text-with-main-color: #f8f8f2;
  --logo-icon-bar-color: url('../../_icons/iconDraculaLightSmall.svg');
  --logo-text-bar-color: url('../../_icons/textDraculaLightSmall.svg');
}

.mainDraculaCyan {
  --primary-color: #8be9fd;
  --primary-color-hover: #97ebfd;
  --primary-color-active: #7dd2e4;
}

.mainDraculaGreen {
  --primary-color: #50fa7b;
  --primary-color-hover: #62fb88;
  --primary-color-active: #48e16f;
}

.mainDraculaOrange {
  --primary-color: #ffb86c;
  --primary-color-hover: #ffbf7b;
  --primary-color-active: #e6a661;
}

.mainDraculaPink {
  --primary-color: #ff79c6;
  --primary-color-hover: #ff86cc;
  --primary-color-active: #e66db2;
}

.mainDraculaPurple {
  --primary-color: #bd93f9;
  --primary-color-hover: #c49efa;
  --primary-color-active: #aa84e0;
}

.mainDraculaRed {
  --primary-color: #f55;
  --primary-color-hover: #f66;
  --primary-color-active: #e64d4d;
}

.mainDraculaYellow {
  --primary-color: #f1fa8c;
  --primary-color-hover: #f2fb98;
  --primary-color-active: #d9e17e;
}

.mainSolarizedYellow,
.mainSolarizedOrange,
.mainSolarizedRed,
.mainSolarizedMagenta,
.mainSolarizedViolet,
.mainSolarizedGreen {
  --text-with-main-color: #fdf6e3;
  --logo-icon-bar-color: url('../../_icons/iconDraculaLightSmall.svg');
  --logo-text-bar-color: url('../../_icons/textDraculaLightSmall.svg');
}

.mainSolarizedBlue,
.mainSolarizedCyan {
  --text-with-main-color: #000;
  --logo-icon-bar-color: url('../../_icons/iconDraculaDarkSmall.svg');
  --logo-text-bar-color: url('../../_icons/textDraculaDarkSmall.svg');
}

.mainSolarizedYellow {
  --primary-color: #b58900;
  --primary-color-hover: #d5a920;
  --primary-color-active: #f5c940;
}

.mainSolarizedOrange {
  --primary-color: #cb4b16;
  --primary-color-hover: #eb6b36;
  --primary-color-active: #fc8b56;
}

.mainSolarizedRed {
  --primary-color: #dc322f;
  --primary-color-hover: #fc524f;
  --primary-color-active: #fe726f;
}

.mainSolarizedMagenta {
  --primary-color: #d33682;
  --primary-color-hover: #f356a2;
  --primary-color-active: #f558c2;
}

.mainSolarizedViolet {
  --primary-color: #6c71c4;
  --primary-color-hover: #8c91e4;
  --primary-color-active: #acb1f4;
}

.mainSolarizedBlue {
  --primary-color: #268bd2;
  --primary-color-hover: #46abf2;
  --primary-color-active: #66cbf4;
}

.mainSolarizedCyan {
  --primary-color: #2aa198;
  --primary-color-hover: #4ac1b8;
  --primary-color-active: #6ae1d8;
}

.mainSolarizedGreen {
  --primary-color: #859900;
  --primary-color-hover: #a5b920;
  --primary-color-active: #c5d940;
}

.mainGruvboxDarkGreen {
  --primary-color: #b8bb26;
  --primary-color-hover: #d8db46;
  --primary-color-active: #f8fb66;
}

.mainGruvboxDarkYellow {
  --primary-color: #fabd2f;
  --primary-color-hover: #fcd54f;
  --primary-color-active: #fed76f;
}

.mainGruvboxDarkBlue {
  --primary-color: #83a598;
  --primary-color-hover: #a3c5b8;
  --primary-color-active: #c3e2d8;
}

.mainGruvboxDarkPurple {
  --primary-color: #d3869b;
  --primary-color-hover: #f3a6b8;
  --primary-color-active: #f3a6b8;
}

.mainGruvboxDarkAqua {
  --primary-color: #8ec07c;
  --primary-color-hover: #aec29c;
  --primary-color-active: #cec59c;
}

.mainGruvboxDarkOrange {
  --primary-color: #fe8019;
  --primary-color-hover: #fe9a39;
  --primary-color-active: #feb259;
}

.mainGruvboxLightRed {
  --primary-color: #9d0006;
  --primary-color-hover: #bd2026;
  --primary-color-active: #dd4046;
}

.mainGruvboxLightBlue {
  --primary-color: #076678;
  --primary-color-hover: #276898;
  --primary-color-active: #476ab8;
}

.mainGruvboxLightPurple {
  --primary-color: #8f3f71;
  --primary-color-hover: #af5f91;
  --primary-color-active: #cf7fb1;
}

.mainGruvboxLightOrange {
  --primary-color: #af3a03;
  --primary-color-hover: #cf5a23;
  --primary-color-active: #ef7a43;
}

.mainGruvboxLightOrange,
.mainGruvboxLightRed,
.mainGruvboxLightBlue,
.mainGruvboxLightPurple {
  --text-with-main-color: #fbf1c7;
  --logo-icon-bar-color: url('../../_icons/iconGruvboxLightSmall.svg');
  --logo-text-bar-color: url('../../_icons/textGruvboxLightSmall.svg');
}


.mainGruvboxDarkGreen,
.mainGruvboxDarkYellow,
.mainGruvboxDarkAqua,
.mainGruvboxDarkOrange {
  --text-with-main-color: #3c3836;
  --logo-icon-bar-color: url('../../_icons/iconGruvboxDarkSmall.svg');
  --logo-text-bar-color: url('../../_icons/textGruvboxDarkSmall.svg');
}

.mainGruvboxDarkBlue,
.mainGruvboxDarkPurple {
  --text-with-main-color: #1d2021;
  --logo-icon-bar-color: url('../../_icons/iconGruvboxDarkSmall.svg');
  --logo-text-bar-color: url('../../_icons/textGruvboxDarkSmall.svg');
}


.mainCatppuccinFrappeRosewater,
.mainCatppuccinFrappeFlamingo,
.mainCatppuccinFrappePink,
.mainCatppuccinFrappeMauve,
.mainCatppuccinFrappeRed,
.mainCatppuccinFrappeMaroon,
.mainCatppuccinFrappePeach,
.mainCatppuccinFrappeYellow,
.mainCatppuccinFrappeGreen,
.mainCatppuccinFrappeTeal,
.mainCatppuccinFrappeSky,
.mainCatppuccinFrappeSapphire,
.mainCatppuccinFrappeBlue,
.mainCatppuccinFrappeLavender {
  --text-with-main-color: #24273a;
  --logo-icon-bar-color: url('../../_icons/iconCatppuccinFrappeDarkSmall.svg');
  --logo-text-bar-color: url('../../_icons/textCatppuccinFrappeDarkSmall.svg');
}

.mainCatppuccinFrappeRosewater {
  --primary-color: #f2d5cf;
  --primary-color-hover: #f2e7e3;
  --primary-color-active: #e0bfb9;
}

.mainCatppuccinFrappeFlamingo {
  --primary-color: #eebebe;
  --primary-color-hover: #f0d0d0;
  --primary-color-active: #d8a0a0;
}

.mainCatppuccinFrappePink {
  --primary-color: #f4b8e4;
  --primary-color-hover: #f3c8e7;
  --primary-color-active: #e19abf;
}

.mainCatppuccinFrappeMauve {
  --primary-color: #ca9ee6;
  --primary-color-hover: #d4b0e7;
  --primary-color-active: #b37ac9;
}

.mainCatppuccinFrappeRed {
  --primary-color: #e78284;
  --primary-color-hover: #e99a9c;
  --primary-color-active: #d46b6d;
}

.mainCatppuccinFrappeMaroon {
  --primary-color: #ea999c;
  --primary-color-hover: #eab4b8;
  --primary-color-active: #d87c80;
}

.mainCatppuccinFrappePeach {
  --primary-color: #ef9f76;
  --primary-color-hover: #f7c0a0;
  --primary-color-active: #e18b5e;
}

.mainCatppuccinFrappeYellow {
  --primary-color: #e5c890;
  --primary-color-hover: #f0e9c0;
  --primary-color-active: #d8b790;
}

.mainCatppuccinFrappeGreen {
  --primary-color: #a6d189;
  --primary-color-hover: #bfe9b1;
  --primary-color-active: #86c77b;
}

.mainCatppuccinFrappeTeal {
  --primary-color: #81c8be;
  --primary-color-hover: #a3d4cc;
  --primary-color-active: #6fa9a0;
}

.mainCatppuccinFrappeSky {
  --primary-color: #99d1db;
  --primary-color-hover: #b3dce4;
  --primary-color-active: #6fa9a0;
}

.mainCatppuccinFrappeSapphire {
  --primary-color: #85c1dc;
  --primary-color-hover: #a3d0e4;
  --primary-color-active: #5a9ec6;
}

.mainCatppuccinFrappeBlue {
  --primary-color: #8caaee;
  --primary-color-hover: #9eb7f0;
  --primary-color-active: #6c8dbf;
}

.mainCatppuccinFrappeLavender {
  --primary-color: #babbf1;
  --primary-color-hover: #c9c9f3;
  --primary-color-active: #8a8abf;
}

/*************** SECONDARY THEME COLOR DEFINTIONS ***************/

/* dark secondary theme colors */
.secRed,
.secPink,
.secPurple,
.secDeepPurple,
.secIndigo,
.secBlue,
.secLightBlue,
.secCyan,
.secTeal,
.secGreen {
  --text-with-accent-color: #fff;
}

/* light secondary theme colors */
.secLightGreen,
.secLime,
.secYellow,
.secAmber,
.secOrange,
.secDeepOrange {
  --text-with-accent-color: #000;
}

.secRed {
  --accent-color: #f44336;
  --accent-color-hover: #e53935;
  --accent-color-active: #c62828;
  --accent-color-light: #ef9a9a;
  --accent-color-visited: #b71c1c;
  --accent-color-opacity1: rgb(244 67 54 / 4%);
  --accent-color-opacity2: rgb(244 67 54 / 12%);
  --accent-color-opacity3: rgb(244 67 54 / 16%);
  --accent-color-opacity4: rgb(244 67 54 / 24%);
}

.secPink {
  --accent-color: #e91e63;
  --accent-color-hover: #d81b60;
  --accent-color-active: #ad1457;
  --accent-color-light: #f48fb1;
  --accent-color-visited: #880e4f;
  --accent-color-opacity1: rgb(233 30 99 / 4%);
  --accent-color-opacity2: rgb(233 30 99 / 12%);
  --accent-color-opacity3: rgb(233 30 99 / 16%);
  --accent-color-opacity4: rgb(233 30 99 / 24%);
}

.secPurple {
  --accent-color: #9c27b0;
  --accent-color-hover: #8e24aa;
  --accent-color-active: #6a1b9a;
  --accent-color-light: #ce93d8;
  --accent-color-visited: #4a148c;
  --accent-color-opacity1: rgb(156 39 176 / 4%);
  --accent-color-opacity2: rgb(156 39 176 / 12%);
  --accent-color-opacity3: rgb(156 39 176 / 16%);
  --accent-color-opacity4: rgb(156 39 176 / 24%);
}

.secDeepPurple {
  --accent-color: #673ab7;
  --accent-color-hover: #5e35b1;
  --accent-color-active: #4527a0;
  --accent-color-light: #b39ddb;
  --accent-color-visited: #311b92;
  --accent-color-opacity1: rgb(103 58 183 / 4%);
  --accent-color-opacity2: rgb(103 58 183 / 12%);
  --accent-color-opacity3: rgb(103 58 183 / 16%);
  --accent-color-opacity4: rgb(103 58 183 / 24%);
}

.secIndigo {
  --accent-color: #3f51b5;
  --accent-color-hover: #3949ab;
  --accent-color-active: #283593;
  --accent-color-light: #9fa8da;
  --accent-color-visited: #1a237e;
  --accent-color-opacity1: rgb(63 81 181 / 4%);
  --accent-color-opacity2: rgb(63 81 181 / 12%);
  --accent-color-opacity3: rgb(63 81 181 / 16%);
  --accent-color-opacity4: rgb(63 81 181 / 24%);
}

.secBlue {
  --accent-color: #2196f3;
  --accent-color-hover: #1e88e5;
  --accent-color-active: #1565c0;
  --accent-color-light: #90caf9;
  --accent-color-visited: #0d47a1;
  --accent-color-opacity1: rgb(33 150 243 / 4%);
  --accent-color-opacity2: rgb(33 150 243 / 12%);
  --accent-color-opacity3: rgb(33 150 243 / 16%);
  --accent-color-opacity4: rgb(33 150 243 / 24%);
}

.secLightBlue {
  --accent-color: #03a9f4;
  --accent-color-hover: #039be5;
  --accent-color-active: #0277bd;
  --accent-color-light: #81d4fa;
  --accent-color-visited: #01579b;
  --accent-color-opacity1: rgb(3 169 244 / 4%);
  --accent-color-opacity2: rgb(3 169 244 / 12%);
  --accent-color-opacity3: rgb(3 169 244 / 16%);
  --accent-color-opacity4: rgb(3 169 244 / 24%);
}

.secCyan {
  --accent-color: #00bcd4;
  --accent-color-hover: #00acc1;
  --accent-color-active: #00838f;
  --accent-color-light: #80deea;
  --accent-color-visited: #006064;
  --accent-color-opacity1: rgb(0 188 212 / 4%);
  --accent-color-opacity2: rgb(0 188 212 / 12%);
  --accent-color-opacity3: rgb(0 188 212 / 16%);
  --accent-color-opacity4: rgb(0 188 212 / 24%);
}

.secTeal {
  --accent-color: #009688;
  --accent-color-hover: #00897b;
  --accent-color-active: #00695c;
  --accent-color-light: #80cbc4;
  --accent-color-visited: #004d40;
  --accent-color-opacity1: rgb(0 150 136 / 4%);
  --accent-color-opacity2: rgb(0 150 136 / 12%);
  --accent-color-opacity3: rgb(0 150 136 / 16%);
  --accent-color-opacity4: rgb(0 150 136 / 24%);
}

.secGreen {
  --accent-color: #4caf50;
  --accent-color-hover: #43a047;
  --accent-color-active: #2e7d32;
  --accent-color-light: #a5d6a7;
  --accent-color-visited: #1b5e20;
  --accent-color-opacity1: rgb(76 175 80 / 4%);
  --accent-color-opacity2: rgb(76 175 80 / 12%);
  --accent-color-opacity3: rgb(76 175 80 / 16%);
  --accent-color-opacity4: rgb(76 175 80 / 24%);
}

.secLightGreen {
  --accent-color: #8bc34a;
  --accent-color-hover: #7cb342;
  --accent-color-active: #558b2f;
  --accent-color-light: #c5e1a5;
  --accent-color-visited: #33691e;
  --accent-color-opacity1: rgb(139 195 74 / 4%);
  --accent-color-opacity2: rgb(139 195 74 / 12%);
  --accent-color-opacity3: rgb(139 195 74 / 16%);
  --accent-color-opacity4: rgb(139 195 74 / 24%);
}

.secLime {
  --accent-color: #cddc39;
  --accent-color-hover: #c0ca33;
  --accent-color-active: #9e9d24;
  --accent-color-light: #e6ee9c;
  --accent-color-visited: #827717;
  --accent-color-opacity1: rgb(205 220 57 / 4%);
  --accent-color-opacity2: rgb(205 220 57 / 12%);
  --accent-color-opacity3: rgb(205 220 57 / 16%);
  --accent-color-opacity4: rgb(205 220 57 / 24%);
}

.secYellow {
  --accent-color: #ffeb3b;
  --accent-color-hover: #fdd835;
  --accent-color-active: #f9a825;
  --accent-color-light: #fff59d;
  --accent-color-visited: #f57f17;
  --accent-color-opacity1: rgb(255 235 59 / 4%);
  --accent-color-opacity2: rgb(255 235 59 / 12%);
  --accent-color-opacity3: rgb(255 235 59 / 16%);
  --accent-color-opacity4: rgb(255 235 59 / 24%);
}

.secAmber {
  --accent-color: #ffc107;
  --accent-color-hover: #ffb300;
  --accent-color-active: #ff8f00;
  --accent-color-light: #ffe082;
  --accent-color-visited: #ff6f00;
  --accent-color-opacity1: rgb(255 193 7 / 4%);
  --accent-color-opacity2: rgb(255 193 7 / 12%);
  --accent-color-opacity3: rgb(255 193 7 / 16%);
  --accent-color-opacity4: rgb(255 193 7 / 24%);
}

.secOrange {
  --accent-color: #ff9800;
  --accent-color-hover: #fb8c00;
  --accent-color-active: #ef6c00;
  --accent-color-light: #ffcc80;
  --accent-color-visited: #e65100;
  --accent-color-opacity1: rgb(255 152 0 / 4%);
  --accent-color-opacity2: rgb(255 152 0 / 12%);
  --accent-color-opacity3: rgb(255 152 0 / 16%);
  --accent-color-opacity4: rgb(255 152 0 / 24%);
}

.secDeepOrange {
  --accent-color: #ff5722;
  --accent-color-hover: #f4511e;
  --accent-color-active: #d84315;
  --accent-color-light: #ffab91;
  --accent-color-visited: #bf360c;
  --accent-color-opacity1: rgb(255 87 34 / 4%);
  --accent-color-opacity2: rgb(255 87 34 / 12%);
  --accent-color-opacity3: rgb(255 87 34 / 16%);
  --accent-color-opacity4: rgb(255 87 34 / 24%);
}


/* SECONDARY THEME COLORS CORRESPONDING TO BASE THEMES */

.secCatppuccinMochaRosewater,
.secCatppuccinMochaFlamingo,
.secCatppuccinMochaPink,
.secCatppuccinMochaMauve,
.secCatppuccinMochaRed,
.secCatppuccinMochaMaroon,
.secCatppuccinMochaPeach,
.secCatppuccinMochaYellow,
.secCatppuccinMochaGreen,
.secCatppuccinMochaTeal,
.secCatppuccinMochaSky,
.secCatppuccinMochaSapphire,
.secCatppuccinMochaBlue,
.secCatppuccinMochaLavender {
  --text-with-accent-color: #1e1e2e;
}

.secCatppuccinMochaRosewater {
  --accent-color: #f5e0dc;
  --accent-color-hover: #fceeec;
  --accent-color-active: #e1c8c3;
  --accent-color-light: #f8eae7;
  --accent-color-visited: #d3a197;
  --accent-color-opacity1: rgb(245 224 220 / 4%);
  --accent-color-opacity2: rgb(245 224 220 / 12%);
  --accent-color-opacity3: rgb(245 224 220 / 16%);
  --accent-color-opacity4: rgb(245 224 220 / 24%);
}

.secCatppuccinMochaFlamingo {
  --accent-color: #f2cdcd;
  --accent-color-hover: #f3d7d7;
  --accent-color-active: #ddb7b7;
  --accent-color-light: #f7dfdf;
  --accent-color-visited: #cf9898;
  --accent-color-opacity1: rgb(242 205 205 / 4%);
  --accent-color-opacity2: rgb(242 205 205 / 12%);
  --accent-color-opacity3: rgb(242 205 205 / 16%);
  --accent-color-opacity4: rgb(242 205 205 / 24%);
}

.secCatppuccinMochaPink {
  --accent-color: #f5c2e7;
  --accent-color-hover: #f3cee9;
  --accent-color-active: #dca3cd;
  --accent-color-light: #f4dbed;
  --accent-color-visited: #d28fc0;
  --accent-color-opacity1: rgb(245 194 231 / 4%);
  --accent-color-opacity2: rgb(245 194 231 / 12%);
  --accent-color-opacity3: rgb(245 194 231 / 16%);
  --accent-color-opacity4: rgb(245 194 231 / 24%);
}

.secCatppuccinMochaMauve {
  --accent-color: #cba6f7;
  --accent-color-hover: #d4b7f8;
  --accent-color-active: #b38fdf;
  --accent-color-light: #d6b9f9;
  --accent-color-visited: #a171da;
  --accent-color-opacity1: rgb(203 166 247 / 4%);
  --accent-color-opacity2: rgb(203 166 247 / 12%);
  --accent-color-opacity3: rgb(203 166 247 / 16%);
  --accent-color-opacity4: rgb(203 166 247 / 24%);
}

.secCatppuccinMochaRed {
  --accent-color: #f38ba8;
  --accent-color-hover: #f399b2;
  --accent-color-active: #de7693;
  --accent-color-light: #f5a3ba;
  --accent-color-visited: #d56c89;
  --accent-color-opacity1: rgb(243 139 168 / 4%);
  --accent-color-opacity2: rgb(243 139 168 / 12%);
  --accent-color-opacity3: rgb(243 139 168 / 16%);
  --accent-color-opacity4: rgb(243 139 168 / 24%);
}

.secCatppuccinMochaMaroon {
  --accent-color: #eba0ac;
  --accent-color-hover: #ebb4bd;
  --accent-color-active: #d68895;
  --accent-color-light: #f0b7c0;
  --accent-color-visited: #c86a79;
  --accent-color-opacity1: rgb(235 160 172 / 4%);
  --accent-color-opacity2: rgb(235 160 172 / 12%);
  --accent-color-opacity3: rgb(235 160 172 / 16%);
  --accent-color-opacity4: rgb(235 160 172 / 24%);
}

.secCatppuccinMochaPeach {
  --accent-color: #fab387;
  --accent-color-hover: #f7bd99;
  --accent-color-active: #e1996d;
  --accent-color-light: #fbc4a2;
  --accent-color-visited: #d78a5b;
  --accent-color-opacity1: rgb(250 179 135 / 4%);
  --accent-color-opacity2: rgb(250 179 135 / 12%);
  --accent-color-opacity3: rgb(250 179 135 / 16%);
  --accent-color-opacity4: rgb(250 179 135 / 24%);
}

.secCatppuccinMochaYellow {
  --accent-color: #f9e2af;
  --accent-color-hover: #f9e7bf;
  --accent-color-active: #dec48d;
  --accent-color-light: #fbeccb;
  --accent-color-visited: #d5b05d;
  --accent-color-opacity1: rgb(249 226 175 / 4%);
  --accent-color-opacity2: rgb(249 226 175 / 12%);
  --accent-color-opacity3: rgb(249 226 175 / 16%);
  --accent-color-opacity4: rgb(249 226 175 / 24%);
}

.secCatppuccinMochaGreen {
  --accent-color: #a6e3a1;
  --accent-color-hover: #b6e3b2;
  --accent-color-active: #86c780;
  --accent-color-light: #bceab8;
  --accent-color-visited: #6ed166;
  --accent-color-opacity1: rgb(166 227 161 / 4%);
  --accent-color-opacity2: rgb(166 227 161 / 12%);
  --accent-color-opacity3: rgb(166 227 161 / 16%);
  --accent-color-opacity4: rgb(166 227 161 / 24%);
}

.secCatppuccinMochaTeal {
  --accent-color: #94e2d5;
  --accent-color-hover: #a1dfd5;
  --accent-color-active: #6fc5b7;
  --accent-color-light: #afe9df;
  --accent-color-visited: #5cccb9;
  --accent-color-opacity1: rgb(148 226 213 / 4%);
  --accent-color-opacity2: rgb(148 226 213 / 12%);
  --accent-color-opacity3: rgb(148 226 213 / 16%);
  --accent-color-opacity4: rgb(148 226 213 / 24%);
}

.secCatppuccinMochaSky {
  --accent-color: #89dceb;
  --accent-color-hover: #99dfeb;
  --accent-color-active: #68bcca;
  --accent-color-light: #9fe3ef;
  --accent-color-visited: #64c2d3;
  --accent-color-opacity1: rgb(137 220 235 / 4%);
  --accent-color-opacity2: rgb(137 220 235 / 12%);
  --accent-color-opacity3: rgb(137 220 235 / 16%);
  --accent-color-opacity4: rgb(137 220 235 / 24%);
}

.secCatppuccinMochaSapphire {
  --accent-color: #74c7ec;
  --accent-color-hover: #84c7e6;
  --accent-color-active: #59a9cf;
  --accent-color-light: #93d4f0;
  --accent-color-visited: #6ab6d7;
  --accent-color-opacity1: rgb(116 199 236 / 4%);
  --accent-color-opacity2: rgb(116 199 236 / 12%);
  --accent-color-opacity3: rgb(116 199 236 / 16%);
  --accent-color-opacity4: rgb(116 199 236 / 24%);
}

.secCatppuccinMochaBlue {
  --accent-color: #89b4fa;
  --accent-color-hover: #9bbef6;
  --accent-color-active: #6593df;
  --accent-color-light: #a7c7fb;
  --accent-color-visited: #739cdd;
  --accent-color-opacity1: rgb(137 220 235 / 4%);
  --accent-color-opacity2: rgb(137 220 235 / 12%);
  --accent-color-opacity3: rgb(137 220 235 / 16%);
  --accent-color-opacity4: rgb(137 220 235 / 24%);
}

.secCatppuccinMochaLavender {
  --accent-color: #b4befe;
  --accent-color-hover: #c9d0ff;
  --accent-color-active: #8d98e4;
  --accent-color-light: #d2d8fe;
  --accent-color-visited: #96a1e9;
  --accent-color-opacity1: rgb(180 190 254 / 4%);
  --accent-color-opacity2: rgb(180 190 254 / 12%);
  --accent-color-opacity3: rgb(180 190 254 / 16%);
  --accent-color-opacity4: rgb(180 190 254 / 24%);
}

.secDraculaCyan,
.secDraculaGreen,
.secDraculaOrange,
.secDraculaRed,
.secDraculaYellow {
  --text-with-accent-color: #212121;
}

.secDraculaPink,
.secDraculaPurple {
  --text-with-accent-color: #f8f8f2;
}

.secDraculaCyan,
.secDraculaGreen,
.secDraculaOrange,
.secDraculaPink,
.secDraculaPurple,
.secDraculaRed,
.secDraculaYellow {
  --accent-color-opacity1: rgb(98 114 164 / 4%);
  --accent-color-opacity2: rgb(98 114 164 / 12%);
  --accent-color-opacity3: rgb(98 114 164 / 16%);
  --accent-color-opacity4: rgb(98 114 164 / 24%);
}

.secDraculaCyan {
  --accent-color: #8be9fd;
  --accent-color-hover: #97ebfd;
  --accent-color-active: #7dd2e4;
  --accent-color-light: #a2edfd;
  --accent-color-visited: #6fbaca;

}

.secDraculaGreen {
  --accent-color: #50fa7b;
  --accent-color-hover: #62fb88;
  --accent-color-active: #48e16f;
  --accent-color-light: #73fb95;
  --accent-color-visited: #40c862;
}

.secDraculaOrange {
  --accent-color: #ffb86c;
  --accent-color-hover: #ffbf7b;
  --accent-color-active: #e6a661;
  --accent-color-light: #ffc689;
  --accent-color-visited: #cc9356;
}

.secDraculaPink {
  --accent-color: #ff79c6;
  --accent-color-hover: #ff86cc;
  --accent-color-active: #e66db2;
  --accent-color-light: #ff94d1;
  --accent-color-visited: #cc619e;
}

.secDraculaPurple {
  --accent-color: #bd93f9;
  --accent-color-hover: #c49efa;
  --accent-color-active: #aa84e0;
  --accent-color-light: #caa9fa;
  --accent-color-visited: #9776c7;
}

.secDraculaRed {
  --accent-color: #f55;
  --accent-color-hover: #f66;
  --accent-color-active: #e64d4d;
  --accent-color-light: #f77;
  --accent-color-visited: #c44;
}

.secDraculaYellow {
  --accent-color: #f1fa8c;
  --accent-color-hover: #f2fb98;
  --accent-color-active: #d9e17e;
  --accent-color-light: #f4fba3;
  --accent-color-visited: #c1c870;
}

.secSolarizedYellow,
.secSolarizedOrange,
.secSolarizedRed,
.secSolarizedMagenta,
.secSolarizedViolet,
.secSolarizedGreen {
  --text-with-accent-color: #fdf6e3;
}

.secSolarizedBlue,
.secSolarizedCyan {
  --text-with-accent-color: #000;
}

.secSolarizedYellow {
  --accent-color: #7b5b00;
  --primary-color-hover: #a9a130;
  --accent-color-hover: #bb9f40;
  --accent-color-active: #897710;
  --accent-color-light: #dbc050;
  --accent-color-visited: #a9a130;
  --accent-color-opacity1: rgb(165 165 0 / 4%);
  --accent-color-opacity2: rgb(165 165 0 / 12%);
  --accent-color-opacity3: rgb(165 165 0 / 16%);
  --accent-color-opacity4: rgb(165 165 0 / 24%);
}

.secSolarizedOrange {
  --accent-color: #8b3700;
  --primary-color-hover: #c94d34;
  --accent-color-hover: #db8140;
  --accent-color-active: #b35936;
  --accent-color-light: #eb8156;
  --accent-color-visited: #c94d34;
  --accent-color-opacity1: rgb(169 47 20 / 4%);
  --accent-color-opacity2: rgb(169 47 20 / 12%);
  --accent-color-opacity3: rgb(169 47 20 / 16%);
  --accent-color-opacity4: rgb(169 47 20 / 24%);
}

.secSolarizedRed {
  --accent-color: #9a101d;
  --primary-color-hover: #d8302d;
  --accent-color-hover: #da504d;
  --accent-color-active: #b8282b;
  --accent-color-light: #fa726f;
  --accent-color-visited: #d8302d;
  --accent-color-opacity1: rgb(186 16 29 / 4%);
  --accent-color-opacity2: rgb(186 16 29 / 12%);
  --accent-color-opacity3: rgb(186 16 29 / 16%);
  --accent-color-opacity4: rgb(186 16 29 / 24%);
}

.secSolarizedMagenta {
  --accent-color: #8e1060;
  --primary-color-hover: #d23480;
  --accent-color-hover: #dc5280;
  --accent-color-active: #b814a0;
  --accent-color-light: #fc5280;
  --accent-color-visited: #d23480;
  --accent-color-opacity1: rgb(176 20 96 / 4%);
  --accent-color-opacity2: rgb(176 20 96 / 12%);
  --accent-color-opacity3: rgb(176 20 96 / 16%);
  --accent-color-opacity4: rgb(176 20 96 / 24%);
}

.secSolarizedViolet {
  --accent-color: #2e43a4;
  --primary-color-hover: #6e83c4;
  --accent-color-hover: #8e77c4;
  --accent-color-active: #5e63e4;
  --accent-color-light: #ae95f4;
  --accent-color-visited: #6e83c4;
  --accent-color-opacity1: rgb(78 83 164 / 4%);
  --accent-color-opacity2: rgb(78 83 164 / 12%);
  --accent-color-opacity3: rgb(78 83 164 / 16%);
  --accent-color-opacity4: rgb(78 83 164 / 24%);
}

.secSolarizedBlue {
  --accent-color: #0283b2;
  --primary-color-hover: #4899d2;
  --accent-color-hover: #469fd2;
  --accent-color-active: #2483d4;
  --accent-color-light: #66b1f4;
  --accent-color-visited: #4899d2;
  --accent-color-opacity1: rgb(4 131 178 / 4%);
  --accent-color-opacity2: rgb(4 131 178 / 12%);
  --accent-color-opacity3: rgb(4 131 178 / 16%);
  --accent-color-opacity4: rgb(4 131 178 / 24%);
}

.secSolarizedCyan {
  --accent-color: #008776;
  --primary-color-hover: #2ca998;
  --accent-color-hover: #4cb9b8;
  --accent-color-active: #1c9788;
  --accent-color-light: #6ce1d8;
  --accent-color-visited: #2ca998;
  --accent-color-opacity1: rgb(8 135 118 / 4%);
  --accent-color-opacity2: rgb(8 135 118 / 12%);
  --accent-color-opacity3: rgb(8 135 118 / 16%);
  --accent-color-opacity4: rgb(8 135 118 / 24%);
}

.secSolarizedGreen {
  --accent-color: #657700;
  --primary-color-hover: #857720;
  --accent-color-hover: #a59640;
  --accent-color-active: #837720;
  --accent-color-light: #c5d940;
  --accent-color-visited: #857720;
  --accent-color-opacity1: rgb(101 119 0 / 4%);
  --accent-color-opacity2: rgb(101 119 0 / 12%);
  --accent-color-opacity3: rgb(101 119 0 / 16%);
  --accent-color-opacity4: rgb(101 119 0 / 24%);
}

.secGruvboxDarkGreen {
  --accent-color: #98971a;
  --accent-color-hover: #b9b93a;
  --accent-color-active: #d9d95a;
  --accent-color-light: #b8bb26;
  --accent-color-visited: #98971a;
  --accent-color-opacity1: rgb(152 151 26 / 4%);
  --accent-color-opacity2: rgb(152 151 26 / 12%);
  --accent-color-opacity3: rgb(152 151 26 / 16%);
  --accent-color-opacity4: rgb(152 151 26 / 24%);
}

.secGruvboxDarkYellow {
  --accent-color: #d79921;
  --accent-color-hover: #f0b839;
  --accent-color-active: #f0b839;
  --accent-color-light: #fabd2f;
  --accent-color-visited: #d79921;
  --accent-color-opacity1: rgb(215 153 33 / 4%);
  --accent-color-opacity2: rgb(215 153 33 / 12%);
  --accent-color-opacity3: rgb(215 153 33 / 16%);
  --accent-color-opacity4: rgb(215 153 33 / 24%);
}

.secGruvboxDarkBlue {
  --accent-color: #458588;
  --accent-color-hover: #68948a;
  --accent-color-active: #68948a;
  --accent-color-light: #83a598;
  --accent-color-visited: #458588;
  --accent-color-opacity1: rgb(69 133 136 / 4%);
  --accent-color-opacity2: rgb(69 133 136 / 12%);
  --accent-color-opacity3: rgb(69 133 136 / 16%);
  --accent-color-opacity4: rgb(69 133 136 / 24%);
}

.secGruvboxDarkPurple {
  --accent-color: #b16286;
  --accent-color-hover: #d3869b;
  --accent-color-active: #d3869b;
  --accent-color-light: #d3869b;
  --accent-color-visited: #b16286;
  --accent-color-opacity1: rgb(177 98 134 / 4%);
  --accent-color-opacity2: rgb(177 98 134 / 12%);
  --accent-color-opacity3: rgb(177 98 134 / 16%);
  --accent-color-opacity4: rgb(177 98 134 / 24%);
}

.secGruvboxDarkAqua {
  --accent-color: #689d6a;
  --accent-color-hover: #8ec07c;
  --accent-color-active: #8ec07c;
  --accent-color-light: #8ec07c;
  --accent-color-visited: #689d6a;
  --accent-color-opacity1: rgb(104 157 106 / 4%);
  --accent-color-opacity2: rgb(104 157 106 / 12%);
  --accent-color-opacity3: rgb(104 157 106 / 16%);
  --accent-color-opacity4: rgb(104 157 106 / 24%);
}

.secGruvboxDarkOrange {
  --accent-color: #d65d0e;
  --accent-color-hover: #f2804f;
  --accent-color-active: #f2804f;
  --accent-color-light: #fe8019;
  --accent-color-visited: #d65d0e;
  --accent-color-opacity1: rgb(214 93 14 / 4%);
  --accent-color-opacity2: rgb(214 93 14 / 12%);
  --accent-color-opacity3: rgb(214 93 14 / 16%);
  --accent-color-opacity4: rgb(214 93 14 / 24%);
}

.secGruvboxLightRed {
  --text-with-accent-color: #fbf1c7;
  --accent-color: #cc241d;
  --accent-color-hover: #d23c2a;
  --accent-color-active: #a61f1f;
  --accent-color-light: #fb4934;
  --accent-color-visited: #a61f1f;
  --accent-color-opacity1: rgb(204 36 29 / 4%);
  --accent-color-opacity2: rgb(204 36 29 / 12%);
  --accent-color-opacity3: rgb(204 36 29 / 16%);
  --accent-color-opacity4: rgb(204 36 29 / 24%);
}

.secGruvboxLightBlue {
  --accent-color: #458588;
  --accent-color-hover: #68948a;
  --accent-color-active: #68948a;
  --accent-color-light: #83a598;
  --accent-color-visited: #458588;
  --accent-color-opacity1: rgb(69 133 136 / 4%);
  --accent-color-opacity2: rgb(69 133 136 / 12%);
  --accent-color-opacity3: rgb(69 133 136 / 16%);
  --accent-color-opacity4: rgb(69 133 136 / 24%);
}

.secGruvboxLightPurple {
  --accent-color: #b16286;
  --accent-color-hover: #d3869b;
  --accent-color-active: #d3869b;
  --accent-color-light: #d3869b;
  --accent-color-visited: #b16286;
  --accent-color-opacity1: rgb(177 98 134 / 4%);
  --accent-color-opacity2: rgb(177 98 134 / 12%);
  --accent-color-opacity3: rgb(177 98 134 / 16%);
  --accent-color-opacity4: rgb(177 98 134 / 24%);
}

.secGruvboxLightOrange {
  --accent-color: #d65d0e;
  --accent-color-hover: #f2804f;
  --accent-color-active: #f2804f;
  --accent-color-light: #fe8019;
  --accent-color-visited: #d65d0e;
  --accent-color-opacity1: rgb(214 93 14 / 4%);
  --accent-color-opacity2: rgb(214 93 14 / 12%);
  --accent-color-opacity3: rgb(214 93 14 / 16%);
  --accent-color-opacity4: rgb(214 93 14 / 24%);
}

.secGruvboxLightOrange,
.secGruvboxLightRed,
.secGruvboxLightBlue,
.secGruvboxLightPurple {
  --text-with-accent-color: #fbf1c7;
}

.secGruvboxDarkGreen,
.secGruvboxDarkYellow,
.secGruvboxDarkAqua,
.secGruvboxDarkOrange {
  --text-with-accent-color: #3c3836;
}

.secGruvboxDarkBlue,
.secGruvboxDarkPurple {
  --text-with-accent-color: #1d2021;
}

.secCatppuccinFrappeRosewater,
.secCatppuccinFrappeFlamingo,
.secCatppuccinFrappePink,
.secCatppuccinFrappeMauve,
.secCatppuccinFrappeRed,
.secCatppuccinFrappeMaroon,
.secCatppuccinFrappePeach,
.secCatppuccinFrappeYellow,
.secCatppuccinFrappeGreen,
.secCatppuccinFrappeTeal,
.secCatppuccinFrappeSky,
.secCatppuccinFrappeSapphire,
.secCatppuccinFrappeBlue,
.secCatppuccinFrappeLavender {
  --text-with-accent-color: #24273a;
}

.secCatppuccinFrappeRosewater {
  --accent-color: #f3d6df;
  --accent-color-hover: #f3e0e8;
  --accent-color-active: #e0bfcf;
  --accent-color-light: #f8e9f2;
  --accent-color-visited: #d3a1b3;
  --accent-color-opacity1: rgb(243 214 223 / 4%);
  --accent-color-opacity2: rgb(243 214 223 / 12%);
  --accent-color-opacity3: rgb(243 214 223 / 16%);
  --accent-color-opacity4: rgb(243 214 223 / 24%);
}

.secCatppuccinFrappeFlamingo {
  --accent-color: #efbfbf;
  --accent-color-hover: #f0c9c9;
  --accent-color-active: #dca8a8;
  --accent-color-light: #f7dada;
  --accent-color-visited: #cf8f8f;
  --accent-color-opacity1: rgb(239 191 191 / 4%);
  --accent-color-opacity2: rgb(239 191 191 / 12%);
  --accent-color-opacity3: rgb(239 191 191 / 16%);
  --accent-color-opacity4: rgb(239 191 191 / 24%);
}

.secCatppuccinFrappePink {
  --accent-color: #f5b9e5;
  --accent-color-hover: #f5c5e9;
  --accent-color-active: #e0a0d0;
  --accent-color-light: #f8d4f0;
  --accent-color-visited: #d38cb7;
  --accent-color-opacity1: rgb(245 185 229 / 4%);
  --accent-color-opacity2: rgb(245 185 229 / 12%);
  --accent-color-opacity3: rgb(245 185 229 / 16%);
  --accent-color-opacity4: rgb(245 185 229 / 24%);
}

.secCatppuccinFrappeMauve {
  --accent-color: #cb9fe7;
  --accent-color-hover: #d4b0e8;
  --accent-color-active: #b38fdf;
  --accent-color-light: #d6b9f9;
  --accent-color-visited: #a171da;
  --accent-color-opacity1: rgb(203 159 231 / 4%);
  --accent-color-opacity2: rgb(203 159 231 / 12%);
  --accent-color-opacity3: rgb(203 159 231 / 16%);
  --accent-color-opacity4: rgb(203 159 231 / 24%);
}

.secCatppuccinFrappeRed {
  --accent-color: #e88385;
  --accent-color-hover: #f08b8d;
  --accent-color-active: #d86f71;
  --accent-color-light: #f7a0a2;
  --accent-color-visited: #d86f71;
  --accent-color-opacity1: rgb(232 131 133 / 4%);
  --accent-color-opacity2: rgb(232 131 133 / 12%);
  --accent-color-opacity3: rgb(232 131 133 / 16%);
  --accent-color-opacity4: rgb(232 131 133 / 24%);
}

.secCatppuccinFrappeMaroon {
  --accent-color: #eb9a9d;
  --accent-color-hover: #f0a1a4;
  --accent-color-active: #d88b8e;
  --accent-color-light: #f7b0b3;
  --accent-color-visited: #d88b8e;
  --accent-color-opacity1: rgb(235 154 157 / 4%);
  --accent-color-opacity2: rgb(235 154 157 / 12%);
  --accent-color-opacity3: rgb(235 154 157 / 16%);
  --accent-color-opacity4: rgb(235 154 157 / 24%);
}

.secCatppuccinFrappePeach {
  --accent-color: #ffaf77;
  --accent-color-hover: #ffbb8a;
  --accent-color-active: #e69e6b;
  --accent-color-light: #fc9;
  --accent-color-visited: #e69e6b;
  --accent-color-opacity1: rgb(255 175 119 / 4%);
  --accent-color-opacity2: rgb(255 175 119 / 12%);
  --accent-color-opacity3: rgb(255 175 119 / 16%);
  --accent-color-opacity4: rgb(255 175 119 / 24%);
}

.secCatppuccinFrappeYellow {
  --accent-color: #e6c991;
  --accent-color-hover: #f0d8a1;
  --accent-color-active: #d8b07f;
  --accent-color-light: #f7e2b0;
  --accent-color-visited: #d8b07f;
  --accent-color-opacity1: rgb(230 201 145 / 4%);
  --accent-color-opacity2: rgb(230 201 145 / 12%);
  --accent-color-opacity3: rgb(230 201 145 / 16%);
  --accent-color-opacity4: rgb(230 201 145 / 24%);
}

.secCatppuccinFrappeGreen {
  --accent-color: #a7d28a;
  --accent-color-hover: #b7d28f;
  --accent-color-active: #87b96f;
  --accent-color-light: #bde6a0;
  --accent-color-visited: #6fc75f;
  --accent-color-opacity1: rgb(167 210 138 / 4%);
  --accent-color-opacity2: rgb(167 210 138 / 12%);
  --accent-color-opacity3: rgb(167 210 138 / 16%);
  --accent-color-opacity4: rgb(167 210 138 / 24%);
}

.secCatppuccinFrappeTeal {
  --accent-color: #82c9bf;
  --accent-color-hover: #92d0c6;
  --accent-color-active: #6eb5ab;
  --accent-color-light: #a0d6ce;
  --accent-color-visited: #6eb5ab;
  --accent-color-opacity1: rgb(130 201 191 / 4%);
  --accent-color-opacity2: rgb(130 201 191 / 12%);
  --accent-color-opacity3: rgb(130 201 191 / 16%);
  --accent-color-opacity4: rgb(130 201 191 / 24%);
}

.secCatppuccinFrappeSky {
  --accent-color: #9ad2dc;
  --accent-color-hover: #a9d7e0;
  --accent-color-active: #7dbecb;
  --accent-color-light: #b4e6f0;
  --accent-color-visited: #6aaed0;
  --accent-color-opacity1: rgb(154 210 220 / 4%);
  --accent-color-opacity2: rgb(154 210 220 / 12%);
  --accent-color-opacity3: rgb(154 210 220 / 16%);
  --accent-color-opacity4: rgb(154 210 220 / 24%);
}

.secCatppuccinFrappeSapphire {
  --accent-color: #86c2dd;
  --accent-color-hover: #96c9e1;
  --accent-color-active: #6aaed0;
  --accent-color-light: #a0d4e6;
  --accent-color-visited: #6aaed0;
  --accent-color-opacity1: rgb(134 194 221 / 4%);
  --accent-color-opacity2: rgb(134 194 221 / 12%);
  --accent-color-opacity3: rgb(134 194 221 / 16%);
  --accent-color-opacity4: rgb(134 194 221 / 24%);
}

.secCatppuccinFrappeBlue {
  --accent-color: #8dabef;
  --accent-color-hover: #9dbbef;
  --accent-color-active: #6b8fcf;
  --accent-color-light: #a7c1f4;
  --accent-color-visited: #6b8fcf;
  --accent-color-opacity1: rgb(141 171 239 / 4%);
  --accent-color-opacity2: rgb(141 171 239 / 12%);
  --accent-color-opacity3: rgb(141 171 239 / 16%);
  --accent-color-opacity4: rgb(141 171 239 / 24%);
}

.secCatppuccinFrappeLavender {
  --accent-color: #bbbcf2;
  --accent-color-hover: #c4c5f2;
  --accent-color-active: #a8a9f2;
  --accent-color-light: #c7c8f2;
  --accent-color-visited: #9a9bf2;
  --accent-color-opacity1: rgb(187 188 242 / 4%);
  --accent-color-opacity2: rgb(187 188 242 / 12%);
  --accent-color-opacity3: rgb(187 188 242 / 16%);
  --accent-color-opacity4: rgb(187 188 242 / 24%);
}

/*************** DESTRUCTIVE THEME COLOR OVERRIDES ***************/

/* stylelint-disable no-descending-specificity */

/* destructive color in case of conflict with red color themes (sets new destructive color to purple)
  NOTE: RED COLORS MUST CONTAIN 'Red' IN CLASSNAME.
*/
body[class*='Red'] * {
  --destructive-color: #9c27b0;
  --destructive-text-color: #fff;
  --destructive-hover-color: #8e24aa;
  --destructive-active-color: #6a1b9a;
}

/* destructive color in case of conflict with red and purple color themes (sets new destructive color to yellow)
  NOTE: PURPLE COLORS MUST CONTAIN 'Purple' IN CLASSNAME.
*/
body[class*='Red'][class*='Purple'] * {
  --destructive-color: #ff9800;
  --destructive-text-color: #fff;
  --destructive-hover-color: #fb8c00;
  --destructive-active-color: #ef6c00;
}

/* stylelint-enable no-descending-specificity */


/*************** LEFT-TO-RIGHT AND RIGHT-TO-LEFT RULES ***************/

body[dir='ltr'] {
  --ltr-or-rtl: ltr;
  --float-left-ltr-rtl-value: left;
  --float-right-ltr-rtl-value: right;
  --horizontal-directionality-coefficient: 1;
}

body[dir='rtl'] {
  --ltr-or-rtl: rtl;
  --float-left-ltr-rtl-value: right;
  --float-right-ltr-rtl-value: left;
  --horizontal-directionality-coefficient: -1;
}

body[dir='rtl'] [data-prefix='fas']:not([data-icon='magnifying-glass'], [data-icon='circle-question'], [data-icon='check']) {
  transform: scale(-1, 1);
}

/* Arabic, Kurdish, Persian and Urdu have a reversed question mark, but not Hebrew and Yiddish */
html[lang='ar'] [data-prefix='fas'][data-icon='circle-question'],
html[lang='fa'] [data-prefix='fas'][data-icon='circle-question'],
html[lang='ku'] [data-prefix='fas'][data-icon='circle-question'],
html[lang='ur'] [data-prefix='fas'][data-icon='circle-question'] {
  transform: scale(-1, 1);
}


/*************** MAIN APP STYLING RULES ***************/

.app {
  color: var(--primary-text-color);
  background-color: var(--bg-color);
}


/* stylelint-disable no-descending-specificity */

/* stylelint-disable-next-line a11y/no-outline-none */
.hideOutlines *:focus {
  outline: none;
}

a:link {
  color: var(--link-color);
}

a:visited {
  color: var(--link-visited-color);
}

/* stylelint-enable no-descending-specificity */

@media (prefers-reduced-motion) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

::-webkit-scrollbar {
  inline-size: auto;
  block-size: auto;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  border: 0;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:focus {
  background: var(--scrollbar-color-hover);
}
