@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans+SC&display=swap');

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Alegreya Sans SC', sans-serif;
  overflow: auto;
}


div.table {
  display: table;
  padding: 0;
  margin: 0;
}
div.tr {
  position: absolute;
  left: 0;
}
div.unit-tr {
  position: relative;
  margin: auto;
  /*width: 100%;
  height: 100%;*/
}

div.td {
  position: absolute;
  padding: 0;
  border: 2px solid;
  font-family: 'Alegreya Sans SC', sans-serif;
  background-color: transparent;
  border-radius: 8px;
}
div.unit-td {
  position: relative;
  padding: 0px;
  font-family: 'Alegreya Sans SC', sans-serif;
  /*width: 100%;
  height: 100%;*/
}

div.th {
  position: absolute;
  padding: 0;
  border: 2px solid;
  font-family: 'Alegreya Sans SC', sans-serif;
  border-radius: 8px;
}

.invisible {
  margin: 0px auto;
  border: 0px solid transparent !important;
  background-color: transparent !important;
}

div#content-tft {
  position: absolute;
  top: 56px;
  left: 0px;
  width: 100%;
  height: calc( 100% - 56px );
}

/* Logo */
img.logo {
  width: 3.5vmin;
  height: 3.5vmin;
}

/****************/
/* ORIGINS      */
div.th.origin, div.th.class {
  text-align: center;
  vertical-align: middle;
}

div.origin-description, div.class-description, div.unit-ability-description, div.unit-mana {
  font-size: 16px;
}

div.unit-title {
  margin-top: 100px;
}
div.origin-title, div.class-title, div.unit-title {
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size: 22px;
  color: white;
  margin-bottom: 5px;
}

div.origin-amount, div.class-amount {
  font-size: 1.8vmin;
}

div.origin-hover::before, div.origin-hover::after {
  width: 0px;
  height: 0px;
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
}

div.th.origin > div.origin-hover {
  margin-top: 2vmin;
  margin-left: 2vmin;
  transform: translateX(-50%);
}

div.th.origin > div.origin-hover::before {
  border-left: 18px solid transparent;
  border-bottom: 18px solid;
  border-right: 18px solid transparent;
  margin-top: 1px;
}

div.th.origin > div.origin-hover::after {
  border-left: 15px solid transparent;
  border-bottom: 15px solid;
  border-right: 15px solid transparent;
  margin-left: 3px;
  margin-top: 1px;
}

div.origin-hover {
  display: none;
  width: 400px;
  margin-top: 16px;
  margin-left: -4px;
  text-wrap: normal;
  padding: 5px;
  text-align: left;
  font-size: 14px;
  border: 2px solid;
  z-index: 2;
  position: absolute;
}

div.origin-picture > img {
  width: 2.5vmin;
  height: 2.5vmin;
}

/****************/
/* CLASSES      */
div.th.class > div.class-hover {
  margin-top: -3vmin;
  margin-left: 8vmin;
  transform: translateY(-50%);
}

div.class-hover::before, div.class-hover::after {
  width: 0px;
  height: 0px;
  content: " ";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
}

  div.th.class > div.class-hover::before {
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-right: 18px solid;
  }

  div.th.class > div.class-hover::after {
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid;
  }

div.class-hover {
  display: none;
  width: 400px;
  min-height: calc( 7vmin - 5px );
  margin-top: -77px;
  margin-left: 93px;
  text-wrap: normal;
  padding: 5px;
  text-align: left;
  font-size: 14px;
  border: 2px solid;
  z-index: 2;
  position: absolute;
}

div.class-picture > img {
  width: 2.5vmin;
  height: 2.5vmin;
}

/****************/
/* UNITS        */
div#units {
  position: relative;
  top: 0px;
  font-family: 'Alegreya Sans SC', sans-serif;
  width: calc( 98vmin + 30px );
  height: calc( 98vmin + 30px  - 70px );
}

div.table.unit-detail-table {
  margin: 0px auto;
  width: 100%;
  height:100%;
  display: flex !important;
}

div#units-table {
  margin: 0px !important;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  overflow: hidden;
}

  div#units-table > div.tr > div.td,
  div#units-table > div.tr > div.th {
    /* overflow: hidden; */
    border-spacing: 0px;
    text-align: center;
    vertical-align: middle;
  }

