@font-face {
    font-family: 'hg';
    src: url('../fonts/hg.eot');
    src: url('../fonts/hg.eot') format('embedded-opentype'),
    url('../fonts/hg.woff2') format('woff2'),
    url('../fonts/hg.woff') format('woff'),
    url('../fonts/hg.ttf') format('truetype'),
    url('../fonts/hg.svg#hg') format('svg');
    font-weight: normal;
    font-style: normal;
}

div a {
    color: #08f;
}

div a:focus {
	outline: none;
}

div a:hover, div a:focus, div a:active {
    color: #4af;
	text-decoration: none;
}

* {
    cursor: url("../images/cursor.png"), default;
}

div a:hover, a > * {
    cursor: url("../images/cursor-h.png"), pointer;
}

body {
	font-family: 'Roboto', sans-serif;
}

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

img {
	max-width: 100%;
}

.float {
	display: inline-block;
	vertical-align: top;
}

.blkCenter {
	display: block;
	margin: auto;
}

.nopad {
	padding: 0;
}

.nopadL {
	padding-left: 0;
}

.nopadR {
	padding-right: 0;
}

.padFix {
	padding-left: 15px;
	padding-right: 15px;
}

.padFixL {
	padding-left: 15px;
}

.padFixR {
	padding-right: 15px;
}

.padTop {
	padding-top: 60px;
}

.padBot {
	padding-bottom: 60px;
}

.mtop {
	margin-top: 30px;
}

.mbot {
	margin-bottom: 30px;
}

.mtop30 {
	margin-top: 30px;
}

.mbot30 {
	margin-bottom: 30px;
}

.mtop60 {
	margin-top: 60px;
}

.mbot60 {
	margin-bottom: 60px;
}

.mtop90 {
	margin-top: 90px;
}

.mbot90 {
	margin-bottom: 90px;
}

.full, .w100 {
	width: 100%;
}

.half, .w50 {
	width: 50%;
}

.fifth, .w20 {
	width: 20%;
}

.sixth, .w16 {
	width: 16.66%;
}

.tenth, .w10 {
	width: 10%;
}

.quarter, .w25 {
	width: 25%;
}

.third, .w33 {
	width: 33.33%;
}

.two-thirds, .w66 {
	width: 66.66%;
}

.three-quarters, .w75 {
	width: 75%;
}

.almost-full, .w90 {
	width: 90%;
}

.w40 {
	width: 40%;
}

.w30 {
	width: 30%;
}

.rel {
	position: relative;
}

.childCenter {
	text-align: center;
}

.childLeft {
	text-align: left;
}

.childRight {
	text-align: right;
}

/* ========================= COMMON ========================= */

body {
    background-color: #000;
    background-image: linear-gradient(#fff2, #f002), linear-gradient(90deg, #00f2, #0802), url('/images/big_logo.png'), url('/images/starfield.png');
    background-size: cover, cover, cover, 50%;
    background-attachment: fixed, fixed, fixed, scroll;
    color: #ddf;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Orbitron, sans-serif;
}

main {
    padding: 30px 0 90px;
    min-height: calc(100vh - 280px);
}

hr {
    border-top: 4px ridge #fff8;
}

.card.dark {
    background-color: #44aa;
    border-radius: 0.5em;
    font-family: hg, sans-serif;
}

.card.dark .card-header {
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 2px solid rgba(0, 128, 255, 0.5);
}

.card.dark .btn-link:hover {
    color: #8af;
    text-decoration: none;
}

.card.dark .form-control::placeholder {
    opacity: 0.5;
}


#transactionComplete, #greenBox {
    background-color: #afa4;
    border: 3px ridge #0f0;
    border-radius: 10px;
    box-shadow: 0 0 5px #0f0, 0 0 5px #0f0 inset;
    color: #afa;
    font-size: 20px;
    margin-top: 60px;
    padding: 20px 0;
    text-align: center;
}

#noShips, #yellowBox {
    background-color: #ffa4;
    border: 3px ridge #ff0;
    border-radius: 10px;
    box-shadow: 0 0 5px #ff0, 0 0 5px #ff0 inset;
    color: #ffa;
    font-size: 20px;
    margin-top: 60px;
    padding: 20px 0;
    text-align: center;
}

