.min_height {
    height: 100%;
}


/*.custom_container {
margin: 0 60px 0 60px;
}*/

.search_input {
    margin-top: 12em;
    z-index: 1000;
}

.corpusSection {
    padding: 0 0 0 2em;
}

.vertical_border {
    border-right: 1px solid black;
}

.horizontal_border {
    border-bottom: 1px solid black;
}

.title_b {
    color: #800000;
    font-size: 20px;
}



.nature_people {
    font-size: 17px;
    padding-top: 1em;
}

.settings {
    font-size: 17px;
    padding-top: 1em;
}

.person {
    font-size: 17px;
    padding-top: 1em;
}

.public {
    font-size: 17px;
    padding-top: 1em;
}

.signup_btn {
    background: #800000;
    color: white;
}

.top_div {
    background: #333333;
    color: white;
    padding-bottom: 6em;
    z-index: -1000;
    padding-bottom: 10%;
}

.custom_circle {
    position: absolute;
    border-radius: 50%;
}

.circle_a {
    border: solid 7px white;
    width: 160px;
    height: 160px;
    margin-top: 2%;
    margin-left: 88%;
}

.circle_b {
    border: solid 4px white;
    width: 70px;
    height: 70px;
    margin-top: 8%;
    margin-left: 66%;
}

.circle_c {
    border: solid 4px white;
    width: 70px;
    height: 70px;
    margin-top: 15%;
}

.circle_d {
    border: solid 3px white;
    width: 45px;
    height: 45px;
    margin-top: 10%;
    margin-left: 11%;
}

.circle_e {
    border: solid 8px white;
    width: 140px;
    height: 140px;
    margin-top: 24%;
    margin-left: 10%;
}

.circle_f {
    border: solid 3px white;
    width: 60px;
    height: 60px;
    margin-top: 21%;
    margin-left: 52%;
}

.circle_g {
    border: solid 7px white;
    width: 130px;
    height: 130px;
    margin-top: 24%;
    margin-left: 81%;
}


/*@@keyframes fader {
0% {background: url("https://media.aweita.larepublica.pe/678x508/aweita/imagen/2018/02/08/noticia-persona-positiva.png")}
50% {background: url("https://www.psicoactiva.com/blog/wp-content/uploads/2017/07/hombre-soltero-feliz.jpg")}
100% {background: url("https://media.aweita.larepublica.pe/678x508/aweita/imagen/2018/02/08/noticia-persona-positiva.png")}
}*/

#c3 {
    max-width: 140px;
    background: skyblue;
    animation: fader 5s linear infinite;
}


.corpus {
    padding: 0 4rem 0 0 !important;
    position: relative;
    margin-bottom: 1rem;
}

.corpus a{
    color:inherit;
    text-decoration: inherit;
    font-style: inherit;
}

.corpus-image{
    width: 100%;
    padding-bottom: 100%;
    height: auto;
    background-size: 100%;
    border-radius: 100%;
    background-position: 50%;
    background-repeat: no-repeat;
}

.topColaboradores h5 {
    padding: 0 1rem;
}

.colaborador{
    position: relative;
    margin-bottom: .75rem;
}

.colaborador-image{
    width: 100%;
    padding-bottom: 100%;
    height: auto;
    background-size: 100%;
    border-radius: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
}
.persona-image{
    width: 100%;
    padding-bottom: 100%;
    height: auto;
    max-height: 20px;
    background-size: 100%;
    border-radius: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
}


nav {
    z-index: 998;
}
.titlePromo h1{
    font-size: 2.28rem;
    line-height: 110%;
    margin: 1.52rem 0 .912rem 0;
}
.titlePromo h2{
    font-size: 1.4rem;
    line-height: 110%;
    margin: 1.0933333333rem 0 .656rem 0;
}
.titlePromo h1,.titlePromo h2{
    color: #212121;

}
.titlePromo h1 span,.titlePromo h2 span{
    color: #7c1717;

}

.header {
    position: relative;
    overflow: hidden;
    color: #7c1717;
    font-weight: 300;
    background-color: #fafafa;
    /*background-image: url('http://localhost/genealog/resources/images/Paisaje_Campestre-Pedro_Lira.jpg');*/
    z-index: 0;
    background-size: 100%;
    width: 100%;
    height: 88vh;
    max-height: 976px;
    min-height: 645px;
    margin: 0 !important;
}

.continueTheWork .card-content{
    margin-bottom: .75rem;

}

.continueTheWork .card-content .btn{
    min-width: 50%;

}

.header .header-background {
    width: 100%;
    height: 0;
    overflow: visible;
    z-index: 0;
    position: relative;
}

.header .header-background img {
    width: auto;
    height: 93vh;
    max-height: 1024px;
}


/* Para menos de 1976px */

@media only screen and (max-width: 1076px) {
    .header .header-background img {
        width: auto;
        margin: 0 auto;
    }
}

