:root {
	/* Colors  */
	--skin-color-white: rgb(255, 255, 255);
	--skin-color-white-10: rgba(255, 255, 255, 0.10);
	--skin-color-white-20: rgba(255, 255, 255, 0.20);
	--skin-color-white-40: rgba(255, 255, 255, 0.40);
	--skin-color-white-80: rgba(255, 255, 255, 0.80);
	--skin-color-white-90: rgba(255, 255, 255, 0.90);

	--skin-color-red-10: rgba(212, 36, 36, 0.10);
	--skin-color-red-60: rgba(212, 36, 36, 0.60);
	--skin-color-red-80: rgba(212, 36, 36, 0.80);

	--skin-color-red-accent: rgba(255, 45, 45);
	--skin-color-red-accent-active: rgb(255, 95, 95);

	--skin-color-red-accent-20: rgba(255, 45, 45, 0.20);
	--skin-color-red-accent-60: rgba(255, 45, 45, 0.60);

	--skin-color-gray-30: rgba(39, 45, 50, 0.30);
	--skin-color-gray-40: rgba(39, 45, 50, 0.40);
	--skin-color-gray-50: rgba(39, 45, 50, 0.50);

	--skin-color-gray-accent-20: rgba(57, 60, 63, 0.20);
	--skin-color-gray-accent-40: rgba(66, 72, 78, 0.40);
	--skin-color-gray-accent-60: rgba(57, 60, 63, 0.60);

	--skin-color-blue: rgb(113, 204, 255);

	--skin-color-dark-blue: rgb(34, 37, 40);
	--skin-color-dark-blue-active: rgb(48, 53, 57);

	
	/* Sizes */
	--skin-backdrop-filter: blur(5px);
	--skin-font-size: 2.065vh; /* 14px */
	--skin-font-size-small: 1.746vh; /* 12px */
	--skin-account-select-border-width: 3px;
	--skin-input-field-height: 4.65793vh; /*  32px  */;


	/* Vars by elements  */
	--skin-link-color: var(--skin-color-blue);
	--skin-progress-bar-color: var(--skin-color-blue);
	--skin-tooltip-bg-color: var(--skin-color-dark-blue);
	--skin-drop-menu-bg-color: var(--skin-color-dark-blue);
	--skin-captcha-bg-color: var(--skin-color-dark-blue);
}

/******************************************************************
 * Buttons
 * .wgc-skin-button
 * .wgc-skin-button--action2
 * .wgc-skin-button--default
 * .wgc-skin-button-back
 ******************************************************************/
.steam-splash	.wgc-skin-button {
	backdrop-filter: var(--skin-backdrop-filter);
}

/* Button Action 2 */
.steam-splash	.wgc-skin-button--action2 {
	background: var(--skin-color-red-60);
	border: 2px solid var(--skin-color-red-accent-active);
	color: var(--skin-color-white-90);
}
.steam-splash	.wgc-skin-button--action2:hover {
	border: 2px solid var(--skin-color-red-accent);
	background: var(--skin-color-red-80);
}
.steam-splash	.wgc-skin-button--action2:active {
	border: 2px solid var(--skin-color-red-accent-60);
	background: var(--skin-color-red-60);
}
.steam-splash	.wgc-skin-button--action2[disabled] {
	border: 2px solid var(--skin-color-red-accent-20);
	background: var(--skin-color-red-10) !important;
}

/* Button Default */
.steam-splash .wgc-skin-button--default {
	border: 1px solid var(--skin-color-white-20);
	background: var(--skin-color-gray-40);
	color: var(--skin-color-white-40);
}
.steam-splash .wgc-skin-button--default:hover {
	border: 1px solid var(--skin-color-white-40);
	background: var(--skin-color-gray-60);
}
.steam-splash .wgc-skin-button--default:active {
	border: 1px solid var(--skin-color-white-40);
	background: var(--skin-color-gray-accent-20);
}
.steam-splash	.wgc-skin-button--default[disabled] {
	border: 1px solid var(--skin-color-white-10);
	background: var(--skin-color-gray-accent-20);
}

/* Button Back */
.steam-splash .wgc-skin-button-back {
	color: var(--skin-color-blue);
	opacity: 1;
}

.steam-splash .wgc-skin-button-back:hover {
	color: var(--skin-color-blue);
	opacity: 0.7;
}

/******************************************************************
 * Account Select
 * .wgc-skin-account-select-box
 * .wgc-skin-account-select
 * .wgc-skin-account-select--checked
 ******************************************************************/
.steam-splash .wgc-skin-account-select-box {
	padding: var(--skin-account-select-border-width);
}

