:root {
	--bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	--bs-body-font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	--bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

#main-container > .content {
	flex-grow: 1;
}

#logo {
	width: 120px;
	height: 35px;
	background-size: 100%;
	background-image: url(../images/logo.png);
}

.sidebar-dark #logo,
.page-header-dark #logo {
	background-image: url(../images/logo-white.png);	
}

.content-side.content-side-user {
	min-height: auto;
	overflow: visible;
}

.content-side.content-side-user .dropdown-center {
	margin-left: auto;
	margin-right: auto;
}

.content-side.content-side-user .dropdown-center .btn {
    font-weight: normal;
    font-size: 14px;
}

.block-content img {
	max-width: 100%;
}

.table-px-0 {
	margin-bottom: 0;
}

.table-px-0 tr td:first-child,
.table-px-0 tr th:first-child {
	padding-left: 0;
}

.table-px-0 tr td:last-child,
.table-px-0 tr th:last-child {
	padding-right: 0;
}

.table-px-0 tr:last-child td {
	border-bottom: none;
}

.table thead th .dropdown-menu {
	text-transform: none;
	letter-spacing: normal;
}

.table td.text-center input {
	margin-left: auto;
	margin-right: auto;
}

.table td.text-end input {
	margin-left: auto;	
}

.account-header {
	border-radius: .75rem;
}

.account-collapse .si-arrow-down {
	font-size: 12px;
	margin: 0 8px;
	display: inline-block;
	transition: .2s linear;
}

.account-collapse[aria-expanded="true"] .si-arrow-down {
	transform: rotate(180deg);
}

.account-content {
	padding-top: 8px;
}

.online-badge {
	width: 8px;
	height: 8px;
	border-radius: 4px;
	padding: 0;
}

.online-badge:empty {
	display: inline-block;
}

.input-group > div[class*=' field-'],
.input-group > div[class^='field-'] {
	position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
	margin-bottom: 0 !important;
}

.input-group > div[class*=' field-'] > .form-control,
.input-group > div[class^='field-'] > .form-control,
.input-group > div[class^='field-'] > .form-select {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.input-group > .input-group-prepend ~ div[class*=' field-'] > .form-control,
.input-group > .input-group-prepend ~ div[class^='field-'] > .form-control {
	border-top-right-radius: var(--bs-border-radius);
	border-bottom-right-radius: var(--bs-border-radius);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.input-group > .form-label {
	position: absolute;
    left: 0;
    top: -.375rem;
}

.input-group:has(.form-label) {
	padding-top: 24px;
}

.input-group:has(.is-invalid) {
	margin-bottom: 1.875rem !important;;
}

.input-group.no-invalid-feedback .invalid-feedback {
	display: none !important;
}

.hero-block {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.hero-image {
    width: 58px;
    height: 58px;
    position: relative;
}

.hero-image__small {
    width: 36px;
    height: 36px;
    background-size: 40px;
}

.hero-image__placing {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 500;
    font-size: 12px;
    margin-right: 4px;
    vertical-align: 10%;
}

.hero-block .hero-image__placing {
	margin: 0 16px;
}

.hero-image__placing i {
    margin-right: 4px;
}

.hero-image__placing-1 {
    background-color: goldenrod;
}

.hero-image__placing-2 {
    background-color: silver;
}

.hero-image__placing-3 {
    background-color: brown;
}

.hero-image__placing-small {
    font-size: 9px;
    width: 24px;
    height: 24px;
}

.block-content {
	position: relative;
}

.block-content__overlay {
	z-index: 9999;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(255, 255, 255, .9);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.dark-mode .block-content__overlay {
	background-color: rgba(33, 33, 33, .9);	
}

.btn-fw {
	width: 100%;
}

body.dark-mode,
body.dark-mode #page-container {
    background-color: #1f2326;
}

body.sidebar-dark #sidebar {
	color: #e4e7ed;
	background-color: #31373d;
	box-shadow: none !important;
}

body.dark-mode #page-header {
	background-color: #1f2326 !important;
}

.payment-system-block {
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bs-body-color) !important;
}

.dark-mode .payment-system-block {
	color: #a0aab3 !important;
}

.payment-system-block .payment-system {
	max-height: 32px;
	margin-right: 8px;
}

#form-pay [role="radiogroup"],
#form-warehouse-acquire #warehouseacquire-item_id {
    --bs-gutter-x: 1.75rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

