/* ==========================================================================
   Edit
   ========================================================================== */

#editDiv {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 610px);
}

#editDiv .teamCard {
  margin: 10px;
  border: 1px solid #333;
  background: #181818;
}

.expensive {
  color: #ff4444;
}

#editDiv .cheap {
  color: #44ff44;
}

#editDiv .teamHeader {
  border-collapse: collapse;
  background: linear-gradient(#222, #111);
  display: grid;
  grid-template-columns: 32px 194px auto 142px 87px 32px;
  position: sticky;
  top: 44px;
}

#editDiv .teamHeader div {
  padding: 6px;
}

#editDiv .teamHeader .unfolded {
  width: 20px;
  transform: rotate(90deg);
  cursor: pointer;
  content: url("/img/arrow.svg");
  padding: 0;
}

#editDiv .teamHeader .folded {
  width: 20px;
  cursor: pointer;
  content: url("/img/arrow.svg");
  padding: 0;
}

#editDiv .teamHeader .teamHeadCostContainer > div {
  display: flex;
  padding: 0;
}

#editDiv .teamHeader .teamHeadCostContainer .teamHeadCost {
  padding: 4px 6px 0 0;
}

#editDiv .teamHeader .teamHeadCostContainer .teamHeadMaxCost {
  padding: 0;
}

#editDiv .teamHeader .teamHeadCostContainer .teamHeadCans {
  padding: 4px 0 0 6px;
}

#editDiv .teamHeader .teamHeadCost {
  font-weight: bold;
  text-align: right;
  padding-top: 10px;
}

#editDiv .teamHeader .teamHeadCost::after {
  content: " /";
  color: white;
  font-weight: normal;
}

#editDiv .teamHeader .teamHeadMaxCost input {
  width: 40px;
}

#editDiv .teamHeader .teamHeadCans {
  padding-top: 10px;
}

#editDiv .teamHeader .teamHeadRemove {
  padding-top: 8px;
}

#editDiv .addVehicle {
  margin: 6px;
}

#editDiv .vehicleHeader {
  display: grid;
  grid-template-columns: 194px 132px auto 62px 22px;
  border-bottom: 1px solid #333;
  padding: 4px;
}

#editDiv .vehicleHeadName {
  padding-right: 12px;
}

#editDiv .trailerTable {
  display: grid;
  grid-template-columns: 50px 162px auto 182px;
  border-bottom: 1px solid #333;
  padding: 4px;
}

#editDiv .trailerTable div {
  padding: 4px 6px;
  font-size: 12px;
}

#editDiv .trailerTable .trailerTrailer {
  padding-top: 8px;
}

#editDiv .trailerTable .trailerCargo {
  text-align: right;
  padding-top: 8px;
}

#editDiv .weaponsTable .weaponsRow,
#editDiv .upgradesTable .upgradesRow,
#editDiv .perksTable .perksRow {
  display: grid;
  border-bottom: 1px solid #333;
  font-size: 12px;
  height: 28px;
}

#editDiv .weaponsTable .weaponsRow div,
#editDiv .upgradesTable .upgradesRow div,
#editDiv .perksTable .perksRow div {
  padding: 4px;
}

#editDiv .weaponsTable .noLocation {
  grid-template-columns: 158px 78px 78px 58px 158px 1fr 48px 38px 38px 26px;
}

#editDiv .weaponsTable .yesLocation {
  grid-template-columns: 158px 78px 78px 78px 58px 158px 1fr 48px 38px 38px 26px;
}

#editDiv .weaponsTable .weaponsHeader,
#editDiv .upgradesTable .upgradesHeader,
#editDiv .perksTable .perksHeader {
  background: #2a2a2a;
  color: #ddd;
  border-bottom: 1px solid #555;
  font-weight: normal;
  display: grid;
  font-size: 12px;
  margin-top: 8px;
}

#editDiv .weaponsTable .weaponsHeader div,
#editDiv .upgradesTable .upgradesHeader div,
#editDiv .perksTable .perksHeader div {
  padding: 4px;
}

#editDiv .weaponsTable .weaponType select,
#editDiv .upgradesTable .upgradeType select,
#editDiv .perksTable .perkType select {
  width: 150px;
}

