:root {
	--grass: #00d941;
	--sand: #bfa85e;
	--rock: #4062a3;
	--swamp: #077a2a;
	/*--swamp_water: ;*/
	--dungeon: #696868;
	--shadow: #000000;
	--snow: #FFFFFF;
	--lava_field: #d1434c;
	--lava_molten: #FF0000;
	
	--primary_color: var(--sand);
	
	--nav_bar_background_color: var(--primary_color);
	--nav_bar_text_color: white;
	--nav_bar_hover_background_color: var(--grass);
	--nav_bar_hover_text_color: var(--dungeon);
	--nav_bar_current_page_background_color: var(--rock);
	--nav_bar_current_page_text_color: white;
	
  --gray: #ccc;
  --goldBright: #edd78e;
  --gold: #bfa85e;
  --goldDark: #9b843a;
  --mdRed: #ff8383;
  --mdBlue: #4062a3;
  --blue: #06c;
  --purple: #551a8b;
  --lightText: #fafafa;
  --darkBg: #1e1e1e;
  --darkBorder: #353535;
  --rounded: 5px;
  --round: 30px;
}
.requiredField {
	color: red;
}

#ViewerCount {
	position: absolute;
	top: 65px;
	right: 25px;
	z-index: -1;
	border-radius: 15px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: var(--primary);
}
.armyDisplayCost {
	color: red;
	font-size: 10px;
}

@media screen and (max-width: 650px) {
	article {
		width: calc(100% - 20px);
	}
}
@media only screen and (max-width: 810px) {
    article {
        padding-left: 10px !important;
		padding-right: 10px !important;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
    }
}

body {
	/*max-width: 950px;*/
	margin: auto;
	font-family: "Segoe UI", Segoe, Arial, sans-serif;
}
@media screen and (min-width: 801px) {
	body {
		position: relative;
	}
}

#pageContent {
	/*min-height: calc(100vh - 132px) !important;*/
	min-height: calc(100vh - 175px) !important;
}

.section__maps img.card-img-top {
    height: unset !important; /* allows a larger max-size  map thumbnail */  
}

article {
	text-align: center;
	max-width: 950px;
	margin: auto;
}

.hidden {
	display: none !important;
}
.subHeading {
    text-transform: uppercase;
    letter-spacing: 0.075rem;
    color: var(--goldDark);
    font-size: 1.3rem;
}
h2.subHeading {
  margin-top: 30px;
  margin-bottom: 30px;
}



.powers .subHeading {
  font-size: 1.1rem;
}
.section__conventionSeries .subHeading {
      margin: 30px 5px 20px;
}
@media screen and (min-width: 801px) {
	#LeftColumn, #RightColumn {
		display: inline-block;
		vertical-align: top;
	}
	#LeftColumn {
		width: 400px;
	}
	#RightColumn {
		width: calc(100% - 410px);
	}
}

#Figures {
	overflow: scroll;
}
#FiguresPartialCardScoring {
	/*display: none;*/
	overflow: scroll;
}
@media screen and (min-width: 801px) {
	#Figures {
		display: inline-block;
		height: calc(100vh - 170px);
		border: 2px solid black;
		width: calc(100% - 5px);
	}
	#FiguresPartialCardScoring {
		/*display: none;*/
		height: 85vh;
		border: 2px solid black;
		width: calc(100% - 5px);
	}
}
@media screen and (max-width: 800px) {
	#Figures {

		height: calc(100vh - 270px);
	}
	#FiguresPartialCardScoring {
		height: calc(100vh - 370px);
	}
}

h1 {
	text-align: center;
	margin-top: 10px;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(23px);
	-ms-transform: translateX(23px);
	transform: translateX(23px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}


#partialCardScoringModeButton {
	display: none;
}
.partialScoringArmyDiv {
	position: relative;
}

.labelCell {
	background-color: lightblue;
	text-align: center;
}

