/* ======== resets and overrides ======== */

* {
    margin: 0;
    padding: 0;
}

    *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

.hideMe {
    display:none;
}
.bb1px {
    border-bottom: 1px solid #CCC;
}

a:link, a:active, a:visited {
    text-decoration: none;
    color: blue;
}

a:hover {
    color: #0026ff;
    text-decoration: none;
}

body {
    background-color: #EEF1F6;
    font-family: 'Segoe UI',Tahoma,Helvetica,Sans-Serif;
    font-size: 100%;
    color: #333;
}

img {
    border: none;
}

div.nav {
    float: left;
    height: 100vh;
    background: #16325C;
    overflow: hidden;
    width: 240px;
}

    div.nav .menu {
        float: left;
        height: 50px;
        width: 100%;
        color: #FFF;
        font-family: 'Segoe UI Semibold', Arial;
        font-size: 0.95em;
        padding: 19px 0 0 55px;
    }

        div.nav .menu:hover {
            background-color: #061C3F;
            cursor: pointer;
        }


        div.nav .menu.iconMenu {
            background-image: url(/images/nav/menu.png);
            background-repeat: no-repeat;
            background-position: 15px 15px;
            background-size: 25px;
        }

        div.nav .menu.iconHome {
            background-image: url(/images/nav/home.png);
            background-repeat: no-repeat;
            background-position: 15px 15px;
            background-size: 25px;
        }

        div.nav .menu.iconBanksparen {
            background-image: url(/images/nav/banksparen.png);
            background-repeat: no-repeat;
            background-position: 15px 15px;
            background-size: 25px;
        }

        div.nav .menu.iconCar {
            background-image: url(/images/nav/car.png);
            background-repeat: no-repeat;
            background-position: 15px 15px;
            background-size: 25px;
        }

        div.nav .menu.iconMortgage {
            background-image: url(/images/nav/mortgage.png);
            background-repeat: no-repeat;
            background-position: 15px 15px;
            background-size: 25px;
        }

        div.nav .menu.iconSave {
            background-image: url(/images/nav/sparen.png);
            background-repeat: no-repeat;
            background-position: 15px 15px;
            background-size: 25px;
        }

        div.nav .menu.iconPay {
            background-image: url(/images/nav/pay.png);
            background-repeat: no-repeat;
            background-position: 15px 15px;
            background-size: 25px;
        }

        div.nav .menu.iconLoan {
            background-image: url(/images/nav/loan.png);
            background-repeat: no-repeat;
            background-position: 15px 15px;
            background-size: 25px;
        }

        div.nav .menu.iconLijfrente {
            background-image: url(/images/nav/lijfrente.png);
            background-repeat: no-repeat;
            background-position: 15px 15px;
            background-size: 25px;
        }

        div.nav .menu.iconOrv {
            background-image: url(/images/nav/orv.png);
            background-repeat: no-repeat;
            background-position: 15px 15px;
            background-size: 25px;
        }

        div.nav .menu.iconStamrecht {
            background-image: url(/images/nav/stamrecht.png);
            background-repeat: no-repeat;
            background-position: 15px 15px;
            background-size: 25px;
        }

        div.nav .menu.iconPension {
            background-image: url(/images/nav/pension.png);
            background-repeat: no-repeat;
            background-position: 15px 15px;
            background-size: 25px;
        }

        div.nav .menu.iconWoekerpolis {
            background-image: url(/images/nav/woekerpolis.png);
            background-repeat: no-repeat;
            background-position: 15px 15px;
            background-size: 25px;
        }

         div.nav .menu.iconPartners {
            background-image: url(/images/nav/partners.png);
            background-repeat: no-repeat;
            background-position: 15px 15px;
            background-size: 25px;
        }

        div.nav .menu.active {
            background-color: #061C3F;
        }

div.werkveld {
    float: left;
}

