body {
    margin: 0px;
    font-family: Candara;
    padding-bottom: 10px;
    /* background-color: rgb(255, 255, 255); */
}

.connections-description {
    font-size: .8em;
    margin-left: 8%;
    color: gray;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
    padding: 6px;
    border-radius: 5px;
    width: 84%;
    margin-top: 10px;
    margin-bottom: 10px;
}
.timeline-container {
    /* border: solid 1px gray; */
    /* padding: 2px; */
    padding-left: 20px;
    overflow-x: scroll;
    height: 300px;
    overflow-y: hidden;
}
.svg-container-timeline {
    /* border: solid 1px blue; */
    margin-left: 30px;
    width: 5500px;
    height: 97px;
}
.influence-path {
    stroke: black;
    fill: none;
    stroke-width: 4px;
    animation: draw 3s 1 forwards;
    transition-duration: .15s;
}
.influence-path:hover {
    stroke: rgb(253, 198, 41);
    cursor: pointer;
}
.relation-path {
    stroke: black;
    fill: none;
    stroke-width: 4px;
    animation: draw 3s 1 forwards;
    transition-duration: .15s;
    z-index: -10;
}
.relation-path-family {
    stroke: rgb(135, 28, 28);
    cursor: pointer;
}
.relation-path-associate {
    stroke: rgb(10, 98, 17);
    cursor: pointer;
}
.relation-path-enemy {
    stroke: rgb(142, 40, 165);
    cursor: pointer;
}
.relation-path-quote {
    stroke: rgb(79, 153, 255);
    cursor: pointer;
}
.relation-path-divine {
    stroke: rgb(41, 253, 196);
    cursor: pointer;
}
.relation-path-other {
    stroke: rgb(152, 152, 152);
    cursor: pointer;
}
.relation-path:hover {
    stroke: rgb(253, 198, 41);    
}
@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}
.profiles-container {
    /* border: solid 1px red; */
    height: 81px;
    display: flex;
    flex-direction: row;
    justify-content: left;
}
.voice-profile {
    margin-right: 2px;
    height: 80px;
    width: 60px;
    /* border: solid 1px black; */
    margin-right: 10px;
    transition-duration: .2s;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
}
.voice-profile:hover {
    /* cursor: pointer; */
    margin-top: 3px;
}
.voice-image {
    height: 80px;
    width: 60px;
}
.selected-voice-bar {
    border: solid 2px rgb(66, 66, 66);
    margin-right: 6px;
}

.color-keys {
    display: flex;
    flex-flow: row;
    justify-content: center;
    margin-bottom: 5px;
}
.color-key {
    display: flex;
    flex-flow: row;
    justify-content: left;
    margin-right: 20px;
}
.key-family {
    color: rgb(135, 28, 28);
    fill: rgb(135, 28, 28);
}
.key-associate {
    color: rgb(10, 98, 17);
    fill: rgb(10, 98, 17);
}
.key-enemy {
    color: rgb(142, 40, 165);
    fill: rgb(142, 40, 165);
}
.key-quote {
    color: rgb(79, 153, 255);
    fill: rgb(79, 153, 255);
}
.key-divine {
    color: rgb(41, 253, 196);
    fill: rgb(41, 253, 196);
}
.key-other {
    color: rgb(152, 152, 152);
    fill: rgb(152, 152, 152);
}


.lifespan-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    margin: 10px;
    /* border: solid 1px pink; */
}
.lifespan-title {    
    padding-left: 10px;
    font-size: 1.2em;
}
.lifespan-visual {
    /* border: solid 1px blue; */
    background-color: #f5f5f5;
    height: 100px;
    /* width: 1000px; */
    /* margin-bottom: 20px; */
    display: flex;
    justify-content: left;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    border: solid 1px black;
    border-radius: 5px;
    /* box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.19); */

}
.svg-lifespan {
    /* border: solid 1px red; */
    width: 1075px;
}
.lifespan-main-line {
    stroke: black;
    fill: none;
    stroke-width: 2px;
}
.start-end-date {
    width: 80px;
    /* border: solid 1px green; */
    /* padding: 25px; */
    padding: 2px;
    text-align: center;
    align-self: center;
    font-size: .9em;
}
.lifespan-rect {
    stroke: black;
    fill: white;
}