.ohsIcon {
	background-color: yellow;
	color: red;
	display: inline-block;
	width: 50px;
	text-align: center;
	border: 1px solid black;
	margin-right: 5px;
	font-weight: bold;
	border-radius: 10px;
}
.createOhsLink {
	display: inline-block;
}
.questionMarkParent {
	position: relative;
}
.questionMark {
	border: 1px solid black;
	border-radius: 26px;
	font-size: 10px;
	width: 15px;
	height: 15px;
	display: inline-block;
	margin-left: 2px;
	background-color: yellow;
	text-decoration: none;
	vertical-align: top;
	font-weight: bold;
	text-align: center;
}
.questionMarkHoverDescription {
	display: none;
    position: absolute;
    top: 20px;
    border: 1px solid black;
    border-radius: 5px;
    background-color: yellow;
    color: black;
    z-index: 1000;
}
.questionMark:hover + .questionMarkHoverDescription {
	display: block;
}

[data-bs-theme="light"] {
	--bs-link-color: var(--blue);
	--bs-link-color-rgb: 0, 0, 255;
}

[data-bs-theme="dark"] {
  --bs-link-color: var(--goldBright);
  --bs-link-color-rgb: 237, 215, 142;
}

input[type=text]:not(#searchBar),
input[type=email],
input[type=number],
input[type=password],
input[type=date],
input[type=datetime-local],
textarea,
select,
#SortDiv select {
  border: 2px solid var(--gray) !important;
}

#calculateButton,
#armyListCopy,
#armyListX,
#Reset button,
a#CreateLink,
#add-HeroscapeMap-button,
input[type=submit],
button[type=submit],
.edit-button,
.create-button {
  background-color: var(--mdBlue);
  border-color: var(--mdBlue);
  color: var(--lightText);
  cursor: pointer;
  transition: 0.05s;
}
#calculateButton:hover,
#armyListCopy:hover,
#armyListX:hover,
#Reset button:hover,
a#CreateLink:hover,
#add-HeroscapeMap-button:hover,
input[type=submit]:hover,
button[type=submit]:hover,
.edit-button:hover,
.create-button:hover {
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--darkBg) !important;
}
#calculateButton:visited,
#armyListCopy:visited,
#armyListX:visited,
#Reset button:visited,
a#CreateLink:visited,
#add-HeroscapeMap-button:visited,
input[type=submit]:visited,
button[type=submit]:visited,
.edit-button:visited,
.create-button:visited {
  color: var(--lightText) !important;
}

/* Specific override for the logout button in the nav */
.navbar-nav .nav-item form button.nav-link {
    background-color: transparent !important;
    border: none !important;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x) !important;
    line-height: inherit;
    display: inline-block;
    vertical-align: middle;
}

/* Ensure it matches your other links on hover */
.navbar-nav .nav-item form button.nav-link:hover {
    color: var(--nav_bar_hover_text_color) !important;
}

/* UnitGroup */
.unitGroupGroup {
	margin-left: 20px;
}
.unitGroupNameSpan, .gameFormatNameSpan {
	padding-left: 5px;
}

	.help-tooltip::after {
		content: " ?";
		font-size: 10px;
		border: 1px solid black;
		border-radius: 26px;
		width: 15px;
		height: 15px;
		background-color: var(--primary);
		display: inline-block;
		vertical-align: top;
		margin-left: 4px;
		color: black;
		cursor: help;
	}
	.help-tooltip:hover::after {
		color: var(--primary);
		background-color: black;
	}


.quillWrapper {
	margin: auto;
	resize: both;       /* Allows vertical resizing just like a textarea */
	overflow: auto;     /* Required for 'resize' to work */
	min-height: 150px;  /* Set a minimum height so it doesn't vanish */
	max-height: 600px;  /* Optional: prevent it from breaking your layout */
	max-width: 750px;
	border: 1px solid #ccc; /* Match your styling */
	
	/* Turn the wrapper into a flexbox column layout */
	display: flex;
	flex-direction: column;
}

/* This is the toolbar generated by Quill */
.quillWrapper .ql-toolbar {
	flex-shrink: 0; /* Prevents the toolbar from changing size */
	border-top: none;
	border-left: none;
	border-right: none;
}

/* This is the main body container generated by Quill */
.quillWrapper .ql-container {
	flex-grow: 1;   /* Forces the typing area to fill 100% of the remaining height */
	border: none;   /* Removes double borders */
	overflow-y: auto; /* Adds a nice scrollbar inside the typing area if text overflows */
}

