html {
  margin: 0;
  padding: 0;
  background-color: black;
  background-image: url("image/bg.png");
  border-radius: 14px;
}

a[href^="http"] {
  attr(target): "@system";
}

a {
  text-decoration: none;
}

/* Header */

.header {
  flow: horizontal;
}

/* Left Header */
.header-left {
  display: block;
  flow: horizontal;
  margin-top: 14px;
  width: 680px;
}

.link-site {
  color: white;
  text-decoration: none;
  margin-left: 20px;
}

.link-cp {
  color: white;
  text-decoration: none;
  margin-left: 24px;
}

.social-discord {
  color: white;
  text-decoration: none;
  margin-left: 24px;
}

.social-discord img {
  width: 20px;
  transition: opacity 0.25s ease;
  fill: white;
}

.social-discord img:hover {
  opacity: 0.75;
  cursor: pointer;
}

/* Right Header */

.header-right {
  display: block;
  flow: horizontal;
  width: 230px;
  margin-top: 10px;
  margin-left: 10px;
  content-horizontal-align: end;
}

.minimize,
.close {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
}

.minimize span,
.close span {
  transition: color 0.25s ease;
}

.minimize:hover span,
.close:hover span {
  color: #c5c5c5;
  cursor: pointer;
}

.minimize {
  margin-top: -5px;
  margin-right: 17px;
}

.close {
  margin-top: 0px;
}

.minimize > span {
  font-size: 24px;
  color: white;
}

.close > span {
  font-size: 18px;
  color: white;
}

/* Account Button */
.account_status_image img {
  max-width: 13px;
  max-height: 13px;
  fill: white;
}

.button_account {
  padding: 0 20px;
  margin-top: 0px;
  height: 25px;
  border: none;
  border-radius: 10px;
  background: url("Image/btn_style.jpg");
  color: white;
  z-index: 3;
  position: fixed;
  right: 0;
  margin-right: 111px;
  flow: horizontal;
  transition: opacity 0.25s ease;
  min-width: 120px;
  max-width: 120px;
  text-align: center !important;
}

.button_account:hover {
  opacity: 0.75;
  cursor: pointer;
}
.button_account > .account_status_text {
  text-align: center;
  width: 100px;
}
.main-button-add {
  text-align: center;
}

.button-add-account span {
  background-color: #1d3a61;
  padding: 5px 25px 5px 25px;
  display: block;
  color: white;
  border-radius: 15px;
  transition: opacity 0.25s ease;
  text-decoration: none;
}

.button-add-account:hover span {
  opacity: 0.75;
  cursor: pointer;
}

.list-account {
  opacity: 0;
  max-height: 0;
  transition: max-height 0.5s ease;
  margin-top: 18px;
  background-color: rgba(15, 29, 46, 0.68);
  border-radius: 0 0 10px 10px;
  border: 1px solid #1a314d;
  backdrop-filter: blur(5px);
  min-width: 157px;
  z-index: 2;
  position: fixed;
  right: 0;
  margin-right: 111px;
}

.list-account.active-list {
  opacity: 1;
  max-height: 500px;
  display: block;
}

.list-account:not(.active-list) {
  transition: max-height 0.5s ease;
}

.list-account > ul {
  list-style-type: none;
  margin: 0;
  padding: 25px 0;
  text-align: center;
}

.account-item > a {
  color: white;
  transition: color 0.25s ease;
}

.account-item > a:hover {
  color: #b6b6b6;
}

.account-item img {
  width: 12px;
  fill: white;
  transition: fill 0.25s ease;
}

.account-item img:hover {
  fill: #b6b6b6;
}

/* Acount List */
#main-login-add {
  display: none;
  overflow: hidden;
  position: absolute;
  width: 950px;
  height: 625px;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

#main-login-add.active-auth {
  display: block;

  margin-top: -45px;
  margin-left: -8px;
  opacity: 1;
  pointer-events: auto;
}

.auth-login-title {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 22px;
}

