/* CHECKBOXES TO TOGGLE AVAILABLE UNITS */

.row1Group {
	display: inline-block;
}
.row1Group:not(:first-child) {
	margin-left: 10px;
}
.row1Group:not(:last-child) {
	margin-right: 10px;
}
.tierSubGroup {
	text-align: left;
	vertical-align: top;
}
.figureSetUnitGroupSubGroup {
	margin-left: 20px;
}
#Tier1SubGroups {
  /* The core magic */
  column-count: 2;
  /*column-gap: 2rem;*/
  /* Optional: Adds a vertical line between columns for that classic look */
  column-rule: 1px solid #ccc;
}
#Tier1SubGroups > div {
	break-inside: avoid;
}
.row1Column {
	display: block;
}
.row1Column:not(:first-child) {
	margin-top: 10px;
}

/* TOGGLE SWITCH FOR STANDARD/DELTA POINTS */

.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;
}
#ToggleSwitches {
	/*text-align: left;*/
	display: block;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
.toggleSwitch {
	display: inline-block;
	position: relative;
	width: 170px;
	border: 1px solid black;
	border-radius: 5px;
	vertical-align: top;
	padding: 5px;
}
.toggleSwitchString {
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-radius: 10px;
}
.toggleSwitchSelected {
	/*background-color: var(--grass);*/
	background-color: #FFFF00;
	color: var(--shadow);
}
input[type=number] {
	width: 50px;
}
/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 20px;
	/*vertical-align: top;*/
}
/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
	/*float: left;*/
}
/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	border: 1px solid black;
	border-radius: 5px;
	-webkit-transition: .4s;
	transition: .4s;
	/*padding-left: 20px;*/
}
.slider:before {
	position: absolute;
	content: "";
	height: 17px;
	width: 17px;
	left: 4px;
	bottom: 1px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

/* ARMY SEARCH & FILTERS */

#SearchDiv {
	vertical-align: top;
}
.sortDiv {
	display: inline-block;
}
.invertSortLabel {
	display: block;
}
.invertSortP {
	display: inline-block;
	margin-top: 0;
	margin-bottom: 0;
}
#FilterDiv,
#SearchParametersDiv {
	max-width: 950px;
	text-align: center;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}
#FiltersDiv {
	
	/*cursor: pointer;*/
}
#FilterDiv h2,
#SearchParametersDiv h2 {
    width: fit-content;
    margin: 10px auto;
    background-color: var(--mdBlue);
    border-color: var(--mdBlue);
    font-size: 17px;
    padding: 6px 14px;
    color: var(--lightText);
    cursor: pointer;
    border-radius: 5px;
    font-weight: normal;
}
#FiltersDiv p {
	margin-top: 0;
	margin-bottom: 0;
}
.filterLabel {
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
}
.filtersDivGroup1 {
	display: block;
}
.filtersDivGroup2 {
	display: inline-block;
	width: 30%;
	vertical-align: top;
}
.filtersMultiSelect {
	height: 100px;
}




#FiltersDiv {
	display: none;
	flex-wrap: wrap;
	gap: 12px;
	text-align: left;
	cursor: auto;
}

.filterCategory {
	
	border: 1px solid #333;
	border-radius: 8px;
	padding: 10px 14px;
	display: inline-block;
}

html[data-bs-theme=dark] .filterCategory {
    background: #1a1a1a;
}

.filterCategory h3 {
	margin: 0 0 8px;
	font-size: 14px;
}

.filterFullWidthRow {
	flex-basis: 100%;
	text-align: center;
	margin: 6px 0 12px;
}

#ClearFiltersButton {
	padding: 4px 12px;
	font-size: 13px;
}

.filterGroupBreak {
	flex-basis: 100%;
	height: 0;
	margin: 0;
	padding: 0;
}

/* Group by type — each group owns a 100-wide range so pinned fields within
   a group can never accidentally sort into the next group */
.filterTypeMultiSelect { order: 100; }
.filterTypeCheckbox { order: 200; }
.filterTypeNumeric { order: 300; }

/* Custom order within a group — stay inside that group's range (100-199 for
   numeric), spaced out so a new field can slot in without renumbering */