.ql-toolbar.ql-snow {
    background: #ccc; /* Always a light background for WYSIWYG toolbar (readable Editor buttons, works in light and dark modes) */
}
.quillWrapper button {
	background-color: white !important;
}

.navigationArrow {
	display: inline-block;
	width: 50px;
}

.disabled {
	opacity: 0.4;
}

.editIcon {
	height: 25px;
}
.deleteIcon {
	height: 25px;
}
.toggleButton {
	border-radius: 20px;
}
.toggleButtonOn {
	background-color: rgb(0, 199, 123) !important;
	border-color: rgb(0, 199, 123) !important;
}
.toggleButtonOff {
	background-color: rgb(242, 126, 126) !important;
	border-color: rgb(242, 126, 126) !important;
	text-decoration: line-through;
}


.accordion-button {
	color: white !important;
}
#adminAccordion .accordion-button {
    background-color: var(--primary) !important;
    color: white;
}

/* BOILERPLATE */
body {
    background-color: Canvas;
  }
  
  ::-moz-selection {
    background: var(--mdBlue);
    color: var(--lightText);
  }
  
  ::selection {
    background: var(--mdBlue);
    color: var(--lightText);
  }
  
  /* Variables */
  :root {
    --gray: #ccc;
    --goldBright: #edd78e;
    --gold: #bfa85e;
    --goldDark: #9b843a;
    --mdRed: #ff8383;
    --mdBlue: #4062a3;
    --blue: #06c;
    --purple: #551a8b;
    --lightText: #fafafa;
    --darkBg: #1e1e1e;
    --darkBorder: #353535;
    --rounded: 5px;
    --round: 30px;
  }
  
  /* INPUTS */
  input[type=checkbox],
  input[type=text]:not(#searchBar),
  input[type=email],
  input[type=number],
  input[type=password], 
  input[type=date],
  input[type=datetime-local],
  textarea,
  select,
  #SortDiv select {
    padding: 6px !important;
  }
  
  input[type=checkbox] {
    border: 2px solid var(--gold) !important;
    position: relative;
    top: 2px;
  }

	#pageContent a {
		color: var(--blue);
	}
  
	html[data-bs-theme=dark] #pageContent a {
		color: var(--goldBright);
	}
	html[data-bs-theme=dark] #pageContent a:visited {
		/*color: var(--goldDark);*/
		text-decoration: underline;
	}
  
	#pageContent a.btn.btn {
		background-color: var(--mdBlue);
		border-color: var(--mdBlue);
		font-size: 15px;
		padding: 6px 12px;
		color: var(--lightText);
	}
  
  input[type=text]:not(#searchBar),
  input[type=email],
  input[type=number],
  input[type=password],
  input[type=date],
  input[type=datetime-local],
  textarea,
  select,
  #SortDiv select {
    border: 2px solid var(--gray);
  }
  
  #calculateButton,
  #armyListCopy,
  #armyListX,
  #Reset button,
  a#CreateLink,
  #add-HeroscapeMap-button,
  input[type=submit],
  button[type=submit],
  .edit-button,
  .create-button,
  .buttonA,
  .dbObjEditLinkDiv button {
    background-color: var(--mdBlue) !important;
    border-color: var(--mdBlue);
    color: var(--lightText);
  }
  #calculateButton:hover,
  #armyListCopy:hover,
  #armyListX:hover,
  #Reset button:hover,
  a#CreateLink:hover,
  #add-HeroscapeMap-button:hover,
  input[type=submit]:hover,
  button[type=submit]:hover,
  .edit-button:hover,
  .create-button:hover,
  .dbObjEditLinkDiv button:hover {
    background-color: var(--gold);
    border-color: var(--gold);
    color: var(--darkBg);
  }
  #calculateButton:visited,
  #armyListCopy:visited,
  #armyListX:visited,
  #Reset button:visited,
  a#CreateLink:visited,
  #add-HeroscapeMap-button:visited,
  input[type=submit]:visited,
  button[type=submit]:visited,
  .edit-button:visited,
  .create-button:visited,
  .dbObjEditLinkDiv button:visited {
    color: var(--lightText);
  }
  
  .edit-button {
    border-radius: var(--rounded);
    margin-bottom: 3px;
    padding: 5px 10px;
  }
  
  .tournamentGroup .tournament:not(:last-child), .convention:not(:last-child) { 
    border-bottom: 1px solid var(--gray);
  }
  /* BUILDER SEARCH AND FILTERS */

  @media screen and (min-width: 801px) {
    #SearchAndSortDiv {
        display: flex;
		justify-content: center; 
    }
}

