@charset "utf-8";:root {
	--color-white: #fff;
	--color-light: #2fa5d4;
	--color-light-medium: #278ab3;
	--color-dark-medium: #182d4f;
	--color-dark-border: #1f5e82;
	--color-dark: #051021;
	--color-inputField: #4e5052;
	--color-background-one: #232525;
	--color-background-two: #323436;
	--color-border-one: #161616;
}

.character-designer {
	max-width: 1168px;
	width: calc(100% + 30px);
	margin-left: -15px;
	/* height: 850px; */
	display: flex;
	flex-direction: column;
	font-family: 'Eurofont';
	position: relative;
	z-index: 1;
}

.character-designer .click-to-load-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.character-designer .ctl-btn {
	pointer-events: auto;
	height: 34px;
	width: 180px;
	outline: none;
	padding: 0 5px;
	margin: 0;
	color: white;
	border: 1px solid #000;
	box-shadow: 1px 1px 2px rgb(0 0 0 / 35%);
	background-color: var(--color-light);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Eurofont';
	font-size: 15px;
	text-shadow: 1px 1px 1px rgb(0 0 0);
}

.character-designer .ctl-btn:hover {
	cursor: pointer;
}

.character-designer input::-webkit-outer-spin-button,
.character-designer input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.character-designer input[type=number] {
	-moz-appearance: textfield;
}

#toonScene {
	top: 27px;
	left: 13px;
	position: relative;
	pointer-events: auto;
	border-radius: 6px;
	overflow: hidden;
}

#toonSceneCanvas {
	width: 761px;
	height: 789px;
}

.character-designer button {
	background-image: none;
	border: none;
}

/* Bottom Bar */

.bottom-bar {
	width: 100%;
	height: 83px;
	background-image: url(/tormak/characterdesigner/img/background/bground_26.png), url(/tormak/characterdesigner/img/background/bground_33.png);
	background-repeat: no-repeat, no-repeat;
	background-position: bottom left, bottom right;
}

.bottom-wrapper {
	display: flex;
	align-items: center;
	top: 35px;
	left: 20px;
	position: relative;
}

.bottom-bar label {
	color: #cef5ff;
	text-shadow: 1px 1px 1px rgb(0 0 0);
	display: flex;
	align-items: center;
}

.bottom-bar span {
	margin-right: 8px;
}

.bottom-bar #share-input,
.bottom-bar .char-button {
	background: #286076;
	height: 21px;
	display: inline-flex;
	align-items: center;
	padding-left: 8px;
	padding-right: 8px;
	color: #fff;
	border: 1px solid #2b8cb4;
	box-sizing: border-box;
	border-radius: 3px;
	cursor: pointer;
	font-family: "Eurofont";
	font-size: 15px;
	text-shadow: 1px 1px 1px rgb(0 0 0);
}

.bottom-bar .char-button:hover {
	background: #16495e;
}

.bottom-bar .char-button:active {
	background: #143e4f;
}

#share-input {
	min-width: 300px;
}

#share-input.success {
	color: #baffba;
}

/* Random Button */
.random-btn-wrapper {
	position: relative;
	height: max-content;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	top: 6px;
	right: 15px;
	cursor: pointer;
	z-index: 1;
}

.random-btn {
	width: 30px;
	height: 30px;
	cursor: pointer;
	background-image: url(/tormak/characterdesigner/img/ui/dice.png);
	background-repeat: no-repeat;
	background-position: top left;
}

.random-btn:hover {
	background-position: bottom left;
}

/* Menu Styles */
.character-designer .menu-bar {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	background-image: url(/tormak/characterdesigner/img/background/bground_01.png), url(/tormak/characterdesigner/img/background/bground_07.png);
	background-repeat: no-repeat, no-repeat;
	background-position: top left, top right;
	height: 60px;
}

.character-designer .btn-container {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	padding-left: 23px;
	margin-bottom: -10px;
	position: relative;
	height: max-content;
	top: 16px;
}

.character-designer .btn-container > button {
	margin-left: 5px;
	position: relative;
}

.character-designer .menu-btn,
.character-designer .menu-btn__disabled {
	background: url(/tormak/characterdesigner/img/ui/menuBtn.png) repeat-x top left;
	border: none;
	color: #fff;
	margin: 0;
	border-top: 1px solid #39c7ef;
	cursor: pointer;
	text-shadow: 1px 1px 1px rgb(0 0 0);
	font-family: 'Eurofont';
	box-shadow: 0 -1px 0 0 #336289;
	padding: 5px 10px 10px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	line-height: 14px;
}

.character-designer .menu-btn::before,
.character-designer .menu-btn__disabled::before {
	content: "";
	display: block;
	position: absolute;
	top: 1px;
	left: -1px;
	height: 21px;
	width: 1px;
	background-color: #39c7ef;
	border-left: 1px solid #336289;
	border-top-left-radius: 3px;
}

