/*
 * Styles of the components of the tree
 */
body {
    margin: 0;
    padding: 0;
}

.container {
    height: 100vh;
    width: 100vw;
}

#tree-container {
	width: 100%;
    height: 100%;
}

.svgContainer {
	display: block;
    margin: auto;
    height: 100%;
    width: 100%;
}

.node {
	cursor: pointer;
}

.node-rect {
}

.node-rect-closed {
	stroke-width: .1rem;
	stroke: rgb(0,0,0);
    border-radius: 1rem;
}

.link {
	fill: none;
	stroke: #000;
	stroke-width: .1rem;
}

.linkselected {
	fill: none;
	stroke: tomato;
	stroke-width: .2rem;
}

.quest {
    border-radius: 1rem;
    padding: .5rem 1rem;
    position: relative;
    width: 30rem;
    height: 13rem;
}

.quest__items {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.quest__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quest__item-image {
    position: relative;
    margin: 2rem 0;
    width: 6rem;
    background: #e3b675;
    height: 3rem;
}
.quest__item-image::before {
    content: "";
    position: absolute;
    display: block;
    bottom: 100%;
    width: 0;
    border-bottom: 1.5rem solid #e3b675;
    border-left: 3rem solid transparent;
    border-right: 3rem solid transparent;
    z-index: 5;
}
.quest__item-image::after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    top: 100%;
    border-top: 1.5rem solid #e3b675;
    border-left: 3rem solid transparent;
    border-right: 3rem solid transparent;
    z-index: 5;
}
.quest__item-image img {
    height: 6rem;
    width: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}
.quest__item-amount {
    color: #fff;
    font-weight: 600;
    background: #e70b3b;
    padding: 0 .8rem;
    height: 2rem;
    position: relative;
}
.quest__item-amount::before {
    content: '';
    width: 0;
    position: absolute;
    right: 100%;
    height: 0; 
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    
    border-right: .8rem solid #e70b3b;
}
.quest__item-amount::after {
    content: '';
    width: 0; 
    height: 0; 
    position: absolute;
    left: 100%;
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    
    border-left: .8rem solid #e70b3b;
}

.quest__item-level {
    color: #ae7645;
    margin-top: .4rem;
}

.quest__item-level::before {
    content: 'Level ';
}
        
.quest__reward {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    color: #1583fc;
    font-size: .9rem;
}
.quest__reward::before {
    content: 'Reward: ';
}

.quest__id {
    color: #ccc09f;
    font-weight: 300;
    font-style: italic;
    font-size: 3rem;
    position: absolute;
    left: .5rem;
    bottom: .5rem;
}
.quest__id::before {
    content: '#';
}

.arrow {
	fill: #000;
	stroke-width: .1rem;
}

.arrowselected {
	fill: tomato;
	stroke-width: .2rem;
}

.quest__icon {
    height: 2rem;
    width: 2rem;
}