.gameWinner {
	font-weight: bold;	
  background-color: #198754 !important;
    color: white !important;
}
div#TournamentDescription {
	white-space: break-spaces;
	padding: 0 20px;
	margin: 0;
	vertical-align: top;
	font-size: 15px;
	margin-top: 20px;
	margin-bottom: 20px;
}

/* TOURNAMENT DETAILS REDESIGN */
.card.season-card {
  margin-bottom: 15px;
}
.season-card .card-text {
}

/*      W.I.P.
.col.tournamentSpecs {
    font-size: 17px;
    border: 1px solid var(--goldBright);
    border-radius: 5px;
    padding: 15px;
    margin: 25px 0 0;
    display: inline-block;
    height: fit-content;
}
*/

/* BUILDER REDESIGN */

div#tournamentBuilderDiv {
  padding-bottom: 15px;
}

img#logoImg {
  padding: 5px;
  margin: 0 10px;
  border-radius: var(--round);
}

.toggleSwitch {
  width: auto !important;
  padding: 8px !important;
  border-radius: var(--round) !important;
  border: 2px solid #ccc !important;
}

.toggleSwitchString,
.toggleSwitchSelected {
  padding: 4px 10px !important;
}

.toggleSwitchSelected {
  border-radius: var(--round) !important;
  background-color: var(--goldBright) !important;
}

#armyListCopy,
#armyListX {
  padding: 5px 10px;
}

#SearchAndSortDiv {
  margin: 20px 10px;
}

#unitTable, #partialCardScoringUnitTable {
  line-height: 1.1;
}
#unitTable td, #partialCardScoringUnitTable td {
  padding: 0 0 5px 10px;
}
#unitTable td.labelCell, #partialCardScoringUnitTable td.labelCell {
  padding-top: 5px;
}
#unitTable td.unitDivName, #partialCardScoringUnitTable td.unitDivName {
  font-size: 19px;
}

#unitTableHeader1,
#unitTablePartialHeader1 {
  padding: 8px 0px 10px 10px;
}

#ArmyStatsDiv {
  padding: 15px;
  width: auto !important;
}

#armyList,
#armyPartial1List,
#armyPartial2List {
  padding: 15px 0;
}

button {
  cursor: pointer !important;
  padding: 5px 10px;
  font-size: 15px;
  cursor: pointer;
}


/* CUSTOMIZED GOOGLE MAPS STYLES */

.gm-style-iw a {
    color: black !important;
}
.gm-style-mtc-bbw .gm-style-mtc>button,
button.gm-control-active.gm-fullscreen-control,
button.gm-control-active,
button.gm-svpc,
.gmnoprint button {
    background: var(--goldBright) !important;
}
button.gm-ui-hover-effect {
    width: 36px !important;
    height: 36px !important;
}
.gm-style-iw-chr span {
    width: 18px !important;
    height: 18px !important;
    margin: 9px !important;
}
.gm-style-iw-d {
    padding: 0 10px 10px 10px !important;
}

footer {
  margin-top: 50px;
}
.bootstrap-table .fixed-table-container .table thead th .sortable {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* LEAGUES LIST PAGE DESIGN */

.section__leaguesList {
  padding: 30px 0px 60px;
}

.section__leaguesList .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* If you prefer League Names aligned vertically at the top of the card, delete this rule */
}
.section__leaguesList .card-text {
    font-size: 12px;
}



