.dynastyDiv {
    border: 1px solid black;
    margin: 0px 10px;
    padding: 10px;
}

.dynastyName {
    font-weight: bold;
}

.characterAvatar,
img.characterSheet {
    cursor: pointer;
    height: 50px;
}

.characterDivCommon,
.characterDivCommonData {
    display: inline-block;
}

.characterDivCommon p {
    margin: 1px;
}

.characterDivCommon progress {
    width: 100px;
}

#avatarResult {
    height: 250px;
}

.avatarPieceChoice {
    border: 1px solid black;
    cursor: pointer;
    margin: 3px;
    width: 50px;
}

.avatarPieceChoice.selected {
    background-color: yellow;
    cursor: default;
}

.avatarColorSlider {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid black;
}

.avatarColorSlider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    background: #FFFFFF;
    border: 1px solid black;
    cursor: pointer;
    height: 25px;
    opacity: 0.7;
    width: 25px;
}

.avatarColorSlider::-moz-range-thumb {
    appearance: none;
    background: #FFFFFF;
    border: 1px solid black;
    cursor: pointer;
    height: 25px;
    opacity: 0.7;
    width: 25px;
}

.avatarColorPicker {
    cursor: crosshair;
}

#equipSet {
    display: flex;
}

.equipChoice {
    border: 1px solid black;
    cursor: pointer;
    margin: 3px;
    padding: 5px;
}

.equipChoice.selected {
    background-color: yellow;
    cursor: default;
}