#morpheus-popup-container {
  font-family: Arial, sans-serif;
  font-size: 14px;
  min-width: 350px;
  max-width: 600px;

  .morpheus-popup-content {
    border: 2px solid #55636c;
    outline: 1px solid #000;
    padding: 5px;
    padding-top: 80px;
    clear: both;
    display: block;
    margin: 0 2px;
    background-color: #fcedd6;
    background-repeat: no-repeat;
    background-position: center 15px;
    text-align: center;

    &.morpheus-popup-prompt {
      margin: .5em 0em;

      input  {
        padding: 3px;
      }
    }

    &.morpheus-popup-alert {
      background-image: url(../images/icons/error.png);
    }

    &.morpheus-popup-success {
      background-image: url(../images/icons/success.png);
    }

    &.morpheus-popup-confirm {
      background-image: url(../images/icons/info.png);
    }

    &.morpheus-popup-prompt {
      background-image: url(../images/icons/help.png);
    }
  }

  .morpheus-popup-panel {
    margin: 10px;
    margin-top: 30px;
    display: block;
    text-align: center;

    .morpheus-popup-btn {
      margin: 2px;
      padding: 3px 10px;
      border: 1px solid #999;
      color: #000;
      background: #f6f6f6;
      cursor: pointer;
      text-decoration: none;
      border-radius: 4px;

      &:hover {
        text-decoration: none;
        border-color: #999;
        background: #f3f3f3;
        outline: 0;
      }
    }
  }
}

#morpheus-tooltip {
  cursor: default;
  background-color: #333;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  display: none;
  padding: 10px;
  position: absolute;
  white-space: nowrap;
  z-index: 2147483647;

  &:before {
    content: "";
    position: absolute;
  }

  &.n, &.s {
    &:before {
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      left: 50%;
      margin-left: -5px;
    }
  }

  &.e, &.w {
    &:before {
      border-bottom: 5px solid transparent;
      border-top: 5px solid transparent;
      margin-top: -5px;
      top: 50%;
    }
  }

  &.n {
    &:before {
      border-top: 10px solid #333;
      border-top: 10px solid rgba(0, 0, 0, 0.8);
      bottom: -10px;
    }
  }

  &.e {
    &:before {
      border-right: 10px solid #333;
      border-right: 10px solid rgba(0, 0, 0, 0.8);
      left: -10px;
    }
  }

  &.s {
    &:before {
      border-bottom: 10px solid #333;
      border-bottom: 10px solid rgba(0, 0, 0, 0.8);
      top: -10px;
    }
  }

  &.w {
    &:before {
      border-left: 10px solid #333;
      border-left: 10px solid rgba(0, 0, 0, 0.8);
      right: -10px;
    }
  }

  &.ne, &.se {
    &:before {
      border-right: 10px solid transparent;
      border-left: 0;
      left: 10px;
    }
  }

  &.nw, &.sw {
    &:before {
      border-left: 10px solid transparent;
      border-right: 0;
      right: 10px;
    }
  }

  &.ne, &.nw {
    &:before {
      border-top: 10px solid #333;
      border-top: 10px solid rgba(0, 0, 0, 0.8);
      bottom: -10px;
    }
  }

  &.se, &.sw {
    &:before {
      border-bottom: 10px solid #333;
      border-bottom: 10px solid rgba(0, 0, 0, 0.8);
      top: -10px;
    }
  }

  &.nw-alt, &.nw-alt, &.sw-alt, &.se-alt {
    &:before {
      border-top: 10px solid #333;
      border-top: 10px solid rgba(0, 0, 0, 0.8);
      bottom: -10px;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      left: 10px;
    }
  }

  &.ne-alt {
    &:before {
      left: auto;
      right: 10px;
    }
  }

  &.sw-alt, &.sw-alt {
    &.before {
      border-top: none;
      border-bottom: 10px solid #333;
      border-bottom: 10px solid rgba(0, 0, 0, 0.8);
      bottom: auto;
      top: -10px;
    }
  }

  &.se-alt {
    &:before {
      left: auto;
      right: 10px;
    }
  }
}