/* 
  DARK MODE CUSTOM OVERRIDES
*/
html[data-bs-theme=dark] body {
    background: black;
}
html[data-bs-theme=dark] div#tournamentBuilderDiv a {
  color: var(--goldBright);
}
html[data-bs-theme=dark] input[type=text]:not(#searchBar),
html[data-bs-theme=dark] input[type=email],
html[data-bs-theme=dark] input[type=number],
html[data-bs-theme=dark] input[type=password],
html[data-bs-theme=dark] input[type=date],
html[data-bs-theme=dark] input[type=datetime-local],
html[data-bs-theme=dark] textarea,
html[data-bs-theme=dark] select,
html[data-bs-theme=dark] #SortDiv select {
  border: 1px solid var(--lightText) !important;
}

html[data-bs-theme=dark] #unitTable .unitDiv.activeUnit {
  background-color: var(--dungeon) !important;
}
html[data-bs-theme=dark] #Maps a {
  color: var(--goldBright);
}
html[data-bs-theme=dark] .navBar a:hover:not(.noHoverChange) {
  background-color: var(--mdBlue);
  color: var(--lightText);
  transition: background 0.3s;
}
button,
html[data-bs-theme=dark] #calculateButton,
html[data-bs-theme=dark] #armyListCopy,
html[data-bs-theme=dark] #armyListX,
html[data-bs-theme=dark] #Reset button,
html[data-bs-theme=dark] a#CreateLink,
html[data-bs-theme=dark] #add-HeroscapeMap-button,
html[data-bs-theme=dark] input[type=submit],
html[data-bs-theme=dark] button[type=submit],
html[data-bs-theme=dark] .edit-button,
html[data-bs-theme=dark] .create-button {
  background-color: var(--mdBlue);
  border-color: var(--mdBlue);
  font-size: 15px;
  padding: 6px 12px;
  color: var(--lightText);
  cursor: pointer;
  transition: 0.05s;
}
html[data-bs-theme=dark] button:hover,
html[data-bs-theme=dark] #calculateButton:hover,
html[data-bs-theme=dark] #armyListCopy:hover,
html[data-bs-theme=dark] #armyListX:hover,
html[data-bs-theme=dark] #Reset button:hover,
html[data-bs-theme=dark] a#CreateLink:hover,
html[data-bs-theme=dark] #add-HeroscapeMap-button:hover,
html[data-bs-theme=dark] input[type=submit]:hover,
html[data-bs-theme=dark] button[type=submit]:hover,
html[data-bs-theme=dark] .edit-button:hover,
html[data-bs-theme=dark] .create-button:hover {
  background-color: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--darkBg) !important;
}
html[data-bs-theme=dark] .create-button {
  padding: 10px 12px 6px 6px !important;
}
html[data-bs-theme=dark] .rightArrow:hover,
html[data-bs-theme=dark] .leftArrow:hover {
  cursor: pointer;
}
html[data-bs-theme=dark] .tournamentGroup .tournament:not(:last-child),
html[data-bs-theme=dark] .convention:not(:last-child) {
  border-bottom: 1px solid var(--lightText) !important;
  padding: 5px 3px 15px;
}
html[data-bs-theme=dark] .maxElem,
html[data-bs-theme=dark] .tournamentTag {
  color: var(--goldBright) !important;
}
html[data-bs-theme=dark] .tagInfo {
  background-color: var(--goldBright) !important;
  color: black !important;
}
html[data-bs-theme=dark] .tagHoverDescription {
  padding: 5px 10px;
  background-color: var(--goldBright) !important;
  border-color: var(--goldBright) !important;
}
html[data-bs-theme=dark] #ArmyBuilderLink a {
  color: var(--goldBright) !important;
}
html[data-bs-theme=dark] .bracketGame {
  border-color: var(--gold) !important;
}
html[data-bs-theme=dark] .mapImageDivFinished {
  background-color: var(--darkBg) !important;
  border-radius: var(--rounded) !important;
}
html[data-bs-theme=dark] .mapImageDivFinished img {
  margin: 10px 0 !important;
}
html[data-bs-theme=dark] #matchupsDiv table,
html[data-bs-theme=dark] #matchupsDiv th,
html[data-bs-theme=dark] #matchupsDiv td {
  border-color: var(--goldBright) !important;
}
html[data-bs-theme=dark] #matchupsDiv .mapLinkFinished {
  color: var(--goldBright) !important;
}
html[data-bs-theme=dark] .tagDivName {
  padding: 7px 0 0 1px !important;
}
html[data-bs-theme=dark] #add-HeroscapeMap-button {
  border-color: var(--mdBlue) !important;
  background-color: var(--mdBlue) !important;
  color: var(--lightText);
}
html[data-bs-theme=dark] .userSetting {
  border-color: var(--gold) !important;
}
html[data-bs-theme=dark] .mapImg {
  border-radius: 2px !important;
}
html[data-bs-theme=dark] img[alt="Down Arrow"] {
  filter: invert(1) !important;
}
html[data-bs-theme=dark] #FormatGlossaryListBasic p,
html[data-bs-theme=dark] #FormatGlossaryListDiv p {
  color: var(--lightText);
}
html[data-bs-theme=dark] .highlightedFormat {
  padding: 8px 10px;
  background-color: var(--goldBright) !important;
  color: black !important;
}
html[data-bs-theme=dark] .noBuilderEffect {
  color: var(--mdRed) !important;
}
html[data-bs-theme=dark] footer {
  border-top-color: var(--gold);
}
html[data-bs-theme=dark] .versionChangeImage { 
  background-color: white;
  border-radius: 15px;
}
html[data-bs-theme=dark] div#tournamentBuilderDiv a {
  color: var(--goldBright);
}
html[data-bs-theme=dark] img#centerLogoImg {
  /*background: var(--lightText) !important;*/
  content:url("../images/autoloadIcon_white.png");
}
html[data-bs-theme=dark] img.downArrowImg {
    content:url("/images/downArrow_white.png");
}
html[data-bs-theme=dark] img#centerLogoImg .toggleSwitch .slider {
  background-color: var(--darkBorder);
}
html[data-bs-theme=dark] div#Figures {
  border-color: var(--darkBorder);
}
html[data-bs-theme=dark] .unitTableHeaderRow {
  background-color: var(--darkBg) !important;
}
html[data-bs-theme=dark] .labelCell {
  background-color: var(--darkBorder) !important;
}
/* BUILDER RIGHT COLUMN */
html[data-bs-theme=dark] #ArmyStatsDiv,
html[data-bs-theme=dark] #ArmyPartial1Stats,
html[data-bs-theme=dark] #ArmyPartial2Stats {
  border: 2px solid #353535 !important;
  background: #1e1e1e !important;
}
html[data-bs-theme=dark] .armyStatsValue {
  color: var(--gold) !important;
}
html[data-bs-theme=dark] .toggleSwitch {
  border: 2px solid var(--darkBorder) !important;
}
html[data-bs-theme=dark] .armyDisplayCost {
  color: var(--mdRed) !important;
}
html[data-bs-theme=dark] input[type=checkbox] {
    accent-color: var(--gold);
}
html[data-bs-theme=dark] #adminAccordion .accordion-button::after {
    filter: invert(100%); /* improved dark mode visibility for accordion arrow icons */ 
}