.block-auth-login {
  flow: vertical;
  position: absolute;
  width: 255px;
  height: 210px;
  background: linear-gradient(
    -90deg,
    rgba(13, 28, 48, 0.68) 0%,
    rgba(14, 48, 99, 0.56) 100%
  );
  border: 1px solid #0e2342;
  border-radius: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.block-close-auth {
  text-align: right;
  padding: 26px;
}

.block-close-auth a {
  color: white;
  transition: color 0.25s ease;
  text-decoration: none;
}

.block-close-auth a:hover {
  color: #cccccc;
}

.block-auth-insert {
  padding: 15px 30px 15px 30px;
}

.block-auth-insert > input {
  padding: 7px 0;
  width: 100%;
  margin-top: 15px;
  border: none;
  border-radius: 0;
  color: #c4c4c4;
}

.block-auth-insert > input[meta="login"] {
  background: url("Image/insert-login.png");
}

.block-auth-insert > input[meta="pass"] {
  background: url("Image/insert-pass.png");
}

.block-auth-insert > button {
  margin: 20px 0;
  width: 87%;
  background: url("Image/btn_style.jpg");
  color: white;
  border: none;
  border-radius: 30px;
  transition: opacity 0.25s ease;
  background-color: green;
}

.block-auth-insert > button:hover {
  cursor: pointer;
  opacity: 0.75;
}

.go-register {
  text-align: center;
}

.go-register > a {
  color: #9d9d9d;
  transition: color 0.25s ease;
}

.go-register > a:hover {
  color: white;
}

/* EDIT ACCOUNT */
#main-edit-account {
  display: none;
  overflow: hidden;
  position: absolute;
  width: 950px;
  z-index: 99999;
  height: 625px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

#main-edit-account.active-edit {
  display: block;
  margin-top: -45px;
  margin-left: -8px;
  opacity: 1;
  pointer-events: auto;
}

.block-close-edit-account {
  text-align: right;
  padding: 26px;
}

.block-close-edit-account a {
  color: white;
  transition: color 0.25s ease;
  text-decoration: none;
}

.block-close-edit-account a:hover {
  color: #cccccc;
}

.edit-account-title {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 22px;
}

.block-edit-account {
  flow: vertical;
  position: absolute;
  width: 255px;
  height: 210px;
  background: linear-gradient(
    -90deg,
    rgba(13, 28, 48, 0.68) 0%,
    rgba(14, 48, 99, 0.56) 100%
  );
  border: 1px solid #0e2342;
  border-radius: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.block-edit-account-insert {
  padding: 15px 30px 15px 30px;
}

.block-edit-account-insert > input {
  padding: 7px 0;
  width: 100%;
  margin-top: 15px;
  border: none;
  border-radius: 0;
  color: #c4c4c4;
}

.block-edit-account-insert > input[meta="login"] {
  background: url("Image/insert-login.png");
}

.block-edit-account-insert > input[meta="pass"] {
  background: url("Image/insert-pass.png");
  margin-bottom: 10px;
}

.block-edit-account-insert > button {
  margin: 7px 0;
  width: 87%;
  background: url("Image/btn_style.jpg");
  color: white;
  border: none;
  border-radius: 30px;
  transition: opacity 0.25s ease;
}
#delete-account-button {
  background: linear-gradient(
    0deg,
    rgba(117, 8, 8, 0.68) 0%,
    rgba(189, 11, 11, 0.56) 100%
  );
  border: 1px solid rgba(138, 11, 11, 0.56);
}
.block-edit-account-insert > button:hover {
  cursor: pointer;
  opacity: 0.75;
}

.UserAccounSelected {
  color: #298bff !important;
  font-weight: bold;
}

/* settings main window */
#main-settings-game {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 950px;
  height: 625px;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

#main-settings-game.active-settings-game {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.block-close-settings-game {
  text-align: right;
  padding: 26px;
}

.block-close-settings-game a {
  color: white;
  transition: color 0.25s ease;
}

.block-close-settings-game a:hover {
  color: #cccccc;
}

.settings-game-title {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 22px;
}

.block-settings-left {
  width: 180px;
  background-color: rgba(0, 29, 48, 0.6);
  height: 625px;
  border-right: 1px solid #023354;
  text-align: center;
  padding: 0 30px;
}
.block-settings-left > p {
  padding: 100px 0 50px 0;
  margin: 0;
  color: white;
  font-size: 20px;
}