#form-pay [role="radiogroup"]>*,
#form-warehouse-acquire #warehouseacquire-item_id>* {
	flex-shrink: 0;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.l2-item {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.l2-icon {
	margin-right: 8px;
	position: relative;
}

.l2-icon,
.l2-icon > img {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.l2-icon__panel {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	pointer-events: none;
}

.l2-name__0 {
	color: gray;
}

.l2-name__2 {
	color: #ffa700;
}

.l2-name__3 {
	color: #FF4141;
}

.l2-name__4 {
	color: #1F9FFA;
}

.l2-name__5 {
	color: #E200E2;
}

.l2-grade {
	padding: 0 3px;
	min-width: 16px;
	height: 16px;
	background-color: #333;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	border-radius: 4px;
	margin-left: 4px;
}

.l2-add {
	margin-left: 4px;
	color: #ff3b00;
	font-weight: bold;
}

.l2-enchant {
	font-weight: bold;
	color: green;
	margin-left: 4px;
}

.l2-item__small {
	font-size: 13px;
}

.l2-item__small .l2-icon,
.l2-item__small .l2-icon > img {
	width: 24px;
	height: 24px;
}

.shop-check {
	vertical-align: -40%;
}

.form-control[type="number"] {
	padding-right: 0;
}

.shop-card-image img {
	max-height: 180px;
}

.form-check {
	position: relative;
}

/* .form-check .invalid-feedback {
	position: absolute;
	top: -32px;
	left: 0;
	background: #fff;
	border-radius: 3px;
	border: #ddd solid 1px;
	padding: 3px;
	font-size: 10px;
	box-shadow: 0 0 2.125rem #d8dde5;
	z-index: 10;
	min-width: 200px;
} */

#character-preview {
 	background: url(/images/panel/nick_title_color_preview.png) no-repeat center;
 	width: 470px;
 	height: 331px;
 	background-size: 100%;
 	margin: 32px auto;
 	color: #fff;
 	font-family: Tahoma, sans-serif;
 	font-size: 13px;
 	text-align: center;
}

#character-preview__title {
	padding-top: 83px;
}

#character-preview__title,
#character-preview__nickname {
	height: 21px;
}

#color-picker {
	display: flex;
	justify-content: space-between;
}

.form-check-input__color-picker {
	width: 32px;
	height: 32px;
}

.alert-float .alert:not(.alert-no-float) {
	position: fixed;
	right: 28px;
	top: 80px;
	z-index: 9999;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
}

.block-ribbon__container {
	position: absolute;
	right: -16px;
	top: 16px;
	display: flex;
	flex-direction: row-reverse;
}

.block-ribbon__container .ribbon-box {
	position: static;
	margin-left: 8px;
}

#market-purchase__wrapper {
	position: relative;
	overflow: hidden;
}

#market-purchase__content {
	position: absolute;
	right: -9999px;
	background: #fff;
	width: 400px;
	height: 100%;
}

body.sidebar-dark #market-purchase__content {
	background: #31373d;
}

@media (max-width: 767.98px) {
	.nav-link {
		font-size: 14px;
		padding: 8px;
	}

	.block-ribbon__container {
		right: 16px;
	}

	.l2-item {
		font-size: 14px;
	}
}

.item-attribute-list {
	display: flex;
	align-items: center;
}

.item-attribute {
	margin-right: 8px;
}

.att-icon {
	padding: 0 3px;
	height: 12px;
	display: inline-block;
	vertical-align: 10%;
    border-radius: 3px;
    font-size: 8px;
    text-align: center;
	font-style: normal;
}

.att-icon-fire,
.att-icon-0 {
	background: #972908;
	color: #fff;
}

.att-icon-water,
.att-icon-1 {
	background: #2d5aff;
	color: #fff;
}

.att-icon-wind,
.att-icon-2 {
	background: #74efc7;
	color: #000;
}

.att-icon-earth,
.att-icon-3 {
	background: #2d5304;
	color: #fff;
}

.att-icon-holy,
.att-icon-4 {
	background: #a5e6ff;
	color: #000;
}

.att-icon-unholy,
.att-icon-5 {
	background: #9100ff;
	color: #fff;
}

.message {
	width: auto;
	border-radius: 0 10px 10px 0;
	background-color: #fbfbfb;
	transition: .2s linear;
	align-self: flex-start;
	margin-bottom: 8px;
}

.message[data-type="0"] {
	text-align: right;
	align-self: flex-end;
	border-radius: 10px 0 0 10px;
	background-color: #EFFDDE;
}

body.dark-mode .message {
	background-color: #24282c;
}

body.dark-mode .message[data-type="0"] {
	background-color: #2B5278;
	color: #E4ECF2;
}

.message-meta {
	font-size: 11px;
}

