/* SYSTEM WIDE CSS */

/* EXTRA CSS */
.import {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(5, min-content);
  grid-template-rows: repeat(5, -webkit-min-content);
  grid-template-areas:
      "menu"
      "details"
      "equipment"
      "slots"
      "forms"
      "children";
}

/* MENU CSS */
.import-menu {
  grid-area: menu;
  margin-bottom: 10px;
  text-align: center;
}

/* DETAILS CSS */
.import-details {
  grid-area: details;
  display: grid;
  grid-gap: 10px;
  grid-template-rows: repeat(5, min-content);
  grid-template-rows: repeat(5, -webkit-min-content);
  grid-template-areas: 
  "title"
  "images"
  "info"
  "reputation"
  "lineage";
}

.details-title {
  grid-area: title;
  text-align: center;
  display: grid;
  grid-gap: 0px;
  grid-template-areas: 
  "title-name title-title"
  "title-owner title-owner";
}

.details-title-name {
  grid-area: title-name;
  text-align: right;
}

.details-title-title {
  grid-area: title-title;
  text-align: left;
}

.details-title-owner {
  grid-area: title-owner;
}

.details-images {
  grid-area: images;
  display: grid;
  grid-gap: 0px;
  grid-template-columns: 2fr min-content 1fr;
  grid-template-columns: 2fr -webkit-min-content;
  grid-template-rows: repeat(2, min-content);
  grid-template-rows: repeat(2, -webkit-min-content);
  grid-template-areas: 
  "image badges links";
}

.details-images-image {
  grid-area: image;
}

.details-images-badges {
  grid-area: badges;
}

.details-images-links {
  grid-area: links;
  padding: 10px;
  background: var(--light-purple);
  border: 5px solid var(--light-pink);
  border-radius: 10px;
  margin: 10px 0px 10px 10px;
  font-size: 14px;
}

.button-xsmall {
	border: 2px solid var(--dark-pink);
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    padding: 5px;
    outline: none;
    text-align: center;
    text-transform: uppercase;
    font-family: PlainTitle;
    letter-spacing: 1px;
    display: inline-block;
    cursor: pointer;
    color: var(--dark-pink);
    background: url(images/leaves.png);
    background-color: var(--light-pink);
}

.button-xsmall:hover {
	color: var(--light-pink);
  background: url(images/leaves.png);
	background-color: var(--dark-pink);
}

input, textarea {
  border:2px solid var(--dark-pink);
  border-radius: 5px;
}

.details-images-path img, .details-images-elone img, .details-images-eltwo img, .details-images-elthree img {
  max-height: 50px;
  background-color: var(--content-bc);
  border: 3px solid var(--light-pink);
  border-radius: 35px;
  padding: 5px;
  margin-left: -55px;
  margin-top: 5px;
  margin-bottom: -9px;
}

.details-info {
  grid-area: info;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(23, min-content);
  grid-template-rows: repeat(23, -webkit-min-content);
}

.details-reputation {
  grid-area: reputation;
}

.details-lineage {
  grid-area: lineage;
}

.big-screen {
  display: inline-block;
}

.details-items {
  grid-area: items;
  display: grid;
  grid-gap: 10px;
  grid-template-rows: repeat(5, min-content);
  grid-template-rows: repeat(5, -webkit-min-content);
}

.outerlist {
  margin: 0px;
  list-style-type: none;
  padding-left: 0px;
  font-weight: bold;
}

.innerlist {
  margin: 0px;
  font-size: 14px;
  list-style-type: none;
  padding-left: 10px;
}

/* EQUIPMENT CSS */
.import-equipment {
  grid-area: equipment;
  display: grid;
  grid-gap: 10px;
  grid-template-rows: repeat(5, min-content);
  grid-template-rows: repeat(5, -webkit-min-content);
  grid-template-areas: 
  "companion"
  "decor"
  "tack"
  "talismans"
  "traits";
}

.equipment-companion {
  grid-area: companion;
}

.equipment-decor {
  grid-area: decor;
}

.equipment-tack {
  grid-area: tack;
}

.equipment-talismans {
  grid-area: talismans;
}

.equipment-traits {
  grid-area: traits;
}

/* SLOTS CSS */
.import-slots {
  grid-area: slots;
  display: grid;
  grid-gap: 10px;
  grid-template-rows: repeat(2, min-content);
  grid-template-rows: repeat(2, -webkit-min-content);
  grid-template-areas: 
  "slots-details"
  "slots-list";
}

.slots-details {
  grid-area: slots-details;
}

.slots-list {
  grid-area: slots-list;
}

/* CHILDREN CSS */
.import-children {
  grid-area: children;
}