#editDiv .weaponsTable .weaponAmmo,
#editDiv .upgradesTable .upgradeAmmo {
  text-align: center;
}

#editDiv .weaponsTable .weaponSlots,
#editDiv .upgradesTable .upgradeSlots {
  text-align: center;
}

#editDiv .weaponsTable .weaponCost,
#editDiv .upgradesTable .upgradeCost,
#editDiv .perksTable .perkCost {
  text-align: center;
}

#editDiv .weaponsTable .weaponAdd,
#editDiv .upgradesTable .upgradeAdd,
#editDiv .perksTable .perkAdd {
  margin-top: -2px;
}

#editDiv .weaponsTable .weaponsRow:nth-child(even),
#editDiv .upgradesTable .upgradesRow:nth-child(even),
#editDiv .perksTable .perksRow:nth-child(even) {
  background: #1b1b1b;
}

#editDiv .weaponsTable .weaponsRow select,
#editDiv .upgradesTable .upgradesRow select,
#editDiv .perksTable .perksRow select {
  font-size: 10px;
  padding: 2px;
  margin: -4px;
  border: none;
}

#editDiv .upgradesTable .upgradesRow,
#editDiv .upgradesTable .upgradesHeader {
  display: grid;
  grid-template-columns: 158px auto 48px 38px 38px 26px;
}

#editDiv .perksTable .perksRow,
#editDiv .perksTable .perksHeader {
  display: grid;
  grid-template-columns: 158px auto 38px 26px;
}

#editDiv .vehicleCard {
  margin: 8px;
  padding: 8px;
  border: 1px solid #444;
  background: #202020;
}

#editDiv input {
  background: #333;
  color: #fff;
  border: none;
  padding: 3px 6px;
}

#editDiv input[type="file"],
#editDiv select {
  background: #333;
  color: #fff;
  border: none;
  padding: 4px 6px;
}

#editDiv .vehicleStats {
  text-align: center;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  border-bottom: 1px solid #333;
  padding: 4px;
}

#editDiv .imagePicker {
  font-size: 8px;
}

#editDiv .vehicleImg {
  margin-left: 7px;
  object-fit: cover;
}

#editDiv .vehicleImgHover {
  position: absolute;
  padding: 10px;
  background-color: #1b1b1b;
  object-fit: cover;
  z-index: 200;
}

#editDiv .vehicleImgHover img {
  object-fit: cover;
  z-index: 201
}

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

#editDiv th {
  background: #2a2a2a;
  color: #ddd;
  border-bottom: 1px solid #555;
  text-align: left;
  padding: 4px;
  font-weight: normal;
}

#editDiv td {
  border-bottom: 1px solid #333;
  padding: 4px;
}

#editDiv tr:nth-child(even):not(.tableHighlight) td {
  background: #1b1b1b;
}

.removeButton {
  cursor: pointer;
  content: url(/img/rem.svg);
  width: 18px;
}

.addButton {
  cursor: pointer;
  content: url(/img/add.svg);
  width: 18px;
}

a,
.add-link {
  color: #59a6ff;
  cursor: pointer;
  font-size: 12px;
}

button,
.add-link {
  color: #4da3ff;
}

#editDiv select {
  font-size: 12px;
}

#backgroundLoader img {
  position: absolute;
  top: -64mm;
  left: -88mm;
  height: 64mm;
  width: 88mm;
}

#backgroundLoader span {
  position: absolute;
  top: -64mm;
  left: -88mm;
}

#backgroundLoader .preloadStardosStencil {
  font-family: "Stardos Stencil", system-ui;
}

#backgroundLoader .preloadAgdasima {
  font-family: "Agdasima", sans-serif;
}

#editDiv .referenceButtons {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
}

#editDiv .referenceTable {
  font-size: 7pt;
  margin-top: 10px;
}

#editDiv .referenceTable thead {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#editDiv td[colspan] {
  background: #111;
  color: #fff;
  font-weight: bold;
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  padding-top: 8px;
  padding-bottom: 4px;
}

#editDiv th[data-sort="asc"]::after {
  content: "↑";
}

#editDiv th[data-sort="desc"]::after {
  content: "↓";
}

#editDiv .tableHighlight {
  background-color: #938553;
}

#editDiv tr[data-group="true"].tableHighlight td {
  background: #4a3f00;
  font-weight: bold;
}