#noCredits, #redBox {
    background-color: #faa4;
    border: 3px ridge #f00;
    border-radius: 10px;
    box-shadow: 0 0 5px #f00, 0 0 5px #f00 inset;
    color: #faa;
    font-size: 20px;
    margin-top: 60px;
    padding: 20px 0;
    text-align: center;
}

#transactionComplete a, #noShips a, #noCredits a {
    color: #ccc;
}

#transactionComplete a:hover, #noShips a:hover, #noCredits a:hover {
    color: #fff;
}

/* ========================= HEADER AND FOOTER ========================= */

header  {
    background-color: #0008;
    padding: 15px 0;
}

nav {
    font-family: hg, sans-serif;
}

nav > ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 0;
}

nav a {
    background-color: #08f1;
    border-radius: 130px;
    box-shadow: 0 0 10px #08f inset;
    color: #08f;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    padding: 0 40px;
    transition: 250ms ease-out;
}

nav a:hover {
    background-color: #08f2;
    box-shadow: 0 0 10px #4af inset, 0 0 10px #4af ;
    color: #4af;
    text-shadow: 0 0 2px #4af;
}

header #balance {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

header #balance span {
    text-shadow: 0 0 2px #fff;
}

footer  {
    background-image: linear-gradient(90deg, #280346, #000);
    background-color: #280346;
    box-shadow: 0 20px 15px -15px #4af inset, 0 -5px 15px #4af;
    min-height: 200px;
    padding: 30px 0;
}

footer img {
    mix-blend-mode: luminosity;
}

footer ul {
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

footer ul li {
    min-width: 50%;
}

footer a {
    display: inline-block;
    font-family: hg, sans-serif;
    padding: 10px 20px;
    transition: 250ms ease-out;
}

footer a:hover {
    color: #4af;
    text-shadow: 0 0 2px #4af, 0 0 2px #4af, 0 0 2px #4af;
}

footer a.logout {
    color: #cc0;
}

footer a.logout:hover {
    color: #ff0;
    text-shadow: 0 0 5px #f80, 0 0 5px #f80, 0 0 5px #f80;
}

/* ========================= HOME ========================= */

#home h1 {
    background-image: linear-gradient(90deg, #80f, #f08);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold;
    font-size: 60px;
    padding: 30px 0;
    -webkit-text-stroke: 2px #8088;
}

#home h3 {
    text-shadow: 0 0 5px #8ff;
}

#home .featured-ship {
    border: 1px solid #60c;
    box-shadow: 0 0 5px 2px #408, 0 0 45px #000;
    display: block;
    margin: 0 auto 60px;
}

#homeTable {
    margin: 30px 0;
    width: 100%;
}

#homeTable th {
    background-color: #fffa;
    color: #000;
}

#homeTable th, #homeTable td {
    padding: 5px 10px;
}

#homeTable tr:nth-child(even) td {
    background-color: #0006;
}

#homeTable tr:nth-child(odd) td {
    background-color: #000a;
}

#homeTable td div {
    max-width: 120px;
    text-align: right;
}

#homeTable img {
    height: 1em;
    margin-right: 10px;
}

#homeTable tbody tr:nth-child(-n+12) td:first-child {
    color: #eef;
    text-shadow: 0 0 1px #fff;
}

#homeTable tbody tr:nth-child(1) td:first-child {
    color: #fff;
    text-shadow: 0 0 1px #ff0;
}

#homeTable tfoot tr:first-child td {
    background-color: #fffa;
    color: #000;
    font-weight: bold;
}

#homeTable tfoot tr:last-child td {
    font-size: 0.75em;
    font-weight: bold;
 }

/* ========================= SHIPS ========================= */

#shipList {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

#shipList li {
    background-color: #0004;
    background-clip: padding-box;
    border: 10px solid transparent;
    border-radius: 0 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 25%;
    text-align: center;
    padding: 20px;
}

#shipList h2 {
    font-size: 24px;
    text-align: center;
    text-shadow: 0 0 4px #0ff;
}

#shipList p.description {
    font-size: 12px;
    text-align: left;
    white-space: pre-wrap;
}

#shipList img {
    border-radius: 30px;
    box-shadow: 0 0 5px 2px #a0f;
    border: 1px solid #d0f;
    margin-top: auto;
}

#shipList p.price {
    font-family: hg, sans-serif;
    font-variant: small-caps;
    margin-top: 15px;
}

#shipList p.price del, #buy p.price del {
    opacity: 0.5;
}

