:root {
  --color-default: #999999;
  --color-link: #00B7FF;
  --color-highlight: #DDD;
  --color-common: #babcbe;
  --color-uncommon: #aed144;
  --color-rare: #47aced;
  --color-epic: #a398eb;
  --color-legendary: #f5a836;
  --color-efficiency: #FADC79;
  --color-luck: #A4E7F8;
  --color-comfort: #FF8889;
  --color-resilience: #8EA6EE;
  --color-mb1: #c2c2c2;
  --color-mb2: #818181;
  --color-mb3: #9eff53;
  --color-mb4: #54cb42;
  --color-mb5: #63faff;
  --color-mb6: #4295d9;
  --color-mb7: #ff6384;
  --color-mb8: #b606fa;
  --color-mb9: #ffdb63;
  --color-mb10: #ff7b0d;
}

body {
  margin-top:0;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  overflow-y: scroll;
}

#cover-spin {
  position:fixed;
  width:100%;
  left:0;right:0;top:0;bottom:0;
  background-color: rgba(255,255,255,0.7);
  z-index:9999;
  display:none;
}

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

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

#cover-spin::after {
  content:'';
  display:block;
  position:absolute;
  left:48%;top:20%;
  width:40px;height:40px;
  border-style:solid;
  border-color:black;
  border-top-color:transparent;
  border-width: 4px;
  border-radius:50%;
  -webkit-animation: spin .8s linear infinite;
  animation: spin .8s linear infinite;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

.link-btn {
  color: var(--color-link);
  text-decoration: none;
}

.link-btn:hover, .action-btn:hover {
  cursor: pointer;
}

.divider {
  border-top:1px dotted var(--color-default);
  margin-top:12px;
}

.d-inline {
  display:inline;
}

.m-xs {margin: 0.25rem !important;} .mt-xs {margin-top: 0.25rem !important;} .mr-xs {margin-right: 0.25rem !important;} .mb-xs {margin-bottom: 0.25rem !important;} .ml-xs {margin-left: 0.25rem !important;} 
.m-0 {margin: 0 !important;} .mt-0 {margin-top: 0 !important;} .mr-0 {margin-right: 0 !important;} .mb-0 {margin-bottom: 0 !important;} .ml-0 {margin-left: 0 !important;} 
.m-1 {margin: 0.5rem !important;} .mt-1 {margin-top: 0.5rem !important;} .mr-1 {margin-right: 0.5rem !important;} .mb-1 {margin-bottom: 0.5rem !important;} .ml-1 {margin-left: 0.5rem !important;} 
.m-2 {margin: 0.75rem !important;} .mt-2 {margin-top: 0.75rem !important;} .mr-2 {margin-right: 0.75rem !important;} .mb-2 {margin-bottom: 0.75rem !important;} .ml-2 {margin-left: 0.75rem !important;} 
.m-3 {margin: 1rem !important;} .mt-3 {margin-top: 1rem !important;} .mr-3 {margin-right: 1rem !important;} .mb-3 {margin-bottom: 1rem !important;} .ml-3 {margin-left: 1rem !important;} 
.m-4 {margin: 1.25rem !important;} .mt-4 {margin-top: 1.25rem !important;} .mr-4 {margin-right: 1.25rem !important;} .mb-4 {margin-bottom: 1.25rem !important;} .ml-4 {margin-left: 1.25rem !important;} 
.p-xs {padding: 0.25rem !important;} .pt-xs {padding-top: 0.25rem !important;} .pr-xs {padding-right: 0.25rem !important;} .pb-xs {padding-bottom: 0.25rem !important;} .pl-xs {padding-left: 0.25rem !important;} 
.p-0 {padding: 0 !important;} .pt-0 {padding-top: 0 !important;} .pr-0 {padding-right: 0 !important;} .pb-0 {padding-bottom: 0 !important;} .pl-0 {padding-left: 0 !important;} 
.p-1 {padding: 0.5rem !important;} .pt-1 {padding-top: 0.5rem !important;} .pr-1 {padding-right: 0.5rem !important;} .pb-1 {padding-bottom: 0.5rem !important;} .pl-1 {padding-left: 0.5rem !important;} 
.p-2 {padding: 0.75rem !important;} .pt-2 {padding-top: 0.75rem !important;} .pr-2 {padding-right: 0.75rem !important;} .pb-2 {padding-bottom: 0.75rem !important;} .pl-2 {padding-left: 0.75rem !important;} 
.p-3 {padding: 1rem !important;} .pt-3 {padding-top: 1rem !important;} .pr-3 {padding-right: 1rem !important;} .pb-3 {padding-bottom: 1rem !important;}  .pl-3 {padding-left: 1rem !important;} 
.p-4 {padding: 1.25rem !important;} .pt-4 {padding-top: 1.25rem !important;} .pr-4 {padding-right: 1.25rem !important;} .pb-4 {padding-bottom: 1.25rem !important;} .pl-4 {padding-left: 1.25rem !important;} 
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-bold {
  font-weight: bold;
}