.message[data-type="0"] .message-meta {
	color: #57B84C;
}

.message[data-type="0"] .message-meta .text-muted {
	color: #57B84C !important;
	opacity: .8;
}

body.dark-mode .message[data-type="0"] .message-meta {
	color: #6BBFFF;
}

body.dark-mode .message[data-type="0"] .message-meta .text-muted {
	color: #6BBFFF !important;
}

.message:hover {
	background-color: #f4f4f4;
}

.message[data-type="0"]:hover {
	background-color: #f0fae4;
}

body.dark-mode .message[data-type="0"]:hover {
	background-color: #346392;
}

body.dark-mode .message:hover {
	background-color: #373d44;
}

.message-content__text {
	white-space: pre-line;
}

.message-content__text p {
	margin: 4px 0;
}

.message-attachements {
	display: flex;
	margin-top: 16px;
}

.message[data-type="0"] .message-attachements {
	justify-content: flex-end;
}

.message-attachement {
	margin-right: 4px;
	max-width: 100px;
	max-height: 100px;
	border-radius: 5px;
	overflow: hidden;
	position: relative;
}

.message[data-type="0"] .message-attachement {
	margin-right: 0;
	margin-left: 4px;
}

.message-attachement img {
	max-width: 100%;
}

.message-attachement > .btn {
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 1000;
}

#chat-window-content {
	display: flex;
	flex-direction: column;
}

#chat-window-messages {
	height: calc(100% - 200px);
	overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

#chat-window-add-message {
	margin-top: auto;
}

#chat-send-message {
	position: relative;
	padding-bottom: 56px;
	background-color: #fff;
    background-clip: padding-box;
    border: var(--bs-border-width) solid #d8dde5;
    border-radius: var(--bs-border-radius);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

#chat-send-message > button[type="submit"] {
	position: absolute;
	right: 21px;
    top: 50%;
    margin-top: -19px;
}

#chat-send-message textarea {
	border: none;
	resize: none;
}

#chat-send-message textarea:focus {
	box-shadow: none;
}

#chat-send-message:has(textarea:focus) {
	box-shadow: 0 0 0 .25rem rgba(2,132,199,.25);
}

#chat-send-message:has(textarea.is-invalid:focus) {
	box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb),.25);
}

#chat-send-message__controls {
	position: absolute;
	bottom: 8px;
	left: 8px;
}

#chat-send-message .invalid-feedback {
	position: absolute;
	bottom: 52px;
    left: 12px;
}

#market-order-chat #chat-send-message .invalid-feedback {
	bottom: 4px;
}

body.dark-mode #chat-send-message {
	background-color: #1b1f22;
	border-color: #383f45;
}

body.dark-mode .slick-dots li button:before {
	color: #ccc;
}

body.dark-mode .slick-dots li.slick-active button:before {
	color: #fff;
}

.text-truncate {
	overflow: hidden !important;
}

.sorter {
	font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro";
}

.sorter::after {
	content: "\f0dd";
	position: relative;
	top: -3px;
}

.sorter.desc::after,
.sorter-4::after {
	content: "\f0de";
	top: 3px;
}

.sortable-placeholder {
	border: #888 dashed 1px;
	border-radius: .75rem;
	margin-bottom: 2.5px;
}

#shop-total,
#total-price {
	color: var(--bs-green);
    font-weight: bold;
}

.nav-tabs-100 .nav-item {
	flex-grow: 1;
	text-align: center;
}

.nav-tabs-100 .nav-item .nav-link {
	padding-top: 18px;
	padding-bottom: 18px;
}

.nav-item .nav-item-submenu {
	list-style: none;
	padding-left: 36px;
}

@media (max-width: 991px) {
	#page-container.page-header-modern #page-header>.content-header {
		padding-top: 1.25rem;
	}
	
	#main-nav .nav-main {
		position: absolute;
		top: 68px;
		right: 8px;
		background-color: #31373d;
	}
}

.list-group-item {
	transition: 0.2s linear;
}

.dark-mode .list-group-item {
	color:#fff;
	background-color:var(--bs-body-color);
	border-color:rgb(27, 31, 34);
}

.list-group-item:hover {
	background-color: #f0f2f5;
}

.dark-mode .list-group-item:hover {
	color:#fff;
	background-color:#383f45;
}

.tr-picker {
	cursor: pointer;
}

.tr-picker .form-check {
	margin-bottom: 0;
	pointer-events: none;
}

@media (min-width: 992px) {
	.block-sticky {
		position: sticky;
		top: 96px;
	}
}