/*window holds a lot of stuff, needs to be a bit bigger*/
#questMakerWindow {
    width: 600px !important;
    height: 400px !important;
    font-family: "Lato", sans-serif;
}

.questPiece, .placedPiece {
    padding: 4px;
    border: 1px solid;
    margin-bottom: 4px;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}

.pieceSlot {
    padding: 11px;
    border: 1px dashed lightgrey;
    margin-bottom: 5px;
    display: block;
}

#questMakerWindow .dnd-dragging {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}

#questMakerWindow .dnd-dragging {
    opacity: 0.5;
}

.pieceSlot.dnd-over {
    border-color: black;
}

.placedPiece.dnd-over {
    opacity: 0.5;
}

.dnd-drag-occurring .placedPiece {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}

#pieces {
    flex-basis: 40%;
    padding: 0 15px 0 0;
    list-style: none;
    overflow-y: auto;
}

#stepsSection {
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 5px;
    border-top: 1px solid #ccc;
}

#questSteps {
    padding: 0;
    width: 100%;
    overflow-y: auto;
    position: relative;
}

.pieceDelete {
    padding: 0 !important;
    right: 10px;
    position: absolute;
    display: inline-block;
    cursor: pointer;
}

#makeScreen {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#makeTop {
    display: flex;
}

#makeTopRight {
    margin-left: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
}

#makeBottom {
}

#questDescription {
    margin-top: 5px;
    margin-bottom: 5px;
    flex-basis: 3em;
    padding: 5px;
    border: 1px solid;
    overflow-y: scroll;
    cursor: text;
}

#rewardsSection {
    border-top: 1px solid #ccc;
    padding-top: 5px;
    margin-top: 5px;
}

#questRewards {
    display: flex;
}

.questReward {
    text-align: right;
    width: 100%;
    border: 1px solid;
    border-radius: 5px;
    font-size: large;
    margin: 5px;
    cursor: text;
}

.questReward::after {
    top: 1px;
    position: relative;
    margin-left: 8px;
    right: 5px;
}

#currantsReward::after {
    content: url(../../../system/icons/interaction_currants.svg);
}

#imgReward::after {
    content: url(../../../system/icons/interaction_img.svg);
}

#makeItButton {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    padding: 0;
}

#manageScreen {

}