div.header {
    float: left;
    width: 100%;
    height: 50px;
    border-bottom: 2px solid #CCC;
    background: #FFF;
}

    div.header img {
        float: left;
        margin-left: 15px;
        height: 40px;
        margin-top: 5px;
    }

div.pageHead {
    float: left;
    width: 100%;
    height: 100px;
    background: #F4F6F9;
    border-bottom: 2px solid #ccc;
}

    div.pageHead img.icon {
        float: left;
        background: #EF6E64;
        margin: 20px;
        width: 55px;
        border-radius: 10px;
    }

div.titleWrap {
    float: left;
    width: 25%;
    margin-top: 20px;
}

span.titleSmall {
    float: left;
    width: 100%;
    font-size: 0.75em;
    text-transform: uppercase;
}

span.titleBig {
    float: left;
    width: 100%;
    font-size: 2.1em;
    font-family: 'Segoe UI', Arial;
}

div.dbGraphSmall{
    float: left;
    width: 22.5%;
    height: 350px;
    border: 2px solid #E0E5EE;
    background: #FFF;
    border-radius: 5px;
    margin: 10px 0 1% 1%;
}

div.dbGraphBig {
    float: left;
    width: 32%;
    height: 350px;
    border: 2px solid #E0E5EE;
    background: #FFF;
    border-radius: 5px;
    margin: 10px 0 1% 1%;
}

div.dbGraphLong210 {
    float: left;
    width: 98%;
    height: 210px;
    border: 2px solid #E0E5EE;
    background: #FFF;
    border-radius: 5px;
    margin: 0 0 1% 1%;
}

div.dbGraphBigLong {
    float: left;
    width: 60%;
    height: 530px;
    border: 2px solid #E0E5EE;
    background: #FFF;
    border-radius: 5px;
    margin: 10px 0 1% 1%;
}

div.dbGraphBigLong.short {
    float: left;
    width: 47.5%;
    height: 530px;
    border: 2px solid #E0E5EE;
    background: #FFF;
    border-radius: 5px;
    margin: 10px 0 1% 1%;
}

div.dbGraphLong div.graph {
    width: 98% !important;
    margin-left: 1% !important;
}

    div.dbGraphLong div.graph div.barWrap {
        height: 99%;
        width: 2.72% !important;
        margin: 0.25% !important;
    }

        div.dbGraphLong div.graph div.barWrap div.bar.small {
            width: 50%;
        }

            div.dbGraphLong div.graph div.barWrap div.bar.small.sec {
                margin-left: 25px;
            }


div.dbGraphLong {
    float: left;
    width: 95%;
    height: 530px;
    border: 2px solid #E0E5EE;
    background: #FFF;
    border-radius: 5px;
    margin: 10px 0 1% 1%;
}

div.dbTitle select {
        float: right;
    width: 150px;
    margin-right: 5%;
    height: 25px;
    text-align: center;
    margin-top: -50px;
}
div.dbTitle .reload {
            float: right;
    width: 25px;
    height: 25px;
    background: transparent url(/images/reload.png) no-repeat center center;
    border: 2px solid #CCC;
    border-radius: 5px;
    margin: -50px 1% 0 0;
    cursor: pointer;
}



div.pageHead select {
        float: right;
    width: 200px;
    margin-right: 1%;
    height: 36px;
    text-align: center;
    margin-top: 40px;
    font-size: 14pt;
    border-radius: 5px;
    border:1px solid #CCC;
    padding: 5px;
}
div.pageHead .reload {
            float: right;
    width: 35px;
    height: 35px;
    background: transparent url(/images/reload.png) no-repeat center center;
    border: 2px solid #CCC;
    border-radius: 5px;
    margin: 40px 4% 0 0;
    cursor: pointer;
    background-size: 100%;
}

div.pageHead .xml {
	float: right;
            width: 35px;
    height: 35px;
    background: transparent url(/images/xml.png) no-repeat center center;
    border: 2px solid #CCC;
    border-radius: 5px;
    margin: 40px 1% 0 0;
    cursor: pointer;
    background-size: 100%;
}

