/*
255    162      0        iGranati
0      160      62
36     168      172
0      135      203
152    35       149
*/
body
{
    padding: 1% 1% 0% 1%;
}
nav
{
    margin-bottom: 10px;
}
.title
{
    text-align: center;
    background-color: #CFF3F5;
    text-shadow: grey 1px 1px 1px;
    font-size: 35px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 3px solid #cacaca;
    border-right: 3px solid #cacaca;
    border-bottom: 3px solid #cacaca;
    padding: 10px;
    color: #A4CFF2;
}
#infovis
{
    vertical-align: middle;
    background-color: #fafafa;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    overflow: hidden;
}
.successbox
{
    color: green;
    font-weight: bold;
}
.small
{
    font-size: small;
}
.alone_title
{
    color:white;
    text-shadow: grey 3px 3px 3px;
}

.alone_body
{
    text-align: center;
}

.alone_container table
{
    width: 100%;
    text-align: center;
}
#operation
{
    padding: 5px;
    position: fixed;
    right: 3%;
    top: 0%;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 3px solid #cacaca;
    border-right: 3px solid #cacaca;
    border-bottom: 3px solid #cacaca;
    background-color: lightgrey;
    z-index: 1001;
}
.operation_options
{
    text-align: center;
    display: inline-block;
    border-right: solid 1px #b1b1b1;
    padding:10px;
    font-weight: bold;
    cursor: pointer;
    background-color: #cbe8f3;
    color: #1494c0;
    font-size:12px;
    border-radius: 3px;
}

.single-dialog{
    margin-left: 3%;
    margin-top: 5%;
    margin-right: 3%;
}

.suggest-box
{
    border-bottom: 5px solid #5bc0de;
    padding: 10px;
    background-color: #ddd;
    border-radius: 3px;
    margin-bottom: 5px;
}

#display_image
{
    /*width: 200px;*/
    height: 200px;
    /*vertical-align: middle;*/
    padding: 5%;
}
.suggest_quest
{
    font-weight: bold;
}

.membername_mention
{
    font-weight: bold;
    font-family: open-sans;
}

#display_dob, #display_relationship, #display_alive, #display_relation, #display_gaon
{
    font-weight: bolder;
    /*add here styles to wrap text */
}

.node
{
    font-weight: bolder;
    text-align: center;
    vertical-align: middle;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}

.node:hover
{
    filter: brightness(85%);
}

#right-container
{
    background-color: #f5f5f5;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}


@media screen and (max-width: 768px)
{
    #rightcontainerheader
    {
        display: none;
        position: absolute;
        right: 0px;
        top: 2%;
        background-color: white;
    }
}