.borderless-view {
  padding: 0.5em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
}

.boarder-view {
  border-radius: 1em;
  border: 0.2em solid #CCCCCC;
  background: #F6F6F6;
  padding: 0.5em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  margin-bottom: 1em;
}

.player1 {
  color: #003300  
}

.player2 {
  color: #660099
}

.btn-toggle {
  width: 7.5em;
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
}

.btn-skill {
  width: 8em;
}

.right {
  margin-left: auto;
  margin-right: 0px;
}

.loot {
  border-radius: 1em;
  margin: 0.5em;
  padding: 0.5em;
}

.loot_line {
  border-top: 0.1em solid #a4a4a4;
}

.Common {  
  border: 0.1em solid #999999;
  background: #CCCCCC;
}

.Magical {
  border: 0.1em solid #bbccbb;
  background: #EEFFEE;
}

.Rare {
  border: 0.1em solid #aaaaaacc;
  background: #ddddff;
}

.Mystical {
  border: 0.1em solid #ccaacc;
  background: #ffeeff;
}

.Legendary {
  border: 0.1em solid #ccbb99;
  background: #ffccaa;
}

.Unique {
  border: 0.1em solid #ff9999;
  background: #ffcccc;
}

img{ max-width:100%;}

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: top;
  width: 200px;
}