.steam-splash .wgc-skin-account-select {
	border-top: 1px solid var(--skin-color-white-20);
	border-left: 1px solid var(--skin-color-white-20);
	border-right: 1px solid var(--skin-color-white-20);
	background: var(--skin-color-gray-30);
	backdrop-filter: var(--skin-backdrop-filter);
	color: var(--skin-color-white);
}

.steam-splash .wgc-skin-account-select:last-of-type {
	border-bottom: 1px solid var(--skin-color-white-20);
}

.steam-splash .wgc-skin-account-select--checked {
	position: relative;
	background: var(--skin-color-gray-accent-40);
	z-index: 1;
}

/* Account Select Border  */
.steam-splash .wgc-skin-account-select--checked:before {
	content: '';
	position: absolute;
	height: 100%;
	left: 0;
	right: 0;
	outline: var(--skin-account-select-border-width) solid var(--skin-color-white-80);
}

/******************************************************************
 * Link
 * .wgc-skin-link
 * .wgc-skin-link--disabled
 * .wgc-skin-nickname-suggestion-link
 ******************************************************************/
.steam-splash .wgc-skin-link {
	color: var(--skin-color-blue);
}

.steam-splash .wgc-skin-link:hover {
	color: var(--skin-color-blue);
	text-decoration: underline;
}

.steam-splash .wgc-skin-link--disabled {
	opacity: 0.3;
}

.steam-splash .wgc-skin-nickname-suggestion-link {
	color: var(--skin-color-blue) !important;
	border-color: var(--skin-color-blue) !important;
}

.steam-splash .wgc-skin-nickname-suggestion-link:hover {
	text-decoration: none;
}

/******************************************************************
 * Input
 * .wgc-skin-input
 * .wgc-skin-input--ignore // For inputs in DoB Component
 * .wgc-skin-input--focused
 * .wgc-skin-input--error
 ******************************************************************/
.steam-splash .wgc-skin-input,
.steam-splash .wgc-skin-input:hover,
.steam-splash .wgc-skin-input:focus,
.steam-splash .wgc-skin-input:not(.wgc-skin-input--ignore),
.steam-splash .wgc-skin-input:not(.wgc-skin-input--ignore):hover,
.steam-splash .wgc-skin-input:not(.wgc-skin-input--ignore):focus,
.steam-splash .wgc-skin-input--focused:not(.wgc-skin-input--ignore) {
	color: var(--skin-color-white);
	outline: 0 none !important;
	font-size: var(--skin-font-size);
}

.steam-splash .wgc-skin-input:not(.wgc-skin-input--ignore),
.steam-splash .wgc-skin-input:not(.wgc-skin-input--ignore):hover,
.steam-splash .wgc-skin-input:not(.wgc-skin-input--ignore):focus,
.steam-splash .wgc-skin-input--focused:not(.wgc-skin-input--ignore) {
	backdrop-filter: var(--skin-backdrop-filter);
}

.steam-splash .wgc-skin-input:not(.wgc-skin-input--ignore) {
	border: 1px solid var(--skin-color-white-20);
	background: var(--skin-color-gray-30);
}

.steam-splash .wgc-skin-input--focused:not(.wgc-skin-input--ignore),
.steam-splash .wgc-skin-input:not(.wgc-skin-input--ignore):focus,
.steam-splash .wgc-skin-input:not(.wgc-skin-input--ignore):hover {
	border: 1px solid var(--skin-color-white-40);
	background: var(--skin-color-gray-50);
}

.steam-splash .wgc-skin-input--error:not(.wgc-skin-input--ignore),
.steam-splash .wgc-skin-input--error:not(.wgc-skin-input--ignore):focus,
.steam-splash .wgc-skin-input--error:not(.wgc-skin-input--ignore):hover {
	border-color: var(--skin-color-red-accent);
	background: var(--skin-color-gray-50) !important;
}

/******************************************************************
 * Tooltip
 * .wgc-skin-tooltip
 ******************************************************************/

.steam-splash .wgc-skin-tooltip .react-tooltip-lite {
	background: var(--skin-tooltip-bg-color);
}
.steam-splash .wgc-skin-tooltip .react-tooltip-lite-arrow {
    position: relative;
    border-color: var(--skin-tooltip-bg-color);
}

/******************************************************************
 * Captcha
 * .wgc-skin-captcha
 ******************************************************************/
.steam-splash .wgc-skin-captcha {
	background-color: var(--skin-captcha-bg-color);
}

.steam-splash .wgc-skin-captcha .wgc-skin-link svg path {
	fill: var(--skin-color-blue);
}

