/* v3.1 Charging Tide compatible ----------------------*/
/* font face for resposive ----------------------*/
@font-face {
  font-family: "Noto Sans JP";
  font-weight: normal;
  src: url('https://fonts.gstatic.com/s/notosansjp/v25/-F6xfjJsx0TFOp4N08BhWv9tnJU_a8Vqz5u.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  font-weight: normal;
  /* line-height: 50% !important; */
  src: url('https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-U1UpcaXcl0Aw.ttf') format('truetype');
  font-display: swap;
}

/* デフォルトのフォント設定 */
body {
  font-family: "Open Sans", "Noto Sans JP", sans-serif !important;
  font-weight: 600 !important;  /* 英数字に適用されるフォントの太さ */
  letter-spacing: 0.7px !important;
  font-size: 14px !important;   /* PC向けのデフォルトフォントサイズ */
}

/* モバイル向けのフォントサイズ設定 */
@media (max-width: 768px) {
  body {
    font-size: 16px !important;  /* モバイルでは少し大きめに設定 */
  }
}

.titletext{
  size: 14px;
  font-weight: 800;
}

.filter-group {
  margin-bottom: 20px;
}

.filter-group button {
  margin: 5px;
  padding: 5px 10px;
  border: none;
  font-weight: 700;
  background-color: #f0f0f0;
  cursor: pointer;
}

.filter-group button.active {
  background-color: #555; /* Darker active color */
  color: #fff;
}

.filter-group button img {
  max-height: 30px;
  width: auto;
}

.dragon-results {
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
}

.mix {
  width: 80px;
  margin: 0; /* Remove margins from the container */
  padding: 0; /* Ensure no padding is added */
  text-align: center;
}

.mix img {
  width: 50px;
  height: 50px;
  margin-bottom: -7px; /* Adjust the space below the image, negative margin to reduce space */
}

.elementicon {
  padding: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.elementicon img {
  max-height: 30px;
  margin-top: 5px;  width: auto;
  display: block;
}

.elementicon.active {
  border: 2px solid #ccc; /* or whichever color you want for active state */
}

.subtitletext{
  size: 9px !important;
  font-weight: 700;
}
.resetbutton{
  margin: 5px;
  padding: 5px 10px;
  border: none;
  font-weight: 700;
  background-color: #f0f0f0;
  cursor: pointer;
}

.dragon-icon-container {
  text-align: center; /* Center-aligns the icon and name */
}

.dragon-name-en {
  font-size: 11px;
  color: #fff; /* Adjust the color as needed */
  margin-top: 0; /* Adds some space between the icon and the name */
  margin-bottom: 5px; /* Adds some space between the icon and the name */
}