#characterListWorldMap {
    background-color: rgba(255,255,255,0.9);
    border: 3px solid black;
    border-radius: 25px;
    left: 0px;
    margin: 10px;
    padding: 10px;
    position: absolute;
    top: 0px;
}

.characterDisembarkHint {
    color: red;
    font-weight: bold;
}

.characterWorldDiv {
    background-color: white;
    border: 1px solid black;
    margin: 3px;
    padding: 3px;
    transition: background 0.5s;
}
.characterWorldDiv.selected {
    background-color: yellow;
}

#hexInfoWorldMap {
    background-color: rgba(255,255,255,0.9);
    border: 3px solid black;
    border-radius: 25px;
    bottom: 0px;
    margin: 10px;
    padding: 10px;
    position: absolute;
    right: 0px;
    z-index: 2;
}

#hexInfoName {
    font-size: 25px;
    font-weight: bold;
    padding: 10px;
    text-align: center;
}

#hexInfoData {
    display: flex;
}

#hexInfoTerrains img {
    height: 25px;
    width: 25px;
}

#hexInfoBiomeColor {
    border: 1px solid black;
    height: 50px;
    margin: 50px 25px;
    text-align: center;
    width: 50px;
}

.hexDetailsTab {
    border-style: double;
    cursor: pointer;
    margin: 25px;
    padding: 5px;
}
.hexDetailsTab img {
    width: 50px;
}

#disembarkPrompt,
#travelPrompt {
    color: red;
    display: none;
    font-weight: bold;
}

#worldMapGuide {
    top: 30px;
    right: 0px;
}

.hexFeature {
    border: 3px solid;
    border-color: rgba(0,0,0,0);
    position: absolute;
    z-index: 2;
}

.hexMarker {
    border: 5px red solid;
    position: absolute;
    z-index: 1;
}

.hexPin {
    background-color: white;
    border: 1px solid black;
    cursor: pointer;
    font-weight: bold;
    overflow: hidden;
    position: absolute;
    text-align: center;
    transition: background 0.5s, border 0.5s;
    z-index: 2;
}
.hexPin.selected {
    border-color: yellow;
}

.hexPinCharactersOther {
    background-color: rgb(255, 255, 150);
}

.adventureStartChoices,
.adventureChallengeTooltip {
    text-align: center;
    width: 750px;
}

.adventureChallengeChoice {
    border: 3px solid white;
    border-radius: 25px;
    cursor: pointer;
    margin: 10px;
    padding: 10px;
    width: 50px;
}
.adventureChallengeChoiceSelected {
    border: 3px solid blue;
}