.item-menu-settings-graphic,
.item-menu-settings-game {
  width: 100%;
  background-color: rgba(16, 52, 77, 0.5);
  padding: 10px 0;
  border-radius: 5px;
  color: white;
  margin-bottom: 20px;
}

.item-settings-active {
  background-color: rgb(16, 52, 77);
  /* border-bottom: 5px solid #1b4f72; */
  border-radius: 5px 5px 0 0;
}
.item-menu-settings:hover {
  opacity: 0.75;
}

.block-settings-game {
  flow: horizontal;
}
.block-settings-right {
  width: 100%;
}
.title-settings {
  color: white;
  border-bottom: 3px solid #2c6b96;
  padding: 5px 25px;
  font-size: 20px;
  background-color: rgba(1, 59, 94, 0.35);
  margin-left: 25px;
  max-width: 20%;
  text-align: center;
}

.element-settings {
  flow: horizontal;
  background: linear-gradient(
    0deg,
    rgba(0, 46, 84, 0.71) 0%,
    rgba(0, 27, 47, 0) 50%
  );
  width: 100%;
  padding: 0 0 0 30px;
  margin-top: 7px;
}
.element-settings > p {
  width: 25%;
  color: white;
}

.button-settings-save-back {
  flow: horizontal;
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0 25px 15px 0;
}

/*Repair button */
.button-repair-settings {
  padding: 10px 20px;
  background: linear-gradient(
    0deg,
    rgba(117, 79, 8, 0.58) 0%,
    rgba(189, 141, 11, 0.35) 100%
  );
  border-radius: 5px;
  color: white;
  margin-right: 10px;
}
.button-repair-settings:hover {
  background: linear-gradient(
    0deg,
    rgba(117, 79, 8, 0.82) 0%,
    rgba(189, 141, 11, 0.62) 100%
  );
}

/*Back button*/
.button-back-settings {
  padding: 10px 20px;
  background: linear-gradient(
    0deg,
    rgba(117, 8, 8, 0.58) 0%,
    rgba(189, 11, 11, 0.35) 100%
  );
  border-radius: 5px;
  color: white;
  margin-right: 10px;
}
.button-back-settings:hover {
  background: linear-gradient(
    0deg,
    rgba(117, 8, 8, 0.82) 0%,
    rgba(189, 11, 11, 0.62) 100%
  );
}
.button-save-settings {
  padding: 10px 20px;
  background: linear-gradient(
    0deg,
    rgba(52, 117, 8, 0.58) 0%,
    rgba(44, 189, 11, 0.35) 100%
  );
  border-radius: 5px;
  color: white;
}
.button-save-settings:hover {
  background: linear-gradient(
    0deg,
    rgba(52, 117, 8, 0.91) 0%,
    rgba(44, 189, 11, 0.7) 100%
  );
}

.settings-main-game {
  display: none;
}

select {
  min-width: 200px;
  text-align: center;
}

@set styled-select < std-select-dropdown {
  :root {
    color: #9fcaee;
  }
  :root,
  :root:focus,
  :root:active {
    background: #001828;
    border-color: #1a45647f;
  }

  :root:hover {
    background: #00233a;
    border-color: rgba(31, 82, 119, 0.5);
  }
  :root > popup.list {
    background-color: #001828;
    border-color: #1a45647f;
    color: #9fcaee;
    height: 200px;
  }

  :root option {
    vertical-align: middle;
  }
  :root option:current {
    /* Стили для выбранного элемента */
    background-color: #012f4f; /* Пример: красный фон */
    color: #ffffff; /* Пример: белый текст */
  }
  :root > button {
    fill: #9fcaee;
  }
}
select:not([type]) {
  style-set: styled-select;
}

.custom_checkbox {
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  border: 1px solid #1a45647f;
  background: #001828;
}

.custom_checkbox:checked {
  background: no-repeat 50% 50%;
  background-image: url(stock:checkmark);
  background-size: 15px;
  fill: #9fcaee;
  background-color: #001828;
}

