/*#region --- Toast Display ------------------------------------------------------*/

/* Fade animations for toast visibility
   - .toast-fade-in: Used when a toast appears (opacity transition in).
   - .toast-fade-out: Used when a toast is dismissed (opacity transition out).
   - Controlled by the AnimationClass property in the component.
*/
.generic-toast.toast-fade-in {
	opacity: 0;
	transform: translateY(-24px);
	pointer-events: auto;
	display: flex;
}

.generic-toast.toast-fade-out {
	opacity: 0;
	pointer-events: none;
	display: flex;
	transition: opacity 300ms ease-in-out; /* slower fade-out */
}

/* Toast container positioningt
   - Fixed position in the viewport.
   - One of four corners, controlled by .top-right, .top-left, .bottom-right, .bottom-left.
   - pointer-events: none prevents accidental interaction except on toasts themselves.
*/
.generic-toast-container {
	position: fixed; /* Keep this for viewport anchoring */
	z-index: 1080;
	width: 320px;
	transition: all 500ms ease;
}

	.generic-toast-container.top-right {
		top: 3.5rem;
		right: 1.5rem;
	}

	.generic-toast-container.top-left {
		top: 3.5rem;
		left: 1.5rem;
	}

	.generic-toast-container.bottom-right {
		bottom: 1.5rem;
		right: 1.5rem;
	}

	.generic-toast-container.bottom-left {
		bottom: 1.5rem;
		left: 1.5rem;
	}

/* Toast appearance
   - Flex row layout, fixed width, rounded corners, shadow.
   - No margin between toasts; overlap is handled by stacking logic below.
   - transition includes transform for smooth stacking/overlap animation.
*/
.generic-toast {
	display: flex;
	flex-direction: row;
	width: 320px;
	margin-bottom: 0;
	pointer-events: auto;
	opacity: 1;
	transition: transform 400ms cubic-bezier(0.4,0,0.2,1), opacity 300ms cubic-bezier(0.4,0,0.2,1);
	border-radius: 8px;
	box-shadow: 0 2px 16px rgba(0,0,0,0.18);
	padding: 0;
	position: absolute;
	left: 0;
}

/* Toast content area
   - Padding and word-break for multi-line support.
*/
.toast-content {
	padding: 0.5rem 1rem 0.5rem 1rem;
	flex: 1 1 0;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* Toast close button
   - Fixed size and margin for consistent placement.
*/
.generic-toast button {
	width: 24px;
	height: 24px;
	margin: 0.5rem 0.5rem 0.5rem 0.25rem;
}

/*#endregion --- Toast Display ------------------------------------------------------*/

/*#region --- vDropDown Menu ------------------------------------------------------*/
.vdropdown-menu {
	background-color: #141824;
	border-radius: 8px;
	border: 1px solid #373E53;
	width: auto !important;
	min-width: 55px !important;
	font-size: 14px;
	position: absolute;
	margin: 0px;
}

	.vdropdown-menu .vdropdown-item:first-child {
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}

	.vdropdown-menu .vdropdown-item:last-child {
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}

.vdropdown-item {
	cursor: pointer;
	padding: 8px;
}

	.vdropdown-item > * {
		cursor: pointer;
	}

	.vdropdown-item:hover {
		background-color: #31374A;
	}
/*#endregion --- vDropDown Menu ------------------------------------------------------*/

/*#region --- Global Tooltip ------------------------------------------------------*/
.global-tooltip {
	position: absolute;
	margin-top: 4px;
	z-index: 9999999;
	background-color: #222834;
	color: #C7C8CB;
	font-size: 14px;
	padding: 4px 8px;
	border-radius: 6px;
	border: 1px solid #373E53;
	pointer-events: none;
	white-space: nowrap;
	transition: opacity 0.2s;
}

	.global-tooltip::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		border-width: 6px;
		border-style: solid;
		border-color: #373E53 transparent transparent transparent;
		opacity: 1 !important;
	}

	.global-tooltip.left::after {
		left: 100%;
		top: 50%;
		transform: translateY(-50%) rotate(-0deg);
		border-color: transparent transparent transparent #373E53;
	}

	.global-tooltip.right::after {
		left: -12px;
		top: 50%;
		transform: translateY(-50%) rotate(-0deg);
		border-color: transparent #373E53 transparent transparent;
	}

	.global-tooltip.up::after {
		content: "";
		position: absolute;
		top: -6px;
		left: calc(50% - 6px);
		transform: translateY(-50%) rotate(180deg);
		border-width: 6px;
		border-style: solid;
		border-color: #373E53 transparent transparent transparent;
		opacity: 1 !important;
	}
/*#endregion --- Global Tooltip ------------------------------------------------------*/

/*#region --- Global Rich Tooltip ------------------------------------------------------*/
.global-rich-tooltip {
	position: absolute;
	margin-top: 4px;
	z-index: 9999999;
	background-color: #222834;
	color: #C7C8CB;
	font-size: 14px;
	padding: 4px 8px;
	border-radius: 6px;
	border: 1px solid #373E53;
	pointer-events: none;
	transition: opacity 0.2s;
	min-width: 190px;
}

	.global-rich-tooltip::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		border-width: 6px;
		border-style: solid;
		border-color: #373E53 transparent transparent transparent;
		opacity: 1 !important;
	}

	.global-rich-tooltip.left::after {
		left: 100%;
		top: 50%;
		transform: translateY(-50%) rotate(-0deg);
		border-color: transparent transparent transparent #373E53;
	}

	.global-rich-tooltip.right::after {
		left: -12px;
		top: 50%;
		transform: translateY(-50%) rotate(-0deg);
		border-color: transparent #373E53 transparent transparent;
	}

	.global-rich-tooltip.up::after {
		content: "";
		position: absolute;
		top: -6px;
		left: calc(50% - 6px);
		transform: translateY(-50%) rotate(180deg);
		border-width: 6px;
		border-style: solid;
		border-color: #373E53 transparent transparent transparent;
		opacity: 1 !important;
	}
/*#endregion --- Global Tooltip ------------------------------------------------------*/

