* {
  margin: 0;
  padding: 0;
}
.no-content::before, .no-content::after {
  content: none !important;
}
.cet-container {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}
.hide-number::-webkit-outer-spin-button,
.hide-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tv-frame::before {
  content: "";
  background-image: url("https://cdn.space-aces.com/spacemap/ui/quests/questGiverFrame.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  display: block;
}
/* Firefox */
.hide-number[type=number] {
  -moz-appearance: textfield;
}
:root {
  --default-blue: #287490;
  --default-middle-blue: #0c2e3b;
  --default-dark-blue: #030e12;
  --default-dark-blue-transparent: #030e129f;
  --default-text-blue: #46d2fb;
  --active-window: 10000;
  --shop-text-color: #c5ecff;
  --at-secondary-color: #4cb5dd;
  --text-silver: #c3c3c3;
  --grid: rgba(140, 220, 255, 0.06);
}
#ship-icon {
  width: 48px;
  height: 48px;
}
.ubershadow {
  filter: drop-shadow(0px 0px 4px red);
}
button:focus {
  outline: 0;
}
.gears::after {
  content: "";
  background-image: url("https://cdn.space-aces.com/spacemap/image/assembly/gears.svg");
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
}
.locked::after {
  content: "";
  background-image: url("https://cdn.space-aces.com/spacemap/image/svg/locked.svg");
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
}
.repair-icon::after {
  content: "";
  background-image: url("https://cdn.space-aces.com/spacemap/image/svg/repair.svg");
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  width: 50%;
  height: 50%;
  background-size: cover;
  left: 25%;
  top: 25%;
}
.hover-icon > div > svg {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  cursor: pointer;
}
.hover-icon:hover > div > svg {
  opacity: 1;
}
.crown::after {
  content: "";
  background-image: url("https://cdn.space-aces.com/spacemap/ui/group/leader.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto;
  width: 23px;
  height: 15px;
  position: relative;
  display: inline-block;
}

.perc-val::after {
  content: "%";
  position: relative;
  margin-left: 2px;
}
.count-val::after {
  content: "x";
  position: relative;
  margin-left: 2px;
}
.displaying-val::after {
  content: ":";
  position: relative;
  margin-right: 2px;
}
.curr-val::after {
  content: "/";
  position: relative;
  margin-right: 2px;
}

canvas#hwInfo {
  display: none !important;
}
.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.7;
}
.d-flex-col {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.d-flex-row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.d-flex-row.center {
  justify-content: center;
}
.d-flex-col.center {
  justify-content: center;
}
.d-flex-row.space-between {
  justify-content: space-between;
}
.custom-navbar-item {
  color: #287490;
  border: 1px solid #287490;
  background-color: rgba(22, 38, 47, 0.5);
  font-size: var(--font-base);
  padding: var(--pinky-padding);
  box-sizing: border-box;
  cursor: pointer;
  transition: .25s ease-in-out;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #183a4d;
  border-top: none;
  width: fit-content;
  white-space: nowrap;
}
.bg-light-grad {
  color: #bfbfbf;
  background: linear-gradient(180deg, rgba(50,50,50,1) 0%, rgb(74, 79, 92) 50%, rgba(50,50,50,1) 100%);
}
.bg-light {
  color: #000;
  background-color: #a5c8e6;
}

.custom-navbar-item.w-100 {
  width: 100%;
}
.custom-navbar-item i {
  position: absolute;
  left: 2px;
}
.custom-navbar-item:hover, .custom-navbar-item.active {
  border-color: #3290b3;
  color: #3290b3;    
}
.scrollbar-custom {
  scrollbar-color: #287490 transparent !important;
  scrollbar-width: thin !important;
  overflow-y: auto;
}
.scrollbar-custom::-webkit-scrollbar, .main::-webkit-scrollbar {
  width: 8px;
}
.scrollbar-custom::-webkit-scrollbar-track, .main::-webkit-scrollbar-track {
  border-radius: 20px;
  background-color: transparent;
}
.scrollbar-custom::-webkit-scrollbar-thumb, .main::-webkit-scrollbar-thumb {
  border-radius: 20px;
  background-color: #287490;
  cursor: pointer;
}

.shiny-text {
  color: #e6dcb3 !important;
  text-shadow: 0px 0px 5px#f78b39;
  font-size: var(--font-lg);
}
.shiny-text.xl {
  font-size: var(--font-4xl);
}
.shiny-text.xxl {
  font-size: var(--font-6xl);
}

.stripy-button {
  --bg: #41a53a;
  --bg-gradiated: #6e776d;
  --border-inset-color: #35ef28;
  --text-color: white;
  background-image: repeating-linear-gradient( to bottom, var(--bg), var(--bg) 7%, var(--bg-gradiated) 10% );
  cursor: pointer;
  border-radius: 5px;
  color: var(--text-color);
  width: 80%;
  font-size: var(--font-lg);
  height: 40px;
  border: none;
  box-shadow: inset 0px 0px 10px 2px var(--border-inset-color);
  margin: 5px 0;
}
.stripy-button.info {
  --bg: #3a89a5;
  --bg-gradiated: #6d7177;
  --border-inset-color: #28c0ef;
  --text-color: white;
}
.stripy-button.danger {
  --bg: #a53a3a;
  --bg-gradiated: #776d6d;
  --border-inset-color: #ef2828;
  --text-color: white;
}
.stripy-button:dilsaled, .stripy-button.dilsaled, .stripy-button.cooldown {
  --bg: #7f947e;
  --bg-gradiated: #585858;
  --border-inset-color: #6e7e6c;
  --text-color: white;
}
.jumpy {
  animation: pulse-size-animation 3s 1;
}
.jumpy.infinite {
  animation-iteration-count: infinite;
}

.gamepad-cursor {
  width: 42px;
  height: 42px;
  position: absolute;
  z-index: 1000000;
  display: none;
}

body[gamepad-on="true"] .gamepad-cursor[gamepad-cursor="true"] {
  display: block;
}
body[gamepad-on="true"] input[type="checkbox"] {
  min-width: 40px;
  min-height: 40px;
}
body[gamepad-on="true"] .main .size-dragger {
  border-width: 20px 0 20px 20px;
}

body {
  --faction-bg: url("https://cdn.space-aces.com/spacemap/welcome_standard_mask_bg_1.jpg")
}
body[faction-id="1"] {
  --faction-bg: url("https://cdn.space-aces.com/spacemap/welcome_standard_mask_bg_1.jpg")
}
body[faction-id="2"] {
  --faction-bg: url("https://cdn.space-aces.com/spacemap/welcome_standard_mask_bg_2.jpg")
}
body[faction-id="3"] {
  --faction-bg: url("https://cdn.space-aces.com/spacemap/welcome_standard_mask_bg_3.jpg")
}

body {
  --zindex-overlay: 99999;
  --zindex-repair: 100000;
  --zindex-connection: 100001;
  overflow-y: clip;
  overflow-x: clip;
  position: relative;
  background: url("https://cdn.space-aces.com/spacemap/loading_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: black;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: 100dvw;
  height: 100dvh;
  user-select: none; /* Non-prefixed version, currently - Chrome, Opera and Firefox */
  margin: 0;
  padding: 0;
  height: 100dvh;
  background-color: black; /* Dark background to highlight snow */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: eurostile, sans-serif, 'Noto Color Emoji';
  color: #fff;
  font-weight: 600;
}
body:has(.loading_bar_wrapper) {
  box-shadow: inset 0px 0px 80px 55px rgba(0,0,0,0.76);
}
body[connection-state="0"]::before, body[hero-state="0"]::before, ::backdrop {
  content: "";
  width: 100vw;
  height: 100dvh;
  background-color: rgb(0,0,0,0.4);
  position: absolute;
  z-index: var(--zindex-overlay);
}
.popover-default::backdrop {
  display: none !important;
}
.calendar {
  width: 50%;
  height: 70%;
  max-height: 70%;
  display: flex;
  margin-bottom: 2%;
  background-color: var(--default-dark-blue-transparent);
  border: 2px solid var(--default-blue);
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 5px 7px;
  font-size: var(--font-6xl);
  filter: drop-shadow(0 0 20px black);
}
@media only screen and (max-width: 1920px) {
  .calendar {
    width: 60%;
  }
}
@media only screen and (max-width: 1440px) {
  .calendar {
    width: 70%;
  }
}
.calendar .calendar-item {
  position: relative;
}
.calendar .calendar-item[main-bonus="true"] {
  text-align: left;
  grid-column: 6/-6
}
.calendar .calendar-item[main-bonus="true"] .day-text {
  font-size: var(--font-9xl);
  align-self: flex-start;
}
.calendar .calendar-item[main-bonus="true"] .item-name {
  display: block !important;
}
.calendar .calendar-item[is-today="true"]  {
  border-width: 3px !important;
  border-color: white !important;
}
*[data-claimed="true"]::after {
  background-image: url("https://cdn.space-aces.com/spacemap/image/svg/checkmark.svg");
  background-repeat: no-repeat;
  background-position: center;
  content: "";
  position: absolute;
  z-index: 1;
  width: 100%;
  height: calc(100% - 2px);
  backdrop-filter: brightness(0.5);
  border-radius: 5px;
}
.calendar .calendar-item .day-text {
  width: 100%;
}
.snowy-overlay {
  background-image: url("https://cdn.space-aces.com/spacemap/snowyFooter.png");
  width: calc(100% + 4px);
  opacity: 100%;
  position: absolute;
  top: -20px;
  left: -2px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 3;
  pointer-events: none;
  display: unset !important;
}
.calendar .calendar-item .item-img {
  object-fit: contain;
  height: calc(100% - 80px);
  filter: drop-shadow(0px 0px 2px white);
}
.loading_bar_wrapper {
  height: 80px;
  width: 500px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: white;
  font-size: 3vw;
  border: 2px solid #2c8226;
  border: 2px solid #334832;
  --bg: #2c4f29;
  --bg-gradiated: #2b4529;
  --border-inset-color: #35ef28;
  --text-color: white;
}
.loading_bar_real {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: repeating-linear-gradient(to bottom, var(--bg), var(--bg) 5%, var(--bg-gradiated) 11%);
  width: 0;
  border-radius: 10px;
  transition: .25s ease-in-out;
  font-family: orbitron, sans-serif;
  box-sizing: border-box;
  font-size: var(--font-8xl);
  text-shadow: rgb(30 30 30) 2px 3px 4px;
  transition: 0.2s ease-in-out
}
.loading_bar_ready {
  transition: 0.2s ease-in-out;
  cursor: pointer;
  border-radius: 12px;
  &:hover {
    box-shadow: 0 0 20px #11760a, 0 0 40px #1b8314;
    --bg: #377e30;
    border-color: #2c8226;
    --bg-gradiated: #3e6c3a;
  }
  animation: pulse-size-animation 2s infinite;
}
.loading_bar_ready:hover .loading_bar_real {
  color: rgb(230, 220, 179) !important;
  text-shadow: 0px 0px 5px#f78b39;
  background-color: #41a53a;
}

.controllers-wrapper {
  position: absolute;
  min-width: 114px;
  display: grid;
  z-index: 10001;
  left: 50px;
  top: 30%;
  width: fit-content;
}
.controllers-wrapper.no-win {
  top: 0;
  left: calc(98vw - 152px);
}
body[layout-edit="false"] .controllers-wrapper .controlls {
  display: none;
}
.controllers-wrapper .controlls {
  position: absolute;
  bottom: -25px;
  right: -25px;
  z-index: 1;
}
.controllers-wrapper.no-win .controlls {
  right: 0;
}

.controllers-wrapper[mode="verticalStack"] {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3px;
}
.controllers-wrapper[mode="verticalStack"] .col {
  display: flex;
  flex-flow: column nowrap;
}
.controllers-wrapper[mode="verticalStack"] .col:nth-child(odd) {
  margin-top: 10px;
}
.controllers-wrapper[mode="horizontalStack"] {
  grid-template-rows: 1fr 1fr 1fr;
  gap: 3px;
}
.controllers-wrapper[mode="horizontalStack"] .col {
  display: flex;
  flex-flow: row nowrap;
}
.controllers-wrapper[mode="horizontalStack"] .col:nth-child(odd) {
  margin-left: 10px;
}
.actionbar[mode="horizontalLine"], .controllers-wrapper[mode="horizontalLine"] {
  display: flex;
  flex-flow: row nowrap;
}
.controllers-wrapper[mode="horizontalLine"] .col {
  display: flex;
  flex-flow: row nowrap;
}
.actionbar[mode="verticalLine"], .controllers-wrapper[mode="verticalLine"] {
  display: flex;
  flex-flow: column nowrap;
}
.controllers-wrapper[mode="verticalLine"] .col {
  display: flex;
  flex-flow: column nowrap;
  gap: 0;
}
.controllers-wrapper[mode="verticalLine"] {
  width: fit-content !important;
  min-width: unset !important;
}

@keyframes blinker {
  50% {
    opacity: 0.7;
  }
}
.shop, .refinement {
  position: absolute;
  width: 55vw;
  height: 55vh;
  border: 1px solid #287490 !important;
  border-radius: 5px;
  color: white;
  font-size: var(--font-base);
  padding: .2rem 0;
  box-sizing: border-box;
  padding: 0;
}
.shop .section-icon {
  display: none;
}
.shop-main[is-loading="true"]::before {
  content: "";
  width: 100%;
  height: calc(55vh - 33px);
  background-color: rgb(0,0,0,0.4);
  position: absolute;
  z-index: var(--zindex-overlay);
  background-image: url("https://cdn.space-aces.com/spacemap/image/shopImg/loading.gif");
  background-position: center;
  background-repeat: no-repeat;
} 

body[ui-window-bg="true"] .shop {
  background-color: rgba(45, 72, 88, 0.75) !important;
}
body[ui-window-bg="true"] .shop .shop-header {
  background-color: #25434f;
}
body[ui-window-bg="true"] .shop.header {
  background: linear-gradient(180deg, rgba(20,20,20,1) 0%, rgb(37 38 41) 50%, rgba(20,20,20,1) 100%);
}


.shop .shop_main {
  width: 100%;
  height: 100%;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.shop .shop-main {
  display: flex;
  flex-flow: column nowrap;
}
.shop .shop-header {
  display: flex; 
  flex-flow: row nowrap;
  justify-content: space-between;
  padding: 7px 20px;
  height: 48px;
  align-items: center;
  box-sizing: border-box;
}
.shop .shop-header .texts-wrapper {
  display: flex;
  flex-flow:  row nowrap;
  align-items: center;
  width: fit-content;
  height: 100%;
}
.shop .shop-header h2 {
  white-space: nowrap;
}
.shop .shop-header img {
  height: 100%;
  object-fit: contain;
}
.shop .shop-header .news-bar {
  width: 65%;
  border-right: 1px solid #287490;
  border-left: 1px solid #287490;
  height: 100%;
  overflow: hidden;
}
.shop .shop-header .news-bar .wrapper {
  padding: 0 10%;
}
.shop .shop-content {
  display: grid;
  grid-template-columns: 1fr 3fr;
}
.shop .shop-navigation {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  border-right: 1px solid #287490;
  max-height: calc(var(--content-height, 100%) - 48px);
  font-family: "orbitron", sans-serif;
}
.shop .shop-nav-item {
  position: relative;
  background: linear-gradient(180deg, rgba(20,20,20,1) 0%, rgb(37 38 41) 50%, rgba(20,20,20,1) 100%);
  color: rgb(230, 220, 179) !important;
  text-shadow: 0px 0px 5px#f78b39;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 0 5px;
  padding: 15px 0;
  box-sizing: border-box;
  border: 1px solid grey;
  border-right: none;
  border-left: none;
  cursor: pointer;
  transition: .25s ease-in-out;
}
.shop .shop-nav-item:hover span, .shop .shop-nav-item.active span {
  color: rgb(230, 220, 179) !important;
}
.shop .shop-nav-item:hover, .shop .shop-nav-item.active {
  border-color: white;
}
.shop .shop-nav-item .section-title {
  min-width: 135px;
  margin: 0 !important;
  font-size: var(--font-xl);
  text-align: center;
}
.shop .shop-items {
  display: grid;
  grid-template-columns: minmax(200px, auto) 2fr;
  margin-left: 1px;
}
.shop-items .items-list-wrapper {
  display: flex;
  flex-flow: column nowrap;
  max-height: calc(var(--content-height, 100%) - 48px);
  height: calc(100% - 1px);
}
.shop-items .selected-item-display {
  max-height: calc(var(--content-height, 100%) - 48px);
}
.shop-items .items-list-wrapper .items-list {
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100px;
  border-right: 1px solid #278490;  
  height: 100%; /*body height - headers*/
}

@media screen and (max-width: 1240px) {
  .shop .shop-items {
    grid-template-columns: minmax(100px, auto) 2fr;
    max-height: 45vh
  }
  .shop .shop-navigation {
    max-height: 45vh
  }
  .shop-items .items-list-wrapper .items-list {
    grid-template-columns: 1fr;
  }
  .shop .item-detail-header .item-icon, .shop .item-detail-header .giffer {
    max-height: 125px;
  }
  .shop .item-detail-header .giffer .mainSprite {
    min-height: 125px;
  }
  .shop .shop-content {
    overflow-y: hidden;
    overflow-x: hidden;
  }
}
.shop-items .shop-aval-item {
  width: calc(100% - 2px);
  height: 100px;
  border: 1px solid transparent;
  position: relative;
  background-image: url("https://cdn.space-aces.com/spacemap/image/shopImg/item-bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
    justify-content: center;
}
.shop-items .shop-aval-item .item-icon {
  width: 98px;
  height: 98px;
  filter: drop-shadow(0px 0px 2px white);
}
.shop-nav-item[is-section-tl="true"]::after {
  content: "";
  position: absolute;
  top: calc(50% - 9px);
  right: 5px;
  background-position: center;
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(191 122 15);
  text-shadow: 0px 0px 5px #f78b39;
  background-image: url("https://cdn.space-aces.com/spacemap/image/shopImg/tm-icon.png");
  background-size: contain;
}
 .shop-nav-item[is-section-discount="true"]::before {
  content: "";
  position: absolute;
  top: calc(50% - 9px);
  right: 25px;
  background-position: center;
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(191 122 15);
  text-shadow: 0px 0px 5px #f78b39;
  background-image: url("https://cdn.space-aces.com/spacemap/image/shopImg/sale-icon-section.png");
  background-size: contain;
}
.shop-items .shop-aval-item[is-sale="true"]::before {
  content: "%";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: var(--font-10xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(191 122 15);
  z-index: 1;
  text-shadow: 0px 0px 5px #f78b39;
}
.shop-items .shop-aval-item[is-sale="true"] {
  box-shadow: inset 2px 2px 34px -5px rgb(220 103 20);
}
.shop-items .shop-aval-item[is-elite="true"] .elite-icon {
  display: block !important; 
}
.shop-items .shop-aval-item[is-tl="true"] .time-limited-icon {
  display: block !important;
}
.shop .shop-sel-item[is-elite="true"] .elite-icon {
  display: block !important;
}
.shop .shop-sel-item[is-tm="true"] .time-limited-icon {
  display: block !important;
}

.shop .shop-sel-item[is-dc="true"] .item-detail-header {
  box-shadow: inset 2px 2px 34px -5px rgb(220 71 20);
}
.shop .shop-sel-item[is-dc="true"] .price-per-unit {
  text-decoration: line-through;
}
.shop .shop-sel-item[is-dc="true"] .price-discount-val, .shop .shop-sel-item[is-dc="true"] .price-per-unit-sale {
  display: flex !important;
}
.shop .shop-sel-item[is-dc="true"] .item-detail-header::after {
  content: "%";
  position: absolute;
  color: rgb(191 122 15);
  text-shadow: 0px 0px 5px#f78b39;
  top: calc(50% - 41px);
  font-size: var(--font-huge);
}
.shop-items .shop-aval-item.active {
  border-color: #ffe538;
}
.shop-items .items-list-wrapper .controls-wrapper {
  height: 35px;
  padding: 5px 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  border-right: 1px solid #287490;
  gap: 5px;
  background-color: rgba(20,20,20,1);
}
.shop .shop-refresh-btn {
  margin-left: 20px;
  opacity: 1 !important;
}
.shop .controls-wrapper .btn-item-list-nav, .shop .shop-refresh-btn {
  width: 100px;
  cursor: pointer;
  padding: 5px 5px;
  box-sizing: border-box;
  border: 1px solid #287490;
  background-color: rgb(38, 39, 41);
  color: white;
  opacity: 0.8;
  transition: 0.25s ease-in-out;
}
.shop .controls-wrapper .btn-item-list-nav:hover {
  opacity: 1;
}
.shop .controls-wrapper .btn-item-list-nav:last-of-type {
  margin-right: 5px;
  width: fit-content;
}
.shop-items .item-info-wrapper {
  position: absolute;
  bottom: 0;
  background-color: rgb(20,20,20,0.8);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.shop-items .item-info-wrapper span {
  margin: 0 !important;
}
.shop-items .shop-sel-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.shop .item-detail {
  display: flex;
  flex-flow: column nowrap;
  margin-left: 1px;
  border-right: 1px solid #287490;
  height: calc(100% - 1px);
}
.shop .item-detail-header {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  background: url("https://cdn.space-aces.com/spacemap/image/shopImg/background.png");
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 200px;
  justify-content: center;
}
.shop .item-detail-header .item-icon, .shop .item-detail-header .giffer {
  max-height: 160px;
  object-fit: contain;
}
.shop .item-detail-header .giffer .mainSprite {
  min-width: 100%;
  min-height: 200px;
}
.shop .giffer .mainSprite img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.shop .item-detail-desc-wrapper {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 15px 10px;
  overflow-y: auto;
  margin: 5px;
  border: 1px solid #287490;
  box-shadow: inset 0px 0px 10px 2px #344e6c;
}
.shop .item-detail-desc-wrapper span  {
  margin: 0 !important;
  color: #c5ecff;
  filter: drop-shadow(0px 0px 4px black);
}
.shop .item-name  {
  position: absolute;
  bottom: 0;
  margin: 0 !important;
  background-color: rgb(20,20,20,0.8);
  text-align: center;
}
.shop .item-detail-header .item-name {
  padding: 5px 0;
  --radius: 10px;
  --bg-color: rgba(45, 72, 88, 0.2);
  background: var(--bg-color);
  background: -webkit-linear-gradient(45deg, transparent 0px, var(--bg-color) 0px), -webkit-linear-gradient(135deg, transparent 0px, var(--bg-color) 0px), -webkit-linear-gradient(225deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(315deg, transparent var(--radius), var(--bg-color) var(--radius));
  background-position: bottom left, bottom right, top right, top left;

  box-sizing: border-box;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
.shop .hangar-info-item-wrapper:nth-child(odd) {
  background-color: #0d1014;
}
.shop .hangar-info-item-wrapper:nth-child(even) {
  background-color: #1b2026;
}
.shop .hangar-info-item-wrapper {
  width: 100%;
}
.shop .hangar-info-item {
  padding: 2px 5px;
  align-items: center;
  justify-content: start;
  display: grid;
  grid-template-columns: 2fr 3fr;
  width: 100%;
}
.shop .hangar-info-item-wrapper .label {
  color: #a2a2a2;
}
.shop .hangar-info-item-wrapper .value {
  color: #5db1ff;
  justify-self: center;
}

.shop .item-time-remaining  {
  display: none;
  position: absolute;
  top: 0;
  margin: 0 !important;
  padding: 5px 0;
  --radius: 10px;
  --bg-color: rgba(45, 72, 88, 0.2);
  background: var(--bg-color);
  background: -webkit-linear-gradient(45deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(135deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(225deg, transparent 0, var(--bg-color) 0), -webkit-linear-gradient(315deg, transparent 0, var(--bg-color) 0);
  background-position: bottom left, bottom right, top right, top left;

  box-sizing: border-box;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  text-align: center;
}
.shop .item-time-remaining span {
  margin: 0 5px !important;
}
.shop .shop-sel-item[is-tm="true"] .item-time-remaining {
  display: block;
}
.shop .item-purch-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 6fr 2fr 2fr;
  align-content: center;
  height: calc(var(--content-height) - 49px);
  justify-content: center;
}
.shop .item-purch-wrapper .purch-wrapper-header {
  padding: 5px 0;
  height: fit-content;
  --radius: 10px;
  --bg-color: rgb(20,20,20,0.7);
  background: var(--bg-color);
  background: -webkit-linear-gradient(45deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(135deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(225deg, transparent 0, var(--bg-color) 0), -webkit-linear-gradient(315deg, transparent 0, var(--bg-color) 0);
  background-position: bottom left, bottom right, top right, top left;
  box-sizing: border-box;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  text-align: center;
  font-size: var(--font-lg);
}
.shop .price-display-wrapper {
  width: 80%;
  height: fit-content;
  justify-self: center;
  margin-bottom: 10px;
  padding: 1px;

  text-align: center;
  color: white;

  --radius: 5px;
  --bg-color: #1478a0;
  background: var(--bg-color);
  background: -webkit-linear-gradient(45deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(135deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(225deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(315deg, transparent var(--radius), var(--bg-color) var(--radius));
  background-position: bottom left, bottom right, top right, top left;

  box-sizing: border-box;
  background-size: 51% 50%;
  background-repeat: no-repeat;
}
.shop .price-per-unit > span {
  color: #c5ecff !important;
}
.price-display {
  width: 100%;
  height: fit-content;
  padding: 10px 15px;

  text-align: center;
  color: var(--shop-text-color);

  --radius: 5px;
  --bg-color: rgba(20,20,20,1);
  background: var(--bg-color);
  background: -webkit-linear-gradient(45deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(135deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(225deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(315deg, transparent var(--radius), var(--bg-color) var(--radius));
  background-position: bottom left, bottom right, top right, top left;

  box-sizing: border-box;
  background-size: 51% 50%;
  background-repeat: no-repeat;
}
.shop .btn-purchase {
  width: 50%;
  justify-self: center;
}
.shop .btn-purchase:hover {
  animation: blinker 2s linear infinite;
}
.shop .amounts-options {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr 1fr;
  background-image: url("https://cdn.space-aces.com/spacemap/image/shopImg/smallelement4.png"), url("https://cdn.space-aces.com/spacemap/image/shopImg/smallelement5.png");
  background-position: left center, right center;
  background-repeat: no-repeat, no-repeat;
  background-size: contain;
}
.shop .price-info {
  background-image: url("https://cdn.space-aces.com/spacemap/image/shopImg/divider10.png");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 10px;
}
.shop .buy-wrapper {
  background-image: url("https://cdn.space-aces.com/spacemap/image/shopImg/divider11.png");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 10px;
}
.shop .amounts-options .list {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  align-self: center;
  gap: 3px 0;
}
.shop .amounts-input {
  justify-self: center;
  align-self: center;
}
.shop .shop-amount-option {
  width: 100px;
  cursor: pointer;
  padding: 5px 2px;
  box-sizing: border-box;
  border: 1px solid #287490;
  background-color: rgb(38, 39, 41);
  color: white;
  text-align: center;
  transition: .25s ease-in-out;
  border-radius: 3px;
  box-shadow: inset 0px 0px 6px 2px #34506c;
}
.shop .shop-amount-option:hover, .shop .shop-amount-option.active {
  border-color: #2d98be;
  background-color: rgb(50, 54, 63);
}
.shop .shop-amount-option[is-disabled="true"] {
  pointer-events: none;
  border: 1px solid #215061;
  background-color: rgb(17, 17, 17);
}
.shop .amount-btn {
  width: 30px;
  height: 30px;
  padding: 1px;

  text-align: center;
  color: white;

  --radius: 5px;
  --bg-color: #19a6da;
  background: var(--bg-color);
  background: -webkit-linear-gradient(45deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(135deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(225deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(315deg, transparent var(--radius), var(--bg-color) var(--radius));
  background-position: bottom left, bottom right, top right, top left;

  box-sizing: border-box;
  background-size: 50% 50%;

  background-repeat: no-repeat;
  cursor: pointer;
  border: none;
}
.shop .amount-btn .wrapper {
  text-align: center;
  color: white;

  --radius: 5px;
  --bg-color: rgb(17,17,17);
  background: var(--bg-color);
  background: -webkit-linear-gradient(45deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(135deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(225deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(315deg, transparent var(--radius), var(--bg-color) var(--radius));
  background-position: bottom left, bottom right, top right, top left;

  box-sizing: border-box;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  text-align: center;
  width: 100%;
  height: 100%;
  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-lg);
}
.shop .amounts-input input {
  background-color: rgb(17, 17, 17);
  padding: 5px 10px;
  height: 30px;
  width: fit-content; 
  border: 1px solid #19a6da;;
  box-sizing: border-box;
  color: white;
  margin: 0 5px;
  transition: box-shadow ease .2s;
  border-radius: 5px;
  outline: none;
}
.shop .amounts-input input:focus-within {
  box-shadow: 0 0 10px 2px #19a6da;
}
.shop .amounts-input input::-webkit-outer-spin-button,
.shop .amounts-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.shop .amounts-input input[type=number] {
  -moz-appearance: textfield;
}

/*repair*/
.repair {
  position: absolute;
  width: 40vw;
  height: 60vh;
  border: 1px solid #287490 !important;
  background-color: rgba(22, 38, 47, 1) !important;
  border-radius: 5px;
  color: white;
  font-size: var(--font-base);
  padding: .2rem 0;
  box-sizing: border-box;
  z-index: var(--zindex-repair) !important;
  padding: 0;
}
.repair .repair_header {
  background: linear-gradient(180deg, rgba(20,20,20,1) 0%, rgb(37 38 41) 50%, rgba(20,20,20,1) 100%);
  /*background-color: rgba(20,20,20,1);*/
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.repair .repair_main #repair-error {
  display: none;
}
.repair .repair_main[rep-error="true"] #repair-error {
  display: block;
}
.repair .repair_main {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(32,36,44,1) 0%, rgba(20,22,25,1) 100%);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.repair_main .repair-content {
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  flex-flow:  column nowrap;
  align-items: center;
}
.repair .repair_main .info {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  text-align: center;
  gap: 3px 0;
  margin-bottom: 5px;
}
.repair .info span {
  font-size: var(--font-md);
}
.repair .info .destroyed-title, .repair #repair-error {
  color: #b50000 !important;
  font-size: var(--font-lg);
  font-weight: 600;
}
.repair .info #destroyed-by {
  color: #ffe538 !important;
  font-size: var(--font-xl);
  font-weight: bold;
}
.repair .repair-options {
  padding: 0 5%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  box-sizing: border-box;
  margin: 10px 0;
  margin-bottom: 20px;
}
.repair .repair-option {
  width: fit-content;
  height: fit-content;
  padding: 1px;
  box-sizing: border-box;

  --bg-color: grey;
  --radius: 5px;
  background: var(--bg-color);
  background: -moz-linear-gradient(45deg, transparent var(--radius), var(--bg-color) var(--radius)), -moz-linear-gradient(135deg, transparent var(--radius), var(--bg-color) var(--radius)), -moz-linear-gradient(225deg, transparent var(--radius), var(--bg-color) var(--radius)), -moz-linear-gradient(315deg, transparent var(--radius), var(--bg-color) var(--radius));
  background: -o-linear-gradient(45deg, transparent var(--radius), var(--bg-color) var(--radius)), -o-linear-gradient(135deg, transparent var(--radius), var(--bg-color) var(--radius)), -o-linear-gradient(225deg, transparent var(--radius), var(--bg-color) var(--radius)), -o-linear-gradient(315deg, transparent var(--radius), var(--bg-color) var(--radius));
  background: -webkit-linear-gradient(45deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(135deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(225deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(315deg, transparent var(--radius), var(--bg-color) var(--radius));
  background-position: bottom left, bottom right, top right, top left;
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  cursor: pointer;
}
.repair .repair-option.active-repair {
  --bg-color: #ffe538; 
}
.repair #repair-type-hint {
  color: #ffe538 !important;
}
.repair .repair-option-content {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 15px;
  padding: 7px;
  box-sizing: border-box;

  --bg-color: rgba(20,20,20,1);
  --radius: 5px;
  background: var(--bg-color);
  background: -moz-linear-gradient(45deg, transparent var(--radius), var(--bg-color) var(--radius)), -moz-linear-gradient(135deg, transparent var(--radius), var(--bg-color) var(--radius)), -moz-linear-gradient(225deg, transparent var(--radius), var(--bg-color) var(--radius)), -moz-linear-gradient(315deg, transparent var(--radius), var(--bg-color) var(--radius));
  background: -o-linear-gradient(45deg, transparent var(--radius), var(--bg-color) var(--radius)), -o-linear-gradient(135deg, transparent var(--radius), var(--bg-color) var(--radius)), -o-linear-gradient(225deg, transparent var(--radius), var(--bg-color) var(--radius)), -o-linear-gradient(315deg, transparent var(--radius), var(--bg-color) var(--radius));
  background: -webkit-linear-gradient(45deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(135deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(225deg, transparent var(--radius), var(--bg-color) var(--radius)), -webkit-linear-gradient(315deg, transparent var(--radius), var(--bg-color) var(--radius));
  background-position: bottom left, bottom right, top right, top left;
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
.repair .repair-option #repair-price {
  border: 1px solid #287490;
  border-radius: 5px;
  font-size: var(--font-md);
  padding: 3px 10px;
  background-color: rgba(0,0,0,1);;
  margin: 0 !important;
  min-width: 100px;
  margin-bottom: 5px;
}
.repair #repair-ship-btn {
  width: 50%;
  padding: 7px 0;
  background: linear-gradient(180deg, rgba(20,20,20,1) 0%, rgb(37 38 41) 50%, rgba(20,20,20,1) 100%);
  pointer-events: none;
  transition: .25s ease-in-out;
  color: #fff;
  border: 1px solid #fff;
  position: absolute;
  bottom: 5%;
}
.repair:has(.repair-option.active-repair) #repair-ship-btn {
  cursor: pointer;
  pointer-events: all;
  border-color: #8d8d8d;
  background: linear-gradient(180deg, #41a53a 0%, #2c4f29 100%)
}
.repair .repair_main[activerepairid] #repair-ship-btn {
  cursor: pointer;
  pointer-events: all;
  border-color: #8d8d8d;
  background: linear-gradient(180deg, #41a53a 0%, #2c4f29 100%)
}
.repair #repair-ship-btn:hover {
  border-color: #fff !important;
}
.connection {
  position: absolute;
  width: 20vw;
  height: 25vh;
  border: 1px solid #287490 !important;
  background-color: rgba(22, 38, 47, 1) !important;
  border-radius: 5px;
  color: white;
  font-size: var(--font-base);
  padding: .2rem 0;
  box-sizing: border-box;
  z-index: var(--zindex-connection) !important;
  left: calc(50% - 10vw);
  top: calc(50% - 12.5vh);
}
.connection .connection_header div {
  pointer-events: none;
}
.connection_main {
  width: 100%;
  height: 100%;
  display: grid !important;
  grid-template-areas: 
  "icon text"
  "icon controllers";
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 2fr 1fr;
}
.server_connect_icon {
  grid-area: icon;
  align-self: center;
  justify-self: center;
  font-size: var(--font-huge);
  color: var(--default-blue);
}
.server_connect_txt {
  width: 100%;
  height: 100%;
  grid-area: text;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  font-size: var(--font-lg);
  text-align: center;
}
.server_connect_btn_box {
  width: 100%;
  margin: 2px 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-evenly;
  grid-area: controllers;
}
.server_connect_btn_box button,
.logout_btn, .btn_logout_cancel {
  width: 45%;
  background-color: rgb(22, 38, 47);
  border: none;
  color: #3290b3;
  border: 1px solid #287490;
  border-radius: 2px;
  font-weight: bold;
  padding: 0.2rem;
  box-sizing: border-box;
  cursor: pointer;
}
.btn_logout_cancel.danger {
    background-color: rgb(47, 22, 22);
    border: none;
    color: #b33232;
    border: 1px solid #902828;
}
.userinfo {
  top: 0;
  left: 20vw;
  width: 252px;
  height: 136px;
}
.shipinfo {
  top: 0;
  left: 40vw;
  width: 252px;
  height: 126px;
}
.spacemap {
  bottom: 2vh;
  right: 1vw;
  width: 18vw;
  height: 25vh;
  padding-bottom: 0.25rem;
  box-sizing: border-box;
}
.log,
.chat,
.admin,
.assembly,
.report,
.pal,
.welcome,
.trade,
.help {
  top: 0;
  left: 0;
  width: 18vw;
  height: 20vh;
  overflow-x: hidden;
  overflow-y: hidden;
}
.equipment {
  width: 40vw;
  height: 50vh;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
.competetive {
  width: 40vw;
  height: 65vh;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
.arena {
  width: 15vw;
  height: 30vh;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
.log_main {
  height: calc(100% - 60px);
  text-align: left;
  overflow-y: auto;
  max-height: 100%;
}
.log_main span {
  margin: 0 !important;
}
.settings {
  width: 35vw;
  height: 50vh;
  position: relative;
}
.settings_main {
  height: var(--content-height);
  overflow-y: auto;
}
.settings_submenu_wrapper {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  width: 100%;
  padding-left: 20%;
  box-sizing: border-box;
}
.settings_menu_wrapper {
  width: 80%;
  margin: 2rem 0;
  background-color: rgb(20, 20, 20, 1);
  display: flex;
  flex-flow: row wrap;
  padding: 1rem;
  box-sizing: border-box;
  border: 1px solid grey;
  border-radius: 0.2rem;
  max-height: 80%;
  overflow-y: auto;
}
.settings_menu_wrapper[menu-open-id="0"] {
  padding-bottom: 55px;
}
.settings_menu_wrapper[menu-open-id="6"] {
  height: 100% !important;
}
.settings_opct_box {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  z-index: 100;
}
.loader_vis {
  width: 100px;
  position: absolute;
  z-index: 101;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}
.option_wrapper_main {
  width: 50%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.option_wrapper_main span,
.check_wrapper_main span, 
.range-slider_wrapper_main span {
  margin: 0 !important;
  color: rgb(125, 125, 125);
  font-size: var(--font-base);
}
.check_wrapper_main {
  gap: 3px;
}
.option_wrapper_main .custom-select {
  margin: 0.3rem 0;
  width: 80%;
  font-weight: bold;
}
.option_wrapper_main .custom-select .option {
  font-weight: bold;
}
.check_wrapper_main, .keyinput_wrapper_main {
  width: 100%;
  display: flex;
  flex-flow: row-reverse nowrap;
  align-items: center;
  padding: 0.2rem;
  box-sizing: border-box;
  justify-content: flex-end;
}
.keyinput_wrapper_main {
  flex-flow: row nowrap !important;
  justify-content: space-between;
}
.range-slider_wrapper_main {
  width: 50%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.range-slider_wrapper_main 
.check_wrapper_main span, .keyinput_wrapper_main span, .range-slider_wrapper_main span {
  margin-left: 0.25rem !important;
}
.range-slider_wrapper_main .slider-wrapper {
  padding: 0 10%;
  box-sizing: border-box;
}
.keyinput_wrapper_main > .key-input-button {
  cursor: pointer;
  min-width: 80px;
  width: fit-content;
  max-width: 40%;
  height: fit-content;
  padding: 5px 10px;
  background-color: rgba(22, 38, 47, 0.5);
  transition: 0.2s ease-in-out;
  color: #287490;
  border: 1px solid transparent;
}
.keyinput_wrapper_main > .key-input-button:hover {
  border-color: #287490;
}

.window-main {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  position: absolute;
  flex-flow: column nowrap;
  border: 1px solid transparent;
  padding-bottom: 10px;
}
.fps_display {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background-color: grey;
  text-align: center;
  z-index: 10;
  font-size: var(--font-base);
  display: none;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0 5px;
  padding: 0 5px;
}
.fps_display .fps-span {
  min-width: 50px;
}
.fps_display .l-span {
  margin: 5px 0;
  border-left: 2px solid white;
  padding-left: 5px;
}
.fps_display .l-span:first-child {
  border-left: none !important;
  padding-left: 0 !important;
}
.fps_display[debug="false"] span.debug {
  display: none;
} 
.fps_display .fps_span {
  width: 50px;
}
.logout {
  width: 13vw;
  height: 13vh;
  top: 43.5vh;
  left: 43.5vw;
  text-align: center;
  z-index: 10;
}
.logout .main {
  height: 100%;
  justify-content: space-around !important;
}
.window-main {
  border: 1px solid transparent;
}
.window-main.window-active {
  z-index: var(--active-window);
}
.header {
  width: 100%;
  height: 30px;
  border-top-right-radius: 5px;
  display: flex;
  flex-flow: row nowrap;
  color: rgb(164 229 255 / 95%);
  text-shadow: 0 0 5px rgb(159 216 255 / 70%);
  font-size: var(--font-lg);
  letter-spacing: 1px;
  align-items: center;
  cursor: pointer;
  transition: 0.25s ease-in-out;
  border-bottom: 0 solid transparent;
  position: relative;
  border-radius: 5px;
  min-height: 30px;
}
.header:hover .main {
  background-color: rgba(22, 38, 47, 0.5);
  border: 1px solid #287490;
}
.main:hover .header {
  background-color: #16262f;
  border-bottom: 1px solid #287490;
}
.main {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.main .size-dragger {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #1dc2ff;
  transform: rotate(45deg);
  position: absolute;
  right: 2px;
  bottom: -4px;
  cursor: pointer;
  transition: 0.25s ease-in-out;
  z-index: 1;
  display: none;
}
.main .size-dragger:hover {
  border-left-color: #56d2ff;
}

/* width */
.main::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.main::-webkit-scrollbar-track {
  background: rgb(100, 100, 100);
}

/* Handle */
.main::-webkit-scrollbar-thumb {
  background: #888;
  transition: 0.25s ease-in-out;
}

/* Handle on hover */
.main::-webkit-scrollbar-thumb:hover {
  background: rgb(25, 25, 25);
}
.log_main {
  align-items: flex-start;
  padding: 10px;
  box-sizing: border-box;
}

body[ui-window-bg="false"] .header div, body[ui-window-bg="false"] .header span {
  display: none;
}

body[ui-window-bg="false"] .header:hover div, body[ui-window-bg="false"] .header:hover span {
  display: flex;
}

body[ui-window-bg="false"] .window-main:has(.header:hover) .header {
  background: linear-gradient(90deg, rgba(21, 33, 45, 1) 0%, rgba(21, 33, 45, 1) 50%, rgba(30, 61, 79, 1) 100%);
  border-bottom-color: #287490;
}
body[ui-window-bg="false"] .window-main[data-header-hover="true"] .header {
  background: linear-gradient(90deg, rgba(21, 33, 45, 1) 0%, rgba(21, 33, 45, 1) 50%, rgba(30, 61, 79, 1) 100%);
  border-bottom-color: #287490;
}
body[ui-window-bg="true"] .window-main, body[ui-window-bg="false"] .window-main:has(.header:hover) , body[ui-window-bg="false"] .window-main[data-header-hover="true"] {
  background-color: rgb(17 35 49 / 62%);
  border-color: #287490;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 24px 24px;
    opacity: .75;
    mask-image: radial-gradient(circle at 20% 15%, rgba(0, 0, 0, .9), transparent 70%);
  }
}

body[ui-window-bg="true"] .header, body[ui-window-bg="false"] .window-main:has(.header:hover) .header, body[ui-window-bg="false"] .window-main[data-header-hover="true"] .header {
  background-color: #15212d;
  background: linear-gradient(90deg,rgba(21, 33, 45, 1) 0%, rgba(21, 33, 45, 1) 50%, rgba(30, 61, 79, 1) 100%);
  border-bottom-color: #287490;

  &::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url("https://cdn.space-aces.com/spacemap/ui/hexSmall.png");
    background-repeat: repeat;
    background-size: 160px;
    background-position: 0 0;

    opacity: 0.25;              /* adjust strength */
    mix-blend-mode: overlay;    /* try: soft-light / multiply */
    pointer-events: none;
  }


  &::after {
    border-bottom-color: #287490;
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 30px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(120, 200, 255, .55), transparent);
    opacity: .75;
    pointer-events: none;
  }
}

.shipinfo .main,
.userinfo .main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0.3rem;
  grid-auto-flow: column;
  justify-items: center;
  align-items: center;
  height: 75%;
}
.userinfo .main {
  grid-auto-flow: row;
}
.main span {
  margin: 3px calc(5% + 20px);
  font-size: var(--font-md);
  color: #efefef;
}
.userinfo .main span, .shipinfo .main span  {
  font-weight: bold;
  font-size: var(--font-base);
}
header span {
  margin-left: 20%;
}
.header div {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.window-header-label {
  font-family: "orbitron", sans-serif;
}
.header .window-resize-wrapper {
  height: 12px;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: default !important;
  gap: 2px;
}
.header .btn-resize-window {
    background-color: #255069;
    border: 1px solid #2081a5;
    border-bottom-color: transparent;
    width: 18px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgb(230, 220, 179);
    text-shadow: 0px 0px 5px#f78b39;
    transition: .25s ease-in-out;
}
.header .btn-resize-window:hover {
  background-color: #326683;
  border-color:#1f87ad;
}
.header .btn-resize-window:last-of-type {
  border-right-color: transparent;
}
.spacemap_main {
  height: 90%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center !important;
  overflow-y: clip;
  overflow-x: clip;
}
.spacemap_main span {
  margin: 0 3px !important;
}
.spacemap_coordinates_wrapper {
  width: 80%;
  height: 10%;
  text-align: left;
  margin: 5px;
  display: flex;
  align-items: center;
}

body[gamepad-on="true"] .slot-gamepad-active {
  border-color: #b50000;
  box-shadow: 0px 0px 5px 2px rgba(181,0,0,1)
}
body[gamepad-on="true"] {
  cursor: none !important;
}

.actionbar,
.action_bar_submenu_list,
.sub_menu_box {
  --ab-gap: 3px;
  position: absolute;
  left: calc(50% - 200px);
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  align-items: center;
  z-index: 150;
  bottom: 10vh;
  height: fit-content;
}
.actionbar {
  flex-wrap: wrap;
  top: 90vh;
  gap: var(--ab-gap) 0;
}
.actionbar.pAb {
  top: calc(90vh + 42px);
}
.action_bar_submenu_list,
.sub_menu_box {
  opacity: 0;
  display: none;
}
.slot_actionbar {
  width: 38px;
  height: 38px;
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/slotBG.png"),
    url("https://cdn.space-aces.com/spacemap/ui/actionBar/slotBorder.png");
  margin: 0 2px;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  cursor: default;
}
.action-bar-slot {
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.action-bar-slot.has-bar .item-amount-indicator-box {
  display: block
}
.action-bar-slot.has-amount .item-amount-text {
  display: block;
}

/*numbers*/

.actionbar .slot_actionbar[slot-index="0"] {
  --content-var: "1";
}
.actionbar .slot_actionbar[slot-index="1"] {
  --content-var: "2";
}
.actionbar .slot_actionbar[slot-index="2"] {
  --content-var: "3";
}
.actionbar .slot_actionbar[slot-index="3"] {
  --content-var: "4";
}
.actionbar .slot_actionbar[slot-index="4"] {
  --content-var: "5";
}
.actionbar .slot_actionbar[slot-index="5"] {
  --content-var: "6";
}
.actionbar .slot_actionbar[slot-index="6"] {
  --content-var: "7";
}
.actionbar .slot_actionbar[slot-index="7"] {
  --content-var: "8";
}
.actionbar .slot_actionbar[slot-index="8"] {
  --content-var: "9";
}
.actionbar .slot_actionbar[slot-index="9"] {
  --content-var: "10";
}
.actionbar.pAb .slot_actionbar[slot-index="10"] {
  --content-var: "11";
}
.actionbar.pAb .slot_actionbar[slot-index="11"] {
  --content-var: "12";
}
.actionbar.pAb .slot_actionbar[slot-index="12"] {
  --content-var: "13";
}
.actionbar.pAb .slot_actionbar[slot-index="13"] {
  --content-var: "14";
}
.actionbar.pAb .slot_actionbar[slot-index="14"] {
  --content-var: "15";
}
.actionbar.pAb .slot_actionbar[slot-index="15"] {
  --content-var: "16";
}
.actionbar.pAb .slot_actionbar[slot-index="16"] {
  --content-var: "17";
}
.actionbar.pAb .slot_actionbar[slot-index="17"] {
  --content-var: "18";
}
.actionbar.pAb .slot_actionbar[slot-index="18"] {
  --content-var: "19";
}
.actionbar.pAb .slot_actionbar[slot-index="19"] {
  --content-var: "20";
}
.actionbar .slot_actionbar::after {
  content: var(--content-var);
  position: absolute;
  bottom: 1px;
  font-size: var(--font-xs);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: #bbbbbb;
  z-index: 5;
  right: 2px;
  font-family: sans-serif;
}

.btn_actionbar {
  cursor: pointer;
  width: 21px;
  height: 21px;
}
.btn_actionbar_inactive {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/buttonInactive.png");
}
.btn_actionbar_active {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/buttonActive.png");
}
.action_bar_submenu_list {
  bottom: calc(10vh + var(--ab-gap));
}
.btn_actionbar_move_pos, .btn_actionbar_move_layout {
  position: absolute;
  left: -21px;
}
.btn_actionbar_move_layout {
  left: -44px;
}
body[gamepad-on="true"] .btn_actionbar_move_pos {
  left: -80px;
}
body[layout-edit="false"] .btn_actionbar_move_pos, body[layout-edit="false"] .btn_actionbar_move_layout {
  display: none;
} 
body[layout-edit="true"] .size-dragger {
  display: block;
}
.sub_menu_box {
  bottom: calc(10vh + 40px + var(--ab-gap));
}
.sub_menu_btn {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/icons/subMenu/btnStandard.png");
  width: 38px;
  height: 38px;
  display: flex;
  justify-items: center;
  align-items: center;
  margin: 0 2px;
  cursor: pointer;
}
.sub_menu_btn img {
  width: 100%;
}
.sub_menu_btn.selected {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/icons/subMenu/btnActive.png");
}
body[data-ab-img-bg="false"] .sub_menu_btn {
  background-image: unset !important;
  background-color: rgba(43,75,92,0.6);
  border: 1px solid #266d88;
  box-shadow: inset 0 0 2px rgba(27,45,57,0.2);
  border-radius: 5px;
}
body[data-ab-img-bg="false"] .slot_actionbar {
  background: repeating-linear-gradient(to bottom, #76a2ed42 0px, #76a2ed42 1px, #47688845 1px, #47688845 2px) !important;
  border: 1px solid #355a6a;
  box-shadow: inset 0 0 1px #001d2a;
}
body[data-ab-img-bg="false"] .action-bar-slot.selected {
  background-image: unset;
  border: 1px solid #c8b868;
  box-shadow: inset 0 0 2px #000;
}
body[data-ab-img-bg="false"] .sub_menu_btn.selected {
  border-color: #e7b900;
  box-shadow: inset 0 0 2px #3f3404;
}
body[data-ab-img-bg="false"] .sub_menu_btn img {
  transform: rotate(-45deg);
  width: 118%;
  top: -2px;
  position: absolute;
  left: -2px;
  bottom: 10px;
}
body[data-ab-img-bg="false"] .btn_controller_mini {
  background-image: unset;
  background-color: rgba(43, 75, 92, 0.6);
  border: 1px solid #266d88;
  box-shadow: inset 0 0 2px rgba(27, 45, 57, 0.2);
  border-radius: 5px;
}

body[data-ab-img-bg="false"] .btn_controller_mini.btn-logout {
  transition: 0.3s ease-in-out;

  & .octagon {
    transition: 0.3s ease-in-out;
  }
}
body[data-ab-img-bg="false"] .btn_controller_mini.btn-logout:hover {
  background-image: unset;
  background-color: rgb(126 0 0 / 60%);
  border: 1px solid #8f1414;
  box-shadow: inset 0 0 2px rgb(255 44 44 / 20%);
  border-radius: 5px;

  & .octagon {
    background-color: #3f1313;
    border: 3px solid rgb(45 27 27 / 10%);
  }

  & .image-overlay::after {
    background-color: #ff0000 !important;
  }
}

body[data-ab-img-bg="false"] .btn_controller_mini_open{
  border-color: #fff;
}
body[data-ab-img-bg="false"] .btn_controller_mini_open img {  
  filter: drop-shadow(0,0,3px, #fff);
}
body[data-ab-img-bg="false"] .sub_menu_btn .octagon-wrap, .ab-submenu-btn.octagon-wrap, body[data-ab-img-bg="false"] .ui-icon.octagon-wrap {
    width:94%;
    height:94%;
    position: relative;
    overflow: hidden;
    margin-left: 4%;
    cursor: pointer;
}
body[data-ab-img-bg="false"] .sub_menu_btn .octagon, .ab-submenu-btn .octagon, body[data-ab-img-bg="false"] .ui-icon .octagon {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  transform: rotate(45deg);
  background: #16262f;
  border: 3px solid rgba(27,45,27,0.1);
}
body[data-ab-img-bg="false"] .sub_menu_btn .octagon::before, .ab-submenu-btn .octagon {
  position: absolute;
  top: -3px; right: -3px; bottom: -3px; left: -3px;
  transform: rotate(45deg);
  content: '';
  border: inherit;
}
.ab-submenu-btn.octagon-wrap {
  width: 20px;
  height: 20px;
  margin-left: 0;
}
.ab-submenu-btn.octagon-wrap i {
  transform: rotate(-45deg);
  color: #80cdf32f;
  position: absolute;
  top: 5px;
  left: 5px;
}
.ab-submenu-btn.octagon-wrap.active i {
  color: #f6ffff;
  filter: drop-shadow(0,0,3px, #1a9cd4);
}
.ab-submenu-btn .octagon {
  top: 0; right: 0; bottom: 0; left: 0;
  padding-left: 2px;
}
body[data-ui-dragger-img-bg="false"] .btn_actionbar_move_pos .icon-wrapper, body[data-ui-dragger-img-bg="false"] .btn_actionbar_move_layout .icon-wrapper, body[data-ui-dragger-img-bg="false"] .btn-submenu-scroll .icon-wrapper {
  display: none;
}
body[data-ui-dragger-img-bg="false"] .btn_actionbar_move_pos i, body[data-ui-dragger-img-bg="false"] .btn_actionbar_move_layout i {
  display: block;
}

.item_submenu {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/sub_menu_item_bg.png");
  width: 38px;
  height: 38px;
  cursor: pointer;
  position: relative;
  margin: 0 2px;
}
.item_submenu_icon,
.item_actionbar_icon {
  position: absolute;
}
.item-amount-indicator-box,
.item_actionbar_amount_bar_box {
  position: absolute;
  width: 80%;
  height: 3px;
  left: calc(10% - 1px);
  top: 3px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 3;
}
.item-amount-indicator {
  background-color: #4c6c94;
  height: 100%;
  width: 0%;
}
.item-amount-text,
.item_actionbar_amount_text {
  position: absolute;
  bottom: 1px;
  font-size: var(--font-xs);
  font-family: sans-serif;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  color: #4c6c94;
  z-index: 5;
  display: none;
}
.cooldowned_item {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 38px;
}
.action-bar-slot.cooldown, .action-bar-slot.activated {
  --cd-w: 100%;
}
.action-bar-slot.disabled {
  --cd-w: 100%;
  pointer-events: all !important;
}
.action-bar-slot img {
  position: absolute;
  z-index: 2;
  cursor: pointer;
  filter: drop-shadow(0 0 3px black);
  width: 34px;
  height: 34px;
}
.action-bar-slot[sectionid="8"] img, .action-bar-slot[sectionid="7"] img {
  width: 36px;
  height: 36px;
}
.action-bar-slot.cooldown .overlay-full, .action-bar-slot.disabled .overlay-full, .action-bar-slot.activated .overlay-full {
  display: block;
}
.action-bar-slot::before {
  content: "";
  position: absolute;
  z-index: 2;
  color: white;
  font-size: var(--font-base);
  font-weight: bold;
}
.action-bar-slot.cooldown::before, .action-bar-slot.activated::before {
  content: var(--time-left);
}
.action-bar-slot.cooldown img, .action-bar-slot.disabled img, .action-bar-slot.activated img {
  opacity: 0.3;
}
.overlay-full {
  content: "";
  background-color: rgb(0, 0, 0, 0.3);
  opacity: 0.7;
  width: var(--cd-w);
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: none;
}
.action-bar-slot.activated {
  --cd-w: unset;
  --ac-w: 100%;
}
.action-bar-slot.activated .overlay-full {
  right: unset;
  left: 0;
  width: var(--ac-w) !important;
}
.action-bar-slot.disabled .overlay-full {
  background-color: rgb(0, 0, 0, 0.7) !important;
}
.btn_submenu_scroll {
  position: absolute;
  z-index: 1;
  cursor: pointer;
  width: 13px;
  height: 24px;
}
/* */
#minimap {
  border: 1px solid #287490;
  border-radius: 3px;
  cursor: pointer;
  background-color: transparent;
  background-size: cover;
  background-color: #000;
}
.minimap-wrapper {
  position: relative;
  border-radius: 3px;
  background-size: cover;
}
.minimap-planet {
  position: absolute;
  z-index: 1;
}
.minimap-station {
  position: absolute;
  z-index: 2;
}
.minimap-threat .threat {
  width: 100%;
  height: 20%;
  background-color: #ff0707;
  visibility: hidden;
}
.minimap-threat {
  padding-right: 2px;
  border-right: 3px solid var(--default-text-blue);
}
.minimap-threat[data-threat-level="1"] .threat[data-threat-index="1"] {
  visibility: visible;
}
.minimap-threat[data-threat-level="2"] .threat[data-threat-index="1"], .minimap-threat[data-threat-level="2"] .threat[data-threat-index="2"] {
  visibility: visible;
}
.minimap-threat[data-threat-level="3"] .threat[data-threat-index="1"], .minimap-threat[data-threat-level="3"] .threat[data-threat-index="2"], .minimap-threat[data-threat-level="3"] .threat[data-threat-index="3"] {
  visibility: visible;
}
.minimap-threat[data-threat-level="4"] .threat[data-threat-index="1"], .minimap-threat[data-threat-level="4"] .threat[data-threat-index="2"], .minimap-threat[data-threat-level="4"] .threat[data-threat-index="3"], .minimap-threat[data-threat-level="4"] .threat[data-threat-index="4"] {
  visibility: visible;
}
.minimap-threat[data-threat-level="5"] .threat[data-threat-index="1"], .minimap-threat[data-threat-level="5"] .threat[data-threat-index="2"] , .minimap-threat[data-threat-level="5"] .threat[data-threat-index="3"] , .minimap-threat[data-threat-level="5"] .threat[data-threat-index="4"] , .minimap-threat[data-threat-level="5"] .threat[data-threat-index="5"] {
  visibility: visible;
}
.minimap-threat .divider {
  width: 4px;
  background-color: var(--default-text-blue);
  height: 4px;
  margin-right: -2px;
}
/* shipinfo el */
.wrapper_main_shipinfo,
.wrapper_main_userinfo {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.shipinfo .main span {
  position: absolute;
}
.icon_info {
  position: absolute;
  left: 2%;
  width: 20px;
  font-size: var(--font-md);
}
.boosters-main .icon_info {
  width: 25px;
}
.icon_glow {
  color: rgb(230, 220, 179) !important;
  filter: drop-shadow(0px 0px 5px#f78b39);
}
.wrapper_main_default {
  position: relative;
  width: 100%;
  align-self: center;
  display: flex;
  align-items: center;
  height: 15px;
}
.CFG_wrapper img {
  cursor: pointer;
}
/* spacemap ui */
.spacemap_ov {
  width: 750px;
  height: 600px;
}
.spacemap_ov_main {
  height: 100%;
  position: relative;
  overflow-x: clip;
}
.spacemap_ov_main span {
  margin: 0 !important;
}
.spacemap_ov_map_wrapper {
  height: 435px;
  position: relative;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.spacemap_ov_control_wrapper {
  height: calc(100% - 435px);
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.spacemap_ov_control_header {
  background-color: #16262f;
  border-top: 1px solid #287490;
  border-bottom: 1px solid #287490;
  width: 100%;
  height: 24px;
  background-image: url("https://cdn.space-aces.com/spacemap/ui/pilotSheet/divider11.png");
  background-size: cover;
  background-repeat: repeat-x;
  background-position: center;
  background-blend-mode: overlay;
}
.spacemap_ov_control_body {
  width: 100%;
  height: calc(100% - 24px);
  display: grid;
  grid-template-columns: 5fr 6fr 6fr;
}
.btn_switch_sector_spacejump {
  position: absolute;
  z-index: 5;
  left: 5%;
  top: 2%;
  cursor: pointer;
  background-color: transparent;
  border: none;
  color: white;
}
.map_representation {
  cursor: pointer;
  position: absolute;
  width: 80px;
  height: 50px;
border: 1px solid #80a3b2;
  background-color: #000;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  --time-left: none;
}
.map_representation::before {
  position: absolute;
  z-index: 1;
  content: var(--time-left);
  color: rgb(230, 220, 179) !important;
  text-shadow: 0px 0px 5px#f78b39;
  font-size: var(--font-4xl);
}
.map_representation::after {
  content: var(--name);
  position: absolute;
  left: 3px;
  bottom: 0px;
  font-size: var(--font-sm);
}
.map_representation:has(.icon_spacejump.unavailable), .map_representation:has(.icon_spacejump.blocked) {
  pointer-events: none;
  cursor: default;
}
.map_representation_big {
  width: 194px;
  height: 121px;
}
.current_map_location {
  border-color: white;
}
.map_locked {
  cursor: default;
}
.icon_spacejump {
  position: absolute;
}
.jump_spinner_icon {
  --duration: 10000ms;
  animation-name: spin;
  animation-duration: var(--duration);
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}
.text_spacejump {
  z-index: 1;
  color: rgb(230, 220, 179);
  font-size: var(--font-xl);
}
.spacemap_ov_control_target {
  display: grid;
  grid-template-columns: 3fr 1fr;
  align-items: center;
  height: 60px;
  margin: auto;
}
.spacemap_ov_control_target span:nth-child(odd) {
  justify-self: end;
}
.spacemap_ov_control_target span:nth-child(even) {
  justify-self: start;
  margin-left: 2px !important;
}
.spacemap_ov_control_targetVisual div {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  background-image: url("https://cdn.space-aces.com/spacemap/ui/spacejump/fromTo.png");
  background-position: center;
  background-repeat: no-repeat;
}
.spacemap_ov_control_pricebox div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.spacemap_ov_control_pricebox span {
  background-position: center;
  background-repeat: no-repeat;
  width: 132px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #4b6481;
  border-left-color: #fff;
  border-right-color: #fff;
  background-color: #030f14;
  border-radius: 3px;
}
.spacemap_ov_control_jump {
  cursor: default;
  width: 90%;
  height: 50%;
  font-size: var(--font-2xl);
  background-color: rgb(20, 20, 20);
  align-self: center;
  color: white;
  border: 1px solid grey;
  border-radius: 5px;
  justify-self: center;
}
.jump_btn_active {
  cursor: pointer;
  border-color: none;
  background-color: rgb(80, 220, 67);
}
/* chat */
.chat {
  top: 78vh;
}
.chat_main, .admin_main, .report_main {
  display: flex;
  flex-flow: column nowrap;
  height: calc(100% - 30px);
}
.room_list_wrapper {
  width: 100%;
  height: 25px;
  display: flex;
  flex-flow: row nowrap;
  border-bottom: 1px solid #287490;
}
.room_list_wrapper button {
  color: #287490;
  border: 1px solid #287490;
  border-top: none;
  border-bottom: none;
  background-color: rgb(28, 57, 73);
  font-size: var(--font-base);
  padding: 0.2rem;
  box-sizing: border-box;
  height: 25px;
  cursor: pointer;
  font-weight: bold;
  min-width: 50px;
  width: fit-content;
  transition: 0.2s ease-in-out;
}
.room_list_wrapper button.active, .room_list_wrapper button:hover {
  color: #19b0e8;
  border: 1px solid #19a6da;
}
.message_list_wrapper {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  overflow-y: scroll;
  overflow-x: hidden;
  height: calc(100% - 40px);
}
.msg_box {
  color: #eeeeee;
  cursor: pointer;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  margin: 2px 0;
  gap: 2px;
  padding-left: 20px;
  box-sizing: border-box;
}
.msg_box span {
  margin: 0 !important;
}
.msg_text {
  font-size: var(--font-md) !important;
}
span.chat_from_txt {
  font-size: var(--font-md) !important;
  color: #a6dcf9 !important;
}
span.system_msg, span.msg_whisper {
  color: #ffe538 !important;
}
span.msg_moderator {
  color: goldenrod !important;
}
span.msg_admin {
  color: #f42626 !important;
}
.message_bar {
  width: calc(100% - 40px);
  height: 20px;
  color: white;
  border: 1px solid #287490;
  background-color: rgba(22, 38, 47, 1);
  margin: 2.5px 0;
  border-radius: 5px;
  padding: 0 5px;
  box-sizing: border-box;
}
.message_bar:focus-within {
  outline: none;
}
/* controllers */
.btn_controller_mini {
  width: 38px;
  height: 38px;
  border: none;
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/icons/subMenu/btnStandard.png");
  display: flex;
  justify-items: center;
  align-items: center;
  cursor: pointer;
  background-color: transparent;
}
.btn_controller_mini[is-independent="true"] {
  position: absolute !important;
  z-index: 10;
}
.btn_controller_mini_open {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/controllerSelect.png");
}
.btn_controller_mini::before {
  pointer-events: none !important;
}

/*new actionbar stuff*/
.sub_menu_box .slot_actionbar {
  display: none;
}
.sub_menu_box .slot_actionbar:has(.action-bar-slot) {
  display: flex; 
}

.sub_menu_box .slot_actionbar.has-item {
  display: flex;
}

.slot_actionbar.has-item {
  cursor: pointer;
}
.slot_actionbar:has(.action-bar-slot) {
  cursor: pointer;
}
.action-bar-slot.selected {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/slotBG.png"),
    url("https://cdn.space-aces.com/spacemap/ui/actionBar/slotBorderActive.png");
}
.actionbar-submenu-btn {
  cursor: pointer;
  width: 21px;
  height: 21px;
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/buttonInactive.png"), url("https://cdn.space-aces.com/spacemap/ui/actionBar/actionMenuClosedInactive.png");
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: -25px;
  /*
  position: absolute;
  right: calc(40% + 10px);
  bottom: calc(10vh + 10px);*/
}
.actionbar-submenu-btn:hover {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/buttonActive.png"), url("https://cdn.space-aces.com/spacemap/ui/actionBar/actionMenuClosedActive.png");
}
.actionbar-submenu-btn.active {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/buttonActive.png"), url("https://cdn.space-aces.com/spacemap/ui/actionBar/actionMenuOpenActive.png");
}
.actionbar-submenu-btn.active:hover {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/buttonActive.png"), url("https://cdn.space-aces.com/spacemap/ui/actionBar/actionMenuOpenActive.png");
}

.btn_submenu_scroll_forward, .btn_submenu_scroll_backward {
  position: absolute;
  bottom: calc(50% - 12px);
  width: 13px;
  height: 24px;
  cursor: pointer;
  display: none;
}
.btn_submenu_scroll_forward {
  right: calc(0% + -14px);
}
.btn_submenu_scroll_backward {
  left: calc(0% + -18px);
}

.btn_submenu_scroll_forward .icon-wrapper, .btn_submenu_scroll_backward .icon-wrapper {
  background-image: url("https://cdn.space-aces.com/spacemap/ui//actionBar/scroll_normal.png");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.btn_submenu_scroll_forward .icon-wrapper {
  transform: rotate(180deg);
}
.btn_submenu_scroll_forward:hover .icon-wrapper, .btn_submenu_scroll_backward:hover .icon-wrapper {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/scroll_hover.png");
}

.btn_submenu_scroll_forward .icon-wrapper, .btn_actionbar_move_pos .icon-wrapper, .btn_actionbar_move_layout .icon-wrapper {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
}
.btn_submenu_scroll_forward .icon-wrapper {
  background-image: url("https://cdn.space-aces.com/spacemap/ui//actionBar/scroll_normal.png");
}
.btn_actionbar_move_pos .icon-wrapper {
  width: 21px;
  height: 21px;
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/buttonInactive.png"), url("https://cdn.space-aces.com/spacemap/ui/changePos_normal.png");
}
.btn_actionbar_move_pos:hover .icon-wrapper {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/buttonActive.png"), url("https://cdn.space-aces.com/spacemap/ui/changePos_active.png");
}
.btn_actionbar_move_layout .icon-wrapper {
  width: 21px;
  height: 21px;
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/buttonInactive.png"), url("https://cdn.space-aces.com/spacemap/ui/changeLayout_normal.png");
}
.btn_actionbar_move_layout:hover .icon-wrapper {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/buttonActive.png"), url("https://cdn.space-aces.com/spacemap/ui/changeLayout_active.png");
}
body[gamepad-on="true"] .btn_actionbar_move_pos .icon-wrapper {
  width: 32px;
  height: 32px;
}
body[gamepad-on="true"] .btn_actionbar_move_layout .icon-wrapper {
  width: 32px;
  height: 32px;
}

body[ab-pagination-forward="true"] .sub_menu_box .btn_submenu_scroll_forward {
  display: block;
}
body[ab-pagination-back="true"] .sub_menu_box .btn_submenu_scroll_backward {
  display: block;
}
body[ab-submenu-pagination-forward="true"] .action_bar_submenu_list .btn_submenu_scroll_forward {
  display: block;
}
body[ab-submenu-pagination-back="true"] .action_bar_submenu_list .btn_submenu_scroll_backward {
  display: block;
}
.action_bar_submenu_list .btn_submenu_scroll_backward, .action_bar_submenu_list .btn_submenu_scroll_forward, .sub_menu_btn[sectionid="10"] {
  display: none !important;
}
body[hero-rank="21"] {
  .action_bar_submenu_list .btn_submenu_scroll_backward, .action_bar_submenu_list .btn_submenu_scroll_forward, .sub_menu_btn[sectionid="10"] {
    display: flex !important;
  }
}

body[ab-submenu-open="false"] .btn_submenu_scroll_backward, body[ab-submenu-open="false"] .btn_submenu_scroll_forward {
  display: none !important;
} 
/*
.btn_submenu_scroll_forward:focus .icon-wrapper, .btn_submenu_scroll_backward:focus .icon-wrapper {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/actionBar/scroll_click.png");
}*/

.slider-wrapper {
  width: 100%;
  --thumb-w: 25px;
  --thumb-h: 25px;
  margin: 0.3rem 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 5px;
}
.slider-wrapper span {
  white-space: nowrap;
  font-size: var(--font-lg);
  color: rgb(125, 125, 125);
}

.slider-wrapper .slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: rgba(22, 38, 47, 0.5);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider-wrapper .slider:hover {
  opacity: 1;
}

.slider-wrapper .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb-w);
  height:  var(--thumb-h);
  border-radius: 50%;
  background: #287490;
  cursor: pointer;
}

.slider-wrapper .slider::-moz-range-thumb {
  width: var(--thumb-w);
  height: var(--thumb-h);
  border-radius: 50%;
  background: #287490;
  cursor: pointer;
}
.popover-default {
  background-color: rgba(0,0,0,0.8);
    border: 1px solid rgb(125,125,125);
    color: #efefef;
    font-size: var(--font-base);
    min-height: fit-content;
    padding: 5px;
    max-width: 125px;
}
.popover-default.popover-xl {
  max-width: 150px !important;
}
.popover-default .popover-content {
    display: flex;
    width: 100%;
    height: fit-content;
}
/*eq UI*/
.equipment_main {
  height: 100%;
}
.equipment_main .clan-popup-error > .header {
  font-size: 0;
}
.equipment_main .eq-body-wrapper {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  height: var(--content-height, 100%)
}
.equipment_main .eq-body-header {
  width: 100%;
  background-image: linear-gradient(rgb(35,35,35), rgb(10,10,10));
  padding: 15px;
  box-sizing: border-box;
  justify-content: space-between;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.equipment_main .eq-body-header button {
  background-color: rgb(20,20,20);
  cursor: pointer;
  border: 2px solid grey;
  border-radius: 5px;
  padding: 5px 10px;
  box-sizing: border-box;
  color: rgb(230, 220, 179) !important;
  transition: 0.2s ease-in-out;
  font-weight: bold;
  text-shadow: 0px 0px 5px #f78b39;
}
.eq-body-wrapper[cfg-active="1"] .eq-body-header button[data-cfg-val="1"] {
  border-color: rgb(230, 220, 179);
}
.eq-body-wrapper[cfg-active="2"] .eq-body-header button[data-cfg-val="2"] {
  border-color: rgb(230, 220, 179);
}
.eq-body-wrapper[data-section-open="ship"] .btn-open-ship {
  border-color: rgb(230, 220, 179);
}
.eq-body-wrapper[drones-open="true"] .btn-open-drones {
  border-color: rgb(230, 220, 179);
}
.eq-body-wrapper[pal-open="true"] .btn-open-pal {
  border-color: rgb(230, 220, 179);
}
.equipment_main .eq-body-header button:hover {
  background-color: rgb(35,35,35);
}
.equipment_main .eq-body-content {
  width: 100%;
  height: calc(var(--content-height) - 59px);
  display: grid;
  grid-template-columns: 3fr 1fr;
  overflow-y: auto;
}
.equipment_main .eq-details {
  position: absolute;
  width: 0%;
  height: 100%;
  display: flex;
  border-right: 1px solid #287490;
  background-color: rgba(45, 72, 88, 0.8);
  flex-flow: column nowrap;
  align-items: center;
  padding-top: 20px;
  z-index: 2;
}
.equipment_main .eq-details .ship-visual {
  padding: 0 10px;
  width: 160px;
  height: 124px;
}
.equipment_main .eq-details .ship-wrapper { /*ship name*/
  display: flex;
  justify-content: center;
  font-size: var(--font-4xl);
  color: rgb(230, 220, 179);
  text-shadow: 0px 0px 5px#f78b39;
}
.equipment_main .eq-details .ship-info-wrapper {
  margin-top: 10px;
  border-top: 1px solid #287490;
  padding: 0 10px;
  padding-top: 10px;
  width: 100%;
  box-sizing: border-box;
  font-size: var(--font-lg);
  font-weight: 600;
  color: #efefef;
}
.equipment_main .ship-info-wrapper .ship-wrapper {
  justify-content: flex-start;
  margin: 5px 0 !important;
}
.equipment_main .eq-details .ship-info-wrapper span {
  font-size: 16px !important;
  margin: 0 !important;
}
.equipment_main .eq-details .ship-info-wrapper span:first-of-type {
  width: 60%;
}
.equipment_main .eq-details .ship-info-wrapper span:first-of-type::after {
  content: ":";
}
.eq-body-wrapper[details-open="true"] .btn-open-eq-details {
  border-color: rgb(230, 220, 179);
}
.eq-body-wrapper[details-open="false"] .eq-details {
  border-right-width: 0px;
}
.eq-body-wrapper[details-open="false"] .eq-details .ship-visual, .eq-body-wrapper[details-open="false"] .eq-details .ship-wrapper, .eq-body-wrapper[details-open="false"] .eq-details .ship-info-wrapper {
  display: none;
}
.equipment_main .eq-slots {
  display: flex;
  flex-flow: column nowrap;
  border-right: 1px solid #287490;
}
.equipment_main .eq-items {
  width: 100%;
  height: 100%;
  background-color: rgb(30,30,30, 0.8);
  display: flex;
  flex-flow: row wrap;
  padding: 10px;
  box-sizing: border-box;
  align-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
}
.equipment_main .eq-section-wrapper {
  width: 100%;
  flex: 1;
}
.equipment_main .icon-closed, .equipment_main .icon-open {
  display: none;
}
.equipment_main .eq-section-wrapper[data-open="false"] .icon-closed {
  display: block;
}
.equipment_main .eq-section-wrapper[data-open="true"] .icon-open {
  display: block;
}
.equipment_main .eq-section-wrapper[data-open="false"] {
  flex: 0
}
.equipment_main .eq-section-wrapper[data-open="false"] .eq-section-list {
  display: none;
}
.equipment_main .eq-section-wrapper .eq-section-list {
  min-height: calc(100% - 30px);
  background-color: transparent;
  display: flex; 
  flex-flow: row wrap;
  gap: 5px;
  padding: 10px;
  z-index: 1;
  position: relative;
  box-sizing: border-box;
}
.equipment_main .eq-section-wrapper .eq-section-header, .equipment_main .eq-drone-header {
  width: 100%;
  color: rgb(230, 220, 179);
  text-shadow: 0px 0px 5px#f78b39;
  font-size: var(--font-lg);
  padding: 6px 0;
  background-image: linear-gradient(rgb(35,35,35), rgb(10,10,10));
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
.equipment_main .eq-section-header span {
  margin: 0 3px !important;
  color: rgb(230, 220, 179) !important; 
  text-shadow: 0px 0px 5px#f78b39;
}
.equipment_main .eq-section-header span.icon-closed,.equipment_main .eq-section-header span.icon-open {
  margin-left: 38px !important;
}
.eq-slot-item {
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
}
.eq-slot-item .eq-icon {
  width: 100%;
  filter: drop-shadow(0 0 1px black);
  object-fit: contain;
}
.eq-slot-item .eq-icon[data-no-shadow] {
  filter: none;
}
body[data-use-simple-eq="true"] .eq-icon {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
body[data-use-simple-eq="true"] .eq-slot-item::after {
  content: var(--item);
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-xs);
  text-align: center;
  color: rgb(230, 220, 179) !important;
  text-shadow: 0px 0px 5px#f78b39;
}
.eq-slot-wrapper {
  width: 30px;
  height: 30px;
  border: 1px solid grey;
  background-color: #000;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.eq-slot-wrapper.locked {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}
.eq-slot-wrapper.locked:hover {
  opacity: 1;
}
.eq-slot-wrapper.locked::after {
  width: 20px;
  height: 20px;
  background-size: contain;
  left: 5px;
  top: 6px;
}
.eq-slot-wrapper.active {
  border: 1px solid gold;
}
.eq-slot-wrapper.used > .eq-slot-item::before {
  background-color: rgb(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  box-shadow: inset 0 0 4px #000;
  content: "";
}
.equipment_main .equipment-selector {
  border: 1px solid #ffd700;
  background-color: #ffd90049;
  position: absolute;
  z-index: 999;
  display: none;
}

.equipment_main .ship-info-wrapper div {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.equipment_main .ship-info-wrapper .hp-wrapper span {
  color: #49BE40 !important;
}
.equipment_main .ship-info-wrapper .shd-wrapper span {
  color: #338FCC !important;
}
.equipment_main .ship-info-wrapper .crg-wrapper span {
  color: yellow !important;
}
.equipment_main .eq-items, .equipment_main .eq-section-list {
  transition: background-color 0.3s linear;
  gap: 5px;
}
.equipment_main[drag-to-aval="true"] .eq-items {
  background-color: rgb(50,50,50, 0.8);
}
.equipment_main[drag-to-eq="true"][drag-to-eq-type="laser"] .eq-section-list[eq-type="laser"] {
  background-color: rgb(100,100,100, 0.5);
}
.equipment_main[drag-to-eq="true"][drag-to-eq-type="rLauncher"] .eq-section-list[eq-type="rLauncher"] {
  background-color: rgb(100,100,100, 0.5);
}
.equipment_main[drag-to-eq="true"][drag-to-eq-type="generator"] .eq-section-list[eq-type="generator"] {
  background-color: rgb(100,100,100, 0.5);
}
.equipment_main[drag-to-eq="true"][drag-to-eq-type="extra"] .eq-section-list[eq-type="extra"] {
  background-color: rgb(100,100,100, 0.5);
}

/*eq drones*/
.equipment_main .eq-drones, .equipment_main .eq-pal {
  display: none;
  flex-flow: column nowrap;
  border-right: 1px solid #287490;
  width: 100%;
  min-height: 100%;
  height: auto;
  max-height: 100%;
  overflow-y: auto;
}

.equipment_main .eq-body-wrapper[drones-open="true"] .eq-drones {
  display: flex;
}
.equipment_main .eq-body-wrapper[drones-open="true"] .eq-slots, .equipment_main .eq-body-wrapper[drones-open="true"] .eq-pal {
  display: none;
}
.equipment_main .eq-body-wrapper[pal-open="true"] .eq-drones, .equipment_main .eq-body-wrapper[pal-open="true"] .eq-slots {
  display: none;
}
.equipment_main .eq-body-wrapper[pal-open="true"] .eq-pal {
  display: flex;
}
.equipment_main .eq-body-wrapper[drag-enabled="false"] img {
  user-drag: none;
}
.equipment_main .eq-drone-wrapper {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-flow:  column nowrap; 
}
.equipment_main .eq-drone-header {
  gap: 5px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  box-sizing: border-box;
  padding-left: 15px;
}
.equipment_main .d-icon-open, .equipment_main .d-icon-closed {
  display: none;
}
.equipment_main .eq-drone-wrapper[is-open="true"] .d-icon-open {
  display: block;
}
.equipment_main .eq-drone-wrapper[is-open="false"] .d-icon-closed {
  display: block;
}
.equipment_main .eq-drone-wrapper[is-open="false"] .eq-drone-body {
  display: none !important;
}
.equipment_main .eq-drone-header span {
    margin: 0 !important;
    color: rgb(230, 220, 179) !important;
}
.equipment_main .eq-drone-body {
  background-color: rgb(30,30,30, 0.8);
  width: 100%;
  padding: 5px 15px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr 3fr 1fr;
  align-content: center;
} 
.equipment_main .eq-drone-body .drone-img {
  align-self: center;
  justify-self: center;
  max-height: 85px;
}
.equipment_main .eq-drone-body .d-info-wrapper {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  width: 220px;
}
.equipment_main .eq-drone-body .d-info-wrapper span.grid-span {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 !important;
}
.equipment_main .eq-drone-body .d-info-wrapper span.grid-span span {
  margin: 0 !important;
}
.equipment_main .eq-drone-body .dd-slots-wrapper {
  margin-right: 15px;
  align-items: center;
}
.equipment_main .eq-drone-body .slots-wrapper, .equipment_main .eq-drone-body .dd-slots-wrapper {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  /* align-items: center; */
  gap: 10px;
}
.equipment_main[drag-drone-to-eq="true"][drag-drone-to-eq-type="normal"] .eq-slot-wrapper:empty[d-slot-type="normal"], .equipment_main[drag-drone-to-eq="true"][drag-drone-to-eq-type="dd"] .eq-slot-wrapper:empty[d-slot-type="dd"] {
  animation-name: fade;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease; 
} 
.equipment_main .drone-bonus.active {
  color: #06c3c3 !important;
}
.equipment_main .drone-bonus::after {
  content: "%";
  position: relative;
}
.boxed-popup {
  position: absolute;
  margin: auto;
  z-index: 4;
  display: flex;
  flex-flow: column;
  width: fit-content;
  min-width: 100px;
  align-items: center;
}
.window-main:has(.boxed-popup)::after {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  position: absolute;
  z-index: 1;
  content: "";
}
:has(.loading-error)::after {
  content: none !important;
}
body dialog, .boxed-popup {
  margin: auto;
  border: 1px solid #287490;
  background-color: rgba(45, 72, 88, 0.75) !important;
  color: white;
  /* padding: 10px; */
  min-width: 300px;
  height: fit-content;
  gap: 7px 0;
  padding-bottom: 10px;
}
body dialog .header, .boxed-popup .header {
  width: 100%;
  background-image: linear-gradient(rgb(35,35,35), rgb(10,10,10));
  padding-left: 10px;
  box-sizing: border-box;
  text-align: center;
}
body dialog .btn-options .btn-dialog, .boxed-popup .btn-options .btn-dialog {
  cursor: pointer;
  color: white;
  border: none;
  padding: 5px 15px;
  min-width: 100px;
}
body dialog .btn-options .btn-dialog.confirm, .boxed-popup .btn-options .btn-dialog.confirm {
  background: linear-gradient(180deg, #41a53a 0%, #2c4f29 100%);
}
body dialog .btn-options .btn-dialog.cancel, .boxed-popup .btn-options .btn-dialog.cancel {
  background: linear-gradient(180deg, rgba(20,20,20,1) 0%, rgb(37 38 41) 50%, rgba(20,20,20,1) 100%);
}
body dialog .btn-options .btn-dialog.confirm:hover, .boxed-popup .btn-options .btn-dialog.confirm:hover {
  animation: blinker 2s linear infinite;
}
/*eq hangar*/

.eq-body-wrapper[hangar-open="false"] .hangar-content {
  display: none !important;
}

.eq-body-wrapper[hangar-open="true"] .eq-body-header,.eq-body-wrapper[hangar-open="true"]  .eq-body-content {
  display: none !important;
}
.hangar-content {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr;
}
.hangar-content .hangar-ship-list {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: var(--content-height, 100%)
}

.hangar-content .items-list {
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 150px;
  border-right: 1px solid #287490;  
  height: 100%;
}
.hangar-content .item-info-wrapper {
  position: absolute;
  bottom: 0;
  background-color: rgb(20,20,20,0.8);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.hangar-content .hangar-aval-item {
  width: calc(100% - 2px);
  max-height: 150px;
  height: 150px;
  border: 1px solid transparent;
  position: relative;
  background-color: rgb(75,75,75);
  box-sizing: border-box;
  background-image: url("https://cdn.space-aces.com/spacemap/image/shopImg/item-bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  transition: .25s ease-in-out;
}
.hangar-content .hangar-aval-item .item-name {
  margin: 0 !important;
  text-align: center;
}
.hangar-content .hangar-aval-item .item-icon {
  width: 98px;
  height: 98px;
  filter: drop-shadow(0px 0px 2px white);
}
.hangar-content .hangar-aval-item.active, .hangar-content .hangar-aval-item:hover {
  border-color: #ffe538;
}
.eq-body-wrapper[picking-gear-ship="true"] .hangar-aval-item:hover {
  border-color: var(--default-text-blue) !important;
}
.hangar-content .controls-wrapper {
  height: 35px;
  padding: 5px 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  border-right: 1px solid #287490;
  gap: 5px;
  background-color: rgba(20,20,20,1);
}
.hangar-content .controls-wrapper button {
  width: 100px;
  cursor: pointer;
  padding: 5px 5px;
  box-sizing: border-box;
  border: 1px solid #287490;
  background-color: rgb(38, 39, 41);
  color: white;
  opacity: 0.8;
  transition: 0.25s ease-in-out;
}
.hangar-content .controls-wrapper button:last-of-type {
  margin-right: 5px;
  width: fit-content;
}
.ship-visuals-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;

} 
.shop-video, .shop-video video {
  max-width: 260px;
  max-height: 260px;
}
.shop .shop-video video {
  max-width: 200px;
}
.hangar-info-wrapper {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}

body[hero-faction="1"] .hangar-info-wrapper {
  background-image: url("https://cdn.space-aces.com/spacemap/equipment/hangar/dockbg.png");
  background-size: cover;
  background-clip: border-box;
}
body[hero-faction="2"] .hangar-info-wrapper {
  background-image: url("https://cdn.space-aces.com/spacemap/equipment/hangar/dockbg.png");
  background-size: cover;
  background-clip: border-box;
}
body[hero-faction="3"] .hangar-info-wrapper {
  background-image: url("https://cdn.space-aces.com/spacemap/equipment/hangar/dockbg.png");
  background-size: cover;
  background-clip: border-box;
}


.hangar-info-wrapper .header-controls {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: end;
  padding: 5px;
  height: 40px;
  box-sizing: border-box;
  background-color: rgba(20,20,20,1);
  border-left: 1px solid #287490;
  margin-left: -1px;
  border-bottom: 1px solid #287490;
}
.hangar-info-wrapper .header-controls button {
    color: white;
    border: 1px solid #287490;
    background-color: transparent;
    border-radius: 2px;
    padding: 2px 5px;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0 0 5px #287490;
    cursor: pointer;
    transition: .25s ease-in-out;

    &::before {
      text-transform: none;
    }
}
.hangar-info-wrapper .header-controls button:hover {
    color: #FFD700 !important;
    border-color: #FFD700 !important;
}
.hangar-info-wrapper .content {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  height: 100%;
  position: relative;
  justify-content: center;
  align-items: center;
}
.hangar-info-wrapper .ship-description-basic {
  position: absolute;
  top: 1%;
  display: flex;
  flex-flow: column nowrap;
  gap: 5px;
  width: 100%;
  height: fit-content;
  text-align: right;
}

.hangar-info-wrapper .ship-description-basic #title {
  font-size: var(--font-5xl);
  text-shadow: 2px 2px 5px black;
}
.hangar-info-wrapper .ship-description-basic #desc {
  font-weight: 300;
  text-shadow: 2px 2px 5px black;
}

.hangar-info-wrapper #ship-icon {
  width: 220px;
  height: 220px;
}

.hangar-info-wrapper .info-wrapper {
  position: absolute;
  top: 0;
  min-height: 100%;
  max-height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0.1);
  overflow-y: auto;
  flex-flow: column nowrap;
  display: none;
}

.eq-body-wrapper[hangar-detail-open="true"] .hangar-info-wrapper .info-wrapper {
  display: flex;
}

.hangar-info-wrapper .info-wrapper .body {
  display: flex; 
  flex-flow: column nowrap;
}
.hangar-info-wrapper .info-wrapper .hangar-info-item-wrapper {
  width: 100%;
  height: fit-content;
  border-bottom: 1px solid grey;
  display: flex;
  flex-flow: column nowrap;
  gap: 3px 0;
}
.hangar-info-wrapper .info-wrapper .hangar-info-item-wrapper:nth-child(even) {
  background-color: rgb(50,50,50,0.5);
}

.hangar-info-wrapper .info-wrapper .hangar-info-item {
  display: grid;
  grid-template-columns: 5fr 2fr;
  align-items: center;
  width: 100%;
  padding: 0 5px;
  box-sizing: border-box;
}
.hangar-info-wrapper .info-wrapper .hangar-info-item span {
  margin-right: 0;
  margin-left: 0;
  font-size: var(--font-base);
}
.hangar-info-wrapper .info-wrapper .hangar-info-item span:nth-child(2) {
  color: #FFD700 !important;
  justify-self: end;
}

.hangar-info-wrapper .navbar {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0 3px;
    background-color: black;
}

.hangar-info-wrapper .nav-hangar-item {
  width: 30%;
  background-color: black;
  border: 2px solid #fff;
  border-bottom: none;
  border-top-color: #fff;
  border-image: linear-gradient( to bottom, #fff, rgba(0, 0, 0, 0) ) 0 30%;
  outline-color: #fff;
  position: relative;
  text-align: center;
  padding: 5px 0;
  font-size: var(--font-md);
  text-transform: uppercase;
  cursor: pointer;
  transition: .25s ease-in-out;
}

.hangar-info-wrapper .info-wrapper .nav-hangar-item::before {
  z-index: 0;
  position: absolute !important;
  content: " ";
  top: -1px;
  border-top: 2px solid white;
  width: calc(100% + 4px);
  /* height: 2px; */
  left: -2px;
}

.hangar-info-wrapper .info-wrapper .close-info-btn {
    border: 2px solid grey;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-md);
    width: 16px;
    height: 16px;
    background-color: rgb(50,50,50);
    text-transform: uppercase;
    text-shadow: 0 0 5px #287490;
    transition: 0.25s ease-in-out;
    cursor: pointer;
}
.hangar-info-wrapper .info-wrapper .close-info-btn:hover {
  color: #FFD700 !important;
}

.hangar-info-wrapper .footer-wrapper {
  position: absolute;
  bottom: 2%;
  height: fit-content;
  display: flex;
  flex-flow: column nowrap;
  gap: 10px 0;
  padding-left: 15px;
}
.hangar-info-wrapper .footer-wrapper #active-state {
  text-align: center;
  text-transform: uppercase;
}
.hangar-info-wrapper .footer-wrapper .btn-ship-management {
  min-width: 150px;
  background-color: #000;
  color: white;
  border: 2px solid #287490;
  border-radius: 5px;
  padding: 5px 0;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0px 0px 9px 4px rgba(40,116,144,0.61);
  cursor: pointer;
  transition: .25s ease-in-out;
  padding: 7px;
}
.hangar-info-wrapper .footer-wrapper .btn-ship-management:hover {
  text-shadow: 0px 0px 5px #f78b39;
  color: rgb(230, 220, 179) !important;
  box-shadow: 0px 0px 9px 7px rgba(40,116,144,0.61) !important;
}

.hangar-info-wrapper .footer-wrapper .active-state {
  font-size: var(--font-4xl);
  font-weight: 600;
}

/*group*/
.group {
  width: 256px;
  min-height: 130px; 
  height: fit-content !important;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
.group .main {
  height: 100%;
}
.btn-grp-action {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 27px !important;
  cursor: pointer;
  position: relative;
  border: none;

  & i {
    font-size: 12px;
    color: #6faaca;
  }
}
/*
.btn-grp-action img {
  position: absolute;
}
.btn-grp-action img:nth-child(even) {
  opacity: 0;
  z-index: 1;
  transition: opacity 0.25s;
}
.btn-grp-action:hover img:nth-child(even), .btn-grp-action.active img:nth-child(even) {
  opacity: 1;
}*/
.group .invite-wrapper {
  margin: auto 0;
}
.custom-input {
  background-color: #030e12;
  border: 1px solid #255161;
  padding: 2px 4px;
  outline: none !important;
  transition: 0.25s ease-in-out;
  color: white;
}
input[type="checkbox"].custom-input[readonly] {
  pointer-events: none;
  opacity: 0.7;
}
select.custom-input {
  outline: 0;
}
select.custom-input option {
  color: var(--default-blue);
  background-color: black;
  font-weight: 600;
  cursor: pointer;
}
textarea.custom-input {
  resize: none;
  font-family: "Play", sans-serif;
}
.custom-input:focus-within {
  border: 1px solid #2984a5;
}
.group .r-invites-wrapper, .group .p-invites-wrapper, .group .invite-wrapper {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 5px;
}
.group .received-invite span {
  margin: 0 5px !important;
}
.group .group-member {
  display: grid;
  grid-template-columns: 1fr 4fr;
  box-sizing: border-box;
  padding: 5px;
  transition: .25s ease-in-out;
}
.group .group-member #map {
  margin: 0;
}
.group .group-member[target="false"] .target-wrapper .structure-bar-wrapper, .group .group-member[target="false"] .target-wrapper #target-icon {
  display: none;
}
.group .group-member[incombat="false"] .target-wrapper {
  display: none;
}
.group .group-member[incombat="true"] #name {
  color: red !important;
}
.group .ship-structure {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 16px auto;
  grid-template-areas: "name name" "structure target";
}
.structure-bar {
  height: 5px;
  border-radius: 1px;
}
.structure-bar .fill {
  height: 100%;
  border-radius: 1px;
}
.structure-bar[type="hp"] .fill {
  background-color: #49BE40;
}
.structure-bar[type="shd"] .fill {
  background-color: #338FCC;
}
.group .ship-structure #name {
  margin: 0;
  grid-area: name;
  text-wrap: nowrap;
  display: flex;
  align-items: center;
}
.group .ship-structure #member-str {
  grid-area: structure;
  display: flex;
  flex-flow: column nowrap;
  gap: 2px 0;
  align-self: center;
  max-width: 100px;
}
.group .target-wrapper {
  grid-area: target;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0 7px;
  margin-left: 7px;
}
.group .target-wrapper .icon-wrapper {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/group/target.png");
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
}
.group .target-wrapper .icon-wrapper img {
  width: 25px;
  object-fit: contain;
}
.group .group-options-bar {
  padding: 5px;
}
.group .group-options-bar .group-options-std {
  gap: 0 4px;
}
.group-main[leader="false"] .group-options-ta {
  display: none !important;
}
.group .group-options-bar .group-options-ta {
  margin-top: 5px;
}
.group .group-options-ta .group-ta-select, .group .group-ta-option {
  cursor: pointer;
}
.group .group-options-ta span {
  margin: 0;
}
.group .group-options-ta[data-is-open="false"] .group-training-options {
  display: none;
}
.group-main[state="single"] .group-controls-wrapper, .group-main[state="single"] .members-wrapper, .group-main[size="9"] .invite-wrapper {
  display: none;
}
.group-main[leader="false"] .btn-grp-action[action="allowInvite"], .group-main[leader="false"] .btn-grp-action[action="leaderPick"], .group-main[leader="false"] .btn-grp-action[action="kick"], .group-main[leader="false"] .btn-grp-action[action="disband"], .group-main[leader="false"] .btn-grp-action[action="training"] {
  display: none;
}
.group-main[invitesallowedstate="true"] .btn-grp-action[action="allowInvite"] .allow-state {
  display: none;
}
.group-main[invitesallowedstate="false"] .btn-grp-action[action="allowInvite"] .disable-state {
  display: none;
}
.group-main[inviteAllow="false"] .invite-wrapper {
  display: none;
}
.group-main .group-member:hover {
  background-color: #b5b56224 !important;
}
/*help*/
.help {
  width: 10vw;
  height: 13vh; 
}
.help[xl-window="true"] {
  width: 30vw !important;
  height: 30vh !important;
}

.help .help-main {
  width: 100%;
  height: 100%;
}
.help[xl-window="true"] .help_main {
  max-height: 30vh;
  overflow-y: auto;
}

.help[data-tut-open="true"] {
  height: fit-content !important;
  
  & .help_main {
    max-height: fit-content !important;
  }
}

.help .list {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  max-height: calc(13vh - 30px);
  overflow-y: auto;
  padding: 0 5px;
  box-sizing: border-box;
  gap: 5px;
}

.help .help-option {
  display: grid;
  grid-template-columns: 1fr 9fr;
  align-items: center;
  cursor: pointer;
  transition: 0.25s ease-in-out;
  font-size: var(--font-base);
  padding: 2px 0;
}
.help .help-option span {
  color: #a0dbf1 !important;
  margin: 0;
  text-shadow: 0 0 1px white;
  font-weight: 300;
}
.help .help-option:hover {
  background-color: rgba(50,50,50,0.5);
}

.help .help-main[detail-open="true"] .list {
  display: none;
}
.help .help-main[detail-open="false"] .selected-option {
  display: none;
}
.help .selected-option {
  position: relative;
  width: 100%;
}
.help .help-detail {
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 10px 0;
  padding-top: 10px;
}
.help .help-detail .text-wrapper {
  display: flex;
  flex-flow: column nowrap;
  gap: 5px;
  width: fit-content;
  max-width: 500px;
  background-color: black;
  border: 1px solid var(--default-blue);
  padding: 5px 10px;
  box-sizing: border-box;
}
.help .help-detail .text-wrapper #title {
  margin: 0;
  font-weight: 300;
  color: #a0dbf1 !important;
  text-shadow: 0 0 1px white;
}
.help .help-detail .text-wrapper #description {
  color: #a0dbf1 !important;
  margin: 0;
  font-weight: 300;
}
.help .help-detail .image-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}
.help .help-detail .image-wrapper img {
  border: 1px solid var(--default-blue);
  width: 100%;
  object-fit: cover;
  max-width: 500px;
  max-height: 170px;
}

.help .btn-close-hint {
  color: rgb(230,230,230)!important;
  text-shadow: 0px 0px 5px#f78b39;
  background-color:#a0dbf1; 
  width: 20px;
  height: 20px;
  border: none;
  border-right: 1px solid var(--default-blue);
  border-bottom: 1px solid var(--default-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--font-xl);
}

.help .help-detail #action-btn {
  color: rgb(230, 220, 179) !important;
  text-shadow: 0px 0px 5px#f78b39;
  background-color: #41a53a;
  min-width: 30%;
  padding: 15px;
  border: 1px solid grey;
  border-radius: 5px;
  font-size: var(--font-4xl);
  cursor: pointer;
}

.ui-icon {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*arena*/

.arena .main {
  height: 100%;
}
.arena .navbar {
  justify-content: flex-end;
}
.arena .arena-navbar-item {
  width: 33%;
}
.arena span {
  margin: 0;
}
.arena .arena-invite {
  justify-content: space-between;
}
.arena .arena-main-wrapper {
  display: grid;
  grid-template-rows: 24px 80% calc(20% - 24px)
}
.arena .section-body {
  max-height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
.arena .opponent-pick-wrapper {
  display: flex;
  flex-flow: column nowrap;
  border-bottom: 1px solid var(--default-blue);
  height: 150px;
  min-height: 150px;
}
.arena .opponent-pick-wrapper .pick-opponent-bar {
  box-sizing: border-box;
  padding: 5px;
}
.arena .opponent-pick-wrapper input, .arena .opponent-pick-wrapper select {
  width: calc(100% - 35px);
}
.arena .opponent-pick-wrapper .pick-opponent-bar:first-child {
  border-right: 1px solid var(--default-blue);
}
.arena .invites-wrapper {
  display: grid;
  flex: 1;
  grid-template-columns: 1fr 1fr;
  min-height: 130px;
}
.arena .invites-wrapper .list {
  max-height: calc(100% - 16px);
}
.arena .invite-column:first-child {
  border-right: 1px solid var(--default-blue);
}
.arena .arena-ready-lobby[data-mutators-length="0"] .mutators-wrapper {
    display: none !important;
}
.arena .lobby-members {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 80%;
  border-top: 1px solid var(--default-blue);
}
.arena .lobby-members .lobby-member-col:first-child {
  border-right: 1px solid var(--default-blue);
}
.arena .lobby-members .list {
  max-height: calc(100% - 16px);
}

.arena .arena-ready-lobby[data-is-ready="true"] .ready-up-button {
  display: none;
}
.arena .arena-ready-lobby[data-is-ready="false"] .is-ready-button {
  display: none;
}
.arena .arena-ready-up.is-ready-button {
  --bg: #3a89a5;
  --bg-gradiated: #6d7177;
  --border-inset-color: #28c0ef;
  --text-color: white;
  pointer-events: none;
}
.arena .arena-ready-up span {
  font-size: var(--font-2xl);
  display: block;
  text-transform: uppercase;
}
.arena .member-name {
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100px;
}

.competetive:has(.competetive-main[data-is-in-match="true"]) {
  max-width: 15vw !important;
}

.competetive .main {
    height: 100%;
}
.competetive span {
  margin: 0;
}

.competetive-main {
  background: linear-gradient(180deg, rgba(20,20,20,1) 0%, rgb(37 38 41) 50%, rgba(20,20,20,1) 100%);
}

.competetive .modes-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.competetive .competetive-mode {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
}
.competetive .competetive-mode .mode-title {
  position: absolute;
  top: 5%
}
.competetive .competetive-mode img {
  width: 100%;
  height: 100%;
}

.competetive .competetive-mode .mode-active, .competetive .competetive-mode button {
  position: absolute;
  display: none;
  bottom: 5%;
}
.competetive .competetive-mode[data-is-selected="false"] button, .competetive .competetive-mode[data-is-selected="true"] .mode-active {
  display: block;
}
.competetive .controls-wrapper {
  flex: 1;
  background: url(https://cdn.space-aces.com/spacemap/ui/competetive/bgTrophy.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.competetive .controls-wrapper button {
  width: 50%;
}
.competetive .competetive-main[data-is-searching="false"] .search-status-wrap, .competetive .competetive-main[data-is-searching="false"] button[action="cancel"], .competetive .competetive-main[data-is-searching="true"] button[action="search"] {
  display: none;
}
.competetive-main[data-is-in-match="true"] .footer-hint, .competetive-main[data-is-searching="true"] .footer-hint {
  visibility: hidden;
}
.competetive-main[data-is-searching="true"] .modes-list {
  border-top: 1px solid var(--default-blue);
}
.competetive-main[data-is-searching="true"] .loading-text {
  display: block !important;
}
.competetive .reward-list {
  overflow-x: auto;
  overflow-y: hidden;
}
.competetive .competetive-reward-section {
  border-right: 1px solid var(--default-blue);
  min-width: fit-content;
  padding: 5px;
  padding-bottom: 0px;
}
.competetive .reward-list .competetive-reward-section:last-child {
  border-right: none
}
.competetive .competetive-main[data-is-in-match="false"] .in-match-wrapper, .competetive .competetive-main[data-is-in-match="true"] .controls-wrapper, .competetive .competetive-main[data-is-in-match="true"] .footer-hint, .competetive .competetive-main[data-is-in-match="true"] .modes-list {
    display: none;
}
.competetive .compet-match-header > span {
  text-transform: uppercase;
}

.competetive .team-points {
    --bg-color: orange;
    --skew: skew(1deg, -5deg);
    --shadow-color: rgba(184,94,46,1);
    --shadow: -8px 0px 22px 0px var(--shadow-color);

    background-color: var(--bg-color);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid white;
    transform: var(--skew);
    box-shadow: var(--shadow);
}
.competetive .team-points span {
  text-shadow: 4px 2px 5px white;
  font-size: var(--font-7xl);
}
.competetive .team-points#away {
  --bg-color: #3a89a5;
  --skew: skew(-1deg, 5deg);
  --shadow-color: #2b75b5;
  --shadow: 8px 0px 22px 0px var(--shadow-color);
  border-right: none;
  border-left: 2px solid white;
  text-shadow: -4px 2px 5px white;
}
.competetive .time-wrapper {
  height: 41px;
  background-color: black;
  width: fit-content;
  padding: 0 10px;
  border-top: 2px solid white;
  min-width: 50%;
}
.competetive .compet-match-header {
  height: 20%;
}
.competetive .match-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 5%;
  height: 75%;
}

.competetive .match-info .lobby-member-col {
  width: 100%;
  height: 100%;
}
.competetive .match-info .lobby-member-col:first-child {
  	border-right: 1px solid var(--default-blue);
}
.competetive .member-ready-state[transl_key="compet_alive_shortcut"] {
  color: #41a53a;
}
.competetive .member-ready-state[transl_key="compet_dead_shortcut"] {
  color: #b50000;
}

.pilotsheet .main {
  height: 100%;
  position: relative;
}

.pilotsheet .pilot-sheet-section {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  position: relative;
  width: fit-content;
}
.pilotsheet .pilot-sheet-section .row {
  gap: 10px;
  display: flex;
}
.pilotsheet .pilot-sheet-item {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  position: relative;
  height: 76px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pilotsheet .pilot-sheet-item[is-locked="true"]::before, .pilotsheet .pilot-sheet-section[is-locked="true"]::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0,0.5);
  position: absolute;
  z-index: 3;
}
.pilotsheet #btn-reset {
  position: absolute;
  right: 5px;
  bottom: 0;
  min-width: 100px;
  height: 30px;
  width: fit-content;
}

.pilotsheet .pilot-sheet-item::after {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  content: "";
}
.pilotsheet .pilot-sheet-item:hover {
  background-image: url("https://cdn.space-aces.com/spacemap/ui/pilotSheet/skill_hover.png");
}
.pilot-sheet .pilot-sheet-item .skill-text {
  width: 100%;
  position: absolute;
  z-index: 1;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-base);
  font-weight: 600;
}
.pilot-sheet .pilot-sheet-item .skill-text div {
  margin: 0 2px;
}
.pilot-sheet .box-scifi[skill-complete="true"] .text-wrapper {
  color: #4cb5dd;
}
.pilotsheet .pilot-sheet-info {
  width: fit-content;
  min-width: 170px;
  max-width: 275px;
  height: fit-content;
  position: fixed;
  z-index: 5;
  background-color: #000;
  border: 1px solid var(--default-blue);
  font-size: var(--font-base);
  display: none;
  padding: 5px;
  box-sizing: border-box;
  overflow-wrap: break-word;

  & #lvl-hint {
    max-width: 250px;
  }
}
.pilotsheet .pilot-sheet-info #requires {
  color: #b50000;
  display: none;
}
.pilotsheet .pilot-sheet-info .pilot-sheet-requirement[is-done="false"], .pilotsheet .pilot-sheet-info .pilot-sheet-requirement[is-done="false"] span {
  color: #b50000 !important;
}
.pilotsheet .pilot-sheet-info .requires-list {
  display: none;
}
.pilotsheet .pilot-sheet-info[requires-skill="true"] #requires, .pilotsheet .pilot-sheet-info[requires-skill="true"] .requires-list {
  display: flex;
}
.pilotsheet .pilot-sheet-info span {
  margin: 0;
}
.pilotsheet .pilot-sheet-info #lvl-hint, .pilotsheet .pilot-sheet-info #lvl-hint-label {
  display: none;
}
.pilotsheet .pilot-sheet-info[curr-lvl="true"] #lvl-hint, .pilotsheet .pilot-sheet-info[curr-lvl="true"] #lvl-hint-label {
  display: block;
}
.pilotsheet .pilot-sheet-info[max-lvl="true"] #next-lvl-hint, .pilotsheet .pilot-sheet-info[max-lvl="true"] #next-lvl-hint-label {
  display: none;
}
.pilotsheet .pilot-sheet-item:hover .pilot-sheet-info, .pilotsheet .pilot-sheet-item:hover + .pilot-sheet-info {
  display: flex;
  align-items: flex-start;
}
.pilotsheet .pilot-sheet-item:hover .pilot-sheet-info span {
  margin: 2px 0;
}
.pilotsheet .pilot-sheet-item:hover .pilot-sheet-info span[transl_key="lvl"] {
  margin: 2px;
  margin-left: 0;
}
.pilotsheet .curr-lvl-text {
  font-size: var(--font-md);
  align-items: center;
}

.pilotsheet .pilot-sheet-info #lvl-hint-label, .pilotsheet .pilot-sheet-info #next-lvl-hint-label {
  color: #4cb5dd;
}
.pilotsheet .popup-prompt {
  left: calc(50% - 151px);
  top: calc(50% - 50px);
  z-index: 10;
}

/*clan*/

.clan_main {
  height: 100%;
  max-height: calc(100% - 31px);
}

.clan .clan-nav {
  width: 150px;
  border-right: 1px solid var(--default-blue);
}
.clan .clan-content {
  width: calc(100% - 150px);
}
.clan .content-body {
  border-top: 1px solid var(--default-blue);
  height: calc(100% - 28px);
}
.clan-company-switch {
  display: grid;
  grid-template-rows: 1fr 1fr;
}
.clan .price-display {
  width: 70%;
  min-width: fit-content;
}
.clan .hint-wrapper {
  box-sizing: border-box;
}
.clan .clan-create-form {
  box-sizing: border-box;
  border-left: 1px solid var(--default-blue);
  max-height: 100%;
  gap: 10px 0;
}
.clan .clan-create-form input, .clan .clan-create-form textarea {
  width: 80%;
  padding: 5px;
}
.clan .clan-create-form textarea {
  min-height: 50px;
}
.clan .clan-other-factions {
  height: 100%;
  display: grid;
  background: linear-gradient(180deg, rgba(20,20,20,1) 0%, rgb(37 38 41) 50%, rgba(20,20,20,1) 100%);
  grid-template-columns: 1fr 2fr 1fr;
}

.clan .clan-main-faction {
  background: linear-gradient(180deg, rgba(20,20,20,1) 0%, rgb(37 38 41) 50%, rgba(20,20,20,1) 100%);
}
.clan .clan-switch-hint {
  position: relative;
  padding: 0 25px;
  box-sizing: border-box;
}
.clan .clan-switch-hint::before, .clan .clan-switch-hint::after {
  position: absolute;
  left: 5px;
  content: "<";
  color: rgb(230, 220, 179) !important;
  text-shadow: 0px 0px 5px#f78b39;
  font-size: var(--font-8xl);
}
.clan .clan-switch-hint::after {
  left: unset;
  right: 5px;
  content: ">";
}
.clan .faction-main .faction-name {
  margin: auto 0;
  grid-area: name;
}
.clan .faction-main .info-wrapper {
  grid-area: info;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  width: 50%;
  height: fit-content;
}
.clan button.change-roles {
  width: fit-content !important;
  min-width: 100px;
}
.clan .faction-main .info-wrapper span {
  margin: 0;
}
.clan .faction-main {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr 3fr;
  grid-template-areas: "icon name" "icon info";
}
.clan .faction-main img, .clan .faction-option img {
  aspect-ratio: 10/9;
  width: 100%;
}
.clan .faction-main img {
  grid-area: icon;
}
.clan .search-wrapper {
  justify-content: flex-end;
  box-sizing: border-box;
}
.clan .clan-list {
  height: calc(100% - 30px);
  max-height: calc(100% - 30px);
  border-bottom: none !important;
}
.clan .clan-overview span {
  margin: 0;
}
.clan .clan-overview .faction-info-item {
  padding: 3px 0;
}
.clan .clan-overview .faction-info-item span:first-child, .clan .clan-overview .clan-info-item span:first-child {
  width: 130px;
  text-align: center;
}
.clan .clan-overview .faction-info-item span:first-child::after, .clan .clan-overview .clan-info-item span:first-child::after {
  content: ":";
  position: relative;
}
.clan .clan-role-edit span {
  margin: 0;
}
.clan .clan-all-info {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.clan .clan-list-item {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr 1fr 1fr 1fr 2fr;
  justify-content: center;
  justify-items: center;
  cursor: pointer;
}
.clan .clan-list-item:nth-child(even) {
  background-color: var(--default-middle-blue);
}
.clan .clan-list-item div {
  border-right: 1px solid grey;
  padding: 5px 0;
  text-align: center;
}
.clan .clan-list-item div:last-child {
  border-right: none;
}
.clan .clan-list-item span {
  margin: 0;
}
.clan .list {
  border: 1px solid var(--default-blue);
  background-color: var(--default-dark-blue);
}
.clan .app-list {
  border-bottom: none;
}
.clan-member-item {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  grid-template-rows: 35px 35px 35px 35px;
  border-bottom: 1px solid var(--default-blue);
}
.clan-member-item:last-child {
  border-bottom: none;
}
.clan-member-item span {
  font-weight: 300;
  font-size: var(--font-md);
  margin: 0;
}

.clan span.name::after {
  content: none !important;
}
.clan-member-item button {
  height: 25px;
  font-size: var(--font-base);
  width: 125px;
}
.clan .gold-bg {
  background: rgb(252,176,69);
  background: linear-gradient(90deg, rgba(252,176,69,1) 0%, #030e12 53%);
}

.clan-member-item[is-leader-mode="false"] #giveleader, .clan-member-item[is-leader-mode="false"] #delclan {
  display: none;  
}
.clan-member-item[is-leader-mode="true"] #editmem, .clan-member-item[is-leader-mode="true"] #kickmem, .clan-member-item[is-leader-mode="true"] #leave {
  display: none;  
}
.clan-main[is-leader="false"] .clan-member-item[is-leader-mode="true"] #giveleader, .clan-main[is-leader="false"] .clan-member-item[is-leader-mode="true"] #delclan, .clan-main[is-leader="false"] .clan-member-item[is-leader-mode="true"] #editmem, .clan-main[is-leader="false"] .clan-member-item[is-leader-mode="true"] #kickmem {
  display: none;  
}

.clan .info-wrapper .amount_label:after {
  content: ":";
  position: relative;
}

.clan .faction-kick-hover:hover + span {
  display: block !important;
}

.clan .clan-app-item {
  grid-template-rows: 35px 35px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.clan .change-roles  {
  height: 30px;
  font-size: var(--font-md);
  width: fit-content;
  padding: 0 5px;
  margin: 0;
}
.clan .clan-edit-member span {
  margin: 0;
}

.clan .clan-diplomacy span {
  margin: 0;
}
.clan .clan-diplomacy .select-style {
  border: 1px solid var(--default-blue);
}

.pending-diplo-list button[transl_key="cancel"] {
  display: none;
}
.sent-diplo-list button[transl_key="decline"], .sent-diplo-list button[transl_key="accept"] {
  display: none;
}
.current-diplo-list button[transl_key="decline"], .current-diplo-list button[transl_key="accept"] {
  display: none;
}
.clan .diplo-item button {
  height: 25px;
  font-size: var(--font-base);
  margin: 0;
}
.clan .sent-diplo-list .diplo-item, .clan .current-diplo-list .diplo-item {
  grid-template-columns: 2fr 2fr 3fr 1fr 1fr !important;
}
.clan div[data-is-editing="true"] #edit_btn {
  display: none;
}
.clan div[data-is-editing="false"] #save_btn {
  display: none;
}

.clan div[data-is-editing="false"] .edit-wrapper .edit-input, .clan div[data-is-editing="false"] .edit-wrapper #select-dummy {
  display: none;
} 
.clan div[data-is-editing="true"] .edit-wrapper .value {
  display: none;
} 

.clan .edit-wrapper .edit-input:invalid {
  border-color: #b50000 !important;
}

.clan .clan-detail-popup span {
  margin: 0;
}
.clan .content-body:has(.clan-overview) {
  overflow-y: hidden !important;
}

.clan .clan-balance-log-item span {
  margin: 0;
}
.clan .clan-balance-log-item .amount_u::after {
  content: "U.";
  position: relative;
  margin-left: 2px;
}

.clan .clan-balance-log-item .amount_c::after {
  content: "C.";
  position: relative;
  margin-left: 2px;
}
/*clan permissions*/

.clan-main[is-leader="false"] *[data-leader-only] {
  display: none;
}

.clan-main[data-c-pm-changememrole="false"] *[c-change-mem] {
  display: none !important;
}
.clan-main[data-c-pm-changeroles="false"] *[c-change-role] {
  display: none !important;
}
.clan-main[data-c-pm-kickmember="false"] *[c-kick] {
  display: none !important;
}
.clan-main[data-c-pm-processapp="false"] *[c-proc-app] {
  display: none !important;
}
.clan-main[data-c-pm-diplomacy="false"] *[c-diplo] {
  display: none !important;
}

.clan-main[is-leader="true"] button#leave {
  display: none;
}
.clan .clan-popup-search .wrapper {
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}
.clan-upgrades span {
  margin: 0;
}
.bonus-item > .bonus-ico-wrapper > img {
  width: 30px;
  height: 30px;
}
.content-body[section-id="9"] .bonus-item {
  grid-template-columns: 100px 2fr 1fr 2fr 1fr !important;
}
.content-body[section-id="9"] .bonus-item:nth-child(8) > img {
  filter: hue-rotate(80deg);
}
.content-body[section-id="9"] .bonus-item > .bonus-ico-wrapper > img {
  width: 100px;
  height: 100px;
}
.content-body[section-id="9"] .lvl-info {
  visibility: hidden;
}

.clan .bonus-item[data-upgrade-complete="false"] .upg-done {
  display: none !important;
}
.clan .bonus-item[data-upgrade-complete="true"] button {
  display: none !important;
}
.clan .curr-bonus::after, .clan .next-bonus::after {
  content: ":";
  position: relative;
  margin-left: 2px;
}
.clan .bonus-item {
  padding-bottom: 2px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--default-blue);
}

/*score*/
.score-main {
  position: absolute;
  top: 0;
  width: 400px;
  left: calc(50% - 200px);
  height: fit-content;
}
.score-main .team-points {
  --bg-color: orange;
  --skew: skew(1deg, -5deg);
  --shadow-color: rgba(184,94,46,1);
  --shadow: -8px 0px 22px 0px var(--shadow-color);

  background-color: var(--bg-color);
  width: 40px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 2px solid white;
  transform: var(--skew);
  box-shadow: var(--shadow);
}
.score-main .team-points span {
  text-shadow: 4px 2px 5px white;
  font-size: var(--font-7xl);
}
.score-main .team-points#team_2 {
  --bg-color: #3a89a5;
  --skew: skew(-1deg, 5deg);
  --shadow-color: #2b75b5;
  --shadow: 8px 0px 22px 0px var(--shadow-color);
  border-right: none;
  border-left: 2px solid white;
  text-shadow: -4px 2px 5px white;
}
.score-main .team-points#team_3 {
  --skew: skew(0deg,0deg);
  border-right: none;
}
.score-main .team-points#team_2 span {
  text-shadow: -4px 2px 5px white;
}
.score-main .team-points#team_3 span {
  text-shadow: 0px 2px 5px white;
}
.score-main .time-wrapper {
  height: 41px;
  background-color: black;
  width: fit-content;
  padding: 0 10px;
  border-top: 2px solid white;
  min-width: 50%;
  border-bottom: 2px solid white;
}
.score-main .compet-match-header {
height: 20%;
}
.score-main .match-info {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 5%;
height: 75%;
}
.gg_list_main {
  width: 25%;
  height: 100%;
  border-right: 2px solid var(--default-blue);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  box-sizing: border-box;
}
.abg_wrapper {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  margin: 10px 0;
  align-items: center;
}
.btn_gg_switch {
  width: 80%;
  height: 40px;
  font-size: var(--font-lg);
  background: linear-gradient(rgb(20, 20, 20), rgb(30,30,30), rgb(20,20,20));
  border: 2px solid grey;
  cursor: pointer;
  color: white;
  border-radius: 3px;
  margin: 1px 0;
  transition: 0.25s ease-in-out;
  text-transform: uppercase;
}
.btn_gg_switch:hover {
  border-color: white;
}
.gg_visual_main {
  width: 47.5%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.gg_visual_header {
  width: 100%;
  position: relative;
  background-color: rgb(20,20,20);
  text-align: center;
}
.btn_gg_info {
  width: 20px;
  height: 20px;
  color: white;
  background-color: rgb(30,30,30);
  border: 1px solid var(--default-blue);
  cursor: pointer;
  transition: 0.25s ease-in-out;
}
.btn_gg_info:hover {
  border-color: white;
}
.gg_visual_main_main {
  width: 100%;
  height: 280px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-bottom: 2px solid var(--default-blue);
  border-top: 1px solid var(--default-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.gg_visual_main_main span {
  margin: 0;
}
.gg_visual_main_main .giffer {
  position: absolute !important;
  top: -15px;
}
.gg_visual_main_main .giffer .mainSprite > img {
  user-select: none;
  pointer-events: none;
}
.gg_visual_main_main .giffer .mainSprite {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gg_visual_main_wrapper_gg {
  width: 235px;
  height: 290px;
  position: relative;
}
.parts_txt {
  position: absolute;
  bottom: 5px;
  right: 5px;
  z-index: 2;
  font-size: var(--font-3xl);
}
.lifes_txt, .waves_txt {
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 2;
  font-size: var(--font-3xl);
}
.waves_txt {
  left: 3px;
  bottom: 30px;
  position: absolute;
}
.part_img {
  position: absolute;
}
.gg_visual_footer {
  width: 100%;
  padding: 3px 0;
  padding-bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  flex: 1;
}
.gg-main {
  height: var(--content-height, 100%);
}
.gg-chunk {
  margin-bottom: 10px;
}
.gg_visual_footer .stripy-button {
  width: 45%;
  font-size: var(--font-md);
  min-height: 30px;
  height: fit-content;
}
.activate_aval {
  background-image: linear-gradient(#5BE64E, #64FF56, #5BE64E);
  cursor: pointer;
  color: black;
}
.activate_aval:hover {
  border-color: white;
}
.gg_mater_main {
  width: 27.5%;
  height: 100%;
  border-left: 2px solid var(--default-blue);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.gg_mater_main h2 {
  color: white;
}
.gg_mater_info {
  width: 100%;
  text-align: center;
  display: flex;
  flex-flow: column nowrap;
  padding-bottom: 2px;
}
.gg_mater_info > span {
  padding: 3px 0;
}
.gg_mater_info span {
  margin: 0;
}
.gg-main .seperate {
  border-bottom: 1px solid var(--default-blue);
}
.gg_mater_multi {
  width: 100%;
  border: 1px solid var(--default-blue);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding-bottom: 15px;
}
.gg_curr_multi {
  width: 40px;
  height: 30px;
  border: 2px solid var(--default-blue);
  color: #8DE8F2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.select_spin_amount {
  width: 70%;
}
.select_spin_amount .custom-input {
  border: 1px solid var(--default-blue);
}
.select_spin_amount:focus {
  border-color: white;
}
.btn_spin, .btn_buy {
  width: 70%;
  height: 40px;
}
.gg_mater_multi_wrapper {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  width: 100%;
}
.gg_mater_multi_bar_wrapper {
  width: 80%;
}
.gg_mater_multi_bar_text {
  width: 100%;
  display: flex;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  justify-items: end;
}
.gg_mater_multi_bar_text span {
  margin: 0;
}
.gg_mater_multi_bar_progress {
  width: 100%;
  height: 20px;
  border: 2px solid grey;
  background-color: rgb(20,20,20);
}
.gg_mater_multi_bar_progress_real {
  height: 100%;
  background-color: #8DE8F2;
  width: 0%;
}
.multi_txt_bar_active {
    color: #8DE8F2;
}
.gg_mater_log {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  flex: 1;
  overflow-y: auto;
}
.gg_mater_log_wrapper {
  border-top: 1px solid var(--default-blue);
  overflow-y: auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.logTxt {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  border-top: 1px solid grey;
  border-bottom: 1px solid grey;
  margin: 3px 0;
}
/* popup */
.gg_finished {
  position: absolute;
  border: 2px solid white;
  border-radius: 3px;
  width: 400px;
  height: 150px;
  text-align: center;
  padding: 10px 0;
  box-sizing: border-box;
  background-image: linear-gradient(rgb(25, 25, 25), rgb(35,35,35), rgb(25,25,25));
}
.btn_finished_confirm {
  width: 50%;
  color: white;
  border: 2px solid white;
  border-radius: 5px;
  background-color: #54767B;
  cursor: pointer;
  transition: 0.25s ease-in-out;
  margin-top: 5px;
}
.btn_finished_confirm:hover {
  background-color: #719EA5;
}
.galaxygate, .quests, .clanstation {
  top: 0;
  left: 0;
  width: 45vw;
  height: 55vh;
  overflow-x: hidden;
  overflow-y: hidden;
}
.galaxygate .multi_activate  {
  width: 20px;
  height: 20px;
}
.galaxygate .main {
  height: 100%;
}
.galaxygate .part-img-wrapper {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.galaxygate .gg-chunk.active button {
  border-color: white;
}
.galaxygate .spin-reward[data-type="multi"] {
  background-color: #719EA5;
  color: white;
}
.galaxygate .spin-reward[data-type="nothing"] {
  background-color: rgb(30,30,30);
  color: white;
}
.galaxygate .spin-reward[data-type="credits"], .galaxygate .spin-reward[data-type="pcc25"], .galaxygate .spin-reward[data-type="pcc50"], .galaxygate .spin-reward[data-type="lsa50"], .galaxygate .spin-reward[data-type="qrb101"], .galaxygate .spin-reward[data-type="s2s2021"], .galaxygate .spin-reward[data-type="s2s3030"] {
  background-color: #1A2C19;
  color: white;
}
.galaxygate .spin-reward[data-type="part"] {
  background-color: #655007;
  color: white;
}
.galaxygate .spin-reward[data-type="robot"], .galaxygate .spin-reward[data-type="leech"], .galaxygate .spin-reward[data-type="shield"], .galaxygate .spin-reward[data-type="precision"] {
  background-color: #35173c;
  color: white;
}
.galaxygate .spin-reward {
  display: grid;
  grid-template-columns: 1fr 4fr;
  justify-items: center;
  padding: 3px 0;
  align-items: center;
}
.galaxygate .spin-reward.marked {
  border-bottom: 2px solid #293a4b;
  margin-bottom: 5px;
}
.galaxygate .spin-reward span {
  margin: 0;
}
.galaxygate .gg-log-seperator {
  width: 100%;
  border-bottom: 2px solid #293a4b;
  margin: 5px 0;
}
.gg-spins-chance span {
  margin: 0;
}
.gg-spins-chance > div {
  justify-items: center;
  align-items: center;
  gap: 0 5px;
  grid-gap: 0 5px;
}
.gg-reward-item span {
  margin: 0;
}

.gg-build-by-gate span {
  margin: 0 !important;
}

.quest-wrapper[data-query-len="0"] .remove-filter-btn {
  visibility: hidden;
}
.quest-wrapper[data-section="compact"] .detailed {
  display: none !important; 
}
.quest-wrapper[data-section="compact"] .overview, .quest-wrapper[data-section="compact"] .quest-slots {
  display: flex !important; 
}

.quest-compact-main[section-active="desc"] .desc-section {
  display: flex !important;
}
.quest-compact-main[section-active="task"] .task-section {
  display: flex !important;
}
.quest-compact-main[section-active="reward"] .reward-section {
  display: flex !important;
}

.quest-list-item {
  min-height: 43px;
}

.quest-slots div {
  cursor: pointer;
  min-width: 5px;
  height: 5px;
  border: 1px solid white;
  border-radius: 50%;
}
.quest-slots div.active {
  background-color: white;
}

.quests .main {
  height: var(--content-height, 100%);
}
.quests span {
  margin: 0;
}
.quests .detailed .navbar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s ease-in-out;
  position: relative;
}
.quests .detailed .navbar-item::before {
  text-align: center;
  content: "►";
  position: absolute;
  left: 2px;
}
.quests .detailed .navbar-item:hover::before {
    color: white;
}
.quests .detailed .navbar-item:hover {
  color: #000;
  background: unset;
  background-color: #a5c8e6;
}
.quests .filter-opt {
  border: 1px solid #000;
  box-shadow: 0 0 5px #000;;
  color: #000;
  cursor: pointer;
  background: linear-gradient(0deg, rgba(27,35,40,1) 0%, rgba(43,62,63,1) 50%, rgba(32,35,35,1) 100%);
}
.quests .filter-options, .quests .search-options {
  background-color: #1c2329;
}
.quests .filter-opt.active {
  border: transparent;
  box-shadow: inset 0 0 5px #eeeeee;
  background-color: #695f25;
  color: #ffcc00;
}
.quests .filter-opt i {
  font-size: var(--font-xl);
}
.quests .list-content {
  background-color: #1c2329;
}
.quests .remaining-slots::after {
  content: ":";
  position: relative;
}
.quests .quest-list-item {
  background: rgb(24,34,44);
  background: linear-gradient(0deg, rgba(24,34,44,1) 0%, rgba(44,57,62,1) 25%, rgba(63,83,86,1) 50%, rgba(48,62,66,1) 75%, rgba(24,34,44,1) 100%);
  cursor: pointer;
  border-left: 1px solid #515c62;
  border-top: 1px solid #515c62;
  border-bottom: 1px solid #060606;
  border-right: 1px solid #060606;
  box-shadow: 0 0 5px #060606;
}
.quests .quest-list, .quest-details {
  max-height: calc(var(--content-height) - 30px);
  width: calc(100% - 1px);
}
.quests .reward-name {
  color: #98e6fc; 
}

.quests .tasks-wrapper .quest-icon {
  border: 1px solid var(--default-blue);
}
.quests .quest-task-item.complete, .quests .quest-task-item.complete span {
  color: #73b775 !important;
}

.quests .overview .navbar-item {
  border: 1px solid var(--default-blue);
  background-color: var(--default-middle-blue);
  cursor: pointer;
  font-size: var(--font-base);
}
.quests .overview .mission-title, .quests .overview span, .quests .overview .task {
  color: #e8e1bf;
  font-size: var(--font-base);
}
.quests .overview .quest-task-item, .quests .overview .quest-reward-item {
  width: 100% !important;
}
.quests .objective-wrapper {
  margin: 2px 0;
}
.quest-task-item .ship-icon {
  width: 41px;
  height: 41px;
}
.quests .quest-list-item[is-locked="true"] .lock-wrapper {
  display: flex !important;
}
.quests .quest-list-item[is-locked="true"], .quests .quest-list-item[is-chain-locked="true"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: #1c2329;
  border: 1px solid #060606;
  box-shadow: inset 0 0 5px #000;
}
.quests .quest-list-item[is-locked="true"] span {
  font-size: var(--font-base);
}

.quests .quest-footer[mission-locked="true"] .accept-mission:hover ~ .locked-info {
  display: flex !important;
}

.boosters, .contacts {
  top: 0;
  left: 0;
  width: 10vw;
  height: 22vh;
  overflow-x: hidden;
  overflow-y: hidden;
}
.boosters .main {
  height: var(--content-height);
}
.boosters .boosters-main {
  gap: 10px 0;
}
.boosters span {
  margin: 0;
}
.boosters .wrapper_main_default {
  min-height: 22px;
}
.boosters .wrapper_main_default[booster-val="0"] {
  display: none;
}
.boosters .popover {
  --y: unset !important
}

.commchannel {
  top: 0;
  left: 0;
  width: 20vw;
  height: 250px;
  overflow-x: hidden;
  overflow-y: hidden;
}
.commchannel .main {
  height: var(--content-height, 100%);
}
.commchannel span {
  margin: 0;
}
.commchannel .comm-main {
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 4fr 1fr;
  grid-template-areas: "avatar msg" "avatar btn";
  gap: 5px 10px;
}
.commchannel .comm_avatar {
  border: 1px solid var(--default-blue);
  width: 150px;
}
.assembly {
  height: 27vh;
}
.assembly-main {
  width: 100%;
  height: var(--content-height, 100%);
}

.assembly-main[data-active-section="1"] .custom-navbar-item[section-id="1"], .assembly-main[data-active-section="2"] .custom-navbar-item[section-id="2"], .assembly-main[data-active-section="3"] .custom-navbar-item[section-id="3"] {
  border-color: #3290b3;
  color: #3290b3;    
}

.assembly-item {
  width: 38px;
  height: 38px;
}
.assembly-item.active {
  border-color: #c8b868 !important;
}
.assembly-item .eq-ico {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0px 0px 2px white);
}
.assembly-item::after {
  content: var(--item);
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-xs);
  text-align: center;
  color: rgb(230, 220, 179) !important;
  text-shadow: 0px 0px 5px#f78b39;
}

.assembly-item[data-show-upgrade="false"] .upgrade-lvl {
  display: none;
}
.assembly-item .upg-icon {
  display: none;
}
.assembly-item .done-icon {
  display: none;
}
.assembly-item[data-is-assembling="true"] .upg-icon {
  display: block !important;
}
.assembly-item[data-is-done="true"] .done-icon {
  display: block;
}
.assembly-item-bonus span, .assembly-item-cost span {
  margin: 0;
}
.assembly-item-bonus > span > span::after {
  content: "%";
  position: relative;
}
.assembly-assemble span {
  margin: 0;
}

.refinement_main {
  height: 100%;
}
.refinement span {
  margin: 0;
}
.skylab-module-info {
  min-width: 140px;
  min-height: 40px;
  position: absolute;
  z-index: 2;
}
.skylab-module-info[data-module-upgrading="true"] .upg-std {
  display: none;
}
.skylab-module-info[data-module-upgrading="true"] .upg-active {
  display: block;
}
.skylab-module-info[data-module="transport"] {
  bottom: 50px;
  left: 15px;
}
 .skylab-module-info[data-module="storage"] {
  bottom: 2px;
  left: 50px;
}
 .skylab-module-info[data-module="energy"] {
  top: 15px;
  left: 280px;
}
.skylab-module-info[data-module="base"] {
  bottom: 10px;
  left: 415px;
}
.skylab-module-info[data-module="prometid"] {
  top: 20px;
  right: 90px;
}
.skylab-module-info[data-module="duranium"] {
  top: 75px;
  right: 45px;
}
.skylab-module-info[data-module="promerium"] {
  top: 155px;
  right: 40px;
}
.skylab-module-info[data-module="xenomit"] {
  right: 75px;
  top: 230px;
}
.skylab-module-info[data-module="seprom"] {
  right: 45px;
  bottom: 10px;
}
.sk-transport-controls[data-to-ship="true"] .to-ship {
  display: block !important;
}
.sk-transport-controls[data-to-ship="true"] .to-skylab {
  display: none !important;
}
.skylab-info .stripy-button {
  padding: 5px;
  box-sizing: border-box;
  width: 200px;
  height: fit-content;
  font-size: var(--font-md);
}

.contacts {
  width: 15vw;
  height: 30vh;
}

.contacts span {
  margin: 0;
}
.contacts_main {
  height: 100%;
}
.contacts .contact-item[data-is-online="true"] i {
  color: green;
  filter: drop-shadow(0px 0px 4px green);
}
.contacts .contact-item[data-is-online="false"] i {
  color: red;
  filter: drop-shadow(0px 0px 4px red);
}
.contacts .contact-item[data-is-request="true"] i {
  color: gold;
  filter: drop-shadow(0px 0px 4px gold);
}
.contacts .contact-item[data-is-blocked="true"] i {
  color: white;
  filter: drop-shadow(0px 0px 4px white);
}
.contacts .actions .btn-ctlist-action[action="accept"] {
  display: none;
}
.contacts .contact-item[data-is-request="true"] .btn-ctlist-action[action="accept"] {
  display: flex;
}
.contacts .contact-item[data-is-request="true"] .btn-ctlist-action[action="invite"], .contacts .contact-item[data-is-blocked="true"] .btn-ctlist-action[action="invite"] {
  display: none;
}
.contacts .contact-item[data-is-request="false"] .btn-ctlist-action[action="reject"] {
  display: none;
}
.clanstation_main span {
  margin: 0;
}
.clanstation_main .structure-bar, .clanstation_main .clan-stat-wrapper {
  width: 90%;
}
.clan-station-main[active-section="dead"] .btn-emerg-repair, .clan-station-main[active-section="dead"] .btn-nuke, .clan-station-main[active-section="dead"] .btn-beam {
  display: none;
}
.clan-station-main .btn-construct {
  display: none;
}
.clan-station-main[active-section="dead"] .btn-construct {
  display: block;
}
.clan-station-main .statistics-wrapper {
  display: none !important;
}
.clan-station-main[active-section="alive"] .statistics-wrapper {
  display: flex !important;
}
.clan-station-main[active-section="unaval"] .statistics-wrapper {
  display: none !important;
}
.clan-station-main[active-section="unaval"] .unaval {
  display: flex !important;
}
.clan-station-main .range-bar {
  width: 80%;
}
.clan-station-main #val-text::after {
  content: "hrs";
  position: relative;
  margin-left: 2px;
}

/*pal*/
.pal_main {
  height: 100%;
  width: 100%;
}
.pal-main span {
  margin: 0;
}
.pal_main .size-dragger {
  z-index: 2 !important;
}
.pal-main .action-button {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  box-sizing: border-box;
  background-color: #161616;
  border: 1px solid #276f8b;
  color: #f7eba3;
  cursor: pointer;
  border-radius: 5px;
}
.pal-main .action-button.secondary {
  background-color: #1c7636;
  border-color: #48bd57;
}
.pal-main .pal-visual {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border: 1px solid var(--default-blue);
  background-color: rgba(39, 113, 124, 0.7);
  border-radius: 5px;
}
.pal-main .structure-bar, .pal-main .stat-wrapper {
  width: 100%;
}
.pal-main .stat-wrapper {
  flex-flow: row nowrap !important;
  color: #e9e2be;
  font-size: var(--font-md);
}
.pal-main .stat-wrapper svg {
  width: 16px;
  height: 16px;
}
.pal-main[data-is-active="false"] .action-button[data-action="start"] {
  display: block !important;
}
.pal-main[data-is-active="false"] .action-button[data-action="pause"] {
  display: none !important;
}
.pal-main[data-is-dead="true"] .action-button[data-action="repair"] {
  display: block !important;
}
.pal-main[data-is-dead="true"] .action-button[data-action="start"] {
  display: none !important;
}
.pal-main[data-is-dead="true"] .action-button[data-action="pause"] {
  display: none !important;
}
.pal-main[data-is-active="false"] .action-button[data-action="pause"] {
  display: none !important;
}
.pal-main[data-no-fuel="false"] .action-button[data-action="play"] {
  display: none !important;
}
.pal-main[data-is-aval="true"] .unaval {
  display: none !important;
}
.pal-main[data-name-edit="true"] .edit-wrapper {
  display: flex !important;
}
.pal-main[data-name-edit="false"] .edit-wrapper {
  display: none !important;
}
.pal-main[data-name-edit="true"] .label-wrapper {
  display: none !important;
}
.pal-main[data-name-edit="false"] .label-wrapper {
  display: flex !important;
}
.pal-main .pal_mode_select {
  width: 100%;
}
.pal-main .options {
  position: fixed !important;
  left: unset !important;
  right: unset !important;
  top: unset !important;
  width: 150px;
}
.pal-main div.cooldown {
  position: relative;
  height: 29px;
}
.pal-main div.cooldown::after {
  content: "";
  backdrop-filter: brightness(0.3);
  left: 0;
  position: absolute;
  z-index: 1;
  height: 100%;
  width: var(--cd-w, 100%);
  top: 0;
}
.pal-main div.cooldown::before {
  content: var(--cd-text);
  backdrop-filter: brightness(0.5);
  position: absolute;
  z-index: 2;
  margin: auto;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.welcome {
  width: 80dvw;
  height: 80dvh;
  background-color: rgba(45, 72, 88, 0.9) !important;
  left: 10dvw !important;
  top: 10dvh !important;
}

.welcome_main span {
  margin: 0 !important;
  color: rgba(70 210 251 / 1);
  font-size: var(--font-lg);
  line-height: 20px;
}

.trade span {
  margin: 0;
}

/*animations*/
@keyframes imgFade {
  0% {opacity: var(--opacity-base, 0);}
  100% {opacity: var(--opacity-full, 1);}
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 #fff3;
  }

  100% {
    box-shadow: 0 0 0 20px #fff0;
  }
}

@keyframes pulse-size-animation {
  0% {
      transform: scale(1)
  }

  50% {
      transform: scale(1.1)
  }

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

@keyframes jump {
  0% { content: " . . ."; transform: translateY(0); }
  25% { content: " . . ."; transform: translateY(-10px); }
  50% { content: " . . ."; transform: translateY(0); }
  75% { content: " . . ."; transform: translateY(-10px); }
  100% { content: " . . ."; transform: translateY(0); }
}

.pulsing-wave {
  animation: 3s infinite pulse-animation;
}

.loading-text {
  position: relative;
}

.loading-text::after {
  content: " ";
  display: inline-block;
}

.loading-text::after {
  content: " ";
}

.loading-text span {
  display: inline-block;
  animation: jump 1.5s infinite;
}

.loading-text span:nth-child(1) {
  animation-delay: 0s;
}

.loading-text span:nth-child(2) {
  animation-delay: 0.3s;
}

.loading-text span:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes jump {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-10px);
  }
}
/*only for eq detail sidebar*/
.openToLeft {
  animation-name: openFromLeft;
  animation-duration: 500ms;
  animation-iteration-count: 1;
  animation-timing-function: ease; 
}
.closeToLeft {
  animation-name: closeToLeft;
  animation-duration: 500ms;
  animation-iteration-count: 1;
  animation-timing-function: ease; 
}
.fadeBlink {
  animation-name: fade;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease; 
}
.slide-items > div {
  animation: slide 15s infinite linear;
}

.typing {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid white; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

.border-corner {
  --b: .5em;
  /* border width */
  --c: 3em;
  /* corner size */
  --r: 2em;
  /* corner rounding */
  position: relative;
  margin: 1em auto;
  border: solid var(--b) transparent;
  padding: 1em;
  max-width: 23em;
  font: 1.25em ubuntu, sans-serif;
}
.border-corner::before {
  position: absolute;
  z-index: -1;
  inset: calc(-1*var(--b));
  border: inherit;
  border-radius: var(--r);
  background: linear-gradient(orange, deeppink, purple) border-box;
  --corner:
  	conic-gradient(from -90deg at var(--c) var(--c), red 25%, #0000 0)
  		0 0/ calc(100% - var(--c)) calc(100% - var(--c)) border-box;
  --inner: conic-gradient(red 0 0) padding-box;
  -webkit-mask: var(--corner), var(--inner);
  -webkit-mask-composite: source-out;
  mask: var(--corner) subtract, var(--inner);
  content: "";
}


@keyframes openFromLeft {
  from {
    width: 0%;
  }
  to {
    width: 30%;
    border-right-width: 1px;
  }
}
@keyframes closeToLeft {
  from {
    width: 30%;
  }
  to {
    width: 0%;
    border-right-width: 0px;
  }
}
@keyframes fade {
  0% {opacity: 1} 
  50% {opacity: 0.5}
  100%{opacity: 1}
}
@keyframes fade-quest-giver {
  0% {opacity: 0.4} 
  50% {opacity: 0.3}
  100%{opacity: 0.4}
}

@keyframes slide {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

@keyframes rgb-effect {
  0%   { filter: hue-rotate(0deg) drop-shadow(0 0 10px red); }
  33%  { filter: hue-rotate(120deg) drop-shadow(0 0 10px green); }
  67%  { filter: hue-rotate(240deg) drop-shadow(0 0 10px blue); }
  100% { filter: hue-rotate(360deg) drop-shadow(0 0 10px red); }
}


@keyframes static-anim {
  100% {background-position: 50% 0, 60% 50%}
}

.static-effect {
  background: 
  repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 0/2500px 2500px,
  repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 60% 60%/2500px 2500px;
  background-blend-mode: difference;
  animation: static-anim .2s infinite alternate, fade-quest-giver 5s infinite;
}

/*css popover*/

.popover {
  position: relative;
  --y: unset;
}

.popover:hover {
  z-index: 9999;
}
.popover:hover::before {
  content: var(--text);
}

.popover::before {
  position: fixed;
  min-width: 50px;
  height: fit-content;
  background-color: #000;
  border: 1px solid var(--default-blue);
  color: white;
  font-size: var(--font-base);
  content: none;
  white-space: pre-wrap;
  padding: 5px;
  width: fit-content;
  text-wrap: nowrap;
  z-index: 99;
  top: var(--y);
  transform: translate(0, -105%);

  --bg: #152126;
    --bg-gradiated: #151515;
    background-image: repeating-linear-gradient(to bottom, var(--bg), var(--bg) 3px, var(--bg-gradiated) 5px);
}


body[popover-support="true"] .popover::before {
  min-width: max-content !important;
  white-space: break-spaces !important;
}

.popover-bottom::before {
  transform: translate(0, 100%);
}

/*custom select*/
.custom-select {
  position: relative;
  display: inline-block;
  min-width: 100px;
  background-color: rgba(22, 38, 47, 8);
  color: #287490;
  border-radius: 5px;
}

/* Styled custom select */
.custom-select .select-style {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

.custom-select #selectedOption {
  margin: 0;
  color: #287490 !important;
}
.custom-select #selectedOption::after {
  content: none !important;
}

/* Arrow icon for the dropdown */
.custom-select .select-style::after {
  content: '▼';
  margin-left: 5px;
  position: relative;
  margin-top: 2px;
}

/* Dropdown options */
.custom-select .options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: rgba(22, 38, 47);
  color: #287490;
  border: 1px solid transparent;
  border-radius: 0 0 5px 5px;
  z-index: 1;
}
.custom-select[open-up] .options {
  bottom: 100%;
  top: unset !important;
}

.custom-select .option {
  padding: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  text-align: center;
  font-size: var(--font-md);
}
.custom-select .option:hover {
  background-color: #295869;
}
.custom-select.open .options {
  display: block;
}
.custom-select .option.selected {
  background-color: #295869;
}

.range-bar {
  background-color: rgba(22, 38, 47, 0.5);
  height: 20px;
  border-radius: 5px;
  opacity: 0.7;
  transition: .25s ease-in-out;
  position: relative;
  width: calc(100% - 24px);
}
.range-bar:hover {
  opacity: 1;
}
.range-bar .range-mover {
  background-color: var(--default-blue);
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  right: 0;
  z-index: 1;
}
.range-bar-wrapper #val-text {
  width: 24px;
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}
 
.loading:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-top-color: #000;
  animation: spinner .6s linear infinite;
  z-index: 998;
}
.loading::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
  background-color: rgb(0,0,0,0.7);
  left: 0;
  top: 0;
}

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1px; /* Space between rectangles */
  overflow: hidden;
}

.rectangle {
  min-width: 2px; /* Fixed width */
  background: linear-gradient(to bottom, var(--bg-light), var(--bg-dark)); /* Green gradient */
}

.rectangle:nth-child(odd) {
  height: 9px; /* Smaller height for odd rectangles */
}

.rectangle:nth-child(even) {
  height: 14px; /* Bigger height for even rectangles */
}

.hexagon {
  position: relative;
  width: 28.57px; /* 100px / 3.5 */
  height: 16.50px; /* 57.74px / 3.5 */
  background-color: #000;
  margin: 8.24px 0; /* 28.87px / 3.5 */
}

.hexagon:before, .hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 14.29px solid transparent; /* 50px / 3.5 */
  border-right: 14.29px solid transparent; /* 50px / 3.5 */
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 8.24px solid #000; /* 28.87px / 3.5 */
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 8.24px solid #000; /* 28.87px / 3.5 */
}

.hexagon.xs {
  width: calc(100px / 5);
  height: calc(57.74px / 5);
  margin: calc(28.87px / 5) 0;
}

.hexagon.xs:before, .hexagon.xs:after {
  border-left: calc(50px / 5) solid transparent; /* 50px / 3.5 */
  border-right: calc(50px / 5) solid transparent; /* 50px / 3.5 */
}

.hexagon.xs:before {
  bottom: 100%;
  border-bottom: calc(28.87px / 5) solid #000; /* 28.87px / 3.5 */
}

.hexagon.xs:after {
  top: 100%;
  width: 0;
  border-top: calc(28.87px / 5) solid #000; /* 28.87px / 3.5 */
}
.hexagon.xs i {
  font-size: var(--font-sm);
}

.box-scifi {
  width: 76px;
  height: 76px;
  border: 2px solid #64bded;
  background: linear-gradient(180deg, rgba(20,20,20,1) 0%, rgb(37 38 41) 50%, rgba(20,20,20,1) 100%);
  background-image: url("https://cdn.space-aces.com/spacemap/ui/pilotSheet/background54.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  box-shadow: 0 0 2px #2783ef;
  border-radius: 3px;
}
.box-scifi::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #31302f;
  filter: drop-shadow(0 0 2px #c9c5c6);
  transform: rotate(-180deg);
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 3;
}
.box-scifi::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #31302f;
  filter: drop-shadow(0 0 2px #c9c5c6);
  transform: rotate(-90deg);
  position: absolute;
  top: -2px;
  right: -2px;
  z-index: 3;
}
.box-scifi .text-wrapper {
  width: 80%;
  height: 16px;
  background: linear-gradient(180deg, rgba(189,187,186,1) 0%, rgba(0,0,0,1) 50%);
  position: absolute;
  left: 10%;
  bottom: -8px;
  font-size: var(--font-xs);
  color: #fff;
  text-align: center;
  z-index: 4;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-md);
}

.octagon-wrap-global {
  width:21px;
  height:21px;
  position: relative;
  overflow: hidden;
  margin-left: 5%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.octagon-wrap-global > .octagon {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
  transform: rotate(45deg);
  background: #16262f;
  border: 3px solid rgba(27,45,27,0.1);
}
.octagon-wrap-global i {
  position: absolute;
  font-size: var(--font-base);
  color: #7ccffb;
  opacity: 0.7;
  transition: opacity .2s ease-in-out;
}
.octagon-wrap-global:hover i {
  color: #fff;
  filter: drop-shadow(0 0 3px #00a5fb);
  opacity: 1;
}

.triangle {
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-right: 17px solid #2b718a;
}
.triangle.right {
  transform: rotate(180deg);
}

.triangle > .inner {
  position: relative;
  top: -14px;
  left: 2px;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-right: 14px solid #242e40;
}

.triangle:hover {
  border-right-color: #65c5ed;
}
.triangle:hover > .inner {
  border-right-color: #366a83;
}

/*font to not affect mod*/
.log_main {
  font-family: "roboto", sans-serif;
  font-style: normal;
  font-weight: 700;
}
.stripy-button, button {
  font-family: "orbitron", sans-serif;
  font-weight: 500;
  font-style: normal;
  text-shadow: rgb(55 55 55) 1px 1px 3px;
}
.custom-navbar-item, .footer-hint, .footer-text, .navbar {
  font-family: "Play", sans-serif;
  font-style: normal;
  font-weight: 700;
}

.fade-out {
  position: relative;
  overflow: hidden;
}

.fade-out::before,
.fade-out::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 40px; /* Adjust fade height as needed */
  pointer-events: none; /* Allows interaction with content underneath */
  z-index: 1;
}

/* Top fade - from transparent to black */
.fade-out::before {
  top: 0;
  background: linear-gradient(to bottom, black, transparent);
}

/* Bottom fade - from transparent to black */
.fade-out::after {
  bottom: 0;
  background: linear-gradient(to top, black, transparent);
}