.character-designer .menu-btn::after,
.character-designer .menu-btn__disabled::after {
	content: "";
	display: block;
	position: absolute;
	top: 1px;
	right: -1px;
	height: 21px;
	width: 1px;
	background-color: #39c7ef;
	border-right: 1px solid #336289;
	border-top-right-radius: 3px;
}

.character-designer .menu-btn__disabled {
	color: #9dcbe0;
	text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);
	cursor: default;
}

.character-designer .menu-btn:hover {
	background-color: var(--color-light-medium);
}

.character-designer .menu-btn:focus {
	background-color: var(--color-light-medium);
	outline: none;
}

/* The container <div> - needed to position the dropdown content */
.character-designer .dropdown {
	position: relative;
	display: inline-block;
	margin-left: 5px;
}

/* Dropdown Content (Hidden by Default) */
.character-designer .dropdown-content {
	display: none;
	position: absolute;
	background-color: #4ca9d4;
	box-shadow: none;
	/* box-shadow: -2px 2px 3px 0px hsl(0deg 0% 0% / 35%); */
	z-index: 2;
}

.character-designer .dropdown-content .menu-btn {
	border: none;
	box-shadow: none;
	background: #4bafde;
}

.character-designer .appear {
	display: flex;
	flex-direction: column;
}

#fileLoader {
	display: none;
}

/* Embedded Fixes */

.rt-container article.item-page .article-info {
	float: right;
}

/* Tab Stuff */
.character-designer .tab-parent {
	width: 1149px;
	height: 870px;
	background-image: url(/tormak/characterdesigner/img/ui/creator_main_container.png);
	background-repeat: no-repeat;
}

.character-designer .tab-container {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(360px, 1fr) 365px;
	background-image: url(/tormak/characterdesigner/img/background/bground_08.png), url(/tormak/characterdesigner/img/background/bground_16.png);
	background-repeat: no-repeat, no-repeat;
	background-position: top left, top right;
	min-height: 768px;
}

/* .character-designer .tab-container::after {
	content: "";
	width: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-image: url(../img/background/bground_27.png),
		url(../img/background/bground_35.png);
	background-repeat: repeat-y, repeat-y;
	background-position: top left, top right;
	z-index: -1;
} */

.character-designer .dynamic-content-container {
	position: relative;
	background-image: url(/tormak/characterdesigner/img/background/bground_04.png), url(/tormak/characterdesigner/img/background/bground_30.png), url(/tormak/characterdesigner/img/background/bground_13.png);
	background-position: top left, bottom left, top 60px left;
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-size: auto, auto, 43px calc(100% - 143px);
	margin-top: -60px;
	padding-top: 60px;
	padding-bottom: 83px;
	margin-bottom: -83px;
}

.character-designer .dynamic-content-container::before {
	content: "";
	display: block;
	width: 43px;
	position: absolute;
	top: 60px;
	left: 0;
	height: calc(100% - 143px);
	background-image: url(/tormak/characterdesigner/img/background/bground_13.png);
	background-position: top left;
	background-repeat: no-repeat;
	z-index: -1;
}

.character-designer .dynamic-content-container::before {
	content: "";
	display: block;
	width: calc(100% - 126px);
	position: absolute;
	top: 60px;
	left: 43px;
	height: calc(100% - 143px);
	background-image: url(/tormak/characterdesigner/img/background/bground_15.png);
	background-position: top left;
	background-repeat: repeat-x;
	z-index: -1;
	pointer-events: none;
}

.character-designer .dynamic-content-container::after {
	content: "";
	display: block;
	width: calc(100% - 126px);
	position: absolute;
	top: 0;
	left: 43px;
	height: 100%;
	background-image: url(/tormak/characterdesigner/img/background/bground_06.png), url(/tormak/characterdesigner/img/background/bground_32.png);
	background-position: top left, bottom left;
	background-repeat: repeat-x, repeat-x;
	pointer-events: none;
	z-index: -1;
}

.canvas-wrapper {
	position: absolute;
	width: calc(100% + 10px);
	height: calc(100% + 12px);
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	pointer-events: none;
}

.character-designer .model-canvas-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-top: -60px;
	padding-top: 60px;
	pointer-events: none;
}

.character-designer .model-canvas-container::before {
	content: "";
	display: block;
	width: calc(100% - 51px);
	position: absolute;
	top: 60px;
	left: 51px;
	height: calc(100% - 60px);
	background-image: url(/tormak/characterdesigner/img/background/bground_12.png);
	background-position: top left;
	background-repeat: repeat-x;
	z-index: -1;
}