div.pageHead .csv {
	float: right;
           width: 35px;
    height: 35px;
    background: transparent url(/images/csv.png) no-repeat center center;
    border: 2px solid #CCC;
    border-radius: 5px;
    margin: 40px 1% 0 0;
    cursor: pointer;
    background-size: 100%;
}

div.dbGraphBigLong div.dbTitle div.results, div.dbGraphLong div.dbTitle div.results {
    float: left;
    width: 100%;
    margin: 25px 0 0 10px;
}
div.dbGraphBigLong div.dbTitle div.filters {
    float: right;
    width: 50%;
    margin: 25px 0 0 10px;
}


div.dbGraphLong div.dbTitle div.filters {
    float: left;
    width: 50%;
    margin: 25px 0 0 10px;
}


    div.dbGraphBigLong div.dbTitle div.results span.item, div.dbGraphLong div.dbTitle div.results span.item {
        float: left;
        font-size: 11pt;
        width: auto;
        text-transform: uppercase;
        margin: 0 20px 0 0;
    }

    div.dbGraphBigLong div.dbTitle div.results span.value, div.dbGraphLong div.dbTitle div.results span.value {
        float: left;
        font-size: 11pt;
        width: auto;
        font-weight: bold;
        margin: 0 20px 0 0;
    }




div.dbGraphBigLong div.dbTitle {
    float: left;
    width: 100%;
    height: 20%;
}

div.wrapEbook {
    float: left;
    width: 22.5%;
    margin: 10px 0 1% 1%;

}

    div.wrapEbook div.Ebook {
        float:left;
        width: 100%;
        background: #FFF;
        border-radius: 5px;
    }

    div.wrapEbook div.Ebook img{
        float:left;
        width: 50%;
    }

    div.wrapEbook div.Ebook span.title{
        float:left;
        width: 50%;
        font-size: 15pt;
    }

        div.wrapEbook div.Ebook span.counter {
            float: left;
            border-radius: 50%;
            border: 5px solid #CCC;
            width: 100px;
            font-size: 20pt;
            height: 100px;
            text-align: center;
            padding-top: 25px;
            font-weight: bold;
            margin: 25px 0 0 25px;
        }



div.wrapSmall{
    float: left;
    width: 32%;
    margin: 10px 0 1% 1%;
}

div.dbGraphSmallHeight  {
    float: left;
    width: 100%;
    height: 530px;
    border: 2px solid #E0E5EE;
    background: #FFF;
    border-radius: 5px;
    margin: 0 0 10px 1%;
}
div.dbGraphSmallHeight div.dbTitle {
    
    height: 12.5%;
    
}

div.dbContent div.grid {
    float:left;
    width: 100%;
    border-bottom: 1px solid #CCC;
}
div.dbContent div.grid span.grid {
    float:left;
    width: 9%;
    padding: 5px;
}

div.dbContent div.grid span.grid.short {
    float:left;
    width: 4%;
    
}
div.dbContent div.grid span.grid.date {
    float:left;
    width: 7.5%;
    
}

div.dbContent div.grid span.grid.long {
    float:left;
    width: 15%;
    
}

div.dbGraphSmallHeight div.dbContent{
        width: 100%;
    
    height: 530px;
}

div.dbGraphSmallHeight div.dbContent  div.graph2 {
    float: left;
    width: 80%;
    margin-left: 15%;
    height: 430px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    background: #F4F6F9;
    margin-top: 10px;
}

div.dbGraphSmallHeight div.dbContent  div.graph2 div.barWrap{
    float: left;
    width: 100%;
    height: 5%;
    
}
div.dbGraphSmallHeight div.dbContent  div.graph3 div.barWrap{
    float: left;
    width: 100%;
    height: 5%;
    
}
div.dbGraphSmallHeight div.dbContent  div.graph2 div.barWrap span.dag{
        float: left;
    margin: 1px 0 0 -60px;
    font-size: 10pt;
}