.in-out-flow-container {
    width: 150px;
    /* border: solid 1px red; */
    display: flex;
    align-items: left;
    flex-direction: column;
    justify-content: center;
    overflow-x: visible;
}

.flow-icon-container {
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: right;
    /* overflow-x: visible; */
    overflow-y: hidden;
    /* border: solid 1px black; */
    border-radius: 25px;
    transition-duration: .2s;
    margin: 5px;
}
.flow-icon-container:hover {
    cursor:pointer;
    background-color: #e6e6e6;
}
.flow-image-container {
    height: 50px;
    width: 50px;
    overflow: hidden;
    /* overflow-y: hidden; */
    /* overflow-x: visible; */
    /* border: solid 1px coral; */
    border-radius: 25px;
}
.flow-image {
    width: 50px;
    transition-duration: .2s;
}
.flow-image-container + .flow-hover {
    cursor:pointer;
}
.flow-label {
    /* color: red; */
    text-align: center;
    align-self: center;
    padding-left: 10px;
    padding-right: 10px;
    width: 80px;
    overflow: hidden;
}

.all-connections {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}

.in-out-box {
    /* border: solid 1px red; */
    border-radius: 15px;
    background-color: rgb(16, 28, 78);
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
    width: 250px;
    margin: 5px;
    height: 250px;

    display: flex;
    justify-content: space-between;
}

.in-out-title {
    color: white;
    width: 20px;
    writing-mode:vertical-rl;
    transform: rotate(180deg);
    margin-bottom: 30px;
}

.in-out-content {
    height: 240px;
    margin: 5px;
    background-color: white;
    border-radius: 10px;
    width: 90%;
    padding-right: 5px;
    overflow-y: scroll;

}

.relation-icons-container {
    /* margin: 20px; */
    height: 250px;
    width: 400px;
    margin: 5px;
    background-color: rgb(16, 28, 78);
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    
    display: flex;
}
.relation-icons-title {
    color: white;
    width: 40px;
    writing-mode:vertical-rl;
    transform: rotate(180deg);
    margin-bottom: 30px;
}
.relation-icons-bar {
    background-color: white;
    border-radius: 10px;
    padding-bottom: 10px;
    display: flex;
    flex-flow: column;
    overflow-y: scroll;
    justify-content: left;
    height: 230px;
    width: 90%;
    margin: 5px;
}

.relation-icon {
    width: 92%;
    margin: 5px;
    margin-left: 8px;
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    /* padding: 2px; */

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transition-duration: .3s;
}
.relation-icon:hover {
    cursor: pointer;
    /* opacity: .9; */
}
.relation-icon-family {
    background-color: rgb(135, 28, 28, .95);
    color: white;
}
.relation-icon-associate {
    background-color: rgb(10, 98, 17, .95);
    color: white;
}
.relation-icon-enemy {
    background-color: rgb(142, 40, 165, .95);
    color: white;
}
.relation-icon-quote {
    background-color: rgb(79, 153, 255, .95);
    color: black;
}
.relation-icon-divine {
    background-color: rgb(41, 253, 196, .95);
    color: black;
}
.relation-icon-other {
    background-color: rgb(152, 152, 152);
    color: black;
}

.relation-icon-image-container {
    height: 48px;
    width: 50px;
    overflow: hidden;
    border-radius: 50px;
    margin: 2px;
}
.relation-icon-image {
    width: 50px;
}
.relation-icon-name {
    width: 150px;
    margin: 2px;
    text-align: center;
}
.relation-icon-description {
    /* border: solid 1px red; */
    margin: 2px;
    width: 120px;
    text-align: center;
    font-size: .8em;
    /* height: 70px; */
}
.relation-icon-link {
    text-align: center;
    border-radius: 5px;
    margin: 5px;
    transition-duration: .3s;
    text-decoration: none;
}
.relation-icon-link:hover {
    background-color: white;
    color: black;
    cursor: pointer;
}