.character-designer .model-canvas-container::after {
	content: "";
	display: block;
	width: calc(100% - 360px);
	position: absolute;
	top: 0;
	left: 360px;
	height: 60px;
	background-image: url(/tormak/characterdesigner/img/background/bground_02.png);
	background-position: top left;
	background-repeat: repeat-x;
	z-index: -1;
}

.character-designer .model-canvas-container > .canvas-wrapper::after {
	content: "";
	display: block;
	width: calc(100% - 658px);
	position: absolute;
	bottom: -71px;
	right: 10px;
	height: 83px;
	background-image: url(/tormak/characterdesigner/img/background/bground_29.png);
	background-position: top left;
	background-repeat: repeat-x;
	z-index: -1;
}

.character-designer .model-canvas-container > .loader-content-container::after {
	content: "";
	display: block;
	width: calc(100% - 648px);
	position: absolute;
	bottom: -83px;
	right: 0;
	height: 83px;
	background-image: url(/tormak/characterdesigner/img/background/bground_29.png);
	background-position: top left;
	background-repeat: repeat-x;
	z-index: -1;
}

.character-designer .model-canvas-container > .click-to-load-container::after {
	content: "";
	display: block;
	width: calc(100% - 648px);
	position: absolute;
	bottom: -83px;
	right: 0;
	height: 83px;
	background-image: url(/tormak/characterdesigner/img/background/bground_29.png);
	background-position: top left;
	background-repeat: repeat-x;
	z-index: -1;
}

/* <------------ Dynamic Content Styles ------------> */

/* Character */
.dynamic-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}