div.dbGraphSmallHeight div.dbContent  div.graph3 {
    float: left;
    width: 65%;
    margin-left: 30%;
    height: 430px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    background: #F4F6F9;
    margin-top: 10px;
}

div.dbGraphSmallHeight div.dbContent  div.graph3 div.barWrap span.bron{
        float: left;
    margin: 1px 0 0 -135px;
    font-size: 10pt;
    width: 165px;
}

div.dbGraphSmallHeight div.dbContent  div.graph3 div.barWrap div.bar{
    float: left;
    background-color: blue;
    margin: 0.5% 0 0 0;
    height: 90%;

}

div.dbGraphSmallHeight div.dbContent  div.graph3 div.barWrap div.bar span.aantal{
    float: right;
    font-size: 10pt;    
    margin-right: -35px;

}

div.dbGraphSmallHeight div.dbContent  div.graph2 div.barWrap div.bar{
    float: left;
    background-color: blue;
    margin: 0.5% 0 0 0;
    height: 90%;

}

div.dbGraphSmallHeight div.dbContent  div.graph2 div.barWrap div.bar span.aantal{
    float: right;
    font-size: 10pt;    
    margin-right: -35px;

}


div.dbGraphSmall {
    float: left;
    width: 100%;
    height: 170px;
    border: 2px solid #E0E5EE;
    background: #FFF;
    border-radius: 5px;
    margin: 0 0 10px 1%;
}


div.dbTitle {
    float: left;
    width: 100%;
    height: 30%;
}

    div.dbTitle span:first-of-type {
        margin: 10px;
        font-size: 14pt;
    }

    div.dbTitle span {
        margin: -10px 10px -10px 10px;
        width: 100%;
        float: left;
        font-size: 11pt;
    }

div.dbContent {
    float: left;
    width: 100%;
    height: 60%;
}

    div.dbContent .nr0 {
        float: left;
        margin: 95px -150px 0 150px;
        position: relative;
        font-weight: bold;
    }

    div.dbContent .nr1 {
        float: left;
        margin: 25px -170px 0 150px;
        position: relative;
        font-weight: bold;
    }

    div.dbContent .nr2 {
        float: left;
        margin: -25px -170px 0 250px;
        position: relative;
        font-weight: bold;
    }

    div.dbContent .nr3 {
        float: left;
        margin: 95px -400px 0 370px;
        position: relative;
        font-weight: bold;
    }

div.blocks2 {
    float: left;
    width: 35%;
    margin-left: 10%;
    text-align: center;
    border: 1px solid #CCC;
    height: 75px;
    border-radius: 5px;
}


    div.blocks2 span {
        float: left;
        width: 100%;
        text-align: center;
    }

        div.blocks2 span:first-of-type {
            float: left;
            width: 100%;
            text-align: center;
            font-size: 18pt;
            margin-top: 10px;
        }

div.method {
    float: left;
    width: 30%;
    margin-left: 1%;
    text-align: center;
    border: 1px solid #CCC;
    height: 75px;
    border-radius: 5px;
}

    div.method span {
        float: left;
        font-size: 10pt;
        width: 100%;
        color: #16325C;
        margin: 0;
    }

        div.method span:first-of-type {
            font-size: 14pt;
        }

        div.method span:last-of-type {
            font-size: 12pt;
        }

div.counter {
    float: left;
    width: 100%;
    text-align: center;
}

    div.counter span {
        float: left;
        font-size: 14pt;
        width: 100%;
        color: #16325C;
    }

        div.counter span:first-of-type {
            float: left;
            font-size: 20pt;
            width: 100%;
        }


div.dbFooter {
    float: left;
    width: 100%;
    height: 10%;
}

