.rfocp-bg {
  /* background: url(../images/bg.jpg) no-repeat center center fixed; */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  height: 100%;
}
body.theme-dark {
  background-color: hsl(240 10% 3.9%);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
}
.theme-dark .card {
  background-color: unset !important;
  border: 1px solid hsl(240 3.7% 15.9%);
  border-radius: 0.5rem;
}
.theme-dark .card .card-header {
  background-color: unset !important;
}
.theme-dark .navbar.bg-dark {
  background-color: hsl(240 10% 3.9%/ 0.95) !important;
  --tw-backdrop-blur: blur(8px);
  border-bottom: 1px solid hsl(240 3.7% 15.9%);
}
.theme-dark .dropdown-menu {
  background-color: hsl(240 10% 3.9%);
}
.theme-dark .dropdown-item:focus,
.theme-dark .dropdown-item:hover {
  background-color: #222;
}
.theme-dark .page-item .page-link {
  background-color: hsl(240 10% 3.9%);
  border: 1px solid hsl(240 3.7% 15.9%);
}
.theme-dark .page-item.disabled .page-link {
  color: #6c757d;
  background-color: hsl(240 10% 3.9%);
  border: 1px solid hsl(240 3.7% 15.9%);
}
.theme-dark .page-item.active .page-link {
  z-index: 3;
  color: hsl(240 10% 3.9%);
  background-color: hsl(0 0% 98%);
  border-color: transparent;
}
.theme-dark .page-item > a:focus {
  outline: none !important;
  box-shadow: none;
}
.theme-dark .border {
  border: 1px solid hsl(240 3.7% 15.9%) !important;
}
.theme-dark .rounded-md {
  border-radius: calc(0.5rem - 2px);
}
.theme-dark .table-bordered-minimal tbody td {
  border-bottom: 1px solid hsl(240 3.7% 15.9%);
}
.theme-dark .paginate_button > a {
  margin: 0px 4px;
  border-radius: 0.25rem;
}
.theme-dark .dataTables_wrapper .dataTables_length select,
.theme-dark input[type="search"],
.theme-dark input[type="search"]:focus {
  background-color: hsl(240 10% 3.9%);
  color: hsl(0 0% 98%);
  font-size: 15px;
}
@media (min-width: 768px) {
  .theme-dark .dataTables_paginate > .pagination {
    float: right !important;
  }
}
@media (max-width: 768px) {
  .theme-dark .dataTables_paginate > .pagination {
    justify-content: center !important;
  }
}
.theme-dark .dataTables_info {
  padding: 4px 4px;
}
.theme-dark .dataTables_filter > label,
.theme-dark .dataTables_length > label {
  margin: 0px 4px;
}
.theme-dark .dataTables_wrapper .dataTables_scroll {
  margin-bottom: 0.5rem;
}
.theme-dark .accordion-button {
  border-bottom: 1px solid hsl(240 3.7% 15.9%);
}
.theme-dark .accordion-button.collapsed {
  border-bottom: 1px solid transparent;
}
.border {
  border: 1px solid hsl(240 3.7% 15.9%) !important;
}
.rounded-md {
  border-radius: calc(0.5rem - 2px);
}
.table-bordered-minimal tbody td {
  border-bottom: 1px solid hsl(240 3.7% 15.9%);
}
.bg-glass {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(5px);
}
.loading-text-dots::after {
  content: "";
  animation: dots 1s steps(4, end) infinite;
}
.line-custom-1 {
  line-height: 1.2;
}
.container-guild {
  align-items: center;
  justify-content: center;
}
.container-member-guild {
  display: flex;
}
.container-member-guild div {
  float: left;
  align-self: center;
}
.input-group > .item_code_ajax {
  width: unset !important;
  flex: 1 1 auto;
}
.input-group > .select2-container > .select2-choice {
  border-radius: 4px 0px 0px 4px !important;
}

.badge.badge-light-primary {
  background-color: rgba(115, 103, 240, 0.12);
  color: #9f97f3 !important;
}
.badge.badge-light-secondary {
  background-color: rgba(130, 134, 139, 0.12);
  color: #82868b !important;
}
.badge.badge-light-success {
  background-color: rgba(40, 199, 111, 0.12);
  color: #28c76f !important;
}
.badge.badge-light-danger {
  background-color: rgba(234, 84, 85, 0.12);
  color: #ff5b5c !important;
}
.badge.badge-light-warning {
  background-color: rgba(255, 159, 67, 0.12);
  color: #ff9f43 !important;
}
.badge.badge-light-info {
  background-color: rgba(0, 207, 232, 0.12);
  color: #00cfe8 !important;
}
.badge.badge-light-dark {
  background-color: rgba(75, 75, 75, 0.12);
  color: #4b4b4b !important;
}

.form-height-auto {
  height: auto;
}

.form-width-auto {
  width: auto;
}

.checkbox-1x {
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
}
.checkbox-2x {
  transform: scale(2);
  -webkit-transform: scale(2);
}

@keyframes dots {
  0%,
  20% {
    content: ".";
  }
  40% {
    content: "..";
  }
  60% {
    content: "...";
  }
  80%,
  100% {
    content: "";
  }
}
.qr-code-box {
  border: 1.5px solid #666;
  border-radius: 6px;
  padding: 10px;
  background-color: #fff;
}
.btn-activate-twofa {
  background-color: #fff;
  color: #111;
}
.btn-activate-twofa:hover {
  background-color: #fff;
  color: #111;
}
.skip-twofa-button {
  position: absolute;
  right: 0px;
}
div#nav-tab .active,
div#pills-tab .active {
  background-color: var(--indigo);
}
select[readonly] {
  pointer-events: none;
}
.mnw-500 {
  min-width: 500px;
}
.mnw-600 {
  min-width: 600px;
}
.mnw-700 {
  min-width: 700px;
}
.mnw-800 {
  min-width: 800px;
}
.mnw-900 {
  min-width: 900px;
}
.mnw-1000 {
  min-width: 1000px;
}
.mnw-1100 {
  min-width: 1100px;
}
.mnw-1200 {
  min-width: 1200px;
}
.mxw-500 {
  max-width: 500px;
}
.mxw-600 {
  max-width: 600px;
}
.mxw-700 {
  max-width: 700px;
}
.mxw-800 {
  max-width: 800px;
}
.mxw-900 {
  max-width: 900px;
}
.mxw-1000 {
  max-width: 1000px;
}
.mxw-1100 {
  max-width: 1100px;
}
.mxw-1200 {
  max-width: 1200px;
}
.xw-500 {
  width: 500px;
}
.xw-600 {
  width: 600px;
}
.xw-700 {
  width: 700px;
}
.xw-800 {
  width: 800px;
}
.xw-900 {
  width: 900px;
}
.xw-1000 {
  width: 1000px;
}
.xw-1100 {
  width: 1100px;
}
.xw-1200 {
  width: 1200px;
}