div.td.class ~ div.td {
  border: 2px solid rgb(39, 46, 56);
}
div.unit {
  text-align: center;
  font-family: 'Alegreya Sans SC', sans-serif;
  display: inline-block;
}

div.td.left div.unit div.unit-ability {
  transform: translate(-100%, -50%) !important;
}
  div.td.left div.unit div.unit-ability::before {
    border-top: 18px solid transparent !important;
    border-bottom: 18px solid transparent !important;
    border-left: 18px solid !important;
    border-right: 15px solid transparent !important;
    left: 100%;
  }

  div.td.left div.unit div.unit-ability::after {
    left: 100%;
  }

  div.td.top div.unit div.unit-ability::before {
    border-top: 18px solid !important;
    border-bottom: 15px solid transparent;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent !important;
    top: 100%;
    left: 50%;
  }

  div.td.top div.unit div.unit-ability::after {
    top: 100%;
    left: 50%;
  }

div.td:not(.left):not(.top) div.unit div.unit-ability::before {
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-right: 18px solid;
  border-left: 18px solid transparent;
  right: 100%;
}

div.td:not(.left):not(.top) div.unit div.unit-ability::after {
  right: 100%;
}

div.td:not(.top) div.unit div.unit-ability::before, div.td:not(.top) div.unit div.unit-ability::after {
  width: 0px;
  height: 0px;
  content: " ";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

div.td:not(.top) div.unit div.unit-ability::before {
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-right: 18px solid;
  border-left: 18px solid transparent;
}

div.td:not(.top) div.unit div.unit-ability::after {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid;
  border-left: 15px solid transparent;
}

div.td:not(.top) div.unit div.unit-ability {
  display: none;
  width: 400px;
  text-wrap: normal;
  text-align: left;
  font-size: 14px;
  border: 2px solid;
  position: absolute;
  padding: 7px 10px;
  transform: translateY(-50%);
}

div.td.top div.unit div.unit-ability::before, div.td.top div.unit div.unit-ability::after {
  width: 0px;
  height: 0px;
  content: " ";
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
}

div.td.top div.unit div.unit-ability::before {
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-right: 18px solid;
}

div.td.top div.unit div.unit-ability::after {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid;
}

div.td.top div.unit div.unit-ability {
  display: none;
  width: 400px;
  text-wrap: normal;
  text-align: left;
  font-size: 14px;
  border: 2px solid;
  position: absolute;
  padding: 7px 10px;
  transform: translate(-50%, -100%);
}

div.unit-ability {
  z-index: 5;
}

div.unit-picture > img {
  width: calc(100% - 0.3vmin);
  height: calc(100% - 0.3vmin);
  padding: 0px;
}
div.unit-picture {
  /*width: calc(2.5vmin + 0.3vmin);
  height: calc(2.5vmin + 0.3vmin);
  text-align: center;
  vertical-align: middle;
  overflow: hidden;*/
  position: relative;
  /*width: 100%;
  height: 100%;*/
}

/* UNIT TIER BORDERS */
.unit-tier-1::before,
.unit-tier-2::before,
.unit-tier-3::before,
.unit-tier-4::before,
.unit-tier-5::before,
.unit-tier-7::before {
  color: black;
  font-weight: bold;
  font-size: 1vmin;
  position: absolute;
  width: 1vmin;
  margin-left: 0vmin;
  margin-top: 0;
}

.unit-tier-1 > img,
.unit-tier-2 > img,
.unit-tier-3 > img,
.unit-tier-4 > img,
.unit-tier-5 > img,
.unit-tier-7 > img {
  border-radius: 8px;
  border: 0.15vmin solid;
}

.unit-tier-1 > img {
  border-color: rgb(161, 156, 139);
}
.unit-tier-1::before {
  background-color: rgb(161, 156, 139);
  content: "1";
}
.unit-tier-2 > img {
  border-color: rgb(28, 182, 86);
}
.unit-tier-2::before {
  background-color: rgb(28, 182, 86);
  content: "2";
}
.unit-tier-3 > img {
  border-color: rgb(40, 192, 245);
}
.unit-tier-3::before {
  background-color: rgb(40, 192, 245);
  content: "3";
}
.unit-tier-4 > img {
  border-color: rgb(199, 112, 255);
}
.unit-tier-4::before {
  background-color: rgb(199, 112, 255);
  content: "4";
}
.unit-tier-5 > img {
  border-color: rgb(250, 188, 5);
}
.unit-tier-5::before {
  background-color: rgb(250, 188, 5);
  content: "5";
}
.unit-tier-7 > img {
  border-color: rgb(240, 245, 250);
}
.unit-tier-7::before {
  background-color: rgb(240, 245, 250);
  content: "7";
}

/****************/
/* ITEMS        */
div#items {
  position: absolute;
  top: 0px;
  left: 105vmin;
  font-family: 'Alegreya Sans SC', sans-serif;
  width: calc( 50vmin + 22px );
  height: calc( 50vmin + 22px );
}