.filterCategory[data-metadata-name="General"] { order: 101;}   
.filterCategory[data-metadata-name="Homeworld"] { order: 102;}   
.filterCategory[data-metadata-name="Species"] { order: 103;}   
.filterCategory[data-metadata-name="Class"] { order: 104;}   
.filterCategory[data-metadata-name="Personality"] { order: 105;}   
   
.filterCategory[data-metadata-name="Rarity"] { order: 201;}
.filterCategory[data-metadata-name="Type"] { order: 202;}
.filterCategory[data-metadata-name="Size"] { order: 203;}
   
.filterCategory[data-metadata-name="Height"] { order: 301; }
.filterCategory[data-metadata-name="Life"] { order: 302; }
.filterCategory[data-metadata-name="Move"] { order: 303; }
.filterCategory[data-metadata-name="Range"] { order: 304; }
.filterCategory[data-metadata-name="Attack"] { order: 305; }
.filterCategory[data-metadata-name="Defense"] { order: 306; }
.filterCategory[data-metadata-name="Points"] { order: 307; }






#SearchAndSortDiv {
	margin: 10px;
	text-align: center;
}
#SearchDiv, #SortDiv {
	display: inline-block;
}
#SearchDiv input {
	padding: 3px;
}
#SortDiv select {
	padding: 3.3px;
}
@media screen and (min-width: 801px) {
	#SearchDiv {
		margin-right: 20px;
	}
}
@media screen and (max-width: 800px) {
	#SortDiv {
		margin-left: 20px;
	}
}
.logoImg {
	height: 30px;
}
#keepX0 {
	vertical-align: top;
	line-height: 30px; 
	margin-left: 20px;
}
.downArrowImg {
	height: 32px;
	line-height: 32px;
	vertical-align: top;
}


/* BUILDER LEFT COLUMN */
/* AVAILABLE UNITS LIST */

#unitTable, #partialCardScoringUnitTable {
	margin: auto;
	position: relative;
	width: 100%;
	font-size: 20px;
	border-collapse: collapse;
}
.unitTableHeaderRow {
	position: sticky;
	top: 0;
	font-size: 16px;
	background-color: lightgrey;
	z-index: 1000;
}
#unitTable td, #partialCardScoringUnitTable td {
	padding-left: 5px;
	padding-right: 5px;
	font-size: 19px;
}
#unitTableHeader1 {
	/*width: 66%;*/
	text-align: left;
	padding-left: 10px;
}
#unitTableHeader2 {
	width: 80px;
}
#unitTableHeader3 {
	width: 90px;
}
#unitTablePartialHeader1 {
	/*width: 45%;*/
	text-align: left;
	padding-left: 10px;
}
#unitTablePartialHeader2 {
	width: 80px;
}
#unitTablePartialHeader3 {
	width: 90px;
}
#unitTablePartialHeader4 {
	width: 90px;
}
.unitDataCell {
	text-align: center;
}
.arrow {
	/*width: 30px;*/
	width: 20px;
}
.arrowNoClick {
	opacity: 0.3;
}
.rightArrow {
	margin-left: 5px;
}
.leftArrow {
	margin-right: 5px;
}
.arrow, .arrowValue {
	vertical-align: middle;
}
.centerTd {
	text-align: center;
}


/* BUILDER RIGHT COLUMN */
/* ARMY LIST UNIT NAMES, COPY BUTTONS, POINT/HEX TOTALS */