.font-size-10x {
  font-size: 10px;
}
.font-size-12x {
  font-size: 12px;
}
.font-size-14x {
  font-size: 14px;
}
.font-size-16x {
  font-size: 16px;
}
.font-size-18x {
  font-size: 18px;
}
.font-size-20x {
  font-size: 20px;
}
.font-size-22x {
  font-size: 22px;
}
.font-size-24x {
  font-size: 24px;
}
.twofa-page {
  max-width: 600px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.twofa-input-form {
  max-width: 300px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.twofa-input-form[name="otp_code"] {
  max-width: 150px;
}
.twofa-input-form.secret-key {
  background-color: #444;
  color: #ffc107;
  border-color: #444;
}
.btn-leave-su-session {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
}
.token-menu .nav-link {
  border-radius: 0;
  font-weight: bold;
}
.token-menu .nav-link.active {
  border-top: 2px solid gold;
  background-color: #333;
}
.token-menu + .tab-content {
  background-color: #333;
}
.token-form .form-control,
.token-form .input-group-prepend span,
.token-form .input-group-append span {
  border-width: 0;
}
.token-form .input-group-append span {
  color: #fff;
}
.token-form input,
.token-form input:focus {
  background-color: #444;
  color: #fff;
  text-align: right;
}
.token-form select.select-character,
.token-form select.select-character:focus {
  background-color: #444;
  color: #fff;
  border: 1px solid #444;
}
/* .token-form select.select-character:hover, .token-form select.select-character:focus {
	border: 1px solid gold;
} */
.token-form input.custom-range {
  background-color: unset;
}
.token-content .input-focus {
  background-color: #444;
  border: 1px solid #444;
  border-radius: 4px;
}
.token-content .input-focus:hover {
  border: 1px solid gold;
}
.token-content .input-focus input:focus {
  box-shadow: unset;
}
.token-content .form-control[readonly] {
  background-color: #444;
}
.insufficient-balance {
  border: 1px solid rgb(246, 70, 93) !important;
}
.token-content .tab-pane {
  height: 300px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}
.text-gold {
  color: gold;
}
.popover-item {
  position: relative;
}
.popover-content {
  color: var(--white);
  display: none;
  position: absolute;
  border: 1.5px solid #959595;
  background-color: rgb(23 26 28 / 85%);
  padding: 10px 20px;
  z-index: 9;
  width: 400px;
}
.popover-content.s32px {
  left: 32px;
}
.popover-content.s64px {
  left: 64px;
}
.left32 {
  left: 32px;
}
.left64 {
  left: 64px;
}
.right32 {
  right: 32px;
}
.right64 {
  right: 64px;
}
.popover-content:hover {
  display: none !important;
}
.popover-item:hover .popover-content {
  display: block;
}
.popover-content h1 {
  font-size: 20px;
}
.show-equipment > div > div:not(:hover) {
  z-index: unset;
}
/* .popover-equipment-img {
	position: absolute;
	right: 20px;
} */

.card-input-securitykey {
  max-width: 500px;
}

.card-reset-password {
  max-width: 500px;
}

.popover-equipment-img > .equipment-img-description {
  height: fit-content;
  width: fit-content;
  background-color: #101010;
  border: 1px solid #999;
}

ul.web-shortcut {
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

ul.web-shortcut li {
  line-height: 1.5;
  list-style-type: none !important;
}

ul.web-shortcut li:before {
  font-family: FontAwesome;
  content: "\f138";
  position: absolute;
  left: 1em;
  color: skyblue;
}

.card-welcome-medal {
  color: var(--white);
}

.character-tab.active {
  color: var(--white) !important;
  background: var(--primary) !important;
}

.character-tab.active svg.races path {
  fill: var(--white) !important;
}

.card.character-tab.active > .card-header {
  background-color: var(--primary);
}

.text-status-hp {
  color: #ff0000;
}

.text-status-fp {
  color: #1e90ff;
}

.text-status-sp {
  color: #ffff00;
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  /* width: 100%;
	padding: 1rem 1.25rem;
	font-size: 1rem;
	color: #212529;
	text-align: left;
	background-color: #fff;
	border: 0;
	border-radius: 0;
	overflow-anchor: none;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease */
}

@media (prefers-reduced-motion: reduce) {
  .accordion-button {
    transition: none;
  }
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}

.accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform 0.2s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-button::after {
    transition: none;
  }
}

.accordion-button:hover {
  z-index: 2;
}

.accordion-button:focus {
  z-index: 3;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.accordion-header {
  margin-bottom: 0;
}

.accordion-item {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.accordion-item:first-of-type {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.accordion-item:not(:first-of-type) {
  border-top: 0;
}

.accordion-item:last-of-type {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.accordion-body {
  padding: 1rem 1.25rem;
}

.accordion-flush .accordion-collapse {
  border-width: 0;
}

.accordion-flush .accordion-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.accordion-flush .accordion-item:first-child {
  border-top: 0;
}

.accordion-flush .accordion-item:last-child {
  border-bottom: 0;
}

.accordion-flush .accordion-item .accordion-button {
  border-radius: 0;
}

.bg-color-unset {
  background-color: unset;
}

.match-height > [class*="col"] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-flow: column;
  -ms-flex-flow: column;
  flex-flow: column;
}

.match-height > [class*="col"] > .card {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

/* ? Chipwar */
.card.chipwar-statistics {
  border-radius: 38px 0 38px 0;
}
.chipwar-statistics > .card-header {
  position: absolute;
  border: unset;
  padding: 7px 30px;
  border-radius: 5rem 0 5rem 0;
  background-color: #e65100 !important;
}

.chipwar-log > .chipwar-time {
  border: unset;
  position: absolute;
  top: -17px;
  right: 15px;
  padding: 5px 10px;
  border-radius: 0.5rem;
}

.chipwar-log > .chipwar-time.first {
  background-color: rgb(0, 208, 17);
}

.chipwar-log > .chipwar-time.second {
  background-color: tan;
}

.chipwar-log > .chipwar-time.third {
  background-color: indigo;
}

.chipwar-log > .card-body > .chipwar-hour {
  padding: 0;
  margin: 0;
}

/* ! END Chip War */

/* ? Server Selection */
.select-menu {
  --background: #fff;
  --text: #000;
  --icon: #000;
  --icon-active: #7e8595;
  --list: #ffffff;
  --list-text: #b8b8b8;
  --list-text-hover: rgba(0, 0, 0, 0.7);
  position: relative;
  z-index: 1;
  font-weight: 500;
  font-size: 14px;
  line-height: 25px;
}
.select-menu select,
.select-menu .button {
  font-family: inherit;
  margin: 0;
  border: 0;
  text-align: left;
  text-transform: none;
  -webkit-appearance: none;
}
.select-menu select {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: 0;
  padding: 8px 36px 8px 12px;
  visibility: hidden;
  font-weight: 500;
  font-size: 14px;
  line-height: 25px;
}
.select-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  transform: translateY(var(--t));
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.select-menu ul li {
  padding: 8px 36px 8px 12px;
  cursor: pointer;
}
.select-menu > ul {
  background: var(--list);
  color: var(--list-text);
  border-radius: 6px;
}
.select-menu > ul li {
  transition: color 0.3s ease;
}
.select-menu > ul li:hover {
  color: var(--list-text-hover);
}
.select-menu .button {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0;
  z-index: 1;
  width: 100%;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  color: var(--text);
  background: var(--background);
}
.select-menu .button em {
  --r: 45deg;
  display: block;
  position: absolute;
  right: 12px;
  top: 0;
  width: 7px;
  height: 7px;
  margin-top: 13px;
  -webkit-backface-visibility: hidden;
}
.select-menu .button em:before,
.select-menu .button em:after {
  --o: 0.4;
  content: "";
  width: 7px;
  height: 7px;
  opacity: var(--o);
  display: block;
  position: relative;
  transition: opacity 0.2s ease;
  transform: rotate(var(--r)) scale(0.75);
}
.select-menu .button em:before {
  border-left: 2px solid var(--icon);
  border-top: 2px solid var(--icon);
  top: 1px;
}
.select-menu .button em:after {
  border-right: 2px solid var(--icon);
  border-bottom: 2px solid var(--icon);
  bottom: 1px;
}
.select-menu:not(.open) > ul {
  opacity: 0;
  pointer-events: none;
}
.select-menu.open.tilt-up {
  /* -webkit-animation: tilt-up 0.4s linear forwards;
			animation: tilt-up 0.4s linear forwards; */
}
.select-menu.open.tilt-up .button em:before {
  --o: 1;
}
.select-menu.open.tilt-down {
  /* -webkit-animation: tilt-down 0.4s linear forwards;
			animation: tilt-down 0.4s linear forwards; */
}
.select-menu.open.tilt-down .button em:after {
  --o: 1;
}

@-webkit-keyframes tilt-up {
  40%,
  60% {
    transform: perspective(500px) rotateX(8deg);
  }
}

@keyframes tilt-up {
  40%,
  60% {
    transform: perspective(500px) rotateX(8deg);
  }
}
@-webkit-keyframes tilt-down {
  40%,
  60% {
    transform: perspective(500px) rotateX(-8deg);
  }
}
@keyframes tilt-down {
  40%,
  60% {
    transform: perspective(500px) rotateX(-8deg);
  }
}
/* ! END Server */

/* *Select v2 */
.dropdown-v2 {
  --max-scroll: 8;
  --text: #3f4656;
  --border: #2f3545;
  --borderActive: #23c4f8;
  --background: #151924;
  --arrow: #6c7486;
  --arrowActive: #e4ecfa;
  --listText: #99a3ba;
  --listBackground: #f5f9ff;
  --listActive: #e4ecfa;
  --listTextActive: #6c7486;
  --listBorder: none;
  --textFilled: #99a3ba;
  width: 220px;
  position: relative;
}
.dropdown-v2.light {
  --text: #cdd9ed;
  --border: #cdd9ed;
  --borderActive: #23c4f8;
  --background: #fff;
  --arrow: #99a3ba;
  --arrowActive: #6c7486;
  --listText: #99a3ba;
  --listBackground: #fff;
  --listActive: #f5f9ff;
  --listTextActive: #6c7486;
  --listBorder: #e4ecfa;
  --textFilled: #6c7486;
}
.dropdown-v2 select {
  display: none;
}
.dropdown-v2 > span {
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 6px;
  display: block;
  position: relative;
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--background);
  transition: all 0.3s ease;
}
.dropdown-v2 > span:before,
.dropdown-v2 > span:after {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  top: 50%;
  right: 15px;
  background: var(--arrow);
  transition: all 0.3s ease;
}
.dropdown-v2 > span:before {
  margin-right: 4px;
  transform: scale(0.96, 0.8) rotate(50deg);
}
.dropdown-v2 > span:after {
  transform: scale(0.96, 0.8) rotate(-50deg);
}
.dropdown-v2 ul {
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  max-height: calc(var(--max-scroll) * 42px);
  top: 42px;
  left: 0;
  z-index: 1;
  right: 0;
  background: var(--listBackground);
  border-radius: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  transform-origin: 0 0;
  transition: opacity 0.2s ease, visibility 0.2s ease,
    transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
  transform: scale(0.8) translate(0, 4px);
  border: 1px solid var(--listBorder);
}
.dropdown-v2 ul li {
  opacity: 0;
  transform: translate(6px, 0);
  transition: all 0.3s ease;
}
.dropdown-v2 ul li a {
  cursor: pointer;
  display: block;
  padding: 10px 16px;
  color: var(--listText);
  text-decoration: none;
  outline: none;
  position: relative;
  transition: all 0.3s ease;
}
.dropdown-v2 ul li a:hover {
  color: var(--listTextActive);
}
.dropdown-v2 ul li.active a {
  color: var(--listTextActive);
  background: var(--listActive);
}
.dropdown-v2 ul li.active a:before,
.dropdown-v2 ul li.active a:after {
  --scale: 0.6;
  content: "";
  display: block;
  width: 10px;
  height: 2px;
  position: absolute;
  right: 17px;
  top: 50%;
  opacity: 0;
  background: var(--listText);
  transition: all 0.2s ease;
}
.dropdown-v2 ul li.active a:before {
  transform: rotate(45deg) scale(var(--scale));
}
.dropdown-v2 ul li.active a:after {
  transform: rotate(-45deg) scale(var(--scale));
}
.dropdown-v2 ul li.active a:hover:before,
.dropdown-v2 ul li.active a:hover:after {
  --scale: 0.9;
  opacity: 1;
}
.dropdown-v2 ul li:first-child a {
  border-radius: 6px 6px 0 0;
}
.dropdown-v2 ul li:last-child a {
  border-radius: 0 0 6px 6px;
}
.dropdown-v2.filled > span {
  color: var(--textFilled);
}
.dropdown-v2.open > span {
  border-color: var(--borderActive);
}
.dropdown-v2.open > span:before,
.dropdown-v2.open > span:after {
  background: var(--arrowActive);
}
.dropdown-v2.open > span:before {
  transform: scale(0.96, 0.8) rotate(-50deg);
}
.dropdown-v2.open > span:after {
  transform: scale(0.96, 0.8) rotate(50deg);
}
.dropdown-v2.open ul {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translate(0, 12px);
  transition: opacity 0.3s ease, visibility 0.3s ease,
    transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
}
.dropdown-v2.open ul li {
  opacity: 1;
  transform: translate(0, 0);
}
.dropdown-v2.open ul li:nth-child(1) {
  transition-delay: 80ms;
}
.dropdown-v2.open ul li:nth-child(2) {
  transition-delay: 160ms;
}
.dropdown-v2.open ul li:nth-child(3) {
  transition-delay: 240ms;
}
.dropdown-v2.open ul li:nth-child(4) {
  transition-delay: 320ms;
}
.dropdown-v2.open ul li:nth-child(5) {
  transition-delay: 400ms;
}
.dropdown-v2.open ul li:nth-child(6) {
  transition-delay: 480ms;
}
.dropdown-v2.open ul li:nth-child(7) {
  transition-delay: 560ms;
}
.dropdown-v2.open ul li:nth-child(8) {
  transition-delay: 640ms;
}
.dropdown-v2.open ul li:nth-child(9) {
  transition-delay: 720ms;
}
.dropdown-v2.open ul li:nth-child(10) {
  transition-delay: 800ms;
}

select.dropdown-v2 {
  --text: #3f4656;
  --border: #2f3545;
  --background: #151924;
}
select.dropdown-v2 .dropdown {
  padding: 9px 16px;
  border-radius: 6px;
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--background);
  line-height: 22px;
  font-size: 16px;
  font-family: inherit;
  -webkit-appearance: none;
}

.switch-dropdown-v2 {
  height: 20px;
  display: block;
  position: relative;
  cursor: pointer;
}
.switch-dropdown-v2 input {
  display: none;
}
.switch-dropdown-v2 input + span {
  padding-left: 38px;
  min-height: 20px;
  line-height: 20px;
  display: block;
  color: #3f4656;
  position: relative;
  white-space: nowrap;
}
.switch-dropdown-v2 input + span:not(:empty) {
  padding-left: 46px;
}
.switch-dropdown-v2 input + span:before,
.switch-dropdown-v2 input + span:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 10px;
}
.switch-dropdown-v2 input + span:before {
  top: 0;
  left: 0;
  width: 38px;
  height: 20px;
  border: 1px solid #2f3545;
  transition: all 0.3s ease;
}
.switch-dropdown-v2 input + span:after {
  width: 14px;
  height: 14px;
  background: #2f3545;
  top: 3px;
  left: 3px;
  transition: all 0.45s ease;
}
.switch-dropdown-v2 input + span + svg {
  display: none;
}
.switch-dropdown-v2 input:checked + span:before {
  background: #5628ee;
  border-color: #5628ee;
}
.switch-dropdown-v2 input:checked + span:after {
  background: #fff;
  transform: translate(18px, 0);
}
.switch-dropdown-v2:hover input:not(:checked) + span:before {
  border-color: #23c4f8;
}
/* ! END */

/* #btn-nav-previous, #btn-nav-next {
	display: none;
} */
@media (max-width: 768px) {
  #btn-nav-previous,
  #btn-nav-next {
    display: none;
  }
}
@media (min-width: 768px) {
  #btn-nav-previous,
  #btn-nav-next {
    display: unset;
  }
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.gamecp-header-submenu.dropdown-menu.show {
  position: fixed !important;
  top: 45px;
  left: unset;
}

.invoice-container {
  margin: 15px auto;
  padding: 70px;
  max-width: 850px;
  background-color: #fff;
  border: 1px solid #ccc;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
}

@media (max-width: 895px) {
  .invoice-container {
    margin: 15px;
  }
}
@media (max-width: 767px) {
  .invoice-container {
    padding: 45px 45px 70px 45px;
  }
}

@media (max-width: 499px) {
  .invoice-header {
    text-align: center;
  }
}

@media (max-width: 577px) {
  .payee-details {
    float: left;
  }
  .payee-details .right {
    float: left;
    text-align: left;
  }
}

svg.races.bellato .race-logo {
  fill: #03a9f4;
}

svg.races.cora .race-logo {
  fill: #9575cd;
}

svg.races.accretia .race-logo {
  fill: #f44336;
}

.alert-primary.outline {
  color: var(--primary);
  background: transparent;
  border: 1px solid var(--primary);
}

.alert-secondary.outline {
  color: var(--secondary);
  background: transparent;
  border: 1px solid var(--secondary);
}

.alert-success.outline {
  color: var(--success);
  background: transparent;
  border: 1px solid var(--success);
}

.alert-danger.outline {
  color: var(--danger);
  background: transparent;
  border: 1px solid var(--danger);
}

.alert-warning.outline {
  color: var(--warning);
  background: transparent;
  border: 1px solid var(--warning);
}

.alert-info.outline {
  color: var(--info);
  background: transparent;
  border: 1px solid var(--info);
}

.alert-light.outline {
  color: var(--white);
  background: transparent;
  border: 1px solid var(--white);
}

.alert-dark.outline {
  color: var(--dark);
  background: transparent;
  border: 1px solid var(--dark);
}

/* Invoice Status Formatting */

.invoice-status {
  margin: 20px 0 0 0;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: bold;
}

.reset-font-size {
  font-size: unset;
}

/* Invoice Status Colors */

.draft {
  color: #888;
}
.unpaid {
  color: #cc0000;
}
.paid,
.approved {
  color: #4caf50;
}
.deny,
.failed,
.declined {
  color: #ffa600;
}
.refunded {
  color: #224488;
}
.cancelled,
.canceled {
  color: #888;
}
.expired {
  color: #ff6600;
}
.collections {
  color: #ffcc00;
}
.pending {
  color: #ff00aa;
}
select.request-status,
select.request-status:focus {
  background-color: #444;
}
select.request-status.pending:focus {
  color: #ff00aa;
}
select.request-status.approved:focus {
  color: #ccff00;
}
select.request-status.declined:focus {
  color: #ffa600;
}
select.request-status.cancelled:focus {
  color: #888;
}

/* Payment Button Formatting */

.invoice-container .payment-btn-container {
  margin-top: 5px;
  text-align: center;
}
.invoice-container .payment-btn-container table {
  margin: 0 auto;
}

/* Text Formatting */

.invoice-container .small-text {
  font-size: 0.9em;
}

/* Invoice Items Table Formatting */

.invoice-container td.total-row {
  background-color: #f8f8f8;
}
.invoice-container td.no-line {
  border: 0;
}
.invoice-container .invoice-header img {
  max-width: 100%;
}

nav#menu-container {
  background: #586e75;
  position: relative;
  width: 100%;
  height: 56px;
}
#btn-nav-previous {
  /* display: none; */
  text-align: center;
  color: white;
  cursor: pointer;
  /* font-size: 24px;
	padding: 9px 4px; */
  background: var(--danger);
  fill: var(--white);
}
#btn-nav-next {
  /* display: none; */
  text-align: center;
  color: white;
  cursor: pointer;
  position: absolute;
  right: 10px;
  /* font-size: 24px;
	padding: 9px 4px; */
  background: var(--danger);
  fill: var(--white);
}
.menu-inner-box {
  width: 100%;
  white-space: nowrap;
  margin: 0 auto;
  overflow: hidden;
  margin-right: 20px;
  box-sizing: border-box;
  transition: mask-position 0.3s, -webkit-mask-position 0.3s;
}
.menu {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: block;
  text-align: center;
}
.menu-item {
  height: 100%;
  padding: 0px 25px;
  color: #fff;
  display: inline;
  margin: 0 auto;
  line-height: 57px;
  text-decoration: none;
  text-align: center;
  white-space: no-wrap;
}
.menu-item:hover {
  text-decoration: underline;
}