.item-desc {
  div {
    color: #fff;
    margin: 0;
    font-size: 10px;
    font-family: Verdana;
    text-align: center;
  }

  .bold {
    font-weight: bold;
  }

  .ancient {
    color: #9f0;
    width: 100%;
    displat: block;
    background-color: #06f;
  }

  .socket {
    font-weight: bold;
    color: #c3c;
  }

  .normal {
    color: #eee;
  }

  .high-level {
    color: #fc3;
  }

  .luck, .skill {
    color: #97afd5;
  }

  .excellent {
    color: #19ff80;
  }

  .excellent-socket {
    color: #c3c;
  }

  .blue {
    color: #97afd5;
  }

  .yellow {
    color: #f1cb46;
  }

  .options-block, .socket-block, .can-equip-block {
    margin-top: 10px;
  }

  .can-equip {
    color: #ffffff;
    background-color: #a00000;
    margin-bottom: 2px;
  }

  .harmony {
    color: #f1cb46;
    margin: 10px 0;
  }

  .animate {
    color: #f00;
    font-size: 10px;
  }

  .name {
    font-size: 12px;
  }

  .durability {
    margin-top: 10px;
  }

  .refine {
    color: #ae80af;
    font-weight: bold;
    margin-top: 10px;
  }
}

.morpheus-warehouse, .morpheus-inventory-items {
  width: 256px;
  float: left;
  background: url(../images/warehouse/clear.gif);
  height: 480px;
  border: 1px solid #000;
  position: relative;

  .item {
    box-sizing: border-box;
    text-align: center;
    position: absolute;
    background: rgba(11, 26, 51, 0.5) url(../images/warehouse/128x128.gif);
    border: solid 2px rgba(22, 54, 103, 0.5);

    &.active {
      border-color: #fff;
    }

    .image {
      width: 100%;
      height: 100%;
      position: relative;
    }

    img {
      position: absolute;
    }

    &:hover {
      border-color: #eaeaea;
    }
  }
}

.morpheus-inventory {
  width: 258px;

  .morpheus-inventory-equipments {
    background: url(../images/inventories/equipment.png);
    height: 253px;
    border: 1px solid #000;
    border-bottom: 0;
    position: relative;

    .item-mapping {
      position: absolute;
      border: solid 2px rgba(22, 54, 103, 0.5);

      &.item0 {
        width: 59px;
        height: 95px;
        top: 76px;
        left: 1px;
      }

      &.item1 {
        width: 58px;
        height: 95px;
        top: 76px;
        right: 3px;
      }

      &.item2 {
        width: 62px;
        height: 60px;
        top: 5px;
        left: 96px;
      }

      &.item3 {
        width: 62px;
        height: 95px;
        top: 76px;
        left: 96px;
      }

      &.item4 {
        width: 61px;
        height: 63px;
        bottom: 6px;
        left: 96px;
      }

      &.item5 {
        width: 59px;
        height: 65px;
        bottom: 6px;
        left: 1px;
      }

      &.item6 {
        width: 59px;
        height: 62px;
        bottom: 7px;
        right: 2px;
      }

      &.item7 {
        width: 89px;
        height: 62px;
        top: 5px;
        right: 2px;
      }

      &.item8 {
        width: 59px;
        height: 62px;
        top: 4px;
        left: 1px;
      }

      &.item9 {
        width: 28px;
        height: 29px;
        top: 76px;
        left: 65px;
      }

      &.item10 {
        width: 27px;
        height: 30px;
        bottom: 40px;
        left: 65px;
      }

      &.item11 {
        width: 25px;
        height: 30px;
        bottom: 40px;
        right: 66px;
      }

      &:hover, &.active {
        border-color: #eaeaea;
      }
    }
  }

  .morpheus-inventory-items {
    height: 256px;
    position: relative;
  }
}