.steam-splash .wgc-skin-captcha .wgc-skin-input,
.steam-splash .wgc-skin-captcha .wgc-skin-input:hover,
.steam-splash .wgc-skin-captcha .wgc-skin-input:focus {
	font-size: var(--skin-font-size-small);
}

/******************************************************************
 * Select - Country Select
 * .wgc-skin-select // Need to use with class .select__*
 ******************************************************************/
.steam-splash .wgc-skin-select .select__control {
	border: 1px solid var(--skin-color-white-20);
	background: var(--skin-color-gray-30);
	backdrop-filter: var(--skin-backdrop-filter);
	font-size: var(--skin-font-size);
}

.steam-splash .wgc-skin-select .select__control:hover,
.steam-splash .wgc-skin-select .select__control--menu-is-open,
.steam-splash .wgc-skin-select .select__control--is-focused {
	border: 1px solid var(--skin-color-white-40);
	background: var(--skin-color-gray-50);
	backdrop-filter: var(--skin-backdrop-filter);
    outline: 0 none !important;
}

.steam-splash .wgc-skin-select .select__single-value {
	color: var(--skin-color-white);
}

.steam-splash .wgc-skin-select .select__menu {
	background: var(--skin-drop-menu-bg-color);
	border: 0 none;
	padding: 0;
}

.steam-splash .wgc-skin-select .select__menu-list {
	padding: 0;
}

.steam-splash .wgc-skin-select .select__option {
    color: var(--skin-color-white);
    border-bottom: 1px solid var(--skin-color-white-20);
    padding: 0.87336vh 1.16448vh;
    height: auto;
    font-size: var(--skin-font-size);
}

.steam-splash .wgc-skin-select .select__option:hover,
.steam-splash .wgc-skin-select .select__option:active {
	background: var(--skin-color-dark-blue-active);
}

/******************************************************************
 * Select - Realm Select
 * .wgc-skin-select // Need to use with class .dropdown__*
 * .wgc-skin-select--realm-selector - only for width 
 ******************************************************************/
.steam-splash .wgc-skin-select--realm-selector {
	min-width: 35vh; /* ~ 240px; */
}

.steam-splash .wgc-skin-select .dropdown__control {
	border: 1px solid var(--skin-color-white-20);
	background: var(--skin-color-gray-30);
	backdrop-filter: var(--skin-backdrop-filter);
	min-height: var(--skin-input-field-height);
	font-size: var(--skin-font-size);
	padding: 0 1.74672vh;
}

.steam-splash .wgc-skin-select .dropdown__value-container {
    padding: 0;
}

.steam-splash .wgc-skin-select .dropdown__control:hover,
.steam-splash .wgc-skin-select .dropdown__control--menu-is-open,
.steam-splash .wgc-skin-select .dropdown__control--is-focused {
	border: 1px solid var(--skin-color-white-40);
	background: var(--skin-color-gray-50);
	backdrop-filter: var(--skin-backdrop-filter);
    outline: 0 none !important;
    color: var(--skin-color-white) !important;
}

.steam-splash .wgc-skin-select .dropdown__single-value {
	color: var(--skin-color-white) !important;
	font-size: var(--skin-font-size);
}

.steam-splash .wgc-skin-select .dropdown__menu {
	background: var(--skin-drop-menu-bg-color);
	border: 0 none;
	padding: 0;
	margin: 0.7278vh 0 0 0;
}

.steam-splash .wgc-skin-select .dropdown__menu-list {
	width: 100%;
	padding: 0;
	display: block;
}

.steam-splash .wgc-skin-select .dropdown__option {
    color: var(--skin-color-white);
    border-bottom: 1px solid var(--skin-color-white-20);
    padding: 0.87336vh 1.16448vh;
    height: auto;
}

.steam-splash .wgc-skin-select .dropdown__option:hover,
.steam-splash .wgc-skin-select .dropdown__option:active {
	background: var(--skin-color-dark-blue-active);
}

.steam-splash .wgc-skin-select .dropdown__option span {
	color: inherit;
 	font-size: var(--skin-font-size);
}
.steam-splash .wgc-skin-select .dropdown__option--is-focused span {
	border-bottom: 0 none;
}


/******************************************************************
 * Realm Label
 * .wgc-skin-realm-label
 ******************************************************************/
.steam-splash .wgc-skin-realm-label {
	border-radius: 0;
}


/******************************************************************
 * Progress Bar
 * .wgc-skin-progress-bar
 * .wgc-skin-progress-bar--overlay
 ******************************************************************/
.steam-splash .wgc-skin-progress-bar {
	background-color: var(--skin-color-white-20);
}

.steam-splash .wgc-skin-progress-bar__overlay {
	background: var(--skin-progress-bar-color);
}