#shipList a {
    background-color: #08f1;
    border-radius: 130px;
    box-shadow: 0 0 10px #08f inset;
    color: #08f;
    display: inline-block;
    font-family: hg, sans-serif;
    font-size: 18px;
    height: 35px;
    line-height: 35px;
    margin-top: 0;
    padding: 0 10px;
    transition: 250ms ease;
    width: 50%;
    align-self: center;
}

#shipList a:hover {
    background-color: #0f02;
    box-shadow: 0 0 10px #0a0 inset, 0 0 10px #0a0;
    color: #afa;
    text-shadow: 0 0 2px #afa;
}

#shipList p.credits-please {
    color: var(--danger);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

#shipList p.owned {
    color: #0ff;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    margin-bottom: 5px;
}

#shipList p.log-please {
    color:  var(--warning);
    font-size: 12px;
    margin-top: 0;
    text-align: center;
}

#catalog-selector {
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
}

#catalog-selector li {
    flex-basis: 100px;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    background-color: #08f1;
    border-radius: 15px;
    box-shadow: 0 0 10px #08f inset;
    color: #0af;
    margin: 0 5px;
    cursor: url("../images/cursor-h.png"), pointer;
    transition: 250ms ease-out;
}

#catalog-selector li:hover {
    box-shadow: 0 0 10px #4af inset, 0 0 10px #4af;
    color: #4af;
    text-shadow: 0 0 2px #4af;
}

#catalog-selector li.active {
    background-color: #08f6;
}

/* ========================= HANGARS ========================= */

#hangars ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

#hangars li {
    background-color: #0124;
    background-clip: padding-box;
    border: 5px solid transparent;
    border-radius: 0 50px;
    display: flex;
    flex-flow: column;
    height: 270px;
    overflow: hidden;
    padding: 10px;
    text-align: center;
    width: 25%;
}

#hangars h2 {
    font-size: 18px;
    text-align: left;
}

#hangars h2 span:last-child {
    font-size: 24px;
    font-weight: bold;
    text-shadow: 0 0 5px #0ff;
}

#hangars .rankImage {
    float: left;
    margin-right: 14px;
    width: 75px;
}

#hangars .shipCount {
    clear: both;
    margin-top: auto;
}
#hangars .shipCount em {
    color: #ff0;
    font-style: normal;
}

#hangars li a {
    background-color: #08f1;
    border-radius: 130px;
    box-shadow: 0 0 10px #08f inset;
    color: #08f;
    display: inline-block;
    font-family: hg, sans-serif;
    font-size: 18px;
    height: 35px;
    line-height: 35px;
    padding: 0 30px;
    transition: 250ms ease;
    align-self: center;
}

#hangars li a:hover {
    background-color: #ff02;
    box-shadow: 0 0 10px #aa0 inset, 0 0 10px #aa0;
    color: #ffa;
    text-shadow: 0 0 2px #ffa;
}

#saleList {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

#singleHangar li {
    background-color: #0008;
    background-clip: padding-box;
    border: 10px solid transparent;
    border-radius: 0 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 25%;
    overflow: hidden;
    text-align: center;
    padding: 20px;
}

#singleHangar h2 {
    font-size: 25px;
    text-align: center;
}

#singleHangar h3 {
    font-size: 18px;
    font-style: italic;
    text-align: center;
}

#singleHangar h3 i {
    font-size: 0.5em;
    margin: 0 5px;
    vertical-align: middle;
}

#singleHangar img {
    border-radius: 30px;
    box-shadow: 0 0 5px 2px #a0f;
    border: 1px solid #d0f;
    cursor: url("../images/cursor-h.png"), pointer;
    transition: 150ms ease;
}

#singleHangar button {
    background-color: #08f1;
    border-radius: 130px;
    border-color: #08f;
    box-shadow: 0 0 10px #08f inset;
    color: #08f;
    display: inline-block;
    font-family: hg, sans-serif;
    font-size: 18px;
    margin-top: 15px;
    padding: 5px 20px;
    transition: 250ms ease;
}

#singleHangar button:hover {
    background-color: #f002;
    border-color: #a00;
    box-shadow: 0 0 10px #a00 inset, 0 0 10px #a00;
    color: #faa;
    text-shadow: 0 0 2px #faa;
}

#singleHangar li.color0 {
    background-color: #0008;
}
#singleHangar li.color0 img {
    box-shadow: 0 0 5px 2px #408;
    border: 1px solid #60c;
}

