body {
  background-image: url('./images/background.jpg');
  background-position: center;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

html, body {
  width: 100%;
  height: 100%;
}

*, ::after, ::before {
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

img {
  vertical-align: middle;
  border-style: none;
  object-fit: cover;
}

p {
  margin-top: 0;
  margin-bottom: 5px;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

ol, ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a, a:active {
  text-decoration: none;
  color: #000;
}

.no-margin {
  margin: 0;
}

.dropdown-content {
  top: 100% !important;
}

#main {
  min-height: 100vh;
}

.index {
  height: 100vh;
  background-image: url('./images/backgroundlogin.jpg');
  background-position: center;
}
.index .home-title{
  color: white;
  font-size: 50px;
  text-align: center;
  align-items: center;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.299);
}

#login, #register {
  padding: 15px;
}
.btn-login{
  background-color: rgb(0, 220, 26) ;
}

.form {
  display: table-cell;
  vertical-align: middle;
}

.nav-wrapper {
  text-transform: uppercase;
}

table.striped>tbody>tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

.tabs .tab a {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.tabs .tab a:hover, .tabs .tab a.active {
  color: #fff;
}

.container-center {
  padding: 0;
  display: table;
  height: 100%;
}

.helper-text {
  font-size: 14px !important;
}

#toast-container {
  top: auto !important;
  right: auto !important;
  bottom: 3%;
  left: 1.5%;
}

.inline-right {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}

.padding-15 {
  padding: 15px !important;
}

.padding-5 {
  padding: 5px !important;
}

table tbody tr td a {
  color: #fff !important;
}

input[type=text]:not(.browser-default).invalid ~ .helper-text[data-error] {
  color: transparent !important;
}

#data {
  padding: 10px 25px;
}

.card .card-image img {
  padding-top: 15px;
  width: unset;
  display: unset;
}

@media only screen and (max-width: 992px) {
  nav .brand-logo {
    left: unset !important;
    -webkit-transform: unset !important;
    transform: unset !important;
  }
  .hide-on-med-and-down {
    display: unset !important;
  }
}

.toast .toast-action {
  margin-left: 15px;
  margin-right: -15px;
}

.select-wrapper input {
  color: #fff;
}

.btn.disabled, .disabled.btn-large, .disabled.btn-small, .btn-floating.disabled, .btn-large.disabled, .btn-small.disabled, .btn-flat.disabled, .btn:disabled, .btn-large:disabled, .btn-small:disabled, .btn-floating:disabled, .btn-large:disabled, .btn-small:disabled, .btn-flat:disabled, .btn[disabled], .btn-large[disabled], .btn-small[disabled], .btn-floating[disabled], .btn-large[disabled], .btn-small[disabled], .btn-flat[disabled] {
  background-color: #424242 !important;
}


/* =====================================================================
   Glass theme for the older pages (Shop, Skill Tree, Clan, Settings,
   Ships, Change Company, Admin). Matches the Home and Equipment pages.
   Materialize's colour helpers use !important, hence the overrides here.
   ===================================================================== */

/* Panels and pop-ups */
.card.grey.darken-4,
.modal.grey.darken-4 {
  background: rgba(8, 12, 22, .78) !important;
  border: 1px solid rgba(120, 170, 255, .16);
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal.grey.darken-4 { background: rgba(10, 15, 27, .96) !important; }
.modal .modal-footer.grey.darken-4 {
  background: transparent !important;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  box-shadow: none !important;
}
.modal-overlay { background: #02040a !important; }

/* Cards inside panels (shop items, clan blocks) */
.card.grey.darken-3 {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(120, 170, 255, .14);
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, transform .15s ease;
}
.card.grey.darken-3:hover { border-color: rgba(255, 167, 38, .55); }
.card .card-action { border-top: 1px solid rgba(255, 255, 255, .07) !important; background: transparent !important; }
.card .card-title { color: #fff; }
.card h4, .card h5, .modal h4 { color: #ffa726 !important; }

/* Tab bars */
.tabs.grey.darken-3 {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid rgba(120, 170, 255, .14);
  border-radius: 10px;
  box-shadow: none !important;
}
.tabs .tab a { color: #8fa3bf !important; letter-spacing: .1em; font-size: 15px; }
.tabs .tab a:hover, .tabs .tab a.active { color: #fff !important; background: rgba(255, 167, 38, .07) !important; }
.tabs .tab a:focus, .tabs .tab a:focus.active { background: rgba(255, 167, 38, .1) !important; }
.tabs .indicator { background-color: #ffa726 !important; height: 3px; }

/* Buttons */
.btn.grey, .btn-small.grey, .btn-large.grey, .btn-flat.grey {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(120, 170, 255, .2);
  border-radius: 8px;
  box-shadow: none !important;
  color: #cfd8e3 !important;
  font-weight: 600;
  letter-spacing: .06em;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn.grey:hover, .btn-small.grey:hover, .btn-large.grey:hover {
  background: rgba(255, 167, 38, .14) !important;
  border-color: #ffa726;
  color: #fff !important;
}
.btn.buy {
  background: linear-gradient(180deg, #43a047, #2e7d32) !important;
  border: 0;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(67, 160, 71, .35) !important;
}
.btn.buy:hover { box-shadow: 0 0 20px rgba(67, 160, 71, .65) !important; }
.btn.grey.disabled, .btn-small.grey.disabled, .btn.grey[disabled] {
  background: rgba(255, 255, 255, .03) !important;
  border-color: rgba(255, 255, 255, .08);
  color: #5d6b80 !important;
}

/* The tab-style links above some panels (Found / Join, Change Company) */
.button-container { margin: 20px 0 10px !important; gap: 8px; }
.button-container li { margin-right: 0 !important; }
.button-container a.horizontal-button {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 8px;
  background: rgba(8, 12, 22, .78) !important;
  border: 1px solid rgba(120, 170, 255, .2);
  color: #cfd8e3 !important;
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.button-container a.horizontal-button:hover {
  background: rgba(255, 167, 38, .14) !important;
  border-color: #ffa726;
  color: #fff !important;
}

/* Form fields */
input:not([type]):not(.browser-default),
input[type=text]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
  border-bottom: 1px solid rgba(143, 163, 191, .45) !important;
}
input:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid #ffa726 !important;
  box-shadow: 0 1px 0 0 #ffa726 !important;
}
.input-field > label { color: #8fa3bf !important; }
.input-field input:focus:not([readonly]) + label,
.input-field textarea:focus:not([readonly]) + label { color: #ffa726 !important; }
.input-field .prefix { color: #8fa3bf; }
.input-field .prefix.active { color: #ffa726 !important; }
.helper-text { color: #8fa3bf !important; }

/* Tables */
table thead tr { border-bottom: 1px solid rgba(120, 170, 255, .2) !important; }
table th { color: #8fa3bf; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
table tr { border-bottom: 1px solid rgba(255, 255, 255, .05); }
table.highlight > tbody > tr:hover { background-color: rgba(255, 167, 38, .08) !important; }

/* Pagination */
.pagination li a { color: #cfd8e3 !important; }
.pagination li.active { background-color: #ffa726 !important; border-radius: 6px; }
.pagination li.active a { color: #111 !important; }

/* Toast messages */
.toast {
  background: rgba(10, 15, 27, .96) !important;
  border: 1px solid rgba(120, 170, 255, .2);
  border-radius: 10px !important;
  color: #e3e8f0 !important;
}

/* Bottom status bar */
.footer.grey.darken-4 {
  background: rgba(8, 12, 22, .85) !important;
  border-top: 1px solid rgba(120, 170, 255, .14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Buttons sitting in narrow form columns (e.g. Settings > Change) */
.input-field > .btn.grey { padding: 0 8px; letter-spacing: .02em; min-width: max-content; }

/* Ships page tiles (overrides css/ships.css, which loads later) */
.ships .ship {
  background: rgba(8, 12, 22, .78);
  border: 1px solid rgba(120, 170, 255, .18);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.ships .ship:hover {
  background: rgba(20, 30, 50, .85);
  border-color: rgba(255, 167, 38, .6);
  transform: translateY(-2px);
}
.ships .ship.active {
  border: 2px solid #ffa726;
  background: radial-gradient(circle, rgba(255, 167, 38, .14), rgba(8, 12, 22, .82) 70%);
  box-shadow: 0 0 22px rgba(255, 167, 38, .25), 0 10px 30px rgba(0, 0, 0, .45);
}