/* Species */
.species-container {
	position: relative;
	left: 5px;
	width: calc(100% - 75px);
	height: 107px;
	overflow-y: scroll;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.species-grid {
	padding: 0px;
	width: 275px;
	height: 160px;
	display: grid;
	grid-template-columns: 50px 50px 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
	column-gap: 5px;
	row-gap: 5px;
}

.species-img {
	border-radius: 8px;
	border: 1px solid var(--color-light);
	width: 50px;
	height: 50px;
	opacity: 0.65;
}
.species-img:hover {
	cursor: pointer;
	opacity: 1;
}
.species-img__selected {
	border-radius: 8px;
	border: 1px solid #fcff58;
	opacity: 1;
}
/* Scroll bar styles*/
/* Width */
.blue-scrollbar::-webkit-scrollbar {
	width: 10px;
	cursor: pointer;
}
/* Track */
.blue-scrollbar::-webkit-scrollbar-track {
	background: transparent;
}
/* Handle */
.blue-scrollbar::-webkit-scrollbar-thumb {
	border-radius: 15px;
	background: var(--color-light-medium);
	cursor: pointer;
}
/* Handle on hover */
.blue-scrollbar::-webkit-scrollbar-thumb:hover {
	background: var(--color-light);
}
/* Hide Ends */
.blue-scrollbar::-webkit-scrollbar-button:vertical:decrement,
.blue-scrollbar::-webkit-scrollbar-button:vertical:increment,
.blue-scrollbar::-webkit-scrollbar-button:vertical:decrement:hover,
.blue-scrollbar::-webkit-scrollbar-button:vertical:increment:hover {
	background: none;
	width: 0;
	height: 0;
	display: none;
}

/* Sliders */
.character-designer .slider-instance-box {
	padding-top: 5px;
	margin-bottom: 5px;
	width: 100%;
}
.character-designer .slider-label-container {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.character-designer .slider-label {
	color: var(--color-white);
	font-size: 14px;
}
.character-designer .slider-container {
	top: 5px;
	left: 5px;
	position: relative;
	width: calc(100% - 75px);
	display: flex;
	flex-direction: column;
	align-items: center;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	flex-grow: 1;
}

.character-designer .slider-input-val {
	background: var(--color-dark-medium);
	outline: none;
	border: 1px solid var(--color-dark-medium);
	border-radius: 4px;
	width: 21px;
	height: 19px;
	text-align: center;
	color: white;
	font-size: 14px;
	font-family: 'Eurofont';
	text-shadow: 1px 1px 1px #000000;
	padding: 1px;
	background: rgb(15 50 71 / 35%);
	border: none;
	box-sizing: border-box;
}
.character-designer .slider-input-val:hover {
	background: var(--color-dark);
}
.character-designer .custom-slider-holder {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.character-designer .custom-slider-background {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
}

.character-designer .custom-slider-wrapper {
	flex-grow: 1;
	height: 22px;
	background-image: url(/tormak/characterdesigner/img/ui/slider_left.png), url(/tormak/characterdesigner/img/ui/slider_right.png);
	background-position: center left, center right;
	background-repeat: no-repeat, no-repeat;
	position: relative;
	z-index: 1;
	cursor: pointer;
	margin: 0 2px;
}

.character-designer .custom-slider-wrapper::after {
	content: "";
	display: block;
	width: calc(100% - 22px);
	height: 22px;
	position: absolute;
	top: 0;
	left: 11px;
	background-image: url(/tormak/characterdesigner/img/ui/slider_tile.png);
	background-position: center;
	background-repeat: repeat-x;
	z-index: -2;
}

.character-designer .slider {
	margin: 0;
	-webkit-appearance: none;
	width: 100%;
	height: 22px;
	border-radius: 0;
	background-color: transparent;
	outline: none;
	padding: 0;
	border: 0;
	line-height: 18px;
	cursor: pointer;
}

.character-designer .tick-container {
	position: absolute;
	width: calc(100% - 20px);
	top: 0;
	left: 10px;
	height: 100%;
	z-index: -1;
	display: flex;
}

.character-designer .tick-container > i {
	width: 1px;
	height: 16px;
	flex-grow: 1;
	margin-top: 3px;
}

.character-designer .tick-container > i:last-child {
	border-right: 1px solid #082638;
}

.character-designer .tick-container > i {
	border-left: 1px solid #082638;
}

.character-designer .slider::-webkit-slider-thumb {
	z-index: 2;
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50px;
	border: 2px solid #f5cd2c;
	background-color: #d4ad4c;
	cursor: pointer;
}
.character-designer .slider::-moz-range-thumb {
	z-index: 2;
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50px;
	border: 2px solid #f5cd2c;
	background-color: #d4ad4c;
	cursor: pointer;
}
.character-designer .arrow-right,
.character-designer .arrow-left {
	border: 1px solid #278ab3;
	border-radius: 6px;
	height: 21px;
	width: 21px;
	background-color: var(--color-dark);
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
}

.character-designer .arrow-left {
	background: url(/tormak/characterdesigner/img/ui/arrow.png) no-repeat top -1px left 5px;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

.character-designer .arrow-right {
	background: url(/tormak/characterdesigner/img/ui/arrow.png) no-repeat top -1px left 5px;
}

.character-designer .arrow-left:hover {
	background: url(/tormak/characterdesigner/img/ui/arrow.png) no-repeat top -22px left 5px;
	border: 1px solid #5bb8df;
}

.character-designer .arrow-right:hover {
	background: url(/tormak/characterdesigner/img/ui/arrow.png) no-repeat top -22px left 5px;
	border: 1px solid #5bb8df;
}

/* Gender and Class */
.gender-and-class-container {
	top: 5px;
	left: 5px;
	position: relative;
	width: calc(100% - 75px);
	min-height: 86px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.gender-container {
	height: 100%;
	width: 42px;
	display: flex;
	flex-direction: column;
}
.class-container {
	height: 100%;
	width: 174px;
	display: grid;
	grid-template-columns: 42px 42px 42px 42px;
	grid-template-rows: 42px 42px;
	column-gap: 2px;
	row-gap: 2px;
}
.gender-class-img__background {
	width: 40px;
	height: 40px;
	background-color: var(--color-dark);
	border-radius: 8px;
}
.gender-class-img {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	border: 1px solid var(--color-light);
	opacity: 0.65;
}
.gender-class-img:hover {
	cursor: pointer;
	opacity: 1;
}
.gender-class-img__selected {
	border-radius: 8px;
	border: 1px solid #fcff58;
	opacity: 1;
}

/*Outfit Tab Styles*/
/* Style the buttons that are used to open and close the accordion panel */
.outfit-content-grid {
	display: grid;
	grid-template-rows: 50px 670px;
}
.character-designer .accordions-container {
	width: 100%;
}
.character-designer .accordion {
	background-color: var(--color-dark);
	color: var(--color-white);
	cursor: pointer;
	padding: 18px 14px;
	width: 100%;
	text-align: left;
	border: none;
	outline: none;
	transition: 0.4s;
}
/* Style the accordion panel. Note: hidden by default */
.character-designer .panel {
	padding: 0 18px;
	min-width: 310px;
	min-height: 68px;
	color: var(--color-white);
	background-color: var(--color-dark-medium);
	display: none;
}
.character-designer .item-container {
	width: 310px;
	height: 68px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.item-preview__body {
	box-sizing: border-box;
	width: 300px;
	height: 54px;
	background-color: var(--color-dark);
	border-radius: 8px;
	border: 1px solid var(--color-light);
	display: flex;
	align-items: center;
	margin-top: 5px;
	color: var(--color-white);
}
.item-preview__img {
	margin-left: -1px;
	cursor: pointer;
	width: 54px;
}

.item-preview__img > a {
	display: block;
}

.item-preview__img:hover {
	cursor: pointer;
}

.item-preview__img > a > div {
	margin: 0;
	height: 54px;
}

.item-preview__img > a > div.torctip_image_legendary.torctip_image:not(.small_border):not(:empty),
.item-preview__img > a > div.torctip_image_legacy.torctip_image:not(.small_border):not(:empty) {
	margin: 6px 0 0 -6px;
	width: 54px;
}

.item-preview__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-size: 14px;
	flex-grow: 1;
	height: 100%;
	justify-content: center;
	padding-right: 5px;
}
.item-preview__info > div {
	font-size: 12px;
}
.item-preview-info-container {
	padding: 5px;
	display: flex;
	flex-grow: 1;
	flex-wrap: nowrap;
	height: 54px;
	box-sizing: border-box;
}
.type-container {
	height: 100%;
	width: max-content;
	font-size: 14px;
	display: flex;
	flex-direction: column;
	justify-content: end;
}

.type-container > div {
	font-size: 12px;
}

.type-container > div > div {
	float: right;
}

.character-designer .search-container {
	width: 100%;
	height: 50px;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.character-designer .search-bar {
	color: var(--color-white);
	height: 20px;
	background-color: var(--color-dark);
	border: none;
	border-radius: 5px;
}
.search-bar:focus {
	outline: none;
	border: 1px solid var(--color-light);
}

.canvas-overlay {
	display: flex;
	position: absolute;
	top: 60px;
	left: 39px;
	width: calc(100% - 41px);
	height: calc(100% - 60px);
	user-select: none;
	pointer-events: none;
	justify-content: space-between;
}

.canvas-right-side__container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
}

.gradient-canvas-selector__container__background {
	width: 162px;
	height: 110px;
	background-image: url(/tormak/characterdesigner/img/ui/Gradient-canvas-background.png);
	background-size: 162px 110px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.gradient-canvas-selector__container {
	padding-top: 6px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
}
.gradient-canvas-selector {
	width: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#colorGradientCanvas {
	margin-top: 4px;
	height: 20px;
	width: 140px;
}

.gradient-canvas-selector__label {
	padding: 5px;
	align-self: flex-start;
	color: white;
	font-size: 12px;
}
.gradient-canvas-selector__colors-container {
	margin-top: 4px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	padding-top: 2px;
	padding-bottom: 3px;
}
.gradient-canvas-selector__color-input {
	pointer-events: auto;
	display: inline-block;
	border: none;
	outline: none;
	padding: 0;
	margin: 0;
	background-color: #0c264d;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.gradient-canvas-selector__color-input:focus {
	outline: none;
}
.gradient-canvas-selector__color-input:hover {
	background-color: #154080;
}

.canvas-view-controls {
	display: grid;
	grid-template-rows: repeat(7, 20px);
	row-gap: 5px;
}

.canvas-view-controls__btn {
	pointer-events: auto;
	border-radius: 4px;
	border: 1px solid var(--color-light);
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url(/tormak/characterdesigner/img/ui/squareBackgrounds.png) no-repeat top left;
	background-size: contain;
}

.canvas-view-controls__btn > img {
	max-width: 20px;
	max-height: 20px;
}

.control-btn-img {
	cursor: pointer;
}

/* Slots */
.character-designer .slots-grid {
	position: relative;
	display: grid;
	top: 0;
	left: 0;
	pointer-events: auto;
	grid-template-rows: repeat(8, 64px);
	row-gap: 5px;
}
.character-designer .slot-container {
	background-image: url(/tormak/characterdesigner/img/empty_gear_imgs/slot-container-with-unify.png);
	background-repeat: no-repeat;
	border-radius: 8px;
	height: 64px;
	width: 83px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	cursor: pointer;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.character-designer .slot-container .slot {
	background-image: url(/tormak/characterdesigner/img/empty_gear_imgs/slots.png);
	background-repeat: no-repeat;
	background-position: -576px 0;
	width: 64px;
	height: 64px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: -1px;
}

.character-designer .slot-container .slot .torctip_image_legacy,
.character-designer .slot-container .slot .torctip_image_legendary {
	margin: 6px 0 0 -6px;
}

#slotFace .slot {
	background-position: -320px 0;
}
#slotFace .slot:hover {
	background-position: -320px -64px;
}

#slotChest .slot {
	background-position: 0 0;
}
#slotChest .slot:hover {
	background-position: 0 -64px;
}

#slotWrists .slot {
	background-position: -64px 0;
}
#slotWrists .slot:hover {
	background-position: -64px -64px;
}

#slotHands .slot {
	background-position: -128px 0;
}
#slotHands .slot:hover {
	background-position: -128px -64px;
}

