#frontpage-video {
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; 
  overflow: hidden; 
  max-width: 100%; 
}
#frontpage-video iframe, #frontpage-video object, #frontpage-video embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

img.low-contrast {
  opacity: 0.6;
}

.league-banner-wrapper {
  width: 140px;
}
.league-banner {
  position: relative;
}
.league-banner img {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.league-banner .text {
  position: absolute;
  text-align: center;
  padding: 0px 5px;
  min-width: 90%;
  top: 45%;  
  left: 50%;
  transform: translate(-50%, -45%);
  white-space: nowrap;
  color: #444;
  background-color: rgba(255,255,255,0.6);
}

#howto-modal .modal-dialog img {
  max-width: 100%;
}

#canvas div.howto img {
  max-width: 100%;
}

#omnibox {
  max-height: 14em;
}

#team {
  /*border: 1px solid #aaa;*/
  min-height: 1.5em;
}

.editable:empty:not(:focus):before {
  content: attr(data-placeholder)
}

#saved-teams .row:hover {
  background-color: #ddd;
}
#saved-teams .row {
  cursor: pointer;
}

#canvas .records, 
#canvas .records .set {
  position: relative;
}
#canvas .records .del-all-btn {
  cursor: pointer;
  display: none;
}
#canvas .records .del-all-btn,
#canvas .records .set .del-set-btn {
  position: absolute;
  top: 0;
  right: 0;
}

table.fit-in-div {
  table-layout: fixed;
  width: 100%;
  word-wrap: break-word;
}

/* 
 * dark type colors 
 */