.highlight {
  background-color: var(--color-highlight) !important;
  color: #000000 !important;
  border:1px solid var(--color-default) !important;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

.w50 {
  width: 50px !important;
  display: inline !important;
}
.w100 {
  width: 100px !important;
  display: inline !important;
}
.w150 {
  width: 150px !important;
  display: inline !important;
}

/* .table-alt thead tr {
  background-color: lightblue;
} */
.table-alt thead th, .table-alt thead td {
  border-bottom: 1px dotted #999999;
}

.table-alt tr:nth-child(even) {
  background-color: aliceblue;
}

.table-nav th, .table-nav td {
  border: 1px solid lightgray;
}

input.number {
  width:75px;
}

.badge {
  background-color: #ffffff;
  color: #000000;
  padding: 2px 4px;
  width: fit-content;
}
.badge.badge-md {
  padding: 4px 8px;
}
.badge.badge-lg {
  padding: 8px 12px;
}
.badge.badge-xl {
  padding: 13px 18px;
}

.circle {
  border-radius: 50%;
}
.rounded {
  border-radius: 1rem;
}
.rounded-tab {
  border-radius: 0.375rem;
}
.corner-one {
  border-radius: 0 50% 50% 50%;
}
.corner-two {
  border-radius: 0 0 50% 50%;
}
.corner-three {
  border-radius: 0 0 50% 0;
}
.corner-four {
  border-radius: 0 0 0 0;
}

/* Dialog */
.ui-dialog table td { padding: 0; }
.ui-dialog table td:first-child { padding-right: 12px; }
/* .ui-dialog label, .ui-dialog input { display:block; } */
.ui-dialog input.text, .ui-dialog input.number, .ui-dialog select { margin-bottom:12px; width:98%; padding: .4em; }
.ui-dialog .ui-sm { width: 75px !important; }
.ui-dialog .ui-md { width: 145px !important; }
.ui-dialog .ui-lg { width: 225px !important; }
.ui-dialog fieldset { padding:0; border:0; margin-top:25px; }
.ui-dialog label { font-weight: bold; }

.border {
  border:1px solid var(--color-default);
}

/* Rarities */
.common {
  background-color: var(--color-common);
  border: 1px solid var(--color-common);
  color:#ffffff;
}
.uncommon {
  background-color: var(--color-uncommon);
  border: 1px solid var(--color-uncommon);
  color:#ffffff;
}
.rare {
  background-color: var(--color-rare);
  border: 1px solid var(--color-rare);
  color:#ffffff;
}
.epic {
  background-color: var(--color-epic);
  border: 1px solid var(--color-epic);
  color:#ffffff;
}
.legendary {
  background-color: var(--color-legendary);
  border: 1px solid var(--color-legendary);
  color:#ffffff;
}

/* Shoe Attributes */
.efficiency {
  background-color: var(--color-efficiency);
  border: 1px solid var(--color-efficiency);
  color: #ffffff;
}
.luck {
  background-color: var(--color-luck);
  border: 1px solid var(--color-luck);
  color: #ffffff;
}
.comfort {
  background-color: var(--color-comfort);
  border: 1px solid var(--color-comfort);
  color: #ffffff;
}
.resilience {
  background-color: var(--color-resilience);
  border: 1px solid var(--color-resilience);
  color: #ffffff;
}

/* Mystery Boxes */
.mb1-outline {
  background-color: #ffffff;
  border: 1px solid var(--color-mb1);
  color:#000000;
}
.mb1-outline:hover {
  background-color: var(--color-mb1);
}
.mb2-outline {
  background-color: #ffffff;
  border: 1px solid var(--color-mb2);
  color:#000000;
}
.mb2-outline:hover {
  background-color: var(--color-mb2);
  color:#ffffff;
}
.mb3-outline {
  background-color: #ffffff;
  border: 1px solid var(--color-mb3);
  color:#000000;
}
.mb3-outline:hover {
  background-color: var(--color-mb3);
}
.mb4-outline {
  background-color: #ffffff;
  border: 1px solid var(--color-mb4);
  color:#000000;
}
.mb4-outline:hover {
  background-color: var(--color-mb4);
}
.mb5-outline {
  background-color: #ffffff;
  border: 1px solid var(--color-mb5);
  color:#000000;
}
.mb5-outline:hover {
  background-color: var(--color-mb5);
}
.mb6-outline {
  background-color: #ffffff;
  border: 1px solid var(--color-mb6);
  color:#000000;
}
.mb6-outline:hover {
  background-color: var(--color-mb6);
  color:#ffffff;
}
.mb7-outline {
  background-color: #ffffff;
  border: 1px solid var(--color-mb7);
  color:#000000;
}
.mb7-outline:hover {
  background-color: var(--color-mb7);
  color:#ffffff;
}
.mb8-outline {
  background-color: #ffffff;
  border: 1px solid var(--color-mb8);
  color:#000000;
}
.mb8-outline:hover {
  background-color: var(--color-mb8);
  color:#ffffff;
}
.mb9-outline {
  background-color: #ffffff;
  border: 1px solid var(--color-mb9);
  color:#000000;
}
.mb9-outline:hover {
  background-color: var(--color-mb9);
}
.mb10-outline {
  background-color: #ffffff;
  border: 1px solid var(--color-mb10);
  color:#000000;
}
.mb10-outline:hover {
  background-color: var(--color-mb10);
  color:#ffffff;
}

/* Shoes */
.shoe {
  border: 1px solid lightgray;
  border-top: none;
  border-radius: 2%;
  display:inline-block;
  width: 225px;
}
.shoe table.action-btn {
  border-radius: 6% 6px 0 0;
}
.shoe .table-sockets td:nth-child(odd) {
  padding-left:23%;
}
.shoe .table-sockets td:nth-child(even) {
  padding-left:11%;
}