div#items-table {
  margin: 0px !important;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}

  div#items-table > div.tr > div.td,
  div#items-table > div.tr > div.th {
  }

div#items > div#items-table.table > div.tr > div.th.item > div.item-picture > img {
  width: 4vmin;
  height: 4vmin;
}
div.item-picture {
  display: flex;
  width: 100%;
  height: 100%;
}
div.item-picture > img {
  border: 1px solid black;
  border-radius: 8px;
  margin: auto;
}
div.item-picture.item-exclusive > img {
  border: 4px double rgb(40, 245, 122);
}
div.item-picture.item-unique > img {
  border: 4px double rgb(245, 40, 40);
}

div.item-title {
  color: white;
  font-size: 20px;
}
div.item-description {
  font-size: 18px;
  margin-bottom: 10px;
}
div.item-stat {
  font-size: 15px;
}


div.item-details::before, div.item-details::after {
  width: 0px;
  height: 0px;
  content: " ";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

div.td.left > div.item-details,
div.th.left > div.item-details {
  margin-top: -1.9vmin !important;
  margin-left: 0 !important;
  transform: translate(-100%, -50%) !important;
}
  div.td.left > div.item-details::before,
  div.th.left > div.item-details::before {
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 18px solid;
    left: 100%;
  }
  div.td.left > div.item-details::after,
  div.th.left > div.item-details::after {
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid;
    left: 100%;
  }


div.td:not(.left) > div.item-details::before,
div.th:not(.left) > div.item-details::before {
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-right: 18px solid;
  right: 100%;
}

div.td:not(.left) > div.item-details::after,
div.th:not(.left) > div.item-details::after {
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid;
  right: 100%;
}
div.item-details {
  display: none;
  max-width: 400px;
  min-width: 250px;
  margin-top: -1.9vmin;
  margin-left: 5.5vmin;
  padding: 7px 10px;
  text-align: left;
  font-size: 14px;
  border: 2px solid;
  z-index: 2;
  position: absolute;
  transform: translateY(-50%);
}

/****************/
/* EXPERIENCE   */
div#experience {
  position: absolute;
  overflow: hidden;
  font-family: 'Alegreya Sans SC', sans-serif;
}

div#experience-table {
  margin: 0px !important;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
}

  div#experience-table > div.tr > div.td,
  div#experience-table > div.tr > div.th {
    text-align: center;
    vertical-align: middle;
  }

div.th.tier-header {
  font-size: 2.5vmin;
}
div.th.experience-level {
  font-size: 2vmin;
  color: rgb(250, 188, 5);
}
div.td.experience-pts {
  font-size: 2.5vmin;
}
div.th.unit-number {
  font-size: 1.8vmin;
}

.tier-1 {
  color: rgb(161, 156, 139);
}
.tier-2 {
  color: rgb(28, 182, 86);
}
.tier-3 {
  color: rgb(40, 192, 245);
}
.tier-4 {
  color: rgb(199, 112, 255);
}
.tier-5 {
  color: rgb(250, 188, 5);
}
.tier-7 {
  color: rgb(240, 245, 250);
}

/****************/
/* LEGEND       */
div#items-legend {
  position: absolute;
  top: 20vmin;
  font-family: 'Alegreya Sans SC', sans-serif;
  width: 25vmin;
  height: 6.6vmin;
}

div.legend-picture.item-exclusive,
div.legend-picture.item-unique {
  width: 3vmin;
  height: 3vmin;
  margin: 5px 5px 5px 0px;
}

div.legend-picture.item-exclusive {
  border: 4px double rgb(40, 245, 122);
  border-radius: 8px;
}

div.legend-picture.item-unique {
  border: 4px double rgb(245, 40, 40);
  border-radius: 8px;
}

div.legend-description {
  vertical-align: middle;
  font-size: 1.3vmin;
  color: white;
}

/* Logo */
div.origin.logo {
  font-size: 1vmin;
}