pf2e-awardxp.css

.destinations {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    margin-bottom: 10px;
    justify-content: center;
}

.hero {
    display: flex;
    flex-direction: column;
    align-self: auto;
    align-items: center; /* Vertical alignment */
    padding: 0 10px; /* Adjust margin between hero elements */
    flex-basis: 25%; /* Each hero takes up 25% of the container width, allowing 4 heroes in a row */
    box-sizing: border-box; /* Include padding and border in the total width */
    text-align: center;
    width:60px;
}

.hero img {
    border:none;
    height: 50px;
    width: 50px;
}

/* Additional styling for better spacing and alignment */
.hero label {
    margin-top: 10px; /* Adjust the margin as needed */
}

.hero .token {
    margin-bottom: 5px; /* Adjust the margin as needed */
}

.hero .name { 
    min-width: 20px;
    display: block;
}


.pf2eawardxp .form-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 15px; /* Adjust the margin as needed for spacing between form groups */
}

.pf2eawardxp .form-group label {
    margin-right: 10px; /* Adjust the margin between label and input as needed */
    text-align: right;
    flex:0;
    width:200px;
}

.pf2eawardxp .form-group select {
    width: 250px;
    flex:1;
    max-width: 300px;

}

.pf2eawardxp .form-group input {
    width: 250px;
    flex:1;
    max-width: 300px;
}

.pf2eawardxp .xp-block {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.pf2eawardxp .xp-text {
    font-weight: bold;
}

.pf2eawardxp .xp-image {
    margin: 10px 10px 10px 10px;
    width:45px;
    height: 45px;
    border: none;
}

.pf2eawardxp .recipients-block {
    margin-top: 20px; /* Adjust the margin as needed */
}

.pf2eawardxp .recipient-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pf2eawardxp .recipient-list li {
    display: inline;
    margin-right: 10px; /* Adjust the margin as needed */
}