/* @media only screen and (min-width: 480px) {
	#btn-nav-previous {
		display: none;
	}
	#btn-nav-next {
		display: none;
	}
	.menu-inner-box
	{ 
		width: 100%;
		overflow-x: hidden;
	}
} */

/* .menu-inner-box::-webkit-scrollbar {
	background-color: #fff;
	height:4px
}
.menu-inner-box::-webkit-scrollbar-track {
	background-color: var(--light);
}
.menu-inner-box::-webkit-scrollbar-thumb {
	background-color: var(--info);
	border-radius:4px
}
.menu-inner-box:hover {
	cursor: pointer;
	overflow-x: overlay;
} */

.badge-red {
  background-color: red;
}
.badge-aqua {
  background-color: aqua;
}
.badge-orange {
  background-color: orangered;
}
.badge-yellow {
  background-color: yellow;
}
.badge-gold {
  background-color: gold;
}
.badge-white {
  background-color: wheat;
}
.badge-black {
  background-color: black;
}
.badge-blue {
  background-color: blue;
}
.badge-green {
  background-color: green;
}
.badge-green-tosca {
  background-color: #00bc8c;
}
.text-orange {
  color: orange;
}
.donation-text {
  color: inherit;
}
.text-red {
  color: #e74c3c;
}
.text-green-tosca {
  color: #00bc8c;
}
.text-green-lime {
  color: rgb(90, 224, 0);
}
.text-news {
  color: #fff;
  background-color: #ff0000;
}
.text-events {
  color: #fff;
  background-color: rgb(90, 224, 0);
}
.text-updates {
  color: #fff;
  background-color: rgb(224, 153, 0);
}
.text-others {
  color: #fff;
  background-color: rgb(67, 0, 224);
}
.color-greenyellow {
  color: greenyellow;
}
.color-springgreen {
  color: springgreen;
}
.color-limegreen {
  color: limegreen;
}
.color-red {
  color: red;
}
.color-crimson {
  color: crimson;
}
.color-orange {
  color: #ff9600;
}
.pc-right-cat {
  font-size: 14px;
}