#singleHangar li.color1 {
    background-color: #2008;
}
#singleHangar li.color1 img {
    box-shadow: 0 0 5px 2px #a00;
    border: 1px solid #d00;
}

#singleHangar li.color2 {
    background-color: #0028;
}
#singleHangar li.color2 img {
    box-shadow: 0 0 5px 2px #0af;
    border: 1px solid #0df;
}

#singleHangar li.color3 {
    background-color: #0208;
}
#singleHangar li.color3 img {
    box-shadow: 0 0 5px 2px #af0;
    border: 1px solid #4f0;
}

#singleHangar li.color4 {
    background-color: #2208;
}
#singleHangar li.color4 img {
    box-shadow: 0 0 5px 2px #fa0;
    border: 1px solid #fd0;
}

#singleHangar li.color5 {
    background-color: #fff2;
}
#singleHangar li.color5 img {
    box-shadow: 0 0 5px 2px #aaa;
    border: 1px solid #fff;
}

#singleHangar li.color6 {
    background-color: #2028;
}
#singleHangar li.color6 img {
    box-shadow: 0 0 5px 2px #a0f;
    border: 1px solid #d0f;
}

#singleHangar li figure {
    cursor: url("../images/cursor-h.png"), pointer;
    margin-top: auto;
}

#singleHangar li figure figcaption {
    display: none;
    padding: 10px 0;
    background-color: #fff2;
    font-size: 16px;
    position: fixed;
    bottom: 15px;
    left: 0;
    right: 0;
    z-index: 101;
}

#singleHangar li figure.active {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 98;
}

#singleHangar li figure.active img {
    position: fixed;
    width: 460px;
    top: calc(50vh - 125px);
    left: calc(50vw - 230px);
    box-shadow: 0 0 0 100vmax #0008;
    z-index: 99;
}

#singleHangar li figure.active figcaption {
    display: block;
}

/* ========================= SALE ========================= */
#color-slider li {
    padding: 5px;
}
#buy h2 {
    border-bottom: 2px solid #ddf8;
    padding-bottom: 10px;
    text-shadow: 0 0 6px #fff;
}

#buy p.price {
    font-size: 24px;
    text-shadow: 0 0 5px #ddf;
}

#buy p.price img {
    margin-right: 10px;
}

#buy p.my-color {
    font-family: Orbitron, sans-serif;
    font-size: 20px;
    font-weight: bold;
    margin: 15px 0 0;
    text-align: center;
}

#buy p.my-color.red {
    text-shadow: 0 0 5px #f00;
}
#buy p.my-color.blue {
    text-shadow: 0 0 5px #00f;
}
#buy p.my-color.green {
    text-shadow: 0 0 5px #0f0;
}
#buy p.my-color.gold {
    text-shadow: 0 0 5px #ff0;
}
#buy p.my-color.grey {
    text-shadow: 0 0 5px #fff;
}
#buy p.my-color.magenta {
    text-shadow: 0 0 5px #d0f;
}

#buy img.ship {
    border-radius: 30px;
    box-shadow: 0 0 5px 2px #a0f;
    border: 1px solid #d0f;
}

#buy .bx-prev, #buy .bx-next {
    background-image: linear-gradient(transparent 35%, #afa4 45%, transparent 60%);
    background-size: 0 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    display: inline-block;
    font-size: 30px;
    text-align: center;
    transition: 250ms ease;
    width: 50%;
}

#buy .bx-prev:hover, #buy .bx-next:hover {
    background-size: 50% 100%;
    color: #afa;
    text-shadow: 0 0 2px #afa;
}

#buy .bx-controls-direction {
    position: relative;
    top: -40px;
}

#buy #margin-fix {
    margin-bottom: 45px;
}

.sales-form input {
    border: 3px ridge #08f8;
    border-radius: 30px;
    padding: 5px 20px;
}
.sales-form input, .sales-form label {
    width: 100%;
}

.sales-form button {
    background-color: #08f1;
    border-color: #08f;
    border-radius: 130px;
    box-shadow: 0 0 10px #08f inset;
    color: #08f;
    display: block;
    font-family: hg, sans-serif;
    font-size: 18px;
    margin: 30px auto;
    transition: 250ms ease;
    width: 200px;
}