.bug { background-color: #9bc231; }
.dark { background-color: #52505e; }
.dragon { background-color: #1065b6; }
.electric { background-color: #f3d43e; }
.fairy { background-color: #eb8de1; }
.fighting { background-color: #ce3d64; }
.fire { background-color: #fe9d59; }
.flying { background-color: #91a8de; }
.ghost { background-color:#5069ac;}
.grass {background-color:#5fbb50;}
.ground {background-color:#d87b40;}
.ice {background-color:#74d3bd;}
.normal {background-color:#909aa3;}
.poison {background-color:#c662d6;}
.psychic {background-color:#f2726f;}
.rock {background-color:#c7b98c;}
.steel {background-color:#50879c;}
.water {background-color:#4f91db;}
/* 
 * light type colors 
 */
/*
.bug { background-color: #aec92c; }
.dark { background-color: #6e7681; }
.dragon { background-color: #067fc4; }
.electric { background-color: #fedf6b; }
.fairy { background-color: #f6a7e8; }
.fighting { background-color: #e34448; }
.fire { background-color: #feb04b; }
.flying { background-color: #a7c1f2; }
.ghost { background-color:#7571d0;}
.grass {background-color:#59c079;}
.ground {background-color:#d2976b;}
.ice {background-color:#94ddd6;}
.normal {background-color:#a3a49e;}
.poison {background-color:#a662c7;}
.psychic {background-color:#fda194;}
.rock {background-color:#d7cd90;}
.steel {background-color:#5aafb4;}
.water {background-color:#6ac7e9;}
*/

.rating-table td {
}
.rating-table .rating {
  display: block;
  width: 42px;
  padding: 5px 12px;
  border-radius: 8px;
  text-align: center;
}
.rating-table .rating span {
  display: block;

  width: 18px;
  height: 16px;
}
.battlemodal-dense .rating-table .rating span {
  width: 12px;
  height: 12px;
}
.rating-table .win {
  background-color: rgb(1, 141, 186);
}
.rating-table .win span {
  border-radius:20px;
  background:#fff6d4;
}
.rating-table .close-win {
  background-color: #1b79b4;
}
.rating-table .close-win span {
  border-radius:20px;
  border:2px solid #a5d6fb;
  box-sizing:border-box;
}
.rating-table .close-loss {
  background-color: #96359e;
}
.rating-table .close-loss span {
  color:#fd91e0;
  line-height: 1;

  /* 
  make more compact
  font-size: 0.7rem;
  */
}
.rating-table .close-loss span:after {
  content: "x";
}
.battlemodal-dense .rating-table .close-loss span {
  font-size: 0.7rem;
}
.rating-table .loss {
  background-color: rgb(185, 0, 143);
}
.rating-table .loss span {
  color: #ff92e2;
  font-weight: 900;
  font-size: 22px;
  line-height: 18px;

  /* 
  make more compact
  font-size: 12px;
  line-height: 12px;
  */
}
.battlemodal-dense .rating-table .loss span {
  font-size: 12px;
  line-height: 12px;
}
.rating-table .loss span:after {
  content: "X";
}
.rating-table .tie {
  background-color: rgb(150, 140, 182);
}
.rating-table .tie span {
  color: #fff6d4;
  line-height: 1;

  /* 
  make more compact
  font-size: 0.7rem;
  */
}
.battlemodal-dense .rating-table .tie span {
  font-size: 0.7rem;
}
.rating-table .tie span:after {
  content: "-";
}

@media (min-width: 480px) {
  #battle-mode-modal .modal-dialog {
    max-width: 95%;
  }
}

@media (min-width: 760px) {
  #howto-modal .modal-dialog {
    width: 80%;
    max-width: 80%;
  }
}

@media (max-width: 760px) {
  .antimeta-teams > table > tbody > tr > td,
  .spicy-teams > table > tbody > tr > td,
  .silph-teams > table > tbody > tr > td,
  .teamstats-top-teams > table > tbody > tr > td,
  .teamstats-top-cores > table > tbody > tr > td
  {
    display: block;
  }
}

@media (min-width: 1024px) {
  #battle-mode-modal .modal-dialog {
    max-width: 1024px;
  }
  #battle-mode-modal .battlemodal-dense {
    max-width: 95%;
  }
}

.popover {
  max-width: 350px;
  position: relative !important;
}

.silph-teams-popover {
  max-width: 100%;
}

#cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  box-sizing: border-box;
  width: 100%;
  background-color: rgba(0,0,0, 0.7);
  color: #eee;
  font-size: 1.1rem;
}

.omnibox-container {
  position: relative;
}
#battle-mode {
  position: relative;
}
#battle-mode .fm-label, #battle-mode .cm-label {
  line-height: 1.2;  
}
#battle-mode .cm-num-circle {
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  color: #fff;
  text-align: center;
  font-size: 23px;
}
#battle-mode .cm-fm-needed {
  display: inline-block;
  line-height: 0.95;
  font-size: 12px;
  vertical-align: bottom;
}
#battle-mode .cm-fm-needed span:nth-child(even):after {
  content: "\a";
  white-space: pre;
}
#battle-mode .cm-fm-needed span.hide {
  color: transparent;
}
#battle-mode .cm-dmg-pct {
  display: inline-block;
  vertical-align: middle;
}
#battle-mode-speech-btn, #battle-mode-btn {
  position: absolute;
  right: 15px;
  top: 7px;
  cursor: pointer;
}
#battle-mode-btn a, #battle-mode-speech-btn {
  color: #ccc;
}
#battle-mode-speech-btn.active, #battle-mode-speech-btn.active:hover {
  color: red;
}
#battle-mode-btn a:hover, #battle-mode-speech-btn:hover {
  color: #666;
}
#battle-mode .team-prob-bar {
 background-color: #ddd;
}
#battle-mode .dmg-pct-wrapper {
  line-height: 0.50;
  white-space: nowrap;
}
#battle-mode .dmg-pct-bar {
  height: 9px;
  display: inline-block;
  vertical-align: middle;
}
#battle-mode .dmg-pct-val {
  font-size: 12px;
  display: inline-block;
  vertical-align: middle;
}

#battle-mode .rating-table .rating {
  /* 
  make more compact
  padding: 0px 12px;
  */
  width: 28px;
  padding: 1px 5px;
}
.battlemodal-dense #battle-mode .rating-table .rating {
  width: 22px;
  padding: 0px 6px;
}
.battlemodal-vcompact .modal-header {
  padding: 0 1rem;
}
.battlemodal-vcompact .modal-header .modal-title {
  display: none;
}
.welcome-card {
  background-color: #fbfbfb;
}

/* 
 * dark mode
 */
#saved-teams.darkmode .row:hover {
  background: rgba(0,0,0,1.0);
}
#battle-mode-btn.darkmode a, #battle-mode-speech-btn.darkmode {
  color: #888;
}
#battle-mode.darkmode .team-prob-bar {
 background-color: #666;
}
.welcome-card.darkmode {
  background-color: #444;
}
#league-cup-rating.darkmode .league-banner .text {
  color: #aaa;
  background-color: rgba(0,0,0,0.6);
}