div.dbFooter .filters {
    float: left;
    margin: 20px 0 0 10px;
    width: 60%;
   
}
div.dbFooter .filters span {
   cursor: pointer;
}

    div.dbFooter a {
        float: left;
        width: 100%;
        color: #187DD6;
        font-size: 9pt;
        margin: 10px;
    }

    div.dbFooter span.bigFooter {
        float: left;
        width: 100%;
        font-size: 12pt;
        margin: -10px 10px 10px 10px;
    }

div.dbGraphLong div.dbTitle {
    height: 20%;

}
div.dbGraphLong div.dbFooter a {
    float: left;
    width: 100%;
    color: #187DD6;
    font-size: 9pt;
    margin: -10px 10px 10px 10px;
}

div.dbGraphSmall div.dbFooter a {
    float: left;
    width: 100%;
    color: #187DD6;
    font-size: 9pt;
    margin: -10px 10px 10px 10px;
}

div.halfCirlce {
    float: left;
    height: 104px;
    width: 300px;
    margin-left: 12.5%;
    overflow: hidden;
}

div.circleAbs {
    float: left;
    height: 210px;
    width: 210px;
    border-radius: 105px 105px 105px 105px;
    -moz-border-radius: 105px 105px 105px 105px;
    -webkit-border-radius: 105px 105px 105px 105px;
    margin-left: 30%;
}


    div.circleAbs.mgMinCircle {
        margin-top: -200px;
    }


div.accelerator {
    float: left;
    background: #FFF;
    width: 185px;
    height: 100px;
    background-size: 202px;
    margin-top: -196px;
    margin-left: 102px;
    border-radius: 100px 100px 0 0;
    border: 10px solid #F4F6F9;
}

    div.accelerator img {
        float: left;
        width: 300px;
        margin: 67px 0 0 -65px;
        position: absolute;
    }


div.bar {
    float: left;
    width: 80%;
    margin-left: 10%;
    height: 40px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    background: #F4F6F9;
}

    div.bar div.filler {
        background: #4285F4;
        height: 40px;
        width: 0%;
    }

    div.bar span {
        float: left;
        font-size: 12pt;
        font-weight: bold;
    }

        div.bar span:last-of-type {
            float: right;
            margin-right: -25px;
        }

       

div.graph {
    float: left;
    width: 80%;
    margin-left: 10%;
    height: 300px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    background: #F4F6F9;
    margin-top: 10px;
}

    div.graph.third {
        width: 98%;
        margin-left: 1%;
    }

    div.graph div.barWrap {
        float: left;
        height: 100%;
        width: 4%;
        margin: 0 2%;
        background: #F4F6F9;
        position: relative;
    }

    div.graph div.barWrap.third {
       
        width: 7.25%;
        margin: 0 0.5%;
               
    }

    div.graph div.bar {
        float: left;
        background: #4285F4;
        width: 80%;
        height: 0%;
        position: absolute;
        bottom: 0;
    }

    div.graph div.barWrap.third div.bar.small {
            width: 30%;
            margin-left:2px;
        }

    div.graph div.barWrap div.bar.small.sec {
        margin-left: 36%;
    }
    div.graph div.barWrap div.bar.small.third {
        margin-left: 70%;
    }

    div.graph div.barWrap span {
        float: left;
        margin-left: 5px;
        position: absolute;
        bottom: -20px;
    }

        div.graph div.barWrap span[id^="fig"] {
            float: left;
            margin-left: -2px;
            font-size: 9pt;
        }


/*VTIP*/
p#vtip {
    display: none;
    position: absolute;
    padding: 10px;
    width: 50px;
    left: 5px;
    font: 10pt arial;
    color: #000;
    line-height: 20px;
    background-color: #F1F5FB;
    border: 1px solid #a6c9e2;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    z-index: 999999;
}

img.vtip {
    float: left;
}

p#vtip #vtipArrow {
    position: absolute;
    top: -10px;
    left: 5px;
}

img.tooltip {
    float: left;
    margin: 5px 0 5px 0;
}