/* Decision tree on 'Welk type voeding?' (the branches are images). */
#start-box{
    background: #0a6f9f;
    padding: 12px 18px;
    width:100%;
}

#tree-wrapper{
    max-width:100%;
    margin:auto;
    padding-bottom:40px;
}

#start-box span{
    color:#fff !important;
    line-height:20px;
    font-size:16px !important;
    font-weight:700;
}

.tree-second-row{
    width:100%;
    margin:auto;
}

.tree-third-row{
    width:100%;
    margin:auto;
    height:51px;
    width:100%;
    display:flex;
    justify-content:center;

}

.tree-fourth-row{
    width:100%;
    display: flex;
    justify-content: center;
}

.fourth-row-box{
    background:url('/img/qa_schema/branch-wide.png'); 
    background-repeat:no-repeat;
    background-position:center;
    height:49px; 
    margin-top: -1px; 
    width: 100%;
}

.tree-fifth-row{
    width:100%;
    height:93px;
    display: flex;
    justify-content: center;
}

.tree-sixth-row{
    width:100%;
}

.tree-option-row-wrapper{
    background-image:url('/img/qa_schema/branch3.png');
    background-repeat:repeat-x;
    background-position:center center;
    display:flex;
    justify-content:center;
}

.tree-option-row{
    background:url('/img/qa_schema/branch-tcross-horizontal.png');
    background-repeat:no-repeat;
    background-position:left center;
    height:50px;
    width:100%;
    display:flex;
    justify-content:center;

}

.left-bottom-corner{
    background-image:url('/img/qa_schema/branch-left-bottom-corner.png');
}

.top-corner{
    background-image:url('/img/qa_schema/branch-left-top-corner.png');
    background-position:left bottom;
    background-repeat:no-repeat;
}

.tree-option-row-spacer{
    background:url('/img/qa_schema/branch-cross-over.png');
    background-repeat:no-repeat;
    background-position:left center;
    display:flex;
    height:15px;
    width:100%;
}

.tree-option-row .info-box{
    height:50px;
    width:140px;
    padding-left:5px;
    padding-right:30px;
}

.empty-box{
    background:none;
}

.branch1{
    background:url('/img/qa_schema/branch1.png');
    height:49px; 
    margin-top: -1px; 
    width: 88px;
    margin:auto;
}


#upper-box{
    height: 58px;
    line-height: 25px; 
    padding: 15px 25px 15px 25px; 
    max-width: 288px;
    margin:auto;
}

#upper-box span{
        text-align:center;
    font-size:12px;
}


#info-container {
    position:relative;
    border: 0;
    background: #fefefe !important;
    height: 100%;
    padding: 5px 5px 10px 5px;
}

div.info-box {
    position: relative;
    font-size: 12px;
    text-align: left;
    padding: 3px;
    background: #fff !important;
    background-image: linear-gradient(90deg,#bae5fb78, #8dd8f8) !important;
    border: 2px solid #00acf0;
    display: flex;
    align-items: center;
}


.show-mobile-480{
    display:none;
}
@media only screen and (max-width:480px) {

    .show-mobile-480{
        display:inline-block;
    }
}

@media only screen and (max-width:600px) {

    .tree-option-row{
        justify-content:flex-end;
    }

    .tree-option-row .info-box {
        width:110px;
    }

    div.info-box span{
        font-size:9px;
    }
}

.no-padding{
    padding:0;
}


div.hoverable{
    cursor:pointer;
}

    div.info-box span {
    margin-left: 0;
    margin-top: 0;
    font-size: 11px;
    word-break: break-word;
}

    div.highlight-box{
        background-image:none !important;
        background:#00acf0 !important;
        color:#fff;
    }

div.big-box{
    font-size:18px;
    text-align:center;
    width:40%;
    display:inline-block; 
    height: 93px;
}

.box-margin-left{
    margin-left:10px;
}



.yesno-box span{
    text-align:center;
}

.bottom-spacer{
    margin-bottom:14px;
    color:#ff0000;
}

.pico-gradient-blue {
    background: #fff !important;
    background-image: linear-gradient(90deg,#bae5fb78, #8dd8f8) !important;
    border: 2px solid #00acf0;
}

.img-info {
    position: absolute;
    top: 0;
    right: 0;
    background: url('/img/qa_schema/info-new.png');
    width: 28px;
    height: 28px;
    background-color: #00acf0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 28px;
    font-family: Garamond;
}