.header .header-logo {
    position: relative;
    z-index: 4;
    margin-left: -10%;
    display: inline-block;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-left: 0;
    margin-left: -9px !important;
}

.header .header-logo img {
    width: 70%;
    /*margin-top: 3%;*/
    height: auto;
    /*margin-bottom: 2%;*/

}

.header .promo {
    position: relative;
    z-index: 4;
    display: inline-block;
}
.titlePromo{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

@media only screen and (max-width: 1076px) {
    .header .header-logo img {
        background-color: #ffffffb8;
        padding: .5rem;
    }
}
    

.header .header-wrap {
    max-width: 1920px;
    margin: 0 auto;
}

#d3_selectable_force_directed_graph {
    position: relative;
    float: left;
    background-color: transparent;
    opacity: 0;
    transition: opacity 3.5s ease;
}

#d3_selectable_force_directed_graph svg {
    width: 1920px;
    height: 88vh;
    overflow: hidden;
}

#d3_selectable_force_directed_graph:focus,
#d3_selectable_force_directed_graph svg:focus,
#d3_selectable_force_directed_graph svg g:focus {
    outline: none;
}

#d3_selectable_force_directed_graph .link line {
    stroke: #7C1717;
    opacity: 1;
    transition: opacity 1s ease;
}

#d3_selectable_force_directed_graph .node circle {
    opacity: 1;
    transition: opacity 1s ease;
}

.header-text {
    color: #2196f3;
    font-weight: 300;
}

.node {
    stroke: #771f20;
    stroke-width: 1.5px;
}

.node .selected {
    stroke: #fafafa;
}

.link {
    stroke: #999;
}

.brush .extent {
    fill-opacity: .1;
    stroke: #fff;
    shape-rendering: crispEdges;
}

circle {
    fill: url(/#bg-img);
    /*background-color: #7c1717;*/
}

.light {
    font-weight: 300;
}


/*************/

.data-info {
    padding: 4em 2em 0 2em;
}

.black-box {
    width: 100%;
    margin: 0 auto;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

.no-margin{
    margin: 0;
}

/* Para menos de 678px */

@media only screen and (max-width: 678px) {
    .custom_container {
        margin: 0px;
    }
    #bottom_form {
        padding: 0 1em 0 1em;
    }
}
.tips {

    background: #111111;
}

/* Para más de 678px */
@media only screen and (min-width: 678px) {
    .topColaboradores {
        border-left: 1px solid #E0E0E0;
    }
    .tips {    
        margin-left: -25% !important;
        padding-left: 30% !important;
        width: 75% !important;
    }
}

/* Para menos de 678px */
@media only screen and (max-width: 600px) {
    #d3_selectable_force_directed_graph {
        width: 0;
        padding: 0;
    }
    .header {
        height: 93vh;
    }
    .header .header-logo {
        text-align: center;
        padding-right: 0;
        padding-left: 0;
        margin-left: 0;
    }
    .header .header-logo img {
        width: 85%;
    }
    .tips {    
        text-align: center;
    }
    
}

#corpusProm .slot{
    padding: 12px 0.5rem;
    min-width: 300px;
}

#corpusProm .slot input{
    height: 1.5rem;
}

#corpusProm .slot input, #corpusProm .slot .input-field{
    margin-top: 0px;
    margin-bottom: .5rem;
}

#corpusProm .slot .input-field>label:not(.active) {
    -webkit-transform: translateY(4px);
    transform: translateY(4px); 
}

#corpusProm .tLines{
    height: 36px;
    margin: 0 auto;
    margin-top: -51px;
    z-index: 0;
    width: 50%;
}

#corpusProm .tLineLeft{
    width: 50%;
    height: 100%;
    border-right: 1px solid grey; 
    border-top: 1px solid grey; 
    float: left;
}
#corpusProm .tLineRight{
    width: 50%;
    height: 100%;
    /*border-left: 1px solid grey; */
    border-top: 1px solid grey; 
    float: right;

}

#corpusProm .slot .input-field.rem-on-top{
    margin-top: 1rem;
}

#corpusProm .corpus-image{
    margin-top: 22%;
}

#corpusProm [type="radio"]:checked+span:after, #corpusProm [type="radio"].with-gap:checked+span:after {
    background-color: #FDD835;
}
#corpusProm [type="radio"]:checked+span:after, #corpusProm [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after {
    border: 2px solid #FDD835;
}

#corpusProm p {
    margin: 0;
}

[v-cloak] {
    opacity: 0 !important;
    color: transparent !important;
}


.arrow-tooltip {
    background-color: #323232;
    height: 16px;
    width: 16px;
    position: fixed;
    left: -8px;
    transform: rotate(45deg);
}

.arrow-tooltip-2 {
    background-color: #FFFFFF;
    height: 16px;
    width: 16px;
    position: fixed;
    left: 50%;
    top: -8px;
    margin-left: -8px;
    transform: rotate(45deg);
}

.material-tooltip{
    overflow: visible;
}