#armyList, #armyPartial1List, #armyPartial2List {
    padding: 15px 0;
}
#ArmyStatsDiv,
#ArmyPartial1Stats,
#ArmyPartial2Stats {
    padding: 15px;
    width: auto !important;
}
#SaveArmyButton {
	display: block;
	margin: auto;
	margin-top: 10px;
}
#ArmyNameInput {
	width: 425px;
}
#ArmyStatsDiv,
#ArmyPartial1Stats,
#ArmyPartial2Stats {
	background-color: white;
	text-align: center;
	position: relative;
}
@media screen and (min-width: 801px) {
	#ArmyStatsDiv,
	#ArmyPartial1Stats,
	#ArmyPartial2Stats {
		border: 2px solid black;
		margin-bottom: 5px;
		/*position: relative;*/
	}
	#UnitStatsDiv {
		border: 2px solid black;
	}
}
@media screen and (max-width: 800px) {
	#ArmyStatsDiv,
	#ArmyPartial1Stats,
	#ArmyPartial2Stats {
		display: block;
		/*position: fixed;*/
		/*top: 0;*/
		width: 100%;
		border-bottom: 1px solid black;
	}
}
#ArmyStatsDiv h2,
#ArmyPartial1Stats h2,
#ArmyPartial2Stats h2 {
	margin: 0;
}
@media screen and (max-width: 800px) {
	#ArmyStatsDiv h2,
	#ArmyPartial1Stats h2,
	#ArmyPartial2Stats h2 {
		margin-bottom: 8px;
	}
}
.armyStatsGroup {
	display: inline-block;
	margin-left: 20px;
	margin-right: 20px;
}
.armyStatsValue {
	display: inline-block;
	color: blue;
}
.armyStatsLabel {
	display: inline-block;
}


/* SELECTED UNIT STATS, PHOTO & CARD TEXT */
#UnitStatsDiv {
	display: none;
	position: relative;
	z-index: 2000;
}
@media screen and (max-width: 800px) {
	#UnitStatsDiv {
		position: fixed;
		bottom: 0px;  
		max-width: calc(100% - 20px);
		max-height: calc(100% - 5px);
		margin-left: 10px;
		overflow: scroll;
	}
}
.activeUnit {
	background-color: lightblue;
}
.unitDivName {
	/*color: blue;*/
	text-align: left;
}
.UnitStatsColumn {
	display: inline-block;
	width: 30%;
}
#UnitReleaseSet {
	margin-bottom: 10px;
	font-style: italic;
}
@media screen and (min-width: 801px) {
	.topUnitStatsColumn {
		vertical-align: top;
		margin-top: 10px;
	}
}
@media screen and (max-width: 800px) {
	#UnitReleaseSet {
		margin-top: 10px;
	}
}
.UnitStat {
	text-align: left;
	margin-top: 1px;
	margin-bottom: 1px;
	padding-left: 5px;
}
#UnitName a, #UnitName a:visited {
	color: inherit !important;
}
#UnitImg, .unitImg {
	width: 200px;
	display: inline-block;
	margin: auto;
	padding: 10px;
}
@media screen and (max-width: 800px) {
	#UnitImg {
		display: none;
	}
}
.unitPowerName {
	font-weight: bold;
	margin-top: 10px;
}
.unitPowerText {
	/*font-style: italic;*/
	max-width: 500px;
	text-align: left;
}
.unitPowerText a {
	color: inherit !important;
}
.unitPowerText a:visited {
	color: inherit !important;
}
.unitPowerText ul {
	margin: 0;
}
#UnitPowerRankings {
	text-align: left;
}
#UnitStatsDivX {
	position: absolute;
	top: 2px;
	right: 2px;
	background-color: red;
	color: white;
	width: 40px;
	height: 40px;
	font-size: 20px;
}

.unitTableHeaderRow {
  background-color: lightgrey !important;
}

.labelCell {
  background-color: lightblue !important;
}

#ArmyStatsDiv,
#ArmyPartial1Stats,
#ArmyPartial2Stats {
  background-color: white !important;
}

.armyStatsValue {
  color: var(--blue) !important;
}
.armyBtn {
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	
	position: absolute;
	top: 5px;
}
#armyListX {
	right: 50px;
	/*margin-right: 50px;*/
}
#CopyArmyButton, #armyListCopy {
	right: 90px;
}
#CopyUrlButton, #ohsArmyListCopy, #warLeagueArmyListCopy, .externalLeagueArmyCopyButton {
	left: 50px;
}
#viewArmyBtn {
	right: 150px;
}

/* CLASS NAMES NOT FOUND, MOVE TO RECYCLE BIN? */
#modeSwitchDiv {
	text-align: center;
}
#modeSwitchDiv button {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}