input[type="hslider"] {
  min-width: 150px;
  background-color: #094a73;
  background-image: url(stock:block);
  background-repeat: no-repeat;
  background-size: length(slider-position) 100%;
  fill: #3cb2ff;
  stroke-width: 0;
}

/* slid textt */
.value-set {
  color: #2e89c7;
  padding: 13px 5px 5px 5px;
  border-radius: 5px;
  height: 20px;
  width: 20px;
  margin-left: 5px;
}

.button-launcher-close {
  flow: horizontal;
  width: 100%;
}
.button-launcher-close > p {
  color: white;
  margin-right: 10px;
  margin-left: 15px;
}
.button-launcher-close:hover + .tooltip-launcher-close {
  opacity: 1;
}

.tooltip-launcher-close {
  opacity: 0;
  position: relative;
  color: white;
  background-color: rgba(22, 60, 107, 0.64);
  border-radius: 5px;
  padding: 5px;
  transition: opacity 0.3s ease; /* Плавный переход */
}

/* MAIN BODY (LOGO/SLIDER) */

.body-logotype {
  text-align: right;
}

.body-logotype > img {
  margin-right: 160px;
  margin-top: 25px;
  margin-bottom: 5px;
}

.slider-content {
  position: absolute;
  right: 0;
  width: 460px;
  height: 260px;
  margin-right: 60px;
}

.slider-item {
  background: linear-gradient(
    0deg,
    rgba(14, 38, 71, 0.45) 0%,
    rgba(14, 48, 99, 0) 100%
  );
  border-left: 1px solid rgba(26, 61, 107, 0.45);
}

.slider-main-content {
  margin-top: 1px;
  max-height: 260px;
  padding: 18px;
}

.slider-content-border-top {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    0deg,
    rgba(26, 61, 107, 0.45) 0%,
    rgba(14, 48, 99, 0) 100%
  );
}

.slider-content-border-bottom {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    0deg,
    rgba(26, 61, 107, 0.45) 0%,
    rgba(14, 48, 99, 0) 100%
  );
}

.slider-button {
  position: absolute;
  right: 0;
}

.button-slider {
  background: url("Image/slider-item.png");
  width: 26px;
  height: 26px;
  margin: 5px 0;
}

.active-slide-button {
  background: url("Image/slider-item-acitve.png");
}

.slider-item {
  opacity: 0;
  transition: opacity 1s ease;
}

.slider-item.active-slide {
  opacity: 1;
}

.slider-button {
  margin-right: 24px;
}

#button-slider-back {
  margin-bottom: 15px;
}

#button-slider-next {
  margin-top: 15px;
}

#button-slider-back > img:hover {
  opacity: 0.55;
}

#button-slider-next > img:hover {
  opacity: 0.55;
}

.slider-image {
  width: 100%;
  height: 98px;
  text-align: center;
  border: 1px solid #153159;
  box-shadow: inset 0 0 20px 6px #005587;
}

#slider-one .slider-image {
  background: url("Image/slider/slide-image1.jpg");
}

#slider-two .slider-image {
  background: url("Image/slider/slide-image2.jpg");
}

#slider-three .slider-image {
  background: url("Image/slider/slide-image3.jpg");
}

.slider-title {
  padding: 10px 0;
  font-size: 17px;
  color: #81b9ff;
  font-weight: bold;
}

.slider-text {
  color: #d9d9d9;
}

.slider-button-go {
  margin-top: 25px;
}

.slider-button-go > a > div {
  color: white;
  background: #244670;
  border-radius: 30px;
  padding: 5px 10px;
  transition: opacity 0.25s ease;
}

.slider-button-go > a > div:hover {
  opacity: 0.75;
  cursor: pointer;
}

/* FOOTER (UPDATER, SETTINGS, PLAY */
#main-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: 21px;
}

.main-block-bottom-right {
  flow: horizontal;
  width: auto;
  position: absolute;
  right: 0;
  margin-right: 22px;
  margin-top: 177px;
  z-index: 2;
}