#slotWaist .slot {
	background-position: -192px 0;
}
#slotWaist .slot:hover {
	background-position: -192px -64px;
}

#slotLegs .slot {
	background-position: -704px 0;
}
#slotLegs .slot:hover {
	background-position: -704px -64px;
}

#slotFeet .slot {
	background-position: -256px 0;
}
#slotFeet .slot:hover {
	background-position: -256px -64px;
}

#slotDye {
	background-image: none;
	width: 64px;
}

#slotDye::before {
	content: "";
	position: absolute;
	pointer-events: none;
	width: 56px;
	height: 56px;
	border: 1px solid var(--color-light);
	top: 3px;
	left: 3px;
	z-index: 2;
	border-radius: 5px;
}

#slotDye span.unify-colors-off,
#slotDye span.unify-colors-on {
	display: none;
}

#slotDye .slot {
	background-position: -896px 0;
	margin-left: 0;
}

#slotDye .slot:hover {
	background-position: -896px -64px;
	margin-left: 0;
}

.dyeslot {
	transform: scale(0.95);
}

.dyeslot {
	width: 20px;
	height: 20px;
	display: block;
}

.dyeslot a {
	height: 100%;
	width: 100%;
	display: block;
}

.character-designer .slot-container > img {
	width: 54px;
	height: 54px;
}

