#characterSheetAttributes {
    display: flex;
    flex-flow: row;
}

.characterSheetAttribute {
    border: 3px solid black;
    border-radius: 10px;
    margin: 5px;
    padding: 5px;
}

#characterSheetAttributes img {
    height: 33px;
}

#characterSheetAttributes span {
    font-size: 33px;
    font-weight: bold;
}

.characterSheetAttributesOrb {
    border: 3px solid black;
    border-radius: 30px;
    display: inline-block;
    height: 30px;
    width: 30px;
}

.characterSheetAttributesOrbHealth {
    background: linear-gradient(to bottom, #FFFFFF, #FF0000);
}

.characterSheetAttributesOrbMagicBarrier {
    background: linear-gradient(to bottom, #FFFFFF, #0000FF);
}

#characterSheetEquipment {
    border: 3px solid black;
    border-radius: 10px;
    float: left;
}

#characterSheetInventory {
    display: flex;
    flex-direction: row;
}

.equipCard {
    border: 3px solid black;
    border-radius: 10px;
    margin: 5px;
    padding: 5px;
    position: relative;
    text-align: center;
}
.equipCardTypea {
    background-color: rgba(200,255,200,0.5);
}
.equipCardTyper {
    background-color: rgba(200,200,200,0.5);
}
.equipCardTypes {
    background-color: rgba(200,200,255,0.5);
}
.equipCardTypew {
    background-color: rgba(255,200,200,0.5);
}

.equipCardClone {
    opacity: 0.3;
}

.equipImg {
    background-color: white;
    border: 2px solid black;
    border-radius: 5px;
    margin: 2px;
}

.equipImg img {
    width: 100px;
}

.equipData {
    display: flex;
    flex-direction: row;
    font-size: 20px;
}

.equipDataPiece {
    border: 2px solid black;
    border-radius: 5px;
    margin: 2px;
    padding: 2px;
}
.equipDataPieceQuality1 {
    background-color: rgb(255,200,200);
}
.equipDataPieceQuality2 {
    background-color: rgb(255,150,100);
}
.equipDataPieceQuality3 {
    background-color: rgb(225,225,225);
}
.equipDataPieceQuality4 {
    background-color: rgb(255,255,200);
}
.equipDataPieceQuality5 {
    background-color: rgb(225,225,255);
}

.equipDataPiece img {
    height: 25px;
}

.equipActions {
    display: flex;
    flex-direction: row;
    left: 1px;
    opacity: 0.1;
    position: absolute;
    top: 1px;
    transition-duration: 500ms;
}
.equipActions:hover {
    opacity: 1;
}

.equipAction,
.equipActionFake {
    background-color: lightgray;
    border: 3px solid black;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    font-weight: bold;
    height: 17px;
    margin: 1px;
    text-align: center;
    width: 17px;
}

.equipActionDoConfirmButtons {
    left: 1px;
    position: absolute;
    top: 20px;
}

.equipDurability {
    left: 11px;
    position: absolute;
    top: 95px;
    width: 96px;
}

#inventoryGuide {
    top: 30px;
    right: 0px;
}