.pos-relative {
  position: relative;
}

.gamecp-point-text {
  position: absolute;
  right: 20px;
  top: 10px;
}

.module-title {
  border-bottom: #ec1d1d 4px solid;
}

/* ? Character State */
.character-state.online {
  padding-left: 5px;
  border-left: #00dc46 4px solid;
}

.character-state.offline {
  padding-left: 5px;
  border-left: #757575 4px solid;
}

/* ? Council Display */
.council-race-header {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  height: 100%;
  color: #fff !important;
}

.council-race-header.bg-accretia {
  background: url(../../../../core/templates/assets/images/chipwar/bg-a.jpg)
    no-repeat center center;
  background-size: cover;
}

.council-race-header.bg-bellato {
  background: url(../../../../core/templates/assets/images/chipwar/bg-b.jpg)
    no-repeat center center;
  background-size: cover;
}

.council-race-header.bg-cora {
  background: url(../../../../core/templates/assets/images/chipwar/bg-c.jpg)
    no-repeat center center;
  background-size: cover;
}

.council-race-header > .council-race-logo {
  max-height: 180px;
  width: auto;
}

.council-race-header > h4 {
  position: absolute;
  left: 50%;
  top: 80px;
  font-size: 2.5em;
  transform: translateX(-50%);
  display: block;
  align-content: center;
  align-items: center;
}