.button-play-game {
  width: 197px;
  height: 52px;
  background: url("Image/play_button.png");
  text-align: center;
  padding: 0;
  border: none;
  vertical-align: middle;
}

.button-play-game:hover {
  background: url("Image/play_button-active.png");
  cursor: pointer;
}

.button-play-game:hover p {
  color: #a1dfff;
}

.button-play-game > p {
  font-weight: bold;
  font-size: 18px;
  color: white;
  margin: 0;
  padding: 0;
  transition: color 0.4s ease;
}

.button-settings-game {
  flow: horizontal;
  transform: skew(25deg, 0);
  border: none;
  background: #4770a4;
  border-radius: 0;
  margin-right: -20px;
  margin-top: 12px;
  padding: 3px 10px;
  width: 30px;
  transition: width 0.4s ease, background 0.4s ease;
}
.button-settings-game:hover {
  width: 125px;
  background: #5799f5;
  cursor: pointer;
}

.button-settings-game:hover p {
  color: white;
}
.button-settings-game > * {
  transform: skew(-25deg, 0);
}
.button-settings-game > p {
  font-size: 15px;
  margin: 0;
  padding: 0;
  color: transparent;
}
.button-settings-image {
  width: 18px;
  fill: white;
  margin-right: 10px;
}

.main-block-bottom-left {
  position: absolute;
  width: 706px;
  margin-bottom: 0px;
  left: 0;
  margin-top: 201px;
}
.block-updater-main {
  background: #244670;
  height: 10px;
  width: 100%;
}
.block-updater-text {
  color: #d0d0d0;
  margin-left: 22px;
  margin-top: 6px;
}
.block-updater-speed {
  color: #ababab;
  margin-left: 22px;
}
.updater-progress-value {
  background: linear-gradient(
    0deg,
    rgba(0, 80, 179, 1) 0%,
    rgba(166, 204, 255, 1) 100%
  );
  width: 50%;
  height: 8px;
  border-top: 1px solid #244670;
  border-bottom: 1px solid #244670;
}

/* ERROR DISPLAY */
#main-error-show {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 950px;
  height: 625px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

#main-error-show.active-show-error {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.block-close-ShowError {
  text-align: right;
  padding: 26px;
}

.block-close-ShowError a {
  color: white;
  transition: color 0.25s ease;
}

.block-close-ShowError a:hover {
  color: #cccccc;
}

.block-error-show {
  flow: vertical;
  position: absolute;
  width: auto;
  min-width: 50px;
  max-width: 340px;
  height: auto;
  padding: 20px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #721c24;
}

.block-error-yes > a {
  position: absolute;
  width: auto;
  min-width: 50px;
  height: auto;
  padding: 10px 25px;
  color: white;
  background: #244670;
  border-radius: 15px;
  bottom: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #cecece;
  transition: background 0.4s ease;
}

.block-error-yes > a:hover {
  background: #4a80c2;
}

/* ACCOUNT ALREADY IN GAME */
#main-account-ready {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 950px;
  height: 625px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

#main-account-ready.active-account-ready {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.block-account-ready {
  flow: vertical;
  position: absolute;
  width: auto;
  min-width: 50px;
  max-width: 340px;
  height: auto;
  padding: 20px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #721c24;
  text-align: center;
}
.block-close-account-ready {
  flow: horizontal;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: 30%;
  z-index: 9999;
}
.block-close-account-ready > a {
  padding: 10px 25px;
  color: white;
  background: #244670;
  border-radius: 15px;
  color: #cecece;
  transition: background 0.4s ease;
  margin: 0 5px;
}

.block-close-account-ready > a:hover {
  background: #4a80c2;
}

/* Logout countdown animation*/
#main-countdown-block {
    display: none;
    position: absolute;
    z-index: 99999;
      top: 0;
  left: 0;
    width: 950px;
    height: 625px;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
#main-countdown-block.active-countdown-block {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

.countdown-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.countdown-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: rgba(36, 70, 112, 0.8);
    border: 4px solid #244670;
    border-top-color: #5799f5;
    animation: spin 1s linear infinite;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.countdown-text {
    color: white;
    font-size: 24px;
    margin-top: 20px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}