.system[data-system-theme*='light'], .light,
.system[data-system-theme*='dark'], .dark,
.black,
.gray,
.dracula,
.catppuccinMocha,
.pastelPink,
.hotPink,
.nordic {
  --primary-input-color: rgba(0, 0, 0, 0.50);
}

.system[data-system-theme*='light'], .light,
.system[data-system-theme*='dark'], .dark,
.black,
.dracula,
.catppuccinMocha,
.pastelPink,
.hotPink,
.nordic {
  --link-color: var(--accent-color);
  --link-visited-color: var(--accent-color-visited);
  --instance-menu-color: var(--search-bar-color);
}

.system[data-system-theme*='light'], .light,
.system[data-system-theme*='dark'], .dark,
.black,
.gray,
.dracula,
.catppuccinMocha,
.pastelPink,
.nordic {
  --primary-input-color: rgba(0, 0, 0, 0.50);
  --side-nav-hover-text-color: var(--primary-text-color);
}

.system[data-system-theme*='light'], .light,
.system[data-system-theme*='dark'], .dark,
.black,
.gray,
.dracula,
.catppuccinMocha,
.nordic {
  --side-nav-active-text-color: var(--primary-text-color);
  --scrollbar-text-color-hover: var(--primary-text-color);

}

.system[data-system-theme*='light'], .light,
.system[data-system-theme*='dark'], .dark,
.black,
.gray {
  --logo-icon: url("../../_icons/iconColorSmall.png");
  --logo-text: url("../../_icons/textColorSmall.png");
}

.system[data-system-theme*='dark'], .dark,
.black,
.gray,
.dracula,
.catppuccinMocha,
.hotPink,
.nordic {
  --primary-shadow-color: rgba(0, 0, 0, 0.75);
}

.system[data-system-theme*='light'], .light {
  --primary-text-color: #212121;
  --secondary-text-color: #424242;
  --tertiary-text-color: #757575;
  --primary-shadow-color: rgba(232, 232, 232, 1);
  --title-color: #3f7ac6;
  --bg-color: #f1f1f1;
  --favorite-icon-color: #FFD600;
  --card-bg-color: #FFFFFF;
  --secondary-card-bg-color: #eeeeee;
  --scrollbar-color: #CCCCCC;
  --scrollbar-color-hover: #BDBDBD;
  --side-nav-color: #FFFFFF;
  --side-nav-hover-color: #e0e0e0;
  --side-nav-active-color: #757575;
  --search-bar-color: #f5f5f5;
}