.council-race-header > h5 {
  position: absolute;
  left: 50%;
  top: 125px;
  font-size: 1.5em;
  transform: translateX(-50%);
  display: block;
  align-content: center;
  align-items: center;
}

.council-user-state.online {
  border-bottom: #00dc46 4px solid;
}

.council-user-state.offline {
  border-bottom: #757575 4px solid;
}

.council-character-class {
  font-size: 1em;
}

.council-race-title.councils {
  max-width: 75px;
  height: auto;
}

.text-accretia {
  color: #e6121d;
}

.text-bellato {
  color: #6bbfff;
}
.text-cora {
  color: #59df44;
}
.bg-accretia {
  background-color: #989898;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
}
.bg-bellato {
  background-color: #ffa6b5;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
}
.bg-cora {
  background-color: #d328d3;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3);
}
/* ! Council Display END */

/* Custom Table Style */
table.ex-markselected tr.tr-selected:nth-of-type(odd) td {
  background: #d9f0d1 !important;
  color: #215f0c !important;
}
table.ex-markselected tr.tr-selected:nth-of-type(even) td {
  background: #c0f1af !important;
  color: #215f0c !important;
}

table td.fit-content {
  white-space: nowrap;
  width: 1%;
}
.btn.btn-discord {
  color: white;
  font-weight: bold;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  background-color: #7289da;
  text-decoration: none;
}
.btn.btn-discord svg {
  margin-right: 6px;
}