/* LIGHT MODE OVERRIDES */

[data-bs-theme="light"] body {
    background-color: #fafafa !important;
}

.tournamentGame {
	font-size: 1.2em; 
	color: var(--primary);;
}

/* CONVENTION OVERVIEW  */

.section__announcements .card-text {
  text-align: left;
}

@media (max-width: 720px) {
  h3.local-time {
    font-size: 18px;
  }
}

/* Rankings Table Row Numbers */
table[data-sortable="true"] tr:not(.fble_htr) {
    counter-increment: rowNumber;
    background-color:var(--bs-body-bg);
}
/* Actual Row Number */
table[data-sortable="true"] tr:not(.fble_htr) td:first-child::before {
    content: counter(rowNumber);
    color: var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color)));
    position: relative;
    font-size: 16px;
    left:70%;
}
/* Player Rank */
table[data-sortable="true"] tr:not(.fble_htr) td:first-child {
    position: relative;
    font-size: 10px;
    color: var(--gold);
    transform: translateX(-40%);
}



/* Homepage logo — light/dark variants (skin.logo_full / skin.logo_full_dark) */
html[data-bs-theme="dark"] .homeLogo--lightVariant {
    display: none;
}
.homeLogo--darkVariant {
    display: none;
}
html[data-bs-theme="dark"] .homeLogo--darkVariant {
    display: inline-block;
}