.chara-block {
	background: rgba(180,180,180,0.05);
    padding: 8px;
    margin-top: 2em;
    border: 2px solid var(--md-default-fg-color--lighter);
	border-radius: 5px;
}

.chara-toprow {
    padding: 0px;}

.chara-content-head {
    display: flex;
    flex-direction: row;}
.chara-general {
    border: 1px solid rgb(64, 64, 64);
    margin: 1px;
    width: 49.5%;}

.chara-value-table {
    float: left;
    padding: 1px;
    margin: 1px;
    width: 32%;
    font-size: 0.6rem;}
.chara-info {
    font-size: 0.6rem;
    line-height: 1em;
    float: left;
    width: 40%;}
.chara-info-container {
    margin-left: 0.5em;
}
.chara-notes {
    font-size: 0.5rem;
    float: left;
    width: 60%;}

.chara-content-body {
    flex-wrap: wrap;
    display: flex;
    flex-direction: row;}
.chara-content-tile {
    border: 1px solid rgb(64, 64, 64);
    margin: 1px;
    width: 49.5%;}
.chara-content-subtile {
    float: left;
    width: 32%;
    font-size: 0.5rem;}

.chara-content-subtile li {
    font-size: 0.5rem;}

.chara-block ul {
    margin: 1px 0 1px;
}
.chara-block li {
    line-height: 1em;
    padding: 0;
    margin: 0 0 2px 2px !important;}
.chara-block li::marker {
    content: "• ";}
.chara-block h3 {
    margin: 0px;}
.chara-block h6 {
    color: lightslategrey;
    margin: 0 0 0 0.2rem;}


.chara-block .table {
    margin: 0;
	background: 0;
    border-spacing: 0.5em 0em;
}
.chara-block .table tr td {
	background: 0;
    width: auto;
    border: none;
}
.chara-block .chara-value-table .table {
    border-spacing: 0em 0em;
}
.chara-block .chara-value-table .table td {
    border-collapse: collapse;
    padding: 0 0.8em 0;
}
.chara-block .chara-value-table .table tr:nth-of-type(odd) {
	background: rgba(255, 255, 255, 0.05);
}

.chara-table-title {
    font-size: 0.6rem;
    font-weight: bold;
    margin-left: 4px;
    color: slategrey;
}
.chara-subtile-title {
    font-size: 0.6rem;
    font-weight: bold;
    margin-left: 4px;
    color: slategrey;
}
.chara-info-text {
    font-size: 1rem;
}


@media screen and (max-width: 640px) {
  .chara-general {
    width: 100%;}
  .chara-content-tile {
    width: 100%;}
  .chara-content-head {
    flex-wrap: wrap;}
  }