.table-exclusive {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 10s ease infinite;
}

.table-marketplace-itemshop-disabled {
  color: rgb(255 0 0 / 66%);
  background-color: #0a0a0a;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.text-exclusive {
  text-align: center;

  background: linear-gradient(to right, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 200% auto;

  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: shine 10s ease infinite;
}
@keyframes shine {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.rainbow_text_animated {
  background: linear-gradient(
    to right,
    #6666ff,
    #0099ff,
    #00ff00,
    #ff3399,
    #6666ff
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 6s ease-in-out infinite;
  background-size: 400% 100%;
  text-shadow: 0px 0px 5px #0e0e0e;
}

@keyframes rainbow_animation {
  0%,
  100% {
    background-position: 0 0;
  }

  50% {
    background-position: 100% 0;
  }
}

/* Game UI for ExDeus GCP */
.patriarch-window {
  position: relative;
  margin: 28px 0;
  background: url(../../../../core/templates/assets/images/gamewindow/patriarch-border-center-left.png)
      left repeat-y,
    url(../../../../core/templates/assets/images/gamewindow/patriarch-border-center-right.png)
      right repeat-y,
    url(../../../../core/templates/assets/images/gamewindow/patriarch-background.png)
      repeat;
  z-index: 2;
}

.patriarch-window::before,
.patriarch-window::after {
  content: "";
  position: absolute;
  display: block;
  height: 28px;
  width: 100%;
  z-index: 2;
  background: url("../../../../core/templates/assets/images/gamewindow/patriarch-border-top-left.png")
      left no-repeat,
    url("../../../../core/templates/assets/images/gamewindow/patriarch-border-top-right.png")
      right no-repeat;
}

.patriarch-window::before {
  top: -28px;
}

.patriarch-window::after {
  bottom: -28px;
  transform: scaleY(-1);
}

.patriarch-window .patriarch-content {
  position: relative;
}

.patriarch-window .patriarch-window-top-center,
.patriarch-window .patriarch-window-bottom-center {
  content: "";
  position: absolute;
  display: block;
  height: 28px;
  width: calc(100% - 56px);
  z-index: 1;
  background: url("../../../../core/templates/assets/images/gamewindow/patriarch-border-top-center.png")
    repeat-x center;
  margin-left: 28px;
  margin-right: 28px;
  top: -28px;
}

.patriarch-window .patriarch-window-bottom-center {
  bottom: -28px;
  transform: scaleY(-1);
  top: unset;
}

.patriarch-window select {
  background-color: #101313;
  color: #dadada;
}

.patriarch-window select:focus {
  background-color: #101313 !important;
  color: #dadada !important;
}

.rfui-button {
  font-size: 14px;
  padding: 0 13px;
  border: none;
  color: #dadada;
  position: relative;
  background: url(../../../../core/templates/assets/images/gamewindow/button-left.png)
      left no-repeat,
    url(../../../../core/templates/assets/images/gamewindow/button-right.png)
      right no-repeat,
    url(../../../../core/templates/assets/images/gamewindow/button-center.png)
      center repeat-x;
  transition: background-color 0.3s, filter 0.3s;
}

.rfui-button:focus,
.rfui-button:active {
  background-color: #2979ff;
  filter: brightness(1.2);
  z-index: 1;
}

.rfui-button.disabled {
  filter: brightness(0.5);
}

.common-window {
  position: relative;
  border: 1px solid #6b6d73;
  background: url(../../../../core/templates/assets/images/gamewindow/patriarch-background.png)
    repeat;
}

.common-window select {
  background-color: #101313;
  color: #dadada;
}

.common-window select:focus {
  background-color: #101313 !important;
  color: #dadada !important;
}

.common-window::before {
  content: "";
  position: absolute;
  display: block;
  height: 22px; /* Adjust the height as needed */
  width: 100%; /* Adjust the width as needed */
  background: url("../../../../core/templates/assets/images/gamewindow/common-window-top-left.png")
      left no-repeat,
    url("../../../../core/templates/assets/images/gamewindow/common-window-top-right.png")
      right no-repeat,
    url("../../../../core/templates/assets/images/gamewindow/common-window-top-center.png")
      center repeat-x;
}

.common-window .common-title {
  font-size: 16px;
  text-align: center;
  position: relative;
  margin: 0;
  height: 22px;
}

.common-window .common-content .archon-nav .nav .nav-link {
  padding: 0px;
  margin: 0px 20px;
  border: 1px solid transparent;
  filter: brightness(0.5);
  border-radius: 0px;
}
.common-window .common-content .archon-nav .nav .nav-link.active {
  filter: brightness(1);
  animation: blinking-border 1s infinite;
}

@keyframes blinking-border {
  0% {
    border: 1px solid orange;
  }
  50% {
    border: 1px solid orangered;
  }
  100% {
    border: 1px solid orange;
  }
}

.common-window .common-content table.table-rf {
  border: 2px solid #101010;
  font-size: 14px;
}

.common-window .common-content table.table-rf th {
  color: #65a6db;
  border: 2px solid #101010;
  padding: 4px 6px;
}

.common-window .common-content table.table-rf tbody tr {
  background-image: linear-gradient(
    180deg,
    hsl(0deg 0% 10%) 10%,
    hsl(344deg 0% 11%) 30%,
    hsl(344deg 0% 12%) 37%,
    hsl(344deg 0% 13%) 43%,
    hsl(344deg 0% 14%) 49%,
    hsl(344deg 0% 15%) 55%,
    hsl(344deg 0% 16%) 63%,
    hsl(344deg 0% 17%) 72%,
    hsl(344deg 0% 18%) 84%,
    hsl(0deg 0% 19%) 100%
  );
  border: 2px solid #101010;
}

.common-window .common-content table.table-rf td {
  padding: 4px 6px;
  border: 0;
}

.rf-alert {
  position: relative;
  border: 1px solid #6b6d73;
  background-color: #101313;
  padding: 4px 4px 4px 22px;
}

.rf-alert::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  box-shadow: 0 0 0 1px #0c0c0c;
}

.rf-alert.icon-alert::before {
  content: "";
  position: absolute;
  display: block;
  height: 15px; /* Adjust the height as needed */
  width: 15px; /* Adjust the width as needed */
  background: url("../../../../core/templates/assets/images/gamewindow/icon-alert.png")
    left no-repeat;
  top: 50%;
  transform: translateY(-50%);
  margin-left: -18px;
}

.swipe-down {
  animation: swipeDownAnimation 0.5s ease-out;
  position: relative;
}

@keyframes swipeDownAnimation {
  0% {
    top: -12px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}

/* Guild Emblem */
.guild-emblem-layout {
  display: flex;
}
.guild-emblem-layout > a,
.guild-emblem-layout > div,
.guild-emblem-layout > span,
.guild-emblem-layout > strong {
  align-self: center;
}
.guild-emblem {
  position: relative;
  float: left;
}
/* check guild.emblem doest not have data width */
.guild-emblem > img:not([width]) {
  width: 36px;
}
/* check guild.emblem doest not have data height */
.guild-emblem > img:not([height]) {
  height: 36px;
}
.guild-emblem > img.emblem-back {
  position: absolute;
  top: 0;
  left: 0;
}

/* Negative Margin */
.m-1-n {
  margin: -0.25rem !important;
}

.mt-1-n,
.my-1-n {
  margin-top: -0.25rem !important;
}

.mr-1-n,
.mx-1-n {
  margin-right: -0.25rem !important;
}

.mb-1-n,
.my-1-n {
  margin-bottom: -0.25rem !important;
}

.ml-1-n,
.mx-1-n {
  margin-left: -0.25rem !important;
}

.m-2-n {
  margin: -0.5rem !important;
}

.mt-2-n,
.my-2-n {
  margin-top: -0.5rem !important;
}

.mr-2-n,
.mx-2-n {
  margin-right: -0.5rem !important;
}

.mb-2-n,
.my-2-n {
  margin-bottom: -0.5rem !important;
}

.ml-2-n,
.mx-2-n {
  margin-left: -0.5rem !important;
}

.m-3-n {
  margin: -1rem !important;
}

.mt-3-n,
.my-3-n {
  margin-top: -1rem !important;
}

.mr-3-n,
.mx-3-n {
  margin-right: -1rem !important;
}

.mb-3-n,
.my-3-n {
  margin-bottom: -1rem !important;
}

.ml-3-n,
.mx-3-n {
  margin-left: -1rem !important;
}

.m-4-n {
  margin: -1.5rem !important;
}

.mt-4-n,
.my-4-n {
  margin-top: -1.5rem !important;
}

.mr-4-n,
.mx-4-n {
  margin-right: -1.5rem !important;
}

.mb-4-n,
.my-4-n {
  margin-bottom: -1.5rem !important;
}

.ml-4-n,
.mx-4-n {
  margin-left: -1.5rem !important;
}

.m-5-n {
  margin: -3rem !important;
}

.mt-5-n,
.my-5-n {
  margin-top: -3rem !important;
}

.mr-5-n,
.mx-5-n {
  margin-right: -3rem !important;
}

.mb-5-n,
.my-5-n {
  margin-bottom: -3rem !important;
}

.ml-5-n,
.mx-5-n {
  margin-left: -3rem !important;
}

/* DT Control */

td.dt-control {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACjElEQVR4Aa2V30uTURjHnVBUgglCaXVTJJVLMdhQm7+1JEvJiKAggmgSQiKJl0V0E13UVf0HQZmBLcvlpqa55tqV0YoMzIhY6js0yDH11X17vuO8Sq5Zgl/48DznPD/G63nOMSmBkoUNwhYhTUgn9NUeY8z5p0wqOVXYKRwQLMJhhYV7Kpaqck2rNdskbBPMdrv9osfjcQaDwW/RaHSR0OceY8xhrqox/a3ZZmGHkO9wOB7ouj6PBGKMOcxlzcqmdDYKGZmZmSWjo6PvIYosRuDWXGj50IwTb4+hxleN5sAVvJh4jvBCGBRzWSO121UPk3EAaUKuz+d7ycTp+Wnc/nwL1d4qHBVidmjZv/npBkJzGiiv19vFWmGrcVDsvKupqeky/056VMf1j9dQOViBKo9Aa/ixdbnYcrQGWsBc1jQ2NtrZQ/VKShHM8kvdEPVN9qJsoBRl/aUoHyiJ+UpcCxJTtmfCDYoHJT2yYyOlPtcaCoUmGGwdbkVRbxGK+2y0gg2GisUvNmJCy/BVUJqm/eBIxXqpgbUtiBise12HQlc+ClwFSKRCiZH6wXpQs7OzETWn6XENa/trYemywuK0IpGsTotgRU3fcVBzouWG6pOnpqY0BhuGGpDXeUjIW7JKcfuX3tjjP9k4FBkZN4PtY+042JGzzNMcGDJ35C7tmcU++tJmjE63OpSUuLEJ62GcfXUO+59kr8rJnlOY0WfAGtYaY/PHYPv9fhdEY7++4nz/BWS17UPWY0Es2avWp3vOYOTnCCheBtaqHskJr95kZBL3AvdR2XkEex5mYbdQ+qwCd97dRTAcXHn1Moyrt16PA2tN//V8jY+Pf4cS/VWerzU9sDay1gd2Xf4F/AZqlpeB9836LwAAAABJRU5ErkJggg==)
    no-repeat center center;
  cursor: pointer;
}
tr.shown td.dt-control {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACdUlEQVR4Aa2V30tTYRjHVSgsoQKhXPUPlKZMlImiIIg/pggiiDeCBAdqyC4Kf9zVhVdeelX33QnCbtYvxZsxxkoqKxiz1SzdFudMb5xO5/bt+fa+sPCw3IVf+PA+532e5ytn53lfK0qoSrggXBauCbUKxtxjjjVnq1IXXxFuCXeEFqGdMOYec6zRtZX/M6sWrgv1hmHcDwQCLxOJxM9CoZAnjLnHHGt0bbXdVG1cEm4KLp/P9yKXyx2jhJhjDWvZc9qUwUWhzuFwdMVisc8QFQ4PcbCygvT0NJLDw0gNDSH96DEyfj8KmQwo1rJHem8oD2VapX/sxlAo9Aqi/N4e9hYWsDMwgARxD2DH7ZZYren5eZxYFqhgMOhnr3BVeSnn216v98Hf3yqXg/X0CX719YFs9/WquJfPGtkzZ2fBWvZ4PB6DHtqrokaol7/0GqLM2hq2enpsxMmpvf3VVVD8UOJxV42Uet1Wy7J+M5mam8P37u6ySM7MgDJNM8mRUl5qYDtOREz+GB3FZlcXNjs7UUrMk/jYGKhsNnuo57TWZhgTw0hHO0EpRdpV/tvICKgjUdFQv/Lu7q7JZHxqCl9dLqGtSJtL4VJ80Wvc8xD2V9YfRUbmLZPp5WVstLTYaSWt+lmt1tISKH5Q/VFqbGOTl6GNTk7iQ3Oz4FSrU8UfuTqdBJHxceQz+2APe/8Zm+Jgh8PhNxBlt7YQNQysNzVivbEJ7wXGiiZEJiZwEI2C4mFgr/aoKnn0jk0TiWfPsTE4iHcN9xBuaMCn/n5sLy7iKJk8ffTqikfvfC4H9laWdX2lUqltaDEu9/o664LtIOVfsOf4L+APb5yaiwyN8+8AAAAASUVORK5CYII=)
    no-repeat center center;
}

table.dataTable tbody td.no-padding {
  padding: 0;
}

/* Control Server Style */
.control-status-list {
  padding: 0;
  margin: 0;
}

.control-status-item {
  position: relative;
  margin: 10px 0;
  padding-left: 30px;
  font-size: 16px;
}

.control-status-item::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  left: 0;
  top: 50%;
  margin-left: 10px;
  transform: translateY(-50%);
}
.control-status-item.connected::before {
  background-color: #00ff00;
}

.control-status-item.disconnected::before {
  background-color: #ff0000;
}

/* Create outer glow animation */
@keyframes outer-glow-connected {
  0%,
  100% {
    box-shadow: 0 0 10px 2px rgba(0, 255, 0, 0.8);
  }
  50% {
    box-shadow: 0 0 20px 4px rgba(0, 255, 0, 0.6);
  }
}

@keyframes outer-glow-disconnected {
  0%,
  100% {
    box-shadow: 0 0 10px 2px rgba(255, 0, 0, 0.8);
  }
  50% {
    box-shadow: 0 0 20px 4px rgba(255, 0, 0, 0.6);
  }
}

/* Apply the animation to the control-status pseudo-element */
.control-status-item.connected::before {
  animation: outer-glow-connected 1s infinite;
}
.control-status-item.disconnected::before {
  animation: outer-glow-disconnected 1s infinite;
}

/* Create Hover Display to ids */
.control-server-overlay.control-server-disconnected::after {
  /* Content: Server Offline */
  content: "Server Offline";
  /* position middle */
  position: absolute;
  top: 50%;
  left: 50%;
  /* transform to center */
  transform: translate(-50%, -50%);
  /* Add background dark opacity 50% */
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  /* Move content to center */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}