.system[data-system-theme*='dark'], .dark {
  --primary-text-color: #EEEEEE;
  --secondary-text-color: #ddd;
  --tertiary-text-color: #999;
  --title-color: #EEEEEE;
  --bg-color: #212121;
  --favorite-icon-color: #FFEA00;
  --card-bg-color: #303030;
  --secondary-card-bg-color: rgba(0, 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: #EEEEEE;
    --secondary-text-color: #ddd;
    --tertiary-text-color: #EEEEEE;
    --title-color: #EEEEEE;
    --bg-color: #000000;
    --favorite-icon-color: #FFEA00;
    --card-bg-color: #000000;
    --secondary-card-bg-color: rgba(0, 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: #EEEEEE;
  --secondary-text-color: #E0E0E0;
  --tertiary-text-color: #F5F5F5;
  --title-color: #EEEEEE;
  --bg-color: #212121;
  --card-bg-color: #303030;
  --secondary-card-bg-color: rgba(0, 0, 0, 0.75);
  --side-nav-color: #262626;
  --side-nav-hover-color: #212121;
  --side-nav-active-color: #303030;
  --search-bar-color: #212121;
}

.dracula {
  --primary-text-color: #F8F8F2;
  --secondary-text-color: #c6cee6;
  --tertiary-text-color: #e5e8f3;
  --title-color: #BD93F9;
  --bg-color: #282A36;
  --favorite-icon-color: #F1FA8C;
  --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.png");
  --logo-text: url("../../_icons/textDraculaLightSmall.png");
}

.catppuccinMocha {
  --primary-text-color: #cdd6f4;
  --secondary-text-color: #bac2de;
  --tertiary-text-color: #a6adc8;
  --title-color: var(--accent-color);
  --bg-color: #1e1e2e;
  --favorite-icon-color: #f9e2af;
  --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.png");
  --logo-text: url("../../_icons/textCatppuccinMochaLightSmall.png");
}

.pastelPink {
  --primary-text-color: #1F002B;
  --secondary-text-color: #361836;
  --tertiary-text-color: #5A285A;
  --primary-shadow-color: rgb(255, 240, 240, 0.5);
  --title-color: #185EB4;
  --bg-color: #ffeadd;
  --favorite-icon-color: #760278;
  --card-bg-color: #ffd1dc;
  --secondary-card-bg-color: #FFFFFF;
  --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.png");
  --logo-text: url("../../_icons/textBlackSmall.png");
}

.hotPink {
  --primary-text-color: #FFFF;
  --secondary-text-color: #FFFF;
  --tertiary-text-color: #FFFF;
  --title-color: #000000;
  --bg-color: #ff008a;
  --favorite-icon-color: #FFEA00;
  --card-bg-color: #DE1C85;
  --secondary-card-bg-color: rgba(0, 0, 0, 0.75);
  --scrollbar-color: #FFFFFF;
  --scrollbar-color-hover: #C0F6FF;
  --scrollbar-text-color-hover: #000000;
  --side-nav-color: #EE1E90;
  --side-nav-hover-color: #FFFFFF;
  --side-nav-hover-text-color: #000000;
  --side-nav-active-color: #959595;
  --side-nav-active-text-color: #000000;
  --search-bar-color: #9C2D5D;
  --logo-icon: url("../../_icons/iconWhiteSmall.png");
  --logo-text: url("../../_icons/textWhiteSmall.png");
  /* 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: #000000 !important;
  --primary-color-hover: #000000 !important;
  --primary-color-active: #000000 !important;
  --text-with-main-color: #FFFFFF !important;
  --text-with-accent-color: #FFFFFF !important;
  --accent-color: #000000 !important;
  --accent-color-hover: #808080 !important;
  --accent-color-active: #6A739A !important;
  --accent-color-light: #000000 !important;
  --accent-color-visited: #000000 !important;
  --accent-color-opacity1: rgba(0,0,0,0.04) !important;
  --accent-color-opacity2: rgba(0,0,0,0.12) !important;
  --accent-color-opacity3: rgba(255,255,255,0.16) !important;
  --accent-color-opacity4: rgba(255,255,255,0.24) !important;
}

/* 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), .hotPink a.navOption:hover, .hotPink *:not(:hover) {
  text-decoration: none;
}

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

.nordic {
  --primary-text-color: #EEEEEE;
  --secondary-text-color: #ddd;
  --tertiary-text-color: #EEEEEE;
  --title-color: #EEEEEE;
  --bg-color: #2b2f3a;
  --favorite-icon-color: #FFEA00;
  --card-bg-color: #2e3440;
  --secondary-card-bg-color: rgba(59, 66, 82, 0.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.png");
  --logo-text: url("../../_icons/textNordicLightSmall.png");
}

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

.mainLightGreen,
.mainLime,
.mainYellow,
.mainAmber,
.mainOrange,
.mainDeepOrange {
  --text-with-main-color: #000000;
  --logo-icon-bar-color: url("../../_icons/iconBlackSmall.png");
  --logo-text-bar-color: url("../../_icons/textBlackSmall.png");
}

.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;
}

.mainDraculaCyan,
.mainDraculaGreen,
.mainDraculaOrange,
.mainDraculaYellow {
  --text-with-main-color: #282A36;
  --logo-icon-bar-color: url("../../_icons/iconDraculaDarkSmall.png");
  --logo-text-bar-color: url("../../_icons/textDraculaDarkSmall.png");
}

.mainDraculaPink,
.mainDraculaPurple,
.mainDraculaRed {
  --text-with-main-color: #F8F8F2;
  --logo-icon-bar-color: url("../../_icons/iconDraculaLightSmall.png");
  --logo-text-bar-color: url("../../_icons/textDraculaLightSmall.png");
}

.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: #FF5555;
  --primary-color-hover: #FF6666;
  --primary-color-active: #E64D4D;
}

.mainDraculaYellow {
  --primary-color: #F1FA8C;
  --primary-color-hover: #F2FB98;
  --primary-color-active: #D9E17E;
}

.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.png");
  --logo-text-bar-color: url("../../_icons/textCatppuccinMochaDarkSmall.png");
}

.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;
}

.secRed,
.secPink,
.secPurple,
.secDeepPurple,
.secIndigo,
.secBlue,
.secLightBlue,
.secCyan,
.secTeal,
.secGreen {
  --text-with-accent-color: #FFFFFF;
}

.secLightGreen,
.secLime,
.secYellow,
.secAmber,
.secOrange,
.secDeepOrange {
  --text-with-accent-color: #000000;
}

.secRed {
  --accent-color: #f44336;
  --accent-color-hover: #e53935;
  --accent-color-active: #c62828;
  --accent-color-light: #ef9a9a;
  --accent-color-visited: #b71c1c;
  --accent-color-opacity1: rgba(244,67,54,0.04);
  --accent-color-opacity2: rgba(244,67,54,0.12);
  --accent-color-opacity3: rgba(244,67,54,0.16);
  --accent-color-opacity4: rgba(244,67,54,0.24);
}

.secPink {
  --accent-color: #E91E63;
  --accent-color-hover: #D81B60;
  --accent-color-active: #AD1457;
  --accent-color-light: #F48FB1;
  --accent-color-visited: #880E4F;
  --accent-color-opacity1: rgba(233,30,99,0.04);
  --accent-color-opacity2: rgba(233,30,99,0.12);
  --accent-color-opacity3: rgba(233,30,99,0.16);
  --accent-color-opacity4: rgba(233,30,99,0.24);
}

.secPurple {
  --accent-color: #9C27B0;
  --accent-color-hover: #8E24AA;
  --accent-color-active: #6A1B9A;
  --accent-color-light: #CE93D8;
  --accent-color-visited: #4A148C;
  --accent-color-opacity1: rgba(156,39,176,0.04);
  --accent-color-opacity2: rgba(156,39,176,0.12);
  --accent-color-opacity3: rgba(156,39,176,0.16);
  --accent-color-opacity4: rgba(156,39,176,0.24);
}

.secDeepPurple {
  --accent-color: #673AB7;
  --accent-color-hover: #5E35B1;
  --accent-color-active: #4527A0;
  --accent-color-light: #B39DDB;
  --accent-color-visited: #311B92;
  --accent-color-opacity1: rgba(103,58,183,0.04);
  --accent-color-opacity2: rgba(103,58,183,0.12);
  --accent-color-opacity3: rgba(103,58,183,0.16);
  --accent-color-opacity4: rgba(103,58,183,0.24);
}

.secIndigo {
  --accent-color: #3F51B5;
  --accent-color-hover: #3949AB;
  --accent-color-active: #283593;
  --accent-color-light: #9FA8DA;
  --accent-color-visited: #1A237E;
  --accent-color-opacity1: rgba(63,81,181,0.04);
  --accent-color-opacity2: rgba(63,81,181,0.12);
  --accent-color-opacity3: rgba(63,81,181,0.16);
  --accent-color-opacity4: rgba(63,81,181,0.24);
}

.secBlue {
  --accent-color: #2196F3;
  --accent-color-hover: #1E88E5;
  --accent-color-active: #1565C0;
  --accent-color-light: #90CAF9;
  --accent-color-visited: #0D47A1;
  --accent-color-opacity1: rgba(33,150,243,0.04);
  --accent-color-opacity2: rgba(33,150,243,0.12);
  --accent-color-opacity3: rgba(33,150,243,0.16);
  --accent-color-opacity4: rgba(33,150,243,0.24);
}

.secLightBlue {
  --accent-color: #03A9F4;
  --accent-color-hover: #039BE5;
  --accent-color-active: #0277BD;
  --accent-color-light: #81D4FA;
  --accent-color-visited: #01579B;
  --accent-color-opacity1: rgba(3,169,244,0.04);
  --accent-color-opacity2: rgba(3,169,244,0.12);
  --accent-color-opacity3: rgba(3,169,244,0.16);
  --accent-color-opacity4: rgba(3,169,244,0.24);
}

.secCyan {
  --accent-color: #00BCD4;
  --accent-color-hover: #00ACC1;
  --accent-color-active: #00838F;
  --accent-color-light: #80DEEA;
  --accent-color-visited: #006064;
  --accent-color-opacity1: rgba(0,188,212,0.04);
  --accent-color-opacity2: rgba(0,188,212,0.12);
  --accent-color-opacity3: rgba(0,188,212,0.16);
  --accent-color-opacity4: rgba(0,188,212,0.24);
}

.secTeal {
  --accent-color: #009688;
  --accent-color-hover: #00897B;
  --accent-color-active: #00695C;
  --accent-color-light: #80CBC4;
  --accent-color-visited: #004D40;
  --accent-color-opacity1: rgba(0,150,136,0.04);
  --accent-color-opacity2: rgba(0,150,136,0.12);
  --accent-color-opacity3: rgba(0,150,136,0.16);
  --accent-color-opacity4: rgba(0,150,136,0.24);
}

.secGreen {
  --accent-color: #4CAF50;
  --accent-color-hover: #43A047;
  --accent-color-active: #2E7D32;
  --accent-color-light: #A5D6A7;
  --accent-color-visited: #1B5E20;
  --accent-color-opacity1: rgba(76,175,80,0.04);
  --accent-color-opacity2: rgba(76,175,80,0.12);
  --accent-color-opacity3: rgba(76,175,80,0.16);
  --accent-color-opacity4: rgba(76,175,80,0.24);
}

.secLightGreen {
  --accent-color: #8BC34A;
  --accent-color-hover: #7CB342;
  --accent-color-active: #558B2F;
  --accent-color-light: #C5E1A5;
  --accent-color-visited: #33691E;
  --accent-color-opacity1: rgba(139,195,74,0.04);
  --accent-color-opacity2: rgba(139,195,74,0.12);
  --accent-color-opacity3: rgba(139,195,74,0.16);
  --accent-color-opacity4: rgba(139,195,74,0.24);
}

.secLime {
  --accent-color: #CDDC39;
  --accent-color-hover: #C0CA33;
  --accent-color-active: #9E9D24;
  --accent-color-light: #E6EE9C;
  --accent-color-visited: #827717;
  --accent-color-opacity1: rgba(205,220,57,0.04);
  --accent-color-opacity2: rgba(205,220,57,0.12);
  --accent-color-opacity3: rgba(205,220,57,0.16);
  --accent-color-opacity4: rgba(205,220,57,0.24);
}

.secYellow {
  --accent-color: #FFEB3B;
  --accent-color-hover: #FDD835;
  --accent-color-active: #F9A825;
  --accent-color-light: #FFF59D;
  --accent-color-visited: #F57F17;
  --accent-color-opacity1: rgba(255,235,59,0.04);
  --accent-color-opacity2: rgba(255,235,59,0.12);
  --accent-color-opacity3: rgba(255,235,59,0.16);
  --accent-color-opacity4: rgba(255,235,59,0.24);
}

.secAmber {
  --accent-color: #FFC107;
  --accent-color-hover: #FFB300;
  --accent-color-active: #FF8F00;
  --accent-color-light: #FFE082;
  --accent-color-visited: #FF6F00;
  --accent-color-opacity1: rgba(255,193,7,0.04);
  --accent-color-opacity2: rgba(255,193,7,0.12);
  --accent-color-opacity3: rgba(255,193,7,0.16);
  --accent-color-opacity4: rgba(255,193,7,0.24);
}

.secOrange {
  --accent-color: #FF9800;
  --accent-color-hover: #FB8C00;
  --accent-color-active: #EF6C00;
  --accent-color-light: #FFCC80;
  --accent-color-visited: #E65100;
  --accent-color-opacity1: rgba(255,152,0,0.04);
  --accent-color-opacity2: rgba(255,152,0,0.12);
  --accent-color-opacity3: rgba(255,152,0,0.16);
  --accent-color-opacity4: rgba(255,152,0,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: rgba(255,87,34,0.04);
  --accent-color-opacity2: rgba(255,87,34,0.12);
  --accent-color-opacity3: rgba(255,87,34,0.16);
  --accent-color-opacity4: rgba(255,87,34,0.24);
}

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

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

.secDraculaCyan,
.secDraculaGreen,
.secDraculaOrange,
.secDraculaPink,
.secDraculaPurple,
.secDraculaRed,
.secDraculaYellow {
  --accent-color-opacity1: rgba(98, 114, 164, 0.04);
  --accent-color-opacity2: rgba(98, 114, 164, 0.12);
  --accent-color-opacity3: rgba(98, 114, 164, 0.16);
  --accent-color-opacity4: rgba(98, 114, 164, 0.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: #FF5555;
  --accent-color-hover: #FF6666;
  --accent-color-active: #E64D4D;
  --accent-color-light: #FF7777;
  --accent-color-visited: #CC4444;
}

.secDraculaYellow {
  --accent-color: #F1FA8C;
  --accent-color-hover: #F2FB98;
  --accent-color-active: #D9E17E;
  --accent-color-light: #F4FBA3;
  --accent-color-visited: #C1C870;
}

.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: rgba(245,224,220,0.04);
  --accent-color-opacity2: rgba(245,224,220,0.12);
  --accent-color-opacity3: rgba(245,224,220,0.16);
  --accent-color-opacity4: rgba(245,224,220,0.24);
}

.secCatppuccinMochaFlamingo {
  --accent-color: #f2cdcd;
  --accent-color-hover: #f3d7d7;
  --accent-color-active: #ddb7b7;
  --accent-color-light: #F7DFDF;
  --accent-color-visited: #cf9898;
  --accent-color-opacity1: rgba(242,205,205,0.04);
  --accent-color-opacity2: rgba(242,205,205,0.12);
  --accent-color-opacity3: rgba(242,205,205,0.16);
  --accent-color-opacity4: rgba(242,205,205,0.24);
}

.secCatppuccinMochaPink {
  --accent-color: #f5c2e7;
  --accent-color-hover: #f3cee9;
  --accent-color-active: #dca3cd;
  --accent-color-light: #f4dbed;
  --accent-color-visited: #d28fc0;
  --accent-color-opacity1: rgba(245,194,231,0.04);
  --accent-color-opacity2: rgba(245,194,231,0.12);
  --accent-color-opacity3: rgba(245,194,231,0.16);
  --accent-color-opacity4: rgba(245,194,231,0.24);
}

.secCatppuccinMochaMauve {
  --accent-color: #cba6f7;
  --accent-color-hover: #d4b7f8;
  --accent-color-active: #b38fdf;
  --accent-color-light: #D6B9F9;
  --accent-color-visited: #A171DA;
  --accent-color-opacity1: rgba(203,166,247,0.04);
  --accent-color-opacity2: rgba(203,166,247,0.12);
  --accent-color-opacity3: rgba(203,166,247,0.16);
  --accent-color-opacity4: rgba(203,166,247,0.24);
}

.secCatppuccinMochaRed {
  --accent-color: #f38ba8;
  --accent-color-hover: #f399b2;
  --accent-color-active: #de7693;
  --accent-color-light: #F5A3BA;
  --accent-color-visited: #D56C89;
  --accent-color-opacity1: rgba(243,139,168,0.04);
  --accent-color-opacity2: rgba(243,139,168,0.12);
  --accent-color-opacity3: rgba(243,139,168,0.16);
  --accent-color-opacity4: rgba(243,139,168,0.24);
}

.secCatppuccinMochaMaroon {
  --accent-color: #eba0ac;
  --accent-color-hover: #ebb4bd;
  --accent-color-active: #d68895;
  --accent-color-light: #F0B7C0;
  --accent-color-visited: #C86A79;
  --accent-color-opacity1: rgba(235,160,172,0.04);
  --accent-color-opacity2: rgba(235,160,172,0.12);
  --accent-color-opacity3: rgba(235,160,172,0.16);
  --accent-color-opacity4: rgba(235,160,172,0.24);
}

.secCatppuccinMochaPeach {
  --accent-color: #fab387;
  --accent-color-hover: #f7bd99;
  --accent-color-active: #e1996d;
  --accent-color-light: #FBC4A2;
  --accent-color-visited: #D78A5B;
  --accent-color-opacity1: rgba(250,179,135,0.04);
  --accent-color-opacity2: rgba(250,179,135,0.12);
  --accent-color-opacity3: rgba(250,179,135,0.16);
  --accent-color-opacity4: rgba(250,179,135,0.24);
}

.secCatppuccinMochaYellow {
  --accent-color: #f9e2af;
  --accent-color-hover: #f9e7bf;
  --accent-color-active: #dec48d;
  --accent-color-light: #FBECCB;
  --accent-color-visited: #D5B05D;
  --accent-color-opacity1: rgba(249,226,175,0.04);
  --accent-color-opacity2: rgba(249,226,175,0.12);
  --accent-color-opacity3: rgba(249,226,175,0.16);
  --accent-color-opacity4: rgba(249,226,175,0.24);
}

.secCatppuccinMochaGreen {
  --accent-color: #a6e3a1;
  --accent-color-hover: #b6e3b2;
  --accent-color-active: #86c780;
  --accent-color-light: #BCEAB8;
  --accent-color-visited: #6ED166;
  --accent-color-opacity1: rgba(166,227,161,0.04);
  --accent-color-opacity2: rgba(166,227,161,0.12);
  --accent-color-opacity3: rgba(166,227,161,0.16);
  --accent-color-opacity4: rgba(166,227,161,0.24);
}

.secCatppuccinMochaTeal {
  --accent-color: #94e2d5;
  --accent-color-hover: #a1dfd5;
  --accent-color-active: #6fc5b7;
  --accent-color-light: #AFE9DF;
  --accent-color-visited: #5CCCB9;
  --accent-color-opacity1: rgba(148,226,213,0.04);
  --accent-color-opacity2: rgba(148,226,213,0.12);
  --accent-color-opacity3: rgba(148,226,213,0.16);
  --accent-color-opacity4: rgba(148,226,213,0.24);
}

.secCatppuccinMochaSky {
  --accent-color: #89dceb;
  --accent-color-hover: #99dfeb;
  --accent-color-active: #68bcca;
  --accent-color-light: #9FE3EF;
  --accent-color-visited: #64C2D3;
  --accent-color-opacity1: rgba(137,220,235,0.04);
  --accent-color-opacity2: rgba(137,220,235,0.12);
  --accent-color-opacity3: rgba(137,220,235,0.16);
  --accent-color-opacity4: rgba(137,220,235,0.24);
}

.secCatppuccinMochaSapphire {
  --accent-color: #74c7ec;
  --accent-color-hover: #84c7e6;
  --accent-color-active: #59a9cf;
  --accent-color-light: #93D4F0;
  --accent-color-visited: #6AB6D7;
  --accent-color-opacity1: rgba(116,199,236,0.04);
  --accent-color-opacity2: rgba(116,199,236,0.12);
  --accent-color-opacity3: rgba(116,199,236,0.16);
  --accent-color-opacity4: rgba(116,199,236,0.24);
}

.secCatppuccinMochaBlue {
  --accent-color: #89b4fa;
  --accent-color-hover: #9bbef6;
  --accent-color-active: #6593df;
  --accent-color-light: #A7C7FB;
  --accent-color-visited: #739CDD;
  --accent-color-opacity1: rgba(137,220,235,0.04);
  --accent-color-opacity2: rgba(137,220,235,0.12);
  --accent-color-opacity3: rgba(137,220,235,0.16);
  --accent-color-opacity4: rgba(137,220,235,0.24);
}

.secCatppuccinMochaLavender {
  --accent-color: #b4befe;
  --accent-color-hover: #c9d0ff;
  --accent-color-active: #8d98e4;
  --accent-color-light: #D2D8FE;
  --accent-color-visited: #96A1E9;
  --accent-color-opacity1: rgba(180,190,254,0.04);
  --accent-color-opacity2: rgba(180,190,254,0.12);
  --accent-color-opacity3: rgba(180,190,254,0.16);
  --accent-color-opacity4: rgba(180,190,254,0.24);
}

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"]):not([data-icon="circle-question"]) {
  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)
}

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

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

.hideOutlines *:focus {
  outline: none;
}

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

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

::-webkit-scrollbar {
	inline-size: 6px;
  block-size: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
  border-radius: 6px;
}

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