/*#region --- Account/LoginScreens ------------------------------------------------------*/
.login-container {
	height: calc(100vh - 170px);
}

	.login-container .bg-container {
		height: 100%;
		margin-top: 50px;
		margin-left: 150px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
/*#endregion --- Account/LoginScreens ------------------------------------------------------*/

/*#region --- Variables ------------------------------------------------------*/
:root {
	--wrs-gradient: linear-gradient(114deg, #FBB138 0%, #EE1C68 100%);
	--wrs-guild-name-color: #f8b700;
	--wrs-encounter-name-color: #FDA60F;
	--wrs-realm-name-color: #9FA6BC;
	--wrs-raid-team-name-color: #76A9FF;
	--color-difficulty-normal: #1EFF00;
	--color-difficulty-heroic: #0070DD;
	--color-difficulty-mythic: #A335EE;
	/* Raid Member Availability Colors */
	--color-availability-available: #90D67F;
	--color-availability-not-available: #F48270;
	--color-availability-partial-available: #FBEB5F;
	--color-availability-tentative: #FFCC84;
	--color-availability-not-set: silver;
	/* We need these to be available.
        If we un-minify the theme, we can remove them 
    */
	--phoenix-gray-50: #0f111a;
	--phoenix-gray-100: #222834;
	--phoenix-gray-200: #31374a;
	--phoenix-gray-300: #373e53;
	--phoenix-gray-400: #3e465b;
	--phoenix-gray-500: #606981;
	--phoenix-gray-600: #6e7891;
	--phoenix-gray-700: #8a94ad;
	--phoenix-gray-800: #949db5;
	--phoenix-gray-900: #9fa6bc;
	--phoenix-gray-1000: #cbd0dd;
	--phoenix-gray-1100: #EFF1F5;
	--phoenix-gray-50-rgb: 15, 17, 26;
	--phoenix-gray-100-rgb: 34, 40, 52;
	--phoenix-gray-200-rgb: 49, 55, 74;
	--phoenix-gray-300-rgb: 55, 62, 83;
	--phoenix-gray-400-rgb: 62, 70, 91;
	--phoenix-gray-500-rgb: 96, 105, 129;
	--phoenix-gray-600-rgb: 110, 120, 145;
	--phoenix-gray-700-rgb: 138, 148, 173;
	--phoenix-gray-800-rgb: 148, 157, 181;
	--phoenix-gray-900-rgb: 159, 166, 188;
	--phoenix-gray-1000-rgb: 203, 208, 221;
	--phoenix-gray-1100-rgb: 239, 241, 245;
	--phoenix-primary: #85a9ff;
	--phoenix-secondary: #31374a;
	--phoenix-success: #90d67f;
	--phoenix-info: #60c6ff;
	--phoenix-warning: #ffcc85;
	--phoenix-danger: #f48270;
	--phoenix-primary-rgb: 133, 169, 255;
	--phoenix-secondary-rgb: 49, 55, 74;
	--phoenix-success-rgb: 144, 214, 127;
	--phoenix-info-rgb: 96, 198, 255;
	--phoenix-warning-rgb: 255, 204, 133;
	--phoenix-danger-rgb: 244, 130, 112;
	--phoenix-primary-lighter: #003cc7;
	--phoenix-primary-light: #3874ff;
	--phoenix-primary-dark: #85a9ff;
	--phoenix-primary-darker: #85a9ff;
	--phoenix-warning-lighter: #bc3803;
	--phoenix-warning-light: #e5780b;
	--phoenix-warning-dark: #ffcc85;
	--phoenix-warning-darker: #ffcc85;
	--phoenix-danger-lighter: #b81800;
	--phoenix-danger-light: #fa3b1d;
	--phoenix-danger-dark: #f48270;
	--phoenix-danger-darker: #f48270;
	--phoenix-success-lighter: #1c6c09;
	--phoenix-success-light: #25b003;
	--phoenix-success-dark: #90d67f;
	--phoenix-success-darker: #90d67f;
	--phoenix-info-lighter: #005585;
	--phoenix-info-light: #0097eb;
	--phoenix-info-dark: #60c6ff;
	--phoenix-info-darker: #60c6ff;
	--phoenix-primary-lighter-rgb: 0, 60, 199;
	--phoenix-primary-light-rgb: 56, 116, 255;
	--phoenix-primary-dark-rgb: 133, 169, 255;
	--phoenix-primary-darker-rgb: 133, 169, 255;
	--phoenix-warning-lighter-rgb: 188, 56, 3;
	--phoenix-warning-light-rgb: 229, 120, 11;
	--phoenix-warning-dark-rgb: 255, 204, 133;
	--phoenix-warning-darker-rgb: 255, 204, 133;
	--phoenix-danger-lighter-rgb: 184, 24, 0;
	--phoenix-danger-light-rgb: 250, 59, 29;
	--phoenix-danger-dark-rgb: 244, 130, 112;
	--phoenix-danger-darker-rgb: 244, 130, 112;
	--phoenix-success-lighter-rgb: 28, 108, 9;
	--phoenix-success-light-rgb: 37, 176, 3;
	--phoenix-success-dark-rgb: 144, 214, 127;
	--phoenix-success-darker-rgb: 144, 214, 127;
	--phoenix-info-lighter-rgb: 0, 85, 133;
	--phoenix-info-light-rgb: 0, 151, 235;
	--phoenix-info-dark-rgb: 96, 198, 255;
	--phoenix-info-darker-rgb: 96, 198, 255;
	--phoenix-quaternary-color: #606981;
	--phoenix-quaternary-color-rgb: 96, 105, 129;
	--phoenix-quaternary-bg: #3e465b;
	--phoenix-quaternary-bg-rgb: 62, 70, 91;
	--phoenix-emphasis-bg: #141824;
	--phoenix-emphasis-bg-rgb: 20, 24, 36;
	--phoenix-body-highlight-color: #cbd0dd;
	--phoenix-body-highlight-color-rgb: 203, 208, 221;
	--phoenix-body-highlight-bg: #222834;
	--phoenix-body-highlight-bg-rgb: 34, 40, 52;
	--phoenix-translucent-rgb: 55, 62, 83;
	--phoenix-input-group-addon-bg-global: #31374a;
}
/*#endregion --- Variables ------------------------------------------------------*/

.bg-gray {
	background-color: var(--phoenix-gray-100);
}

.bg-in {
	background-color: #296a1a;
}
/* Use for severities and other semantics */
.bg-wrs-danger {
	background-color: var(--phoenix-danger-light);
}

.bg-wrs-warning {
	background-color: var(--phoenix-warning-light);
}

.bg-wrs-info {
	background-color: var(--phoenix-info-light);
}

.bg-wrs-light {
	background-color: var(--phoenix-gray-400);
}

/*#region --- Core Entities --------------------------------------------------*/

.wrs-guild-name {
	color: var(--wrs-guild-name-color);
	font-size: 0.9em;
	font-weight: 700;
}

.wrs-guild-name-color {
	color: var(--wrs-guild-name-color);
}

.wrs-raid-team-name-color {
	color: var(--wrs-raid-team-name-color);
}

.avatar-border-guild {
	border: 2px solid var(--wrs-guild-name-color);
}

.avatar-border-team {
	border: 2px solid var(--phoenix-primary-dark);
}

.wrs-realm-name {
	color: var(--wrs-realm-name-color);
	font-size: 0.9em;
}

.wrs-character-name {
	font-size: 1.2rem;
	cursor: default;
}

	.wrs-character-name .lg {
		font-size: 1.5em;
	}

	.wrs-character-name .sm {
		font-size: 0.8em;
	}

/*#endregion --- Core Entities --------------------------------------------------*/

/*#region --- Classes --------------------------------------------------------*/
/* This is a warcraft class*/
.wrs-class {
}

	.wrs-class .avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
/*#endregion --- Classes --------------------------------------------------------*/

/*#region --- Factions -------------------------------------------------------*/
/* This is a warcraft faction */
.wrs-faction {
}
/*#endregion --- Factions -------------------------------------------------------*/

/*#region --- Class Specializations ------------------------------------------*/

/* Any class specialization */
.wrs-class-specialization {
}

/* This is the main spec */
.wrs-class-specialization-main {
}

/* This is a spec the user can play */
.wrs-class-specialization-active {
}
/* This is a spec the user can't play */
.wrs-class-specialization-inactive {
}


div.wrs-class-specialization-inactive img {
	filter: grayscale(100%) brightness(50%);
}

/*#endregion --- Class Specializations ------------------------------------------*/

/*#region --- Raid Team ------------------------------------------------------*/
.wrs-raid-team {
	color: var(--phoenix-primary-light);
}

.wrs-raid-team-color {
	color: var(--phoenix-primary-light);
}

/*#endregion --- Raid Team ------------------------------------------------------*/

/*#region --- Raid Instance --------------------------------------------------*/
.wrs-raid-instance {
	color: var(--phoenix-success-light);
}

.wrs-raid-instance-color {
	color: var(--phoenix-success-light);
}
/*#endregion --- Raid Instance --------------------------------------------------*/

/*#region --- Raid Encounter --------------------------------------------------*/
.wrs-raid-encounter-color {
	color: var(--wrs-encounter-name-color);
}
/*#endregion --- Raid encounter --------------------------------------------------*/


/*#region --- Raid Boss ------------------------------------------------------*/
.wrs-raid-boss {
}

/*#endregion --- Raid Boss ------------------------------------------------------*/

/*#region --- Raid Difficulty ------------------------------------------------*/
.wrs-raid-difficulty {
}

/*#endregion --- Raid Difficulty ------------------------------------------------*/

/*#region --- Raid Plan -------------------------------------------------------*/
.wrs-raid-plan {
}

/*#endregion --- Raid Plan -------------------------------------------------------*/


.inline-button {
	display: none;
}

	.inline-button:hover {
		display: block;
	}

.inline-button-owner {
}

	.inline-button-owner:hover ~ .inline-button {
		display: block;
	}


/* Small Icon Button --> To be used for dropdown menu buttons*/
.icon-button-xs {
	width: 22px;
	height: 22px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #12141F;
	border: 1px solid #33394E;
	border-radius: 4px;
	cursor: pointer;
	position: relative;
	color: #9ba3ba;
}


	.icon-button-xs:hover {
		background-color: #29303E;
	}

.darker-bg {
	background-color: #0f111a;
}

.wrs-rounded-circle {
	border-radius: 50%;
}

.wrs-rounded-soft {
	border-radius: 6px;
}

.text-raid-name {
	color: var(--wrs-encounter-name-color);
	text-shadow: rgb(30, 30, 30) 3px 0px 0px, rgb(30, 30, 30) 2.83487px 0.981584px 0px, rgb(30, 30, 30) 2.35766px 1.85511px 0px, rgb(30, 30, 30) 1.62091px 2.52441px 0px, rgb(30, 30, 30) 0.705713px 2.91581px 0px, rgb(30, 30, 30) -0.287171px 2.98622px 0px, rgb(30, 30, 30) -1.24844px 2.72789px 0px, rgb(30, 30, 30) -2.07227px 2.16926px 0px, rgb(30, 30, 30) -2.66798px 1.37182px 0px, rgb(30, 30, 30) -2.96998px 0.42336px 0px, rgb(30, 30, 30) -2.94502px -0.571704px 0px, rgb(30, 30, 30) -2.59586px -1.50383px 0px, rgb(30, 30, 30) -1.96093px -2.27041px 0px, rgb(30, 30, 30) -1.11013px -2.78704px 0px, rgb(30, 30, 30) -0.137119px -2.99686px 0px, rgb(30, 30, 30) 0.850987px -2.87677px 0px, rgb(30, 30, 30) 1.74541px -2.43999px 0px, rgb(30, 30, 30) 2.44769px -1.73459px 0px, rgb(30, 30, 30) 2.88051px -0.838247px 0px;
}

/*#region --- Utils And States -------------------------------------------------------*/
.display-disabled {
	filter: grayscale(100%) brightness(60%);
}

.v-hidden {
	visibility: hidden
}

/* This is the disabling style our deginer has created in some mockups */
.display-disabled-lum {
	mix-blend-mode: luminosity;
}
.display-disabled-lum-dark {
    mix-blend-mode: luminosity;
    filter: brightness(40%);
}
/*#endregion --- Utils And States -------------------------------------------------------*/


/*#region --- Navbar -------------------------------------------------------*/
.navbar-vertical-content {
	overflow-x: hidden !important;
}

.wrs-nav-list div:not(.show-on-hover) {
	transition: all 200ms ease;
}

.wrs-nav-list li {
	max-width: 254px;
}

.wrs-nav-list .guild:not(:first-of-type) {
	border-top: 1px solid var(--phoenix-border-color);
}
/*
.wrs-nav-list li ~ .guild {
    border-top: 1px solid var(--phoenix-border-color);
}
.wrs-nav-list .team {
    border-bottom: 1px solid var(--phoenix-border-color);
}*/
/* This is dark magic, and its because we have a very bad Navbar structure */
/*.wrs-nav-list *:not(.guild) + * + .team {
    border-top: 1px solid var(--phoenix-border-color);
}
.wrs-nav-list *:not(.team) + * + .reset {
    border-top: 1px solid var(--phoenix-border-color);
}*/
.wrs-bg-plan {
	background-color: color-mix(in srgb, var(--wow-quality-poor) 40%, transparent);
}

.wrs-bg-reset {
	background-color: color-mix(in srgb, var(--wow-quality-uncommon) 40%, transparent);
}

.wrs-bg-team {
	background-color: color-mix(in srgb, var(--wow-quality-rare) 40%, transparent);
}

.wrs-bg-guild {
	background-color: color-mix(in srgb, var(--wow-quality-legendary) 40%, transparent);
}
/*#endregion --- Navbar -------------------------------------------------------*/

/*#region --- WRS Buttons -------------------------------------------------------*/
/* ------ WRS Outline Button
    This is an extention of the .btn class 
    and can take size classes like btn-sm, btn-lg. 
    
    ex. class="btn btn-sm btn-wrs-gradient"

    DO NOT remove any lines below, 
    or Liam Neeson will find you.
*/
.wrs-button-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.wrs-button-outline {
	display: flex;
	width: calc(100% + 2.5px);
	height: calc(100% + 2px);
	border-radius: 6px;
	position: absolute;
	background: linear-gradient(144deg, #ee1c68 30%, #fbb138 60%);
}

/* ------ WRS Main Theme Button */
.btn-wrs-main {
	z-index: 0;
	line-height: auto;
	font-weight: 700;
	background: #0f111a;
	text-align: center;
	transition: all 150ms ease-in-out;
	background-size: 100% auto;
	background-position: right center;
	color: white;
	border: none;
	background-image: linear-gradient(144deg, #ee1c68 30%, #fbb138 60%);
	position: relative;
	overflow: hidden;
}

	.btn-wrs-main:hover {
		background: linear-gradient(144deg, #ee1c68 30%, #fbb138 60%);
		background-size: 160% auto;
		background-position: center center;
		color: white;
	}

	.btn-wrs-main:active {
		background: linear-gradient(144deg, #ee1c68 30%, #fbb138 60%);
		background-size: 160% auto;
		background-position: left center;
		color: white !important;
	}

	.btn-wrs-main:disabled {
		background: linear-gradient(135deg, #6B7280 0%, #9CA3AF 50%, #D1D5DB 100%);
		transform: none;
		box-shadow: none;
		color: white;
		opacity: 0.7;
	}

	.btn-wrs-main::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
		transition: left 0.5s;
	}

	.btn-wrs-main:hover::before {
		left: 100%;
	}

/* ------ WRS Secondary Theme Button */
.btn-wrs-secondary {
	background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);
	border: none;
	color: white;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease-in-out;
	position: relative;
	overflow: hidden;
}

	.btn-wrs-secondary:hover {
		background: linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #DB2777 100%);
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		color: white;
	}

	.btn-wrs-secondary:active {
		transform: translateY(0);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.btn-wrs-secondary:disabled {
		background: linear-gradient(135deg, #6B7280 0%, #9CA3AF 50%, #D1D5DB 100%);
		transform: none;
		box-shadow: none;
		color: white;
		opacity: 0.7;
	}

	.btn-wrs-secondary::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s;
	}

	.btn-wrs-secondary:hover::before {
		left: 100%;
	}

/* ------ WRS Warning Theme Button */
.btn-wrs-warning {
	background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 50%, #F97316 100%);
	border: none;
	color: white;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease-in-out;
	position: relative;
	overflow: hidden;
}

	.btn-wrs-warning:hover {
		background: linear-gradient(135deg, #D97706 0%, #F59E0B 50%, #EA580C 100%);
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		color: white;
	}

	.btn-wrs-warning:active {
		transform: translateY(0);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.btn-wrs-warning:disabled {
		background: linear-gradient(135deg, #6B7280 0%, #9CA3AF 50%, #D1D5DB 100%);
		transform: none;
		box-shadow: none;
		color: white;
		opacity: 0.7;
	}

	.btn-wrs-warning::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
		transition: left 0.5s;
	}

	.btn-wrs-warning:hover::before {
		left: 100%;
	}

/* ------ WRS Success Theme Button */
.btn-wrs-success {
	background: linear-gradient(135deg, #10B981 0%, #34D399 50%, #059669 100%);
	border: none;
	color: white;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease-in-out;
	position: relative;
	overflow: hidden;
}

	.btn-wrs-success:hover {
		background: linear-gradient(135deg, #047857 0%, #10B981 50%, #065F46 100%);
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		color: white;
	}

	.btn-wrs-success:active {
		transform: translateY(0);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.btn-wrs-success:disabled {
		background: linear-gradient(135deg, #6B7280 0%, #9CA3AF 50%, #D1D5DB 100%);
		transform: none;
		box-shadow: none;
		color: white;
		opacity: 0.7;
	}

	.btn-wrs-success::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
		transition: left 0.5s;
	}

	.btn-wrs-success:hover::before {
		left: 100%;
	}

/* ------ WRS Info Theme Button */
.btn-wrs-info {
	background: linear-gradient(135deg, #0EA5E9 0%, #38BDF8 50%, #0284C7 100%);
	border: none;
	color: white;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease-in-out;
	position: relative;
	overflow: hidden;
}

	.btn-wrs-info:hover {
		background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 50%, #075985 100%);
		transform: translateY(-1px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		color: white;
	}

	.btn-wrs-info:active {
		transform: translateY(0);
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.btn-wrs-info:disabled {
		background: linear-gradient(135deg, #6B7280 0%, #9CA3AF 50%, #D1D5DB 100%);
		transform: none;
		box-shadow: none;
		color: white;
		opacity: 0.7;
	}

	.btn-wrs-info::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
		transition: left 0.5s;
	}

	.btn-wrs-info:hover::before {
		left: 100%;
	}

/* Legacy support - keep existing btn-wrs-gradient */
.btn-wrs-gradient {
	z-index: 0;
	line-height: auto;
	font-weight: 700;
	background: #0f111a;
	text-align: center;
	transition: all 150ms ease-in-out;
	background-size: 100% auto;
	background-position: right center;
	color: white;
	border: none;
}

	.btn-wrs-gradient:hover {
		background: linear-gradient(144deg, #ee1c68 30%, #fbb138 60%);
		background-size: 160% auto;
		background-position: center center;
		color: white;
	}

	.btn-wrs-gradient:active {
		background: linear-gradient(144deg, #ee1c68 30%, #fbb138 60%);
		background-size: 160% auto;
		background-position: left center;
		color: white !important;
	}

	.btn-wrs-gradient img {
		position: relative;
		margin-top: -3px;
		margin-right: 5px;
	}
/* ------ END WRS Outline Button */

/*#region --- Phoenix Split Button Overrides -------------------------------------------------------*/
/* 
    These refer to the Phoenix split dropdown
    and NOT to our own <ButtonGroup> component

*/
.btn-group-wrs .btn-sm,
.btn-group-issues .btn-sm {
	/* Overrides like this are for sticking to 
       Phoenix sizing when having non-default structure
       (i.e. an icon inside a text button)
    */
	height: 34px;
}

.btn-group .dropdown-toggle::after {
	/* TB: I removed the default chevron, its tiny */
	display: none;
}

.btn-group.btn-group-wrs {
	background-image: linear-gradient(144deg, #ee1c68 30%, #fbb138 60%);
	background-size: 100% auto;
	background-position: right center;
	background-repeat: no-repeat;
	transition: background-position 150ms ease-in-out, background-size 150ms ease-in-out;
}

	.btn-group.btn-group-wrs:hover {
		background-position: left center;
		background-size: 140% auto;
	}

.btn-group-wrs .btn-autofill:hover {
	background-color: rgba(0, 0, 0, 0.15);
	border-color: rgba(0, 0, 0, 0.20) !important;
}

.btn-group-wrs .dropdown-toggle-split:hover {
	background-color: rgba(0, 0, 0, 0.15);
	border-color: rgba(0, 0, 0, 0.20) !important;
}

.btn-group-wrs .btn-autofill:active {
	background-color: rgba(0, 0, 0, 0.22);
}

.gt .btn-autofill {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.btn-group-wrs .dropdown-toggle-split:active {
	background-color: rgba(0, 0, 0, 0.22);
}

.btn-group-wrs .dropdown-menu {
	/* This fixes the flinch when moving the mouse from the 
       button to the dropdown
    */
	top: -1px !important;
}

.btn-group-issues .btn-left {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.round-num-display {
	border-radius: 50%;
	min-height: 16px;
	min-width: 16px;
	max-height: 16px;
	max-width: 16px;
	line-height: 16px;
}

.issues-dropdown {
	min-width: 420px;
	transform: translateX(-400px);
}

	.issues-dropdown .issue-row {
		min-height: 26px;
	}

		.issues-dropdown .issue-row:hover {
			background-color: var(--phoenix-body-highlight-bg);
		}
/* ------ END Phoenix Split Button Overrides */
/* ------- WRS Icon Button
    .btn-icon-xs - sm
  
    Relies on, and extends, the .btn classes.
    Use this whenever we have a Button 
    that only has an icon and no text. 
    We should make this a component because its used
    in many other elements.
*/
.btn-icon-sm {
	/* This is the ugly way that Phoenix calculates height, but adjusted for 
       using uil icons inside. 
    */
	height: calc(1.21em + 0.75rem + calc(var(--phoenix-border-width) * 2));
	width: 34px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn-icon-xs {
	height: 22px;
	width: 22px;
	padding: 0px;
	vertical-align: central;
	justify-content: center;
	align-content: center;
	display: flex;
	line-height: 22px;
}

	.btn-icon-xs icon {
		position: relative;
		top: -1px;
	}

/* ------- WRS clickable icon
    gives an icon the click area 
    of at least an xs button. 
    Can be extended later.

    Use like:
    <div class="clickable-icon">
        <icon class="uil uil-angle-down"></icon>
    </div>

    We should make this a component
*/
.clickable-icon {
	height: 22px;
	width: 22px;
	line-height: 22px;
	vertical-align: central;
	justify-content: center;
	align-content: center;
	display: flex;
	cursor: pointer;
}

	.clickable-icon:hover {
		color: white;
	}

/* These are used in our tables */
.active-sorting-icon {
	opacity: 1;
}

.inactive-sorting-icon {
	opacity: 0;
}

.flex-row:hover > .inactive-sorting-icon {
	opacity: 1;
}

.flex-row:hover > div > .inactive-sorting-icon {
	opacity: 0.5;
}

/*#endregion --- WRS Buttons-------------------------------------------------------*/


/*#region --- BG for World Markers Classes ------------------------------------------*/
.bg-star {
	background-color: rgba(222, 218, 50, 0.2);
}

.bg-circle {
	background-color: rgba(208, 84, 0, 0.2);
}

.bg-diamond {
	background-color: rgba(168, 14, 192, 0.2);
}

.bg-triangle {
	background-color: rgba(15, 155, 12, 0.2);
}

.bg-moon {
	background-color: rgba(116, 155, 179, 0.2);
}

.bg-square {
	background-color: rgba(4, 149, 255, 0.2);
}

.bg-cross {
	background-color: rgba(167, 20, 13, 0.2);
}

.bg-skull {
	background-color: rgba(243, 241, 235, 0.2);
}
/*#endregion --- BG for World Markers Classes -------------------------------------------------------*/

/*#region --- DEBUG Classes -------------------------------------------------------*/
.bg-g {
	background-color: rgba(0, 255, 0, 0.4) !important;
}

.bg-r {
	background-color: rgba(255, 0, 0, 0.4) !important;
}

.bg-b {
	background-color: rgba(0, 161, 255, 0.40) !important;
}

.bg-y {
	background-color: rgba(255, 255, 0, 0.4) !important;
}

.debug-section {
	color: white !important;
	background-color: #0000b7;
	font-family: Consolas, monospace;
	padding: 2px;
	font-size: 14px;
}
/*#endregion --- DEBUG Classes -------------------------------------------------------*/

/*#region --- Backgrounds  -------------------------------------------------------*/
.bg-load-image {
	background-repeat: no-repeat;
	background-position: revert-layer;
}

.bg-primary-selected {
	background-color: #26375f;
}
/*#endregion --- Backgrounds  -------------------------------------------------------*/

/*#region --- Modal Overides  -------------------------------------------------------*/
.modal-container {
	width: 100%;
	height: 100%;
	z-index: 9999999;
	background-color: rgba(0, 0, 0, 0.5);
}

.modal-backdrop {
	display: none;
}

.wrs-modal-backdrop {
	background-color: rgba(0, 0, 0, 0.5);
}
/*#endregion --- Modal Overides  -------------------------------------------------------*/


/*#region --- Interactive Text  -------------------------------------------------------*/
.interactive-text-primary {
	color: var(--phoenix-primary-light);
}

	.interactive-text-primary:hover {
		color: var(--phoenix-primary-dark);
	}

	.interactive-text-primary:active {
		color: var(--phoenix-primary-lighter);
	}

.interactive-text-secondary {
	color: var(--phoenix-gray-700);
}

	.interactive-text-secondary:hover {
		color: var(--phoenix-gray-900);
	}

	.interactive-text-secondary:active {
		color: var(--phoenix-gray-600);
	}

.interactive-text-success {
	color: var(--phoenix-success-light);
}

	.interactive-text-success:hover {
		color: var(--phoenix-success-dark);
	}

	.interactive-text-success:active {
		color: var(--phoenix-success-lighter);
	}

.interactive-text-info {
	color: var(--phoenix-info-light);
}

	.interactive-text-info:hover {
		color: var(--phoenix-info-dark);
	}

	.interactive-text-info:active {
		color: var(--phoenix-info-lighter);
	}

.interactive-text-warning {
	color: var(--phoenix-warning-light);
}

	.interactive-text-warning:hover {
		color: var(--phoenix-warning-dark);
	}

	.interactive-text-warning:active {
		color: var(--phoenix-warning-lighter);
	}

.interactive-text-danger {
	color: var(--phoenix-danger-light);
}

	.interactive-text-danger:hover {
		color: var(--phoenix-danger-dark);
	}

	.interactive-text-danger:active {
		color: var(--phoenix-danger-lighter);
	}


/*#endregion --- Interactive Text  -------------------------------------------------------*/

/*#region --- Difficulties -------------------------------------*/
.text-difficulty-normal {
	color: var(--color-difficulty-normal);
}

.text-difficulty-heroic {
	color: var(--color-difficulty-heroic);
}

.text-difficulty-mythic {
	color: var(--color-difficulty-mythic);
}
/*#endregion --- Difficulties -------------------------------------*/

/*#region --- WRS Shadows -------------------------------------*/
.wrs-text-shadow {
	text-shadow: rgb(30, 30, 30) 2px 0px 0px, rgb(30, 30, 30) 1.75517px 0.958851px 0px, rgb(30, 30, 30) 1.0806px 1.68294px 0px, rgb(30, 30, 30) 0.141474px 1.99499px 0px, rgb(30, 30, 30) -0.832294px 1.81859px 0px, rgb(30, 30, 30) -1.60229px 1.19694px 0px, rgb(30, 30, 30) -1.97998px 0.28224px 0px, rgb(30, 30, 30) -1.87291px -0.701566px 0px, rgb(30, 30, 30) -1.30729px -1.5136px 0px, rgb(30, 30, 30) -0.421592px -1.95506px 0px, rgb(30, 30, 30) 0.567324px -1.91785px 0px, rgb(30, 30, 30) 1.41734px -1.41108px 0px, rgb(30, 30, 30) 1.92034px -0.558831px 0px;
}

.wrs-light-text-shadow {
	text-shadow: 1px 1px 2px black;
}

/* Used in elements 1 level above trigger -> dropdowns, tooltips, etc. */
.wrs-mid-shadow {
	box-shadow: 0px 4px 5px 2px rgba(0, 0, 0, 0.50);
	-webkit-box-shadow: 0px 4px 5px 2px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 0px 4px 5px 2px rgba(0, 0, 0, 0.50);
}
/* Used in elements separate from the content they overlap: Dialogs, Large Menus, etc.  */
.wrs-high-shadow {
	box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.40), 0px 4px 6px 0px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.40), 0px 4px 6px 0px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.40), 0px 4px 6px 0px rgba(0, 0, 0, 0.25);
}

/* Used in elements that are tough to separete from the background */
.wrs-heavy-shadow {
	box-shadow: 0px 0px 20px 8px rgba(0,0,0,0.75);
	-webkit-box-shadow: 0px 0px 20px 8px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 20px 8px rgba(0,0,0,0.75);
}
/*#endregion --- WRS Shadows -------------------------------------*/

/*#region --- Search Container  -------------------------------------------------------*/
/* Look at RaidTeamEdit for implementation */
.search-box {
	position: relative;
	display: flex;
	align-items: center;
}

	.search-box .search-input {
		width: 400px;
		padding: 8px 30px 8px 30px;
		outline: none;
	}

	.search-box .search-icon {
		position: absolute;
		left: 10px;

		font-size: 16px;
		color: gray;
	}

	.search-box .clear-icon {
		position: absolute;
		top: 2px;
		right: 10px;
		font-size: 16px;
		color: #F48270;
		cursor: pointer;
	}
/*#endregion --- Search Container  -------------------------------------------------------*/

/*#region --- Day Colors  -------------------------------------------------------*/
.day-color-monday {
	color: #fbf4a3;
}

.day-color-tuesday {
	color: #f97b6f;
}

.day-color-wednesday {
	color: #ffabd2;
}

.day-color-thursday {
	color: #b068ee;
}

.day-color-friday {
	color: #95c8d9;
}

.day-color-saturday {
	color: #9dc183;
}

.day-color-sunday {
	color: #c99553;
}
/*#endregion --- Day Colors  -------------------------------------------------------*/

/*#region --- Raid Member Availability Colors  -------------------------------------------------------*/

.color-availability-available {
	color: var(--color-availability-available) !important;
}

.color-availability-available-background {
	background-color: #162d1e !important;
	font-size: 0.7rem;
	color: #8FCC7F !important;
}

	.color-availability-available-background:hover {
		background-color: #1e3c28 !important;
		color: #b6f3cf !important;
	}

.color-availability-available-border {
	border-color: var(--color-availability-available) !important;
}

.color-availability-not-available {
	color: var(--color-availability-not-available) !important;
}

.color-availability-not-available-background {
	background-color: #421d21 !important;
	font-size: 0.7rem;
	color: #d08479 !important;
}

	.color-availability-not-available-background:hover {
		background-color: #57262b !important;
		color: #f7bcc2 !important;
	}


.color-availability-not-available-border {
	border-color: var(--color-availability-not-available) !important;
}

.color-availability-partially-available {
	color: var(--color-availability-partial-available) !important;
}

.color-availability-partially-available-background {
	background-color: #544d0f !important;
	font-size: 0.7rem;
	color: #c0b551 !important;
}

	.color-availability-partially-available-background:hover {
		background-color: #686016 !important;
		color: #f9eb9f !important;
	}

.color-availability-partially-available-border {
	border-color: var(--color-availability-partial-available) !important;
}

.color-availability-tentative {
	color: var(--color-availability-tentative) !important;
}

.color-availability-tentative-background {
	background-color: #33251f !important;
	font-size: 0.7rem;
	color: #d7b479 !important;
}

	.color-availability-tentative-background:hover {
		background-color: #443129 !important;
		color: #f5d9cf !important;
	}

.color-availability-tentative-border {
	border-color: var(--color-availability-tentative) !important;
}

.color-availability-not-sellected-set {
	color: var(--color-availability-not-set) !important;
}

.color-availability-not-selected-background {
	background-color: #9FA6BC !important;
	font-size: 0.7rem;
	color: black !important;
}

	.color-availability-not-selected-background:hover {
		background-color: #B8BFD4 !important;
	}

.color-availability-not-sellected-border {
	border-color: var(--color-availability-not-set) !important;
}

/*#endregion --- Raid Member Availability Colors  -------------------------------------------------------*/

/*#region --- WRS Font Sizes  -------------------------------------------------------*/
.fs-14p {
	font-size: 14px !important;
}
/*#endregion --- WRS Font Sizes  -------------------------------------------------------*/

/*#region --- WRS Double Slider  -------------------------------------------------------*/
.wrs-slider-tooltips .noUi-handle .noUi-tooltip {
	display: block;
	color: white;
	font-weight: 500;
	border: none;
	background: none;
	bottom: 80% !important;
}
/*#endregion --- WRS Double Slider  -------------------------------------------------------*/

/*#region --- Badges  -------------------------------------------------------*/
.badge.badge-xs {
	padding-left: 4px;
	padding-right: 4px;
	height: 16px;
}

.badge-wrs {
	padding-left: 4px;
	padding-right: 4px;
	margin-left: 8px;
	border: 1px solid #ee1c68;
	color: #ee1c68;
	border-radius: 4px;
	font-size: 10px;
	line-height: 1px;
	font-weight: bold;
	background-color: #321d25;
}

.badge-wrs-normal {
	border: 1px solid var(--wow-quality-uncommon);
	color: var(--wow-quality-uncommon);
	background-color: #111f10;
}

.badge-wrs-heroic {
	border: 1px solid var(--wow-quality-rare);
	color: var(--wow-quality-rare);
	background-color: #0a162e;
}

.badge-wrs-mythic {
	border: 1px solid var(--wow-quality-epic);
	color: var(--wow-quality-epic);
	background-color: #1c1c31;
}

.badge-wrs-legendary {
	border: 1px solid var(--wow-quality-legendary);
	color: var(--wow-quality-legendary);
	background-color: #2a1807;
}

.badge-wrs-artifact {
	border: 1px solid var(--wow-quality-artifact);
	color: var(--wow-quality-artifact);
	background-color: #2a2107;
}
/*#endregion --- WRS Badges  ------------------------------------------------------*/


/*#region --- Raid Team Grid  -------------------------------------------------------*/
.raid-team-grid {
}

	.raid-team-grid table {
		width: 100%;
		border-spacing: 0;
	}

		/*********** Table Head ***********/
		.raid-team-grid table thead {
			position: sticky;
			top: 0;
			z-index: 2;
			display: table-header-group;
			background: #0F111A;
			box-shadow: 0 1px 0px #373E53;
		}

			.raid-team-grid table thead th {
				font-weight: normal;
				font-size: 15px;
				padding: 4px;
				text-align: left;
				line-height: 28px;
				height: 28px;
				vertical-align: middle;
				background: #0F111A;
				border-left: 1px solid #373E53;
			}

				.raid-team-grid table thead th i {
					position: relative;
					top: 1px;
				}

				.raid-team-grid table thead th:first-child {
					border-left: 0px;
				}

		/*********** Table Body ***********/
		.raid-team-grid table tbody {
			display: table-row-group;
			top: 22px;
			z-index: 1;
			padding-top: 2px;
		}

			.raid-team-grid table tbody td {
				height: 33px;
				text-align: left;
				padding-left: 4px;
				border-bottom: 1px solid #373E53;
				border-left: 1px solid #373E53;
				text-shadow: 1px 1px 2px black;
			}

				.raid-team-grid table tbody td:first-child {
					border-left: 0px;
				}

			.raid-team-grid table tbody tr:nth-child(odd) {
				background-color: var(--phoenix-emphasis-bg);
			}

			.raid-team-grid table tbody tr:nth-child(even) {
				background-color: var(--phoenix-gray-50);
			}


	/* Row color change on hover */
	.raid-team-grid tbody tr:nth-child(odd):hover {
		background-color: var(--phoenix-gray-100);
	}

	/* Row color change on hover */
	.raid-team-grid table tbody tr:nth-child(even):hover {
		background-color: var(--phoenix-gray-100);
	}

	.raid-team-grid .alt-badge {
		position: relative;
		bottom: -4px;
		padding-left: 4px;
		padding-right: 4px;
		margin-left: 8px;
		border: 1px solid #51453A;
		background-color: #262527;
		border-radius: 3px;
		color: #FFBF5E;
		font-size: 10px;
		line-height: 1px;
		font-weight: bold;
	}

	/* To align at the bottom of the line */
	.raid-team-grid .BT {
		position: relative;
		bottom: -6px;
		color: #e1f2f5;
	}

		.raid-team-grid .BT img {
			position: relative;
			bottom: 2px;
		}

/* To align text at center */
.raid-team-table-container .TC {
	text-align: center;
}

/*#endregion --- Raid Team Grid  ------------------------------------------------------*/

/*#region --- TEMPORARY SVG Icons  ------------------------------------------------------*/
/* This is a temp hack, 
    and we need to replace all svg-as-image
    with actual icons as soon as possible.
    No variables, no hover effects, no .fs-N class size control. 
*/

.material-symbols--swords-outline {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23f8b700' d='m19.05 21.6l-2.925-2.9l-2.2 2.2l-.7-.7q-.575-.575-.575-1.425t.575-1.425l4.225-4.225q.575-.575 1.425-.575t1.425.575l.7.7l-2.2 2.2l2.9 2.925q.3.3.3.7t-.3.7l-1.25 1.25q-.3.3-.7.3t-.7-.3M22 5.9L10.65 17.25l.125.1q.575.575.575 1.425t-.575 1.425l-.7.7l-2.2-2.2l-2.925 2.9q-.3.3-.7.3t-.7-.3L2.3 20.35q-.3-.3-.3-.7t.3-.7l2.9-2.925l-2.2-2.2l.7-.7q.575-.575 1.425-.575t1.425.575l.1.125L18 1.9h4zM8.35 9.425l.6-.575l.575-.6l-.575.6zm-1.4 1.425L2 5.9v-4h4l4.95 4.95l-1.425 1.4l-4.35-4.35H4v1.175l4.35 4.35zm2.3 4.975L20 5.075V3.9h-1.175L8.075 14.65zm0 0l-.6-.575l-.575-.6l.575.6z'/%3E%3C/svg%3E");
}

.charm--hourglass {
	display: inline-block;
	width: 15px;
	height: 15px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='384' height='512' viewBox='0 0 384 512'%3E%3Cpath fill='%23f8b700' d='M24 0C10.7 0 0 10.7 0 24s10.7 24 24 24h8v19c0 40.3 16 79 44.5 107.5l81.6 81.5l-81.6 81.5C48 366 32 404.7 32 445v19h-8c-13.3 0-24 10.7-24 24s10.7 24 24 24h336c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8v-19c0-40.3-16-79-44.5-107.5L225.9 256l81.5-81.5C336 146 352 107.3 352 67V48h8c13.3 0 24-10.7 24-24S373.3 0 360 0zm168 289.9l81.5 81.5C293 391 304 417.4 304 445v19H80v-19c0-27.6 11-54 30.5-73.5zm0-67.9l-81.5-81.5C91 121 80 94.6 80 67V48h224v19c0 27.6-11 54-30.5 73.5L192 222.1z'/%3E%3C/svg%3E");
}

.icon--skull {
	display: inline-block;
	width: 12px;
	height: 12px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M416 398.9c58.5-41.1 96-104.1 96-174.9C512 100.3 397.4 0 256 0S0 100.3 0 224c0 70.7 37.5 133.8 96 174.9V464c0 26.5 21.5 48 48 48h48v-48c0-8.8 7.2-16 16-16s16 7.2 16 16v48h64v-48c0-8.8 7.2-16 16-16s16 7.2 16 16v48h48c26.5 0 48-21.5 48-48zM96 256a64 64 0 1 1 128 0a64 64 0 1 1-128 0m256-64a64 64 0 1 1 0 128a64 64 0 1 1 0-128'/%3E%3C/svg%3E");
}
/*#endregion --- TEMPORARY SVG Icons  ------------------------------------------------------*/

/*#region --- Character Issues  ------------------------------------------------------*/
.gear-issue-critical {
	color: #EC221F;
}

.gear-issue-major {
	color: #FDA60F;
}

.gear-issue-minor {
	color: #9FA6BC;
}

.gear-issue-trivial {
	color: #6090FF;
}

/*#endregion --- Character Issues  ------------------------------------------------------*/


/*#region --- Tier Sets & Pieces ---------------------------------------------------*/

.tier-set-warning {
	color: #FDA60F !important;
	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
}

.tier-set-ok {
	color: #25B003 !important;
	text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
}


.tier-priority-high {
	color: #25B003 !important;
}

.tier-priority-medium {
	color: #FDA60F !important;
}

.tier-priority-low {
	color: #F90C00 !important;
}


.tier-pieces-list {
	width: 100%;
}

	.tier-pieces-list .empty-slot {
		width: 24px;
	}


	.tier-pieces-list img {
		width: 24px;
		height: 24px;
		border-radius: 4px;
	}

	.tier-pieces-list .quality-icon {
		position: relative;
		display: inline-block;
		width: 24px;
		height: 24px;
	}

		.tier-pieces-list .quality-icon img {
			display: block;
		}

		.tier-pieces-list .quality-icon::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 1;
			pointer-events: none;
			border-radius: 3px;
		}
		/*NULL*/
		.tier-pieces-list .quality-icon.null img {
		}

		.tier-pieces-list .quality-icon.null::after {
		}

		/* POOR */
		.tier-pieces-list .quality-icon.poor img {
			border: 1px solid #9D9D9D;
		}

		.tier-pieces-list .quality-icon.poor::after {
			background: rgba(157, 157, 157, 0.3);
		}


		/* COMMON */
		.tier-pieces-list .quality-icon.common img {
			border: 1px solid #FFFFFF;
		}

		.tier-pieces-list .quality-icon.common::after {
			background: rgba(255, 255, 255, 0.3);
		}

		/* UNCOMMON */
		.tier-pieces-list .quality-icon.uncommon img {
			border: 1px solid #1EFF00;
		}

		.tier-pieces-list .quality-icon.uncommon::after {
			background: rgba(30, 255, 0, 0.3);
		}

		/* RARE */
		.tier-pieces-list .quality-icon.rare img {
			border: 1px solid #0070DD;
		}

		.tier-pieces-list .quality-icon.rare::after {
			background: rgba(0, 112, 221, 0.3);
		}

		/* EPIC */
		.tier-pieces-list .quality-icon.epic img {
			border: 1px solid #A335EE;
		}

		.tier-pieces-list .quality-icon.epic::after {
			background: rgba(163, 53, 238, 0.3);
		}

		/* LEGENDARY */
		.tier-pieces-list .quality-icon.legendary img {
			border: 1px solid #FF8000;
		}

		.tier-pieces-list .quality-icon.legendary::after {
			background: rgba(255, 128, 0, 0.3);
		}

/*#endregion --- WOW Quality Borders ---------------------------------------------------*/


.sockets-list {
	width: 100%;
}

	.sockets-list .empty-slot {
		width: 24px;
	}


	.sockets-list img {
		width: 18px;
		height: 18px;
		border-radius: 4px;
	}

/*#region --- Checkboxes ---------------------------------------------------*/
.medium-checkbox {
	width: 18px;
	height: 18px;
}

.large-checkbox {
	width: 22px;
	height: 22px;
}
/*#endregion --- Checkboxes ---------------------------------------------------*/

/*#region --- Vaults ---------------------------------------------------*/

.vault-mythic,
.vault-heroic,
.vault-normal,
.vault-none {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	font-size: 16px;
	color: #fff;
	line-height: 1px;
	padding-top: 1px; /* Centers UIL Icons */
	vertical-align: middle;
}

.vault-mythic {
	background: #a259e4; /* Purple */
}

.vault-heroic {
	background: #0070DD; /* Green */
}

.vault-normal {
	background: #25B003; /* Blue */
}

.vault-none {
	background: #373E53; /* Gray */
}

/*#endregion --- Vaults ---------------------------------------------------*/

/*#region --- Quality Text Colors ---------------------------------------------------*/

.quality-artifact {
	color: #e6cc80; /* Light Gold */
}

.quality-legendary {
	color: #ff8000; /* Orange */
}

.quality-epic {
	color: #a335ee; /* Purple */
}

.quality-rare {
	color: #0070dd; /* Blue */
}

.quality-uncommon {
	color: #1eff00; /* Green */
}

.quality-common {
	color: #ffffff; /* White */
}

.quality-poor {
	color: #9d9d9d; /* Gray */
}


/*#endregion --- Quality Text Colors ---------------------------------------------------*/