.character-designer .slot-container > a {
	display: block;
}

.character-designer .slot-container .torctip_image {
	margin: 0;
	height: 54px;
	width: 54px;
}

.character-designer .slot-container .dyeslot .torctip_image {
	height: 100%;
	width: 100%;
	min-height: unset;
}

.character-designer .slot-container .dyeslot .torctip_image img {
	max-width: 17px;
	max-height: 17px;
	margin: 1px;
}

.dye-colors {
	position: absolute;
	background: url(/tormak/characterdesigner/img/empty_gear_imgs/slot-dye-small.png);
	background-size: 19px;
	background-position: top left;
	background-repeat: no-repeat;
	width: 19px;
	height: 19px;
	top: 19px;
	right: 5px;
	border-radius: 10px;
}

.dye-colors:hover {
	background-position: bottom left;
}

span.unify-colors-off {
	position: absolute;
	background: url(/tormak/characterdesigner/img/empty_gear_imgs/unify-colors-off-small.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 17px;
	height: 17px;
	bottom: 7px;
	right: 6px;
	border-radius: 4px;
}

span.unify-colors-off:hover {
	position: absolute;
	background: url(/tormak/characterdesigner/img/empty_gear_imgs/unify-colors-hover-small.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 17px;
	height: 17px;
	bottom: 7px;
	right: 6px;
	border-radius: 4px;
}

span.unify-colors-on,
span.unify-colors-on:hover {
	position: absolute;
	background: url(/tormak/characterdesigner/img/empty_gear_imgs/unify-colors-on-small.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 17px;
	height: 17px;
	bottom: 7px;
	right: 6px;
	border-radius: 4px;
}

.contains-img:hover {
	cursor: pointer;
}

.accordion-and-de-equip-container {
	height: 670px;
	width: 100%;
	display: grid;
	grid-template-rows: 1fr 313px;
	overflow-y: scroll;
	overflow-x: hidden;
}
/*Scroll bar styles*/
/* width */
.accordion-and-de-equip-container::-webkit-scrollbar {
	width: 10px;
}
/* Track */
.accordion-and-de-equip-container::-webkit-scrollbar-track {
	background: transparent;
}
/* Handle */
.accordion-and-de-equip-container::-webkit-scrollbar-thumb {
	border-radius: 15px;
	background: var(--color-light-medium);
}
/* Handle on hover */
.accordion-and-de-equip-container::-webkit-scrollbar-thumb:hover {
	background: var(--color-light);
}

/* <---------------------- Modal Box Styles ----------------------> */
/* body.modal-open {
	overflow: hidden;
} */
.character-designer-modal {
	position: fixed;
	z-index: 101;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: 'Eurofont';
}
.character-designer-modal .modal-content {
	background-color: var(--color-dark-medium);
	margin: 15% auto;
	padding: 5px;
	border: 1px solid var(--color-light);
	border-radius: 8px;
	width: 200px;
	height: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
}
.character-designer-modal .help-modal-content {
	background-image: url(/tormak/characterdesigner/img/ui/About-container__background.png);
	margin: 15% auto;
	width: 443px;
	height: 429px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
}
.character-designer-modal .save-modal-content {
	background-image: url(/tormak/characterdesigner/img/ui/Save-popup__background.png);
	background-size: 250px 100px;
	margin: 15% auto;
	width: 250px;
	height: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
}
.character-designer-modal .about-modal-content {
	background-image: url(/tormak/characterdesigner/img/ui/About-container__background.png);
	width: 443px;
	height: 740px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
}
.character-designer-modal .info-modal-content-container {
	padding: 50px 20px 50px 30px;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	box-sizing: border-box;
}
.character-designer-modal .info-modal-content-container__header {
	margin-top: 24px;
	color: white;
	font-size: 2em;
	font-weight: bold;
}
.character-designer-modal .info-modal-content-container__spacer {
	width: 100%;
	height: 5px;
}
.character-designer-modal .info-modal-content-container__body {
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 14px;
	padding: 0;
	font-size: 16px;
	color: white;
	max-height: 625px;
	overflow: auto;
	padding-right: 15px;
}
.character-designer-modal .save-modal-btn-container {
	width: 206px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 15px;
	margin-bottom: 5px;
}
.character-designer-modal .save-modal-btn {
	margin: 5px 0px;
	padding: 0px;
	background-color: transparent;
	width: 50px;
	height: 25px;
	border-radius: 4px;
	color: var(--color-white);
	background-image: url(/tormak/characterdesigner/img/ui/Save-button.png);
	border: none;
	outline: none;
	background-size: 50px 25px;
}
.character-designer-modal .save-modal-btn__close {
	margin: 5px 0px;
	padding: 0px;
	background-color: transparent;
	width: 50px;
	height: 25px;
	border-radius: 4px;
	color: var(--color-white);
	background-image: url(/tormak/characterdesigner/img/ui/Close-button.png);
	border: none;
	outline: none;
	background-size: 50px 25px;
}
.character-designer-modal .save-modal-btn:hover {
	cursor: pointer;
}
.character-designer-modal .save-modal-btn:focus {
	outline: none;
}
.character-designer-modal .save-modal-btn__close:hover {
	background-image: url(/tormak/characterdesigner/img/ui/Close-button__hover.png);
}
.character-designer-modal .save-modal-btn__save:hover {
	background-image: url(/tormak/characterdesigner/img/ui/Save-button__hover.png);
}
.character-designer-modal .save-modal-btn__disabled {
	background-image: url(/tormak/characterdesigner/img/ui/disable-button.png);
	pointer-events: none;
}
.character-designer-modal .save-model-text-field {
	width: 150px;
	height: 20px;
	color: var(--color-white);
	font-size: 12px;
	background-color: var(--color-dark);
	outline: none;
	border: 1px solid var(--color-light);
	border-radius: 8px;
}

.character-designer-modal .error-modal-btn-container {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 10px;
}
.character-designer-modal .error-modal-btn {
	color: var(--color-white);
	background-color: var(--color-light-medium);
	border: 1px solid var(--color-light);
	border-radius: 8px;
}
.character-designer-modal .error-modal-btn__close:hover {
	background-color: red;
}
.character-designer .errormsg {
	color: var(--color-white);
}

/* Item Search */
.modal-overlay {
	top: 0;
	left: 0;
	z-index: 100;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.75);
}

.item-search {
	position: fixed;
	z-index: 101;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: 'Eurofont';
}

.item-search .item-search__content-window {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 400px;
	height: 600px;
	background-color: var(--color-background-one);
	border-radius: 8px;
	box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 35%);
}

.item-search .item-search__content-window__main-container {
	margin-left: 14px;
	margin-bottom: 14px;
	margin-right: 14px;
	background-color: var(--color-background-two);
	border: 1px solid var(--color-border-one);
	border-radius: 8px;
	width: 372px;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: auto;
	flex-grow: 1;
}

.item-search .item-search__bar-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.item-search .item-search__dropdown-arrow {
	height: 35px;
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.item-search .item-search__dropdown-arrow__arrow {
	transform: scale(1.3, .9);
	color: #f9d643;
}

.item-search .item-search__dropdown-arrow:hover {
	background-color: #3a3d3f;
	cursor: pointer;
}

.item-search .item-search__slot-choices {
	height: 40px;
	width: 100%;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 1fr);
}

.item-search .item-search__checkbox {
	display: inline-flex;
	align-items: center;
	background: linear-gradient(to bottom, #525252 0, #525252 1px, #404040 1px, #404040 100%) !important;
}

.item-search .item-search__checkbox-container {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.item-search .item-search__slot-label {
	color: #faebd7;
	font-size: 12px;
	height: 12px;
}

.item-search .item-search__searchbar {
	height: 41.34px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}
.item-search .item-search__searchbar__input {
	border-radius: 5px;
	background: #404040 !important;
	box-shadow: none !important;
	cursor: text !important;
	border: 1px solid rgb(0, 0, 0) !important;
	outline: none;
	padding: 4px 8px;
	cursor: pointer !important;
	color: #f9d643;
	line-height: 19px;
	text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
}
.item-search .item-search__searchbar__input:-webkit-autofill,
.item-search .item-search__searchbar__input:-webkit-autofill:hover,
.item-search .item-search__searchbar__input:-webkit-autofill:focus,
.item-search .item-search__searchbar__input:-internal-autofill-selected,
.item-search .item-search__searchbar__input:-internal-autofill-selected:hover,
.item-search .item-search__searchbar__input:-internal-autofill-selected:focus {
	-webkit-text-fill-color: #f9d643;
	color: #f9d643 !important;
	-webkit-box-shadow: 0 0 0px 1000px #404040 inset !important;
	box-shadow: 0 0 0px 1000px #404040 inset !important;
	background: #404040 !important;
	text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
}

.item-search .item-search__searchbar__name {
	color: #faebd7;
	font-size: 16px;
}

.item-search .item-search__button {
	border: 1px solid rgb(0, 0, 0) !important;
	outline: none;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25) !important;
	padding: 4px 8px;
	cursor: pointer !important;
	color: #f9d643;
	line-height: 19px;
	text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
	background: linear-gradient(to bottom, #525252 0, #525252 1px, #404040 1px, #404040 100%) !important;
	margin-left: 0;
}

.item-search .item-search__button:hover {
	background: linear-gradient(to bottom, #303030 0, #303030 1px, #242424 1px, #242424 100%) !important;
}

.item-search .item-search__hr {
	background-color: #303030;
	border-left: none;
	border-right: none;
	border-top: 1px solid #000;
	border-bottom: 0;
	color: #000;
	height: 2px;
	width: 96%;
	box-sizing: border-box;
	display: block;
}
.item-search .item-search__results-container {
	width: calc(100% - 30px);
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	color: #faebd7;
	font-weight: normal;
}

/* width */
.item-search__results-container::-webkit-scrollbar {
	width: 10px;
}
/* Track */
.item-search__results-container::-webkit-scrollbar-track {
	background: transparent;
}
/* Handle */
.item-search__results-container::-webkit-scrollbar-thumb {
	border-radius: 15px;
	background: var(--color-light-medium);
}
/* Handle on hover */
.item-search__results-container::-webkit-scrollbar-thumb:hover {
	background: var(--color-light);
}

.item-search__window-info__window-name {
	text-decoration: none;
	font-size: 18px;
	padding: 10px;
}

.item-search__window-info__window-close {
	padding: 10px 15px;
	text-shadow: 1px 1px 1px rgb(0 0 0 / 65%);
}

.item-search__window-info__window-close:hover {
	cursor: pointer;
}

.item-search__window-info {
	width: 400px;
	color: white;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
	visibility: hidden; /* Hidden by default. Visible on click */
	min-width: 250px; /* Set a default minimum width */
	margin-left: -125px; /* Divide value of min-width by 2 */
	background-color: #333; /* Black background color */
	color: #fff; /* White text color */
	text-align: center; /* Centered text */
	border-radius: 2px; /* Rounded borders */
	padding: 16px; /* Padding */
	position: fixed; /* Sit on top of the screen */
	z-index: 1; /* Add a z-index if needed */
	left: 50%; /* Center the snackbar */
	bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
	visibility: visible; /* Show the snackbar */
	/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
	-webkit-animation: fadein 0.5s, fadeout 0.5s 3.6s;
	animation: fadein 0.5s, fadeout 0.5s 3.6s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
	from {
		bottom: 0;
		opacity: 0;
	}
	to {
		bottom: 30px;
		opacity: 1;
	}
}

@keyframes fadein {
	from {
		bottom: 0;
		opacity: 0;
	}
	to {
		bottom: 30px;
		opacity: 1;
	}
}

@-webkit-keyframes fadeout {
	from {
		bottom: 30px;
		opacity: 1;
	}
	to {
		bottom: 0;
		opacity: 0;
	}
}

@keyframes fadeout {
	from {
		bottom: 30px;
		opacity: 1;
	}
	to {
		bottom: 0;
		opacity: 0;
	}
}

/* Temp GUI */
.dg.ac {
	position: fixed;
	top: 240px !important;
	right: 30px !important;
	height: 0;
	z-index: 1001 !important;
}
.loader-content-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.loader-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 72px;
	height: 72px;
}

.loader-container > img {
	position: absolute;
}

.loading_tip {
	margin-top: 10px;
	color: #fff;
	font-size: 18px;
	max-width: 520px;
	z-index: 0;
}

.animBackground {
	position: absolute;
	animation: spin 3s infinite;
	animation-timing-function: linear;
	-moz-animation: spin 3s infinite;
	-moz-animation-timing-function: linear;
}

.animMidground {
	position: absolute;
	animation: spin 2.8s infinite;
	animation-timing-function: linear;
	-moz-animation: spin 2.8s infinite;
	-moz-animation-timing-function: linear;
	animation-direction: reverse;
}

.animForeground {
	position: absolute;
	animation: spin 2.6s infinite;
	animation-timing-function: linear;
	-moz-animation: spin 2.6s infinite;
	-moz-animation-timing-function: linear;
}

@-moz-keyframes spin {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}