* {
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

body {
	padding-top: 75px;
	background: #02101a url(/img/body-bg.jpg) 0 49px no-repeat;
	background-size: contain;
	background-size: 100% auto;
	font-family: 'Roboto', serif;
	overflow-x: hidden;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: rgba(5, 15, 22, 0.95);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(to bottom, #2b7bb8, #1c3f63);
	border-radius: 4px;
	border: 1px solid rgba(141, 192, 224, 0.6);
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(to bottom, #37a0f2, #23527c);
}

* {
	scrollbar-width: thin;
	scrollbar-color: #2b7bb8 rgba(5, 15, 22, 0.95);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}

.trn {
	visibility: hidden;
}

.navbar-toggle {
	border-color: transparent !important;
}

.load-cog {
	color: #FFF;
	text-align: center;
	font-size: 12px;
	margin-bottom: 1em;
}

.navbar {
	background-color: rgba(0, 0, 0, .75);
	border: 0px solid transparent;
	text-transform: uppercase;
}

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
	color: #fff;
	background-color: rgba(2, 55, 76, .65);
	font-weight: 300;
}

.character-select {
	cursor: pointer;
	background-color: rgba(16, 30, 40, 0.5);
	border: 1px solid transparent !important;
	padding: 10px;
	margin-bottom: 8px;
	color: #8dc0e0;
	transition: all 0.3s ease;
	font-weight: 300;
}

.character-select:hover {
	background-color: rgba(20, 40, 50, 0.7);
	border: 1px solid rgba(141, 192, 224, 0.6) !important;
	box-shadow: 0 0 10px rgba(141, 192, 224, 0.3);
}

.character-select.active {
	color: #d5f6f9;
	text-transform: capitalize;
	background-color: rgba(20, 40, 50, 0.9);
	border: 1px solid rgba(141, 192, 224, 0.8) !important;
	box-shadow: 0 0 15px rgba(141, 192, 224, 0.5);
}

#pixie {
	z-index: 0;
	position: absolute;
	top: 0;
}

.cabal-logo-container {
	text-align: left;
}

.cabal-logo {
	height: 75px;
	margin: 2em 0 3.5em 0;
}

.panel {
	border: 0;
	border-radius: 0;
}

.list-group-item a,
.list-group-item a:focus,
.list-group-item a:hover {
	display: block;
	text-decoration: none;
}

.list-group-item.active a,
.list-group-item.active a:focus,
.list-group-item.active a:hover {
	color: white;
}

.first-content {
	position: relative;
	background-color: rgba(0, 0, 0, .55);
	padding: 2em 1.5em 1.5em 1.25em;
	z-index: 1;
}

.pj-logo {
	position: absolute;
	right: 0em;
	z-index: 0;
	top: 65px;
}


#character-list img {
	margin-right: .75em;
}

.effect {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	overflow: hidden;
}

@media (max-width: 1100px) {
	.cabal-logo-container {
		text-align: center;
	}

	.cabal-logo {
		height: 75px;
		margin: 2.5em 0 3.5em 0;
	}

	.pj-logo {
		display: none;
	}
}

#admin-shop-slot-modal {
	z-index: 2050;
}
.modal-backdrop {
	z-index: 2040;
}

.button-download {
	width: 100%;
	height: 60px;
	position: relative;
	border: solid rgba(255, 255, 255, 0.3) 1px;
	background: transparent;
	cursor: pointer;
	transition: all 1s;
}

.button-download span.icon {
	position: absolute;
	top: 11px;
	left: 25px;
	font-size: 2em;
	color: #87270d;
	text-shadow: 1px 1px 1px #f58460;
}

.button-download span.download {
	position: absolute;
	top: 10px;
	left: 65px;
	font-size: 1.25em;
	font-weight: 500;
	color: #87270d;
	text-shadow: 1px 1px 1px #f58460;
}

.button-download span.from {
	position: absolute;
	top: 32px;
	left: 67px;
	font-size: .75em;
	color: #ffdeb9;
	text-shadow: 1px 1px 1px #87270d;
}


.button-download.red {
	border: 1px solid #b92706;
	background: #c93818;
	background: -moz-linear-gradient(top, #e5a770 1%, #e85a27 4%, #c93818 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #e5a770), color-stop(4%, #e85a27), color-stop(100%, #c93818));
	background: -webkit-linear-gradient(top, #e5a770 1%, #e85a27 4%, #c93818 100%);
	background: -o-linear-gradient(top, #e5a770 1%, #e85a27 4%, #c93818 100%);
	background: -ms-linear-gradient(top, #e5a770 1%, #e85a27 4%, #c93818 100%);
	background: linear-gradient(to bottom, #e5a770 1%, #e85a27 4%, #c93818 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5a770', endColorstr='#c93818', GradientType=0);
	-webkit-box-shadow: 0px 3px 0px rgba(160, 47, 21, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 3px 0px rgba(160, 47, 21, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 3px 0px rgba(160, 47, 21, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
}

.button-download.red span.icon {
	color: #87270d;
	text-shadow: 1px 1px 1px #f58460;
}

.button-download.red span.download {
	color: #87270d;
	text-shadow: 1px 1px 1px #f58460;
}

.button-download.red span.from {
	color: #ffdeb9;
	text-shadow: 1px 1px 1px #87270d;
}



.button-download.yellow {
	border: 1px solid #d17118;
	background: #ec801a;
	background: -moz-linear-gradient(top, #ffffff 0%, #f69f28 2%, #ec801a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(2%, #f69f28), color-stop(100%, #ec801a));
	background: -webkit-linear-gradient(top, #ffffff 0%, #f69f28 2%, #ec801a 100%);
	background: -o-linear-gradient(top, #ffffff 0%, #f69f28 2%, #ec801a 100%);
	background: -ms-linear-gradient(top, #ffffff 0%, #f69f28 2%, #ec801a 100%);
	background: linear-gradient(to bottom, #ffffff 0%, #f69f28 2%, #ec801a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ec801a', GradientType=0);
	-webkit-box-shadow: 0px 3px 0px rgba(206, 109, 9, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 3px 0px rgba(206, 109, 9, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 3px 0px rgba(206, 109, 9, 1), 0px 3px 10px rgba(0, 0, 0, 0.3);
}

.button-download.yellow span.icon {
	color: #9E5900;
	text-shadow: 1px 1px 1px #f1ab5a;
}

.button-download.yellow span.download {
	color: #9E5900;
	text-shadow: 1px 1px 1px #f1ab5a;
}

.button-download.yellow span.from {
	color: #ffdeb9;
	text-shadow: 1px 1px 1px #9E5900;
}





.button-download .line {
	background: white;
	position: absolute;
	transition: none;
	transform: scale(0);
	opacity: 1;
}

.button-download .line:nth-child(1) {
	transform-origin: 100% 100%;
	height: 3px;
	width: 20%;
	bottom: 0;
}

.button-download .line:nth-child(4) {
	transform-origin: 0 100%;
	height: 3px;
	width: 20%;
	top: -1px;
	right: 0;
}

.button-download .line:nth-child(2) {
	transform-origin: 100% 100%;
	height: 100%;
	width: 3px;
	bottom: 0;
	left: -1px;
}

.button-download .line:nth-child(5) {
	transform-origin: 100% 0;
	height: 100%;
	width: 3px;
	bottom: 0;
	right: -1px;
}

.button-download .line:nth-child(3) {
	transform-origin: 0 100%;
	height: 3px;
	width: 100%;
	top: -1px;
	left: -1px;
}

.button-download .line:nth-child(6) {
	transform-origin: 100% 0;
	height: 3px;
	width: 100%;
	bottom: 0;
	right: -1px;
}

.button-download:hover>.line {
	transform: scale(1);
	opacity: 0;
	transition: all 1s;
}

.button-download:hover>.line:nth-child(2),
.button:hover>.line:nth-child(5) {
	transition-delay: 0.5s;
}

.button-download:hover>.line:nth-child(3),
.button:hover>.line:nth-child(6) {
	transition-delay: 0.9s;
}





















@keyframes movewave {
	0% {
		transform: translateX(0) translateZ(0) scaleY(1)
	}

	50% {
		transform: translateX(-25%) translateZ(0) scaleY(0.55)
	}

	100% {
		transform: translateX(-50%) translateZ(0) scaleY(1)
	}
}

.wave-wrapper {
	overflow: hidden;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	z-index: -1;
}

.wave-wrapper-inner {
	position: absolute;
	width: 100%;
	overflow: hidden;
	height: 100%;
	bottom: -1px;
}

.bg-top {
	z-index: 15;
	opacity: 0.65;
}

.bg-middle {
	z-index: 10;
	opacity: 0.75;
}

.bg-bottom {
	z-index: 5;
	opacity: 0.85;
}

.wave {
	position: absolute;
	left: 0;
	width: 200%;
	height: 100%;
	background-repeat: repeat no-repeat;
	background-position: 0 bottom;
	transform-origin: center bottom;
}

.wave-top {
	background-image: url('/img/wave-top.png');
	background-size: 50% 110px;
}

.wave-animation .wave-top {
	animation: movewave 5s linear infinite;
}

.wave-middle {
	background-image: url('/img/wave-mid.png');
	background-size: 50% 120px;
}

.wave-animation .wave-middle {
	animation: movewave 10s linear infinite;
}

.wave-bottom {
	background-image: url('/img/wave-bot.png');
	background-size: 50% 100px;
}

.wave-animation .wave-bottom {
	animation: movewave 15s linear infinite;
}













input {
	border: 1px solid #a2a2a2 !important;
	border-radius: 0 !important;
	font-size: .95em !important;
	padding: 5px;
	background-color: #f4f2ef !important;
	color: #000 !important;
}

.box-cabal input,
.box-options input {
	border: 1px solid rgba(141, 192, 224, 0.4) !important;
	background-color: rgba(16, 30, 40, 0.7) !important;
	color: #8dc0e0 !important;
	padding: 8px !important;
	transition: all 0.3s ease;
}

.box-cabal select,
.box-cabal textarea,
.box-options select,
.box-options textarea {
	border: 1px solid rgba(141, 192, 224, 0.4) !important;
	background-color: rgba(16, 30, 40, 0.7) !important;
	color: #8dc0e0 !important;
	padding: 8px !important;
	border-radius: 0 !important;
	transition: all 0.3s ease;
}

.box-cabal input:-webkit-autofill,
.box-cabal input:-webkit-autofill:hover,
.box-cabal input:-webkit-autofill:focus,
.box-options input:-webkit-autofill,
.box-options input:-webkit-autofill:hover,
.box-cabal input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px rgba(0, 0, 0, 0.75) inset;
	-webkit-text-fill-color: #fff;
}

.box-cabal input:-webkit-autofill,
.box-cabal input:-webkit-autofill:hover,
.box-cabal input:-webkit-autofill:focus,
.box-options input:-webkit-autofill,
.box-options input:-webkit-autofill:hover,
.box-cabal input:-webkit-autofill:focus {
	border: 1px solid rgba(141, 192, 224, 0.6) !important;
	-webkit-text-fill-color: #8dc0e0 !important;
	-webkit-box-shadow: 0 0 0px 1000px #141e25 inset !important;
	transition: background-color 5000s ease-in-out 0s;
	caret-color: #8dc0e0;
}

.box-cabal input:focus,
.box-options input:focus {
	border: 1px solid rgba(141, 192, 224, 0.8) !important;
	background-color: rgba(20, 40, 50, 0.9) !important;
	box-shadow: 0 0 8px rgba(141, 192, 224, 0.3) !important;
}

.box-cabal select:focus,
.box-cabal textarea:focus,
.box-options select:focus,
.box-options textarea:focus {
	border: 1px solid rgba(141, 192, 224, 0.8) !important;
	background-color: rgba(20, 40, 50, 0.9) !important;
	box-shadow: 0 0 8px rgba(141, 192, 224, 0.3) !important;
}

.box-cabal input::placeholder,
.box-options input::placeholder {
	color: rgba(141, 192, 224, 0.5);
}

.box-cabal label,
.box-options label {
	color: #8dc0e0;
	font-weight: 400;
	margin-bottom: 5px;
	display: block;
}

.input-group-addon {
	border: 1px solid #a2a2a2 !important;
	border-right: 0 !important;
	border-radius: 0 !important;
	font-size: .85em !important;
	color: #000;
	background: #f4f2ef;
}

.box-cabal .input-group-addon,
.box-options .input-group-addon {
	border: 1px solid rgba(141, 192, 224, 0.4) !important;
	border-right: 0 !important;
	background-color: rgba(16, 30, 40, 0.7) !important;
	color: #8dc0e0 !important;
	transition: all 0.3s ease;
}

button:focus {
	outline: 0;
}

.shop-slot-btn {
	position: relative;
	color: #ffffff;
	font-weight: bold;
	font-size: 0;
}

.shop-slot-btn:hover {
	color: #c2c2c2 !important;
}

.shop-slot-btn::after {
	content: attr(data-slot);
	position: absolute;
	bottom: 2px;
	right: 4px;
	font-size: 11px;
}

.shop-slot-btn.btn-primary {
	background-color: #090b0c;
	border-color: #337ab7;
}

.shop-slot-btn.btn-default {
	background-color: rgba(16, 30, 40, 0.7) !important;
	border-color: #337ab7;
}

/* Reusable admin action buttons (match side-panel style, but for inline use) */
.btn-admin {
	text-transform: uppercase;
	font-size: .9em;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .75);
	padding: .5em 18px .45em 18px;
	font-weight: 300;
	border-radius: 0;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.55);
	box-shadow: 0 1px 0 rgba(230, 245, 255, 0.75) inset;
}

.btn-admin-blue {
	background: linear-gradient(to bottom, #009EFF 0px, #0075BC 100%) repeat scroll 0 0 transparent;
	color: #FFFFFF;
}

.btn-admin-green {
	background: linear-gradient(to bottom, #88C425 0px, #519548 100%) repeat scroll 0 0 transparent;
	color: #FFFFFF;
}

/* Spacing between Max System button rows */
.admin-maxsystem-actions>[class^="col-"] {
	margin-bottom: 10px;
}

.login,
.login:hover {
	text-decoration: none !important;
}

.login input {
	border-left: 0 !important;
}

.button-login {
	width: 100%;
	cursor: pointer;
	text-transform: uppercase;
	font-size: .97em;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .75);
	padding: .65em 25px;
	font-weight: 300;
	position: relative;
}

.button-login.blue {
	background: linear-gradient(to bottom, #009EFF 0px, #0075BC 100%) repeat scroll 0 0 transparent;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.55);
	box-shadow: 0 1px 0 #E6F5FF inset;
	color: #FFFFFF;
	cursor: pointer;
	display: block;
	margin: 0 auto;
	width: 100%;
	border-right: 0;
	border-left: 0;
}

.button-login.yellow {
	background: linear-gradient(to bottom, #11c4d9 0px, #0a7a9a 100%) repeat scroll 0 0 transparent;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.55);
	box-shadow: 0 1px 0 #d4f9ff inset;
	color: #ffffff;
	cursor: pointer;
	display: block;
	margin: 0 auto;
	width: 100%;
	border-right: 0;
	border-left: 0;
}

.button-login.green {
	background: linear-gradient(to bottom, #88C425 0px, #519548 100%) repeat scroll 0 0 transparent;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.55);
	box-shadow: 0 1px 0 #e6fff2 inset;
	color: #FFFFFF;
	cursor: pointer;
	display: block;
	margin: 0 auto;
	width: 100%;
	border-right: 0;
	border-left: 0;
	margin-top: 1em;
}


.button-login.red {
	background: linear-gradient(to bottom, #c4253b 0px, #820001 100%) repeat scroll 0 0 transparent;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.55);
	box-shadow: 0 1px 0 #ffeae6 inset;
	color: #FFFFFF;
	cursor: pointer;
	display: block;
	margin: 0 auto;
	width: 100%;
	border-right: 0;
	border-left: 0;
}

.button-login .line {
	background: white;
	position: absolute;
	transition: none;
	transform: scale(0);
	opacity: 1;
}

.button-login .line:nth-child(1) {
	transform-origin: 100% 100%;
	height: 3px;
	width: 20%;
	bottom: 0;
}

.button-login .line:nth-child(4) {
	transform-origin: 0 100%;
	height: 3px;
	width: 20%;
	top: -1px;
	right: 0;
}

.button-login .line:nth-child(2) {
	transform-origin: 100% 100%;
	height: 100%;
	width: 3px;
	bottom: 0;
	left: -1px;
}

.button-login .line:nth-child(5) {
	transform-origin: 100% 0;
	height: 100%;
	width: 3px;
	bottom: 0;
	right: -1px;
}

.button-login .line:nth-child(3) {
	transform-origin: 0 100%;
	height: 4px;
	width: 100%;
	top: -1px;
	left: -1px;
}

.button-login .line:nth-child(6) {
	transform-origin: 100% 0;
	height: 4px;
	width: 100%;
	bottom: 0;
	right: -1px;
}

.button-login:hover>.line {
	transform: scale(1);
	opacity: 0;
	transition: all 1s;
}

.button-login:hover>.line:nth-child(2),
.button:hover>.line:nth-child(5) {
	transition-delay: 0.5s;
}

.button-login:hover>.line:nth-child(3),
.button:hover>.line:nth-child(6) {
	transition-delay: 0.9s;
}


svg.scifi {
	height: 450px;
	width: 450px;
	position: absolute;
	right: 70px;
	top: -55px;
}

.scifi .st0,
.scifi .st1,
.scifi .st2,
.scifi .st3 {
	fill: none;
	stroke: rgba(190, 234, 255, .15);
	stroke-width: 42;
	stroke-miterlimit: 10;
}

.scifi .st0 {
	stroke-dasharray: 12.1947, 12.1947, 12.1947, 12.1947, 12.1947, 12.1947;
}

.scifi .st1 {
	stroke-dasharray: 50, 90, 200, 30, 40, 0;
}

.scifi .st2 {
	stroke-linecap: square;
	stroke-dasharray: 120, 20, 110, 20, 140;
}

.scifi .st3 {
	stroke-width: 16;
	stroke-linecap: square;
}

.btn-maxsystem {
	background-color: rgba(16, 30, 40, 0.9);
	border: 1px solid rgba(141, 192, 224, 0.6);
	color: #8dc0e0;
	text-align: center;
	text-transform: none;
	font-weight: 400;
	margin-bottom: 10px;
	border-radius: 0;
	transition: all 0.2s ease;
	white-space: normal;
}

.btn-maxsystem:hover,
.btn-maxsystem:focus {
	background-color: rgba(20, 40, 50, 0.95);
	border-color: rgba(141, 192, 224, 0.9);
	color: #d5f6f9;
}

.admin-maxsystem-actions {
	margin-top: 10px;
}

.admin-pet-header {
	margin-bottom: 15px;
}

.admin-pet-load-col {
	margin-top: 22px;
}

@media (max-width: 767px) {
	.admin-pet-load-col {
		margin-top: 10px;
	}
}

.admin-pet-load-btn {
	width: 100%;
}

.admin-pet-buttons {
	margin-top: 10px;
}

.admin-pet-buttons .btn+.btn {
	margin-left: 10px;
}

.admin-pet-options-section {
	margin-top: 15px;
}

.admin-pet-options-scroll {
	overflow-x: auto;
	padding-bottom: 5px;
}

.admin-pet-category {
	margin-top: 10px;
}

.admin-pet-category-title {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
}

.admin-pet-category-title-normal {
	color: #5bc0ff;
}

.admin-pet-category-title-covenant {
	color: #7bd66a;
}

.admin-pet-category-trust {
	color: #d2a6ff;
}

.admin-pet-option-col {
	margin-bottom: 5px;
	padding-left: 0 !important;
}

.admin-honor-buttons {
	margin-top: 10px;
}

.admin-honor-buttons .btn+.btn {
	margin-left: 10px;
}

.admin-honor-options-section {
	margin-top: 15px;
}

.admin-honor-options-scroll {
	overflow-x: auto;
	padding-bottom: 5px;
}

.admin-honor-category {
	margin-top: 10px;
}

.admin-honor-category-title {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
}

.admin-honor-category-title-captain {
	color: #5bc0ff;
}

.admin-honor-category-title-general {
	color: #7bd66a;
}

.admin-honor-category-title-commander {
	color: #d2a6ff;
}

.admin-honor-category-title-hero {
	color: #ffb347;
}

.admin-honor-category-title-legend {
	color: #ff5c5c;
}

.admin-honor-option-col {
	margin-bottom: 5px;
	padding-left: 0 !important;
}

.admin-item-row {
	margin-top: 10px;
}

.admin-item-group {
	border: 1px solid rgba(141, 192, 224, 0.4);
	background-color: rgba(10, 20, 26, 0.9);
	padding: 10px 12px 8px 12px;
	margin-bottom: 10px;
}

.admin-item-group-title {
	font-weight: 600;
	margin-bottom: 8px;
	color: #8dc0e0;
}

.admin-item-generate-buttons {
	margin-top: 10px;
}

.admin-item-generate-buttons .btn-admin+.btn-admin {
	margin-left: 10px;
}

.admin-item-generate-main {
	margin-bottom: 10px;
}

.admin-item-generate-main .btn-admin {
	display: block;
	width: 100%;
	height: 48px;
	font-size: 14px;
	font-weight: 600;
}

.admin-item-generate-bottom .admin-item-generate-buttons {
	margin-top: 24px;
	text-align: right;
}

.admin-item-preview-group {
	text-align: center;
	width: 160px;
	height: 160px;
	margin: 0 auto;
	margin-top: 25px !important;
}

.admin-item-preview-group-items {
	text-align: center;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

.admin-item-preview-box {
	width: 96px;
	height: 96px;
	margin: 10px auto 0 auto;
	background-color: rgba(5, 10, 14, 0.95);
	border: 1px solid rgba(141, 192, 224, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
}

.admin-item-preview-box img {
	max-width: 100%;
	max-height: 100%;
}

.table-admin-dark tbody tr.active {
	background-color: rgba(36, 72, 90, 0.98) !important;
	box-shadow: inset 0 0 6px rgba(141, 192, 224, 0.5);
	color: #ffffff !important;
}

.table-admin-dark tbody tr.active>td {
	background-color: transparent !important;
	border-top-color: rgba(141, 192, 224, 0.8) !important;
}

.table-admin-dark {
	width: 100%;
	margin-top: 5px;
	margin-bottom: 15px;
	background-color: rgba(10, 20, 26, 0.95);
	color: #8dc0e0;
	border-collapse: collapse;
	border-spacing: 0;
	border: 1px solid rgba(12, 28, 38, 0.95);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.table-admin-dark thead th,
.table-admin-dark tbody td {
	border-top: 1px solid rgba(35, 80, 106, 0.7);
	border-left: 1px solid rgba(18, 46, 62, 0.85);
	padding: 8px 10px;
}

.table-admin-dark thead th {
	background-color: rgba(8, 22, 30, 0.98);
	border-bottom: 1px solid rgba(53, 124, 163, 0.9);
	font-weight: 500;
}

.table-admin-dark tbody tr:nth-child(odd) {
	background-color: rgba(11, 26, 34, 0.98);
}

.table-admin-dark tbody tr:nth-child(even) {
	background-color: rgba(15, 32, 42, 0.98);
}

.table-admin-dark tbody tr:hover {
	background-color: rgba(26, 52, 66, 0.98);
	cursor: pointer;
}

.table-admin-dark tbody tr.active {
	background-color: rgba(36, 72, 90, 0.98);
	box-shadow: inset 0 0 6px rgba(141, 192, 224, 0.5);
}

/* Ranking tabs on home (Top Level / Play Time / Guilds) */
#home-ranking-tabs {
	text-align: left;
	margin-bottom: 4px;
}

#home-ranking-tabs .btn {
	margin-right: 4px;
}

/* Use admin button style but with clear active state */
#home-ranking-tabs .btn-admin {
	min-width: 90px;
	padding-left: 14px;
	padding-right: 14px;
	border-radius: 0;
	border: 1px solid rgba(0, 0, 0, 0.7);
	box-shadow: none;
	outline: none;
}

#home-ranking-tabs .btn-admin.active {
	background: linear-gradient(to bottom, #009EFF 0px, #0075BC 100%) repeat scroll 0 0 transparent;
	color: #FFFFFF;
	border-radius: 0;
	border: 1px solid rgba(0, 0, 0, 0.7);
	box-shadow: none;
	outline: none;
}

#home-ranking-tabs .btn-admin:not(.active) {
	background-color: rgba(16, 30, 40, 0.9);
	color: #c8e7ff;
	box-shadow: none;
}

#home-ranking-tabs .btn-admin:focus,
#home-ranking-tabs .btn-admin:active,
#home-ranking-tabs .btn-admin:active:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: rgba(0, 0, 0, 0.7) !important;
}

#home-ranking-table {
	margin-top: 4px;
}

/* Character info table inside character panel */
#character-info-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	background-color: rgba(10, 20, 26, 0.98);
	color: #8dc0e0;
	font-size: 13px;
}

#character-info-table tr:nth-child(odd) td,
#character-info-table tr:nth-child(odd) th {
	background-color: rgba(11, 26, 34, 0.98);
}

#character-info-table tr:nth-child(even) td,
#character-info-table tr:nth-child(even) th {
	background-color: rgba(15, 32, 42, 0.98);
}

#character-info-table td,
#character-info-table th {
	border: 1px solid rgba(25, 68, 92, 0.9);
	padding: 6px 10px;
}

#character-info-table td {
	width: 35%;
	color: #afcce2;
}

#character-info-table th {
	width: 65%;
	text-align: left;
	color: #e0f4ff;
	font-weight: 500;
}

/* Apply the same dark theme to all Bootstrap tables */
.table,
.table-bordered,
.table-striped {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	background-color: rgba(10, 20, 26, 0.98);
	color: #8dc0e0;
	font-size: 13px;
	border: 1px solid rgba(25, 68, 92, 0.9);
}

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
	border: 1px solid rgba(25, 68, 92, 0.9);
	padding: 6px 10px;
}

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
	background-color: rgba(11, 26, 34, 0.98);
}

.table-striped > tbody > tr:nth-child(even) > td,
.table-striped > tbody > tr:nth-child(even) > th {
	background-color: rgba(15, 32, 42, 0.98);
}

.table > thead > tr > th {
	background-color: rgba(8, 22, 30, 0.98);
	color: #e0f4ff;
	font-weight: 500;
}

.box-options {
	border-style: solid;
	border-width: 73px 25px 30px 25px;
	-moz-border-image: url(/img/box-options.png) 73 25 30 25 stretch repeat;
	-webkit-border-image: url(/img/box-options.png) 73 25 30 25 stretch repeat;
	-o-border-image: url(/img/box-options.png) 73 25 30 25 stretch repeat;
	border-image: url(/img/box-options.png) 73 25 30 25 stretch repeat;
	margin-bottom: 1.75em;
}

.box-options .content {
	background-color: #101010;
	border: 1px solid #101010;
	color: #8dc0e0;
	padding: 10px;
	font-weight: 300;
	position: relative;
	width: 100.5%;
	height: 100.5%;
	margin-top: -1px;
	margin-left: -1px;
}

.box-options .title {
	position: absolute;
	margin-top: -55px;
	font-size: 1.2em;
}

.box-options .body {
	text-align: justify;
	font-size: .95em;
}

.box-cabal {
	border-style: solid;
	border-width: 100px 15px 40px 15px;
	-moz-border-image: url(/img/box-cabal.png) 100 15 40 15 stretch stretch;
	-webkit-border-image: url(/img/box-cabal.png) 100 15 40 15 stretch stretch;
	-o-border-image: url(/img/box-cabal.png) 100 15 40 15 stretch stretch;
	border-image: url(/img/box-cabal.png) 100 15 40 15 stretch stretch;
	margin-bottom: 1.75em;
}

.box-cabal .content {
	background-color: #1d1d1d;
	border: 1px solid #1d1d1d;
	color: #8dc0e0;
	padding: 10px;
	font-weight: 300;
	position: relative;
	width: 100.5%;
	height: 100.5%;
	margin-top: -1px;
	margin-left: -1px;
}

.box-cabal .title {
	width: 100%;
	position: relative;
	margin-top: -73px;
	font-size: 1.2em;
	text-transform: uppercase;
	text-align: center;
}

.box-cabal .body {
	margin-top: 3.5em;
	text-align: justify;
}

.box-cabal .body .form-group {
	margin-bottom: 1.5em;
}

.box-cabal,
.box-cabal:hover {
	text-decoration: none;
}



.box-message {
	border-style: solid;
	border-width: 20px 20px 20px 20px;
	-moz-border-image: url(/img/box-message.png) 20 20 20 20 stretch stretch;
	-webkit-border-image: url(/img/box-message.png) 20 20 20 20 stretch stretch;
	-o-border-image: url(/img/box-message.png) 20 20 20 20 stretch stretch;
	border-image: url(/img/box-message.png) 20 20 20 20 stretch stretch;
	margin-bottom: 1.75em;
}

.mb-10 {
	margin-bottom: 10px;
}

.box-message .content {
	background-color: rgba(11, 48, 48, .95);
	padding: 0;
	font-weight: 300;
	position: relative;
	width: 100.5%;
	height: 101%;
	margin-top: -1px;
	margin-left: -1px;
}

.box-options .body .notice,
.box-cabal .body .notice {
	margin-bottom: .3em;
}

.box-options .body .notice:last-child,
.box-cabal .body .notice:last-child {
	margin-bottom: 0;
}

/* Home latest news: date + title in one line with ellipsis */
.home-news-title-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.home-news-title-row .date {
	white-space: nowrap;
	flex: 0 0 auto;
}

.home-news-title {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #8dc0e0;
	text-decoration: none;
}

.home-news-title:hover {
	text-decoration: underline;
}

/* Full news title inside notice, avoid conflicting with box header .title */
.box-options .body .notice .news-title {
	font-weight: 600;
	font-size: 1.05em;
	margin-bottom: 4px;
}

.box-options .body small,
.box-options .body .date,
.box-cabal .body small,
.box-cabal .body .date {
	color: #378caa;
	font-weight: 400;
}

.box-options .body .date,
.box-cabal .body .date {
	margin-right: .25em;
}

video {
	width: 100%;
	cursor: pointer;
}

video::-webkit-media-controls {
	display: none;
}

.zephyr-toast-notification-close {
	font-size: 19px !important;
}

.zephyr-toast-notification {
	border-radius: 0 !important;
}

.modal-backdrop.in {
	opacity: 0.8;
	background-color: #02070c;
}

.modal-content {
	background-color: rgba(10, 20, 26, 0.96);
	border: 1px solid rgba(141, 192, 224, 0.55);
	border-radius: 0;
	box-shadow: 0 0 18px rgba(0, 0, 0, 0.9), 0 0 24px rgba(20, 120, 180, 0.45);
	color: #8dc0e0;
	margin-top: 60px !important;
}

.modal-header,
.modal-footer {
	background-color: rgba(6, 14, 20, 0.98);
	border-color: rgba(141, 192, 224, 0.35);
}

.modal-title {
	color: #d5f6f9;
	text-transform: none;
	font-weight: 500;
}

.modal-body label {
	color: #8dc0e0;
	font-weight: 400;
}

.modal-body .form-control {
	border: 1px solid rgba(141, 192, 224, 0.4) !important;
	background-color: rgba(16, 30, 40, 0.9) !important;
	color: #8dc0e0 !important;
	border-radius: 0;
}

.modal-body .form-control:focus {
	border: 1px solid rgba(141, 192, 224, 0.8) !important;
	background-color: rgba(20, 40, 50, 0.95) !important;
	box-shadow: 0 0 8px rgba(141, 192, 224, 0.35) !important;
}

.modal-body .form-control::placeholder {
	color: rgba(141, 192, 224, 0.55);
}

.modal-footer .btn {
	border-radius: 0;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
}

.modal-footer .btn-primary {
	background: linear-gradient(to bottom, #009EFF 0px, #0075BC 100%) !important;
	border-color: rgba(0, 0, 0, 0.6) !important;
	color: #ffffff !important;
}

.modal-footer .btn-warning {
	background: linear-gradient(to bottom, #88C425 0px, #519548 100%) !important;
	border-color: rgba(0, 0, 0, 0.6) !important;
	color: #ffffff !important;
}

.modal-footer .btn-danger {
	background: linear-gradient(to bottom, #c4253b 0px, #820001 100%) !important;
	border-color: rgba(0, 0, 0, 0.6) !important;
	color: #ffffff !important;
}

.modal-footer .btn-default {
	background: linear-gradient(to bottom, #3b4b5a 0px, #202a32 100%) !important;
	color: #e0f4ff !important;
	border-color: rgba(0, 0, 0, 0.6) !important;
}

.row {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.modal-header .close * {
	color: #fff !important;
	opacity: 1 !important;
	font-size: 1.5em;
}

.modal-header .close:hover *,
.modal-header .close:focus * {
	color: #dfdfdf !important;
	opacity: 1 !important;
}

/* Character detail table: compact first column, value column fills remaining space */
#character-info-table th {
	white-space: nowrap;
	width: 1px;
}

#character-info-table td {
	width: auto;
}

@media (max-width: 1270px) {
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12 {
        float: none !important;
        width: 100% !important;
    }
}