.sales-form button:hover {
    background-color: #0f02;
    border-color: #afa;
    box-shadow: 0 0 10px #0a0 inset, 0 0 10px #0a0;
    color: #afa;
    text-shadow: 0 0 2px #afa;
}

/* ========================= ADMiN ========================= */

#admin ul {
    list-style-type: disc;
    padding-left: 20px;
}

#admin ul a {
    font-size: 20px;
    font-family: hg, sans-serif;
}

#transactionComplete span.key {
    display: block;
    font-size: 80px;
    font-weight: bold;
    text-shadow: 0 0 5px #afa;
}

#transactionComplete .another-key, #greenBox .box-back, #yellowBox .box-back, #redBox .box-back {
    display: block;
    background-color: #0006;
    padding: 15px 0;
    margin: 30px 30px 0;
}

#weekly li p {
    margin-bottom: 5px;
}
#weekly .colored {
    color: #0ff;
}
table.report {
    width: initial !important;
}

table.report td:first-child {
    padding: 0 20px 0 0;
}
table.report td:nth-child(n+2) {
    text-align: right;
    padding: 0 5px;
}

#custom table, #active table, #delete table, #rank table {
    margin-top: 30px;
    width: 100%;
}

#custom table th, #active table th, #delete table th, #rank table th {
    background-color: #fffa;
    color: #000;
    font-weight: bold;
}

#custom table td, #custom table th, #delete table td, #delete table th, #rank table td, #rank table th {
    padding: 2px 10px;
}

#active table td, #active table th {
    padding: 2px 15px;
}

#custom table tr:nth-child(even) td, #active table tr:nth-child(even) td, #delete table tr:nth-child(even) td, #rank table tr:nth-child(even) td {
    background-color: #0006;
}

#custom table tr:nth-child(odd) td, #active table tr:nth-child(odd) td, #delete table tr:nth-child(odd) td, #rank table tr:nth-child(odd) td {
    background-color: #000a;
}

#custom input[type="number"] {
    width: 100px;
}

#custom button, #weekly button, #rank button {
    background-color: #08f1;
    border-color: #08f;
    border-radius: 130px;
    box-shadow: 0 0 10px #08f inset;
    color: #08f;
    font-family: hg, sans-serif;
    font-size: 18px;
    margin-left: 15px;
    padding: 0 30px;
    transition: 250ms ease;
}

#custom button:hover, #weekly button:hover, #rank button:hover {
    background-color: #0f02;
    border-color: #afa;
    box-shadow: 0 0 10px #0a0 inset, 0 0 10px #0a0;
    color: #afa;
    text-shadow: 0 0 2px #afa;
}

#active table .inactive td:nth-child(2) {
    color: #f80;
}

#active table .active td:nth-child(2) {
    color: #0c0;
}

#active button {
    background-color: #08f1;
    border-color: #08f;
    border-radius: 130px;
    box-shadow: 0 0 10px #08f inset;
    color: #08f;
    font-family: hg, sans-serif;
    font-size: 18px;
    padding: 0 30px;
    transition: 250ms ease;
    width: 150px;
}

#active .active button:hover {
    background-color: #f802;
    border-color: #fc8;
    box-shadow: 0 0 10px #a60 inset, 0 0 10px #a60;
    color: #fc8;
    text-shadow: 0 0 2px #fc8;
}
#active .inactive button:hover {
    background-color: #0f02;
    border-color: #afa;
    box-shadow: 0 0 10px #0a0 inset, 0 0 10px #0a0;
    color: #afa;
    text-shadow: 0 0 2px #afa;
}

#delete button {
    background-color: #ff01;
    border-color: #ff0;
    border-radius: 130px;
    box-shadow: 0 0 10px #ff0 inset;
    color: #ff0;
    font-family: hg, sans-serif;
    font-size: 18px;
    padding: 0 30px;
    transition: 250ms ease;
    width: 150px;
}

#delete button:hover {
    background-color: #f002;
    border-color: #faa;
    box-shadow: 0 0 10px #a00 inset, 0 0 10px #a00;
    color: #faa;
    text-shadow: 0 0 2px #faa;
}

#rank table tr:hover td, #custom table tr:hover td, #active table tr:hover td, #delete table tr:hover td {
    box-shadow: 0 0 0 50px #fff4 inset;
}

#master button {
    display: block;
    margin: 60px auto 0;
    min-width: 50%;
    max-width: 100%;
    width: 600px;
}