/**
 * CSS Reset
 * From Blueprint reset.css
 * http://blueprintcss.googlecode.com
 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
/*caption, th, td {text-align:left;font-weight:normal;}*/
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

#page-wrap {
    max-width: 1300px;
    text-align: center;
    margin: 0 auto;
    padding-left: 15px;
}

/**
 * Basic Typography
 */
body {
    font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    font-size: 80%;
    color: #5a5a5a;
    background: #ffffff;
    margin: 1em 1.5em;
}
pre, code {
    margin: 1.5em 0;
    white-space: pre;
}
pre, code {
    font: 1em 'andale mono', 'lucida console', monospace;
    line-height:1.5;
}
a[href] {
    color: #018685;
    background-color: transparent;
}
h1, h2, h3, h4, h5, h6 {
    background-color: transparent;
    font: 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    margin: 0;
    /*padding-top: 0.5em;*/
}
h1 {
    font-size: 36px;
    padding: 20px 20px 20px 20px;
}
h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 0px 20px 20px 20px;
}
h4 {
    font-size: 14px;
    font-weight: bold;
    margin: 0px 20px 20px 20px;
}

#main-logo-wrap{
    vertical-align: middle;
}

.lang-select-wrapper{
    position: absolute;
    top: 75%;
    transform: translateY(-50%);
    right: 20px;
}
/*#right-pane{*/
/*vertical-align: top !important;*/
/*}*/

.lon-lat{
    width: 10px;
}

.olControlAttribution {
    bottom: 5px;
}

.lineTD {
    width: 200px !important;
}
/**
 * Map Examples Specific
 */
#map-coordinates{
    width: 55%;
    float: left;
    text-align: right;
    margin-bottom: 15px;
}
.smallmap {
    width: 100%;
    /*min-width: 600px;*/
    height: 480px;
    border: 1px solid #ccc;
    overflow: hidden;

}
.screenshot {
    width: 90px;
    height: 60px;
    border: 1px solid #ccc;
    overflow: hidden;
}
#info {
    padding-left: 20px;
    max-width: 800px;
    overflow: auto;
    /*border: 1px solid #aaa;*/
}
#wrapper {
    /*border: 1px solid black;*/
    overflow: hidden;  /*will contain if #first is longer than #second */
    margin-top: 10px;
}

#beo-left{
    float: left;
    border: 1px solid lightgrey;
    /*border-right: none;*/
    padding: 0 20px 20px 20px;
    margin-right: 20px;
    max-width: 40%;
    margin-bottom: 20px;
}

#beo-right{
    padding: 0 20px 20px 20px;
    max-width: 800px;
    overflow: auto;
    border: 1px solid lightgrey;
    margin-bottom: 20px;
    /*display: inline-block;*/
}

.open-closed-btn{
    vertical-align: middle;
}
.of{
    vertical-align: middle;
    display: inline-block;
}

#searchWrapper{
    display: inline-block;
}

#searchBox{
    float: left;
    clear: left;
    width: 830px;
}

#searchEmpty{
    width:auto;
}

.copylink{
    height: 15px;
    width: 30px;
    background: transparent;
    border: none !important;
    font-size:0;
}
.coordinates-lon,.coordinates-lat{
    float: left;
    padding-left: 2px;
    width: 50px;
    text-align: left;
    border: none;
    display: inline-block;
}
.coordinates-img{
    min-width: 200px;
    padding-left: 5px;
}
.map-tables{
    /*margin-top: 10px;*/
}

#useThis{
    display:block;
    width:100%;
}

.custom-depth{
    /*padding: 4px 2px 4px 2px;*/
    /*width: 75px;*/
    text-align: center;
    border: 1px solid lightgrey;
    /*border-radius: 4px;*/
    /*margin: 4px;*/
}

.search{
   padding-top: 4px;
}
.padleft{
    padding-left: 4px;
}
.coor-search-proj,.coordinates-lon-search,.coordinates-lat-search{
    padding: 5.5px 2px 5.5px 2px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    border: 1px solid lightgrey;
    border-radius: 4px;
}
.coor-search-proj{
    padding: 4.5px 2px 4.5px 2px;
}
.btn.ga{
    width: 100%;
    /*max-width: 80px;*/
}

.ga-span{
    width: 50px;
}

td.padded{
    padding-left: 10px;
    padding-right: 10px;
}

.table-coor-search{
    width: 55%;
    /*max-width: 600px;*/
    /*min-width: 400px;*/
}
#alg-info{
    width: 100%;
    max-width: 400px;
    padding-bottom: 40px;
}

#tags {
    display: none;
}
.boring-header{
    margin-bottom: 30px;
}
.boring-title{
    font-size: 30px;
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 0px;
}
.boring-img{
    vertical-align: middle;
}

.law{
    width: 100%;
}
#docs p {
    margin-bottom: 0.5em;
}

.list-no-bullets{
    /*list-style-type: none;*/
}

/**{*/
    /*-webkit-transition: all 0.5s;*/
    /*-moz-transition: all 0.5s;*/
    /*-ms-transition: all 0.5s;*/
    /*-o-transition: all 0.5s;*/
    /*transition: all 0.5s;*/
/*}*/

body {
    -webkit-text-size-adjust: none;
}

.menu {
    list-style: none;
    font-size: 16px;
    /*border-bottom: 0.1em solid black;*/
    margin-bottom: 0em;
    padding: 0 0 0.5em;
}

.menu:before {
    content: "[";
}

.menu:after {
    content: "]";
}

.menu > li {
    display: inline;
}

.menu > li:before {
    content: "|";
    padding-right: 0.3em;
}

.menu > li:nth-child(1):before {
    content: "";
    padding: 0;
}

.top-align{
    vertical-align: top !important;
}

/**
*    ScaleBar
*/
.olControlScaleBar {
    bottom: 10px;
    left: 10px;
    font-family: sans-serif;
    color: #5a5a5a;
}

.olControlScaleBarBar {
    height: 1px;
    top: 14px;
    background: #5a5a5a;
}

.olControlScaleBarBarAlt {
    height: 1px;
    top: 14px;
    background: #5a5a5a;
}

.olControlScaleBarMarkerMajor {
    height: 7px;
    width: 1px;
    top: 11px;
    background: #5a5a5a;
}

.olControlScaleBarMarkerMinor {
    height: 5px;
    width: 1px;
    top: 12px;
    background: #5a5a5a;
}

.olControlScaleBarNumbersBox {
    width: 40px;
    height: 13px;
    top: 21px;
    font-size: 0.7em;
}

.olControlScaleBarLabelBox {
    top: -2px;
    height: 15px;
    font-weight: bold;
    letter-spacing: 0.1em;
    font-size: 0.7em;
    font-variant: small-caps;
}

.olControlScaleBarLabelBoxSingleLine {
    height: 15px;
    width: 35px;
    top: 8px;
    left: 10px;
    font-size: 0.7em;
    font-variant: all-petite-caps;
}
/* End Scalebar */

.sample-show-hide.ng-hide-add, .sample-show-hide.ng-hide-remove {
    -webkit-transition:all linear 0.5s;
    -moz-transition:all linear 0.5s;
    -o-transition:all linear 0.5s;
    transition:all linear 0.5s;
    display:block!important;
}

.sample-show-hide.ng-hide-add.ng-hide-add-active,
.sample-show-hide.ng-hide-remove {
    opacity:0;
}

.sample-show-hide.ng-hide-add,
.sample-show-hide.ng-hide-remove.ng-hide-remove-active {
    opacity:1;
}

#no-address{
    width: 60px;
    height: 20px;
    position: relative;
}
#no-law{
    width: 60px;
    height: 40px;
    position: relative;
}

#newAddressLine1{
    position: relative;
    height: 20px;
    max-width: 250px;
}

.title-law{
 /*max-width: 200px;*/
}
.table-geology{
    border-left: 1px solid lightgrey;
    border-top: 1px solid lightgrey;
    min-width: 430px;
}
.table-g3d{
    border-left: 1px solid lightgrey;
    border-top: 1px solid lightgrey;
    /*min-width: 330px;*/
}

.hcov-names{
    width: 250px;
}

.g3d-names{
    max-width: 400px;
}

.table-head-geology{

    border-right: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
}
.table-top-geology{
    background: #f1f1f1;
    border-right: 1px solid lightgrey;
    border-bottom: hidden !important;
}
.no-border-bottom{
    border-bottom: hidden !important;
}
.no-border-right{
    border-right: hidden !important;
}
.border-bottom{
    border-bottom: 1px solid lightgrey !important;
}
.border-right{
    border-right: 1px solid lightgrey !important;
}

.small-link{
    font-size: 10px;
    font-weight: 400;
}

.popover{
    font-weight: 400;
    text-align: justify;
}
.popover::first-letter {
    text-transform: uppercase;
}

.table-head-top{
    background: #f1f1f1;
}

.table-head-top-color{
    color: white;
    background-color: #018685;
}

.table-row-odd{
    background-color: #f3f3f3;
}

.table-head{
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
}

.placeholder{
    /*background-color: #ff2340;*/
    color: #a9a9a9;
}

.table-head-search{
    /*width: 40%;*/
    font-weight: bold;
    text-align: left;
    padding-right: 10px;
    padding-bottom: 6px;
    padding-top: 6px;
}
.table-entry{
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 1px solid lightgrey;
    border-right: 1px solid lightgrey;
}

.no-padding{
    padding: 0px 0px 0px 0px !important;
}

.align-right{
    text-align: right;
}

.align-left{
    text-align: left;
}

.align-center{
    text-align: center;
}
.inline-block{
    display: inline-block;
}

.margin-top{
    margin-top: 20px;
}

.margin-bottom{
    margin-bottom: 20px;
}

.padding-bottom{
    padding-bottom: 20px;
}

.no-line{
    border-top:0;
}

.modal-open {/* fixes the jump problem, but shows two scrollbars ...*/
    overflow: auto;
}

.center-fluid {
    margin-right: auto;
    margin-left: auto;
}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0px;
    padding-right: 0px;
}
.form-control {
    padding: 0px 4px 0px 4px !important;
}
.form-control.help{
    width: auto;
    display: inline;
}

.title-with-sub{
    /*padding-left: 60px;*/
    margin-bottom: 5px;
}
.title-sub{
    font-size: 81%;
}
.title-sub-bottom{
    margin-bottom: 10px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;    
}

.note-bottom{
    margin-top: 3px;
    margin-bottom: 3px;
}

.link{
    color: #018685 !important; text-decoration: none !important;
}

.link:hover{
    color: #018685 !important; text-decoration: underline !important; cursor: pointer;
}

#ngi-copyright{
    margin-top: 5px;
    float: left;
    text-align: left;
    font-size: 10px;
}
#ngi-copyright img{
    vertical-align: middle;
    height: 20px;
}
.ngi-copyright-text{
    display: inline;
}

#dov-copyright{
    margin-top: 5px;
    float: left;
    font-size: 10px;
}
#dov-copyright img{
    vertical-align: middle;
    height: 20px;
}

#coordinates{
    padding-top: 5px;
}

#gemeente{
    max-width: 250px;
}
.beo{
    border: 1px solid lightgrey;
    margin-left: auto;
    margin-right: auto;
}
.kwo_53_6{
    max-width: 390px;
}

.lambda-depth{
    padding-right: 20px;
}

#lambdas{
    max-width: 500px;
    min-width: 435px;
}

.melding{
    background-color: #006400;
    color: ghostwhite;
}

.glyphicon-refresh{
    padding-right: 10px;
}

.vergunning,.vergunning_klasse_2,.vergunning_klasse_1{
    background-color: darkorange;
    color: ghostwhite;
}

.verbod,.ng-invalid{
    background-color: darkred;
    color: ghostwhite;
}

.l1{
    background-color: #0000FF;
}
.l2{
    background-color: #005500;
}
.l3{
    background-color: #00AA00;
}
.l4{
    background-color: #AAFF7F;
}
.l5{
    background-color: #FFFF7F;
}
.l6{
    background-color: #FFAA00;
}
.l7 {
    background-color: #FF5500;
}
.l8{
    background-color: #FF0000;
}
.l9{
    background-color: #AA0000;
}

.error{
    background-color: #FF0000;
    color: ghostwhite;
}

.kwoPot--1{
    background-color: #C52424;
}

.kwoPot-0{
    background-color: #C52424;
}

.kwoPot-1{
    background-color: #E88613;
}

.kwoPot-2{
    background-color: #CCCE10;
}

.kwoPot-3{
    background-color: #24B52E;
}

.kwoPot-6{
    /*background-color: #a5a5a5;*/
    background-color: #E88613;
}


.icons{
    display:inline-block;
    height: 50px;
    margin: 10px 20px 10px 20px;
}

.footer-table{
    border-top: 1px solid lightgrey;
    width: 100%;
    margin-top: 20px;
    padding-top: 20px;
    text-align: center;
}

.sub-text{
    font-size: 85%;
}

.footer-text{
    margin-top: 5px;
    font-size: 85%;
    max-width: 380px;
}

.geo-col-type{
    width: 40px;
}

.btn{
    /*color: #5a5a5a !important;*/
    color: white !important;
    background-color: #018685 !important;
    padding-top: 4px;
    padding-bottom: 4px;
}
.btn:hover{
    background-color: #04a49e !important;
    color: white !important;
    /*font-weight: bold;*/
}
.btn.disabled, .btn[disabled]{
    background-color: white !important;
    color: lightgrey !important;
}
#OpenLayers_Control_MaximizeDiv_innerImage,
#olControlOverviewMapMaximizeButton_innerImage, #helpMaximizeButton{
    opacity: 0.5;
}
/*.layersDiv{*/
/*opacity: 0.5;*/
/*}*/

.disclaimer{
    margin-right: 5%;
    margin-left: 5%;
    font-family:arial,sans-serif;
    font-size: 14px;
    line-height: 200%;
}

.discl.title{
    font-size: 26px;
    padding-bottom: 15px;
    border-bottom: 1px solid silver;
}

.discl.subtitle{
    font-size: 16px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 10px;
}
.discl.subtitle.larger{
    font-size: 20px;
}

.discl.date{
    margin-top: 20px;
    margin-bottom: 20px;
}

a.discl.link{
    color: #436976 !important; text-decoration: none !important;
}

a.discl.link:hover{
    color: #436976 !important; text-decoration: underline !important; cursor: pointer;
}

.modal-dialog {
    width: auto;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

input, button, select, textarea{
    line-height: normal;
}

.layersDiv{
    background-color: #130085;
}


.vertical-center{
    vertical-align: middle;
}

.justify{
    text-align: justify;
}

.modal-margin-top{
    margin-top: 20px;
}

img.this-location{
    float: right;
    margin-left: 20px;
    margin-top: 10px;
}

.img-middle{
    vertical-align:middle;
    height: 20px;
}

.flex-wrapper-center{
    display: flex;
    justify-content: center;
}

.select-beo-kwo {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 1050px) {
    #beo-left,#beo-right{
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    #beo-left{
        max-width: 100%;
    }
    .flex-wrapper-center{
        flex-direction: column;
    }
}

@media only screen and (max-width: 960px) {
    #info, .table-coor-search, #map-coordinates{
        float: none;
        padding-left: 0px;
        margin-left: auto;
        margin-right: auto;
    }
    h1#title{
        font-size: 26px;
    }
    #header-width{
        max-width: 600px;
        margin: auto;
    }
    #main-logo{
        height: 60px;
    }
    .boring-img{
        height: 60px;
        /*margin-top: 4px;*/
    }
    .boring-title{
        font-size: 20px;
    }
    #info{
        max-width: 800px;
        margin-top: 50px;
        border: 1px solid silver;
        padding: 20px 20px 20px 20px;
    }
    #map-coordinates{
        width: 90%;
    }
    .smallmap{
        width: 100%;
        min-width: 100px;
    }
    .table-coor-search{
        width: 90%;
        /*min-width: 400px;*/
    }
    #page-wrap{
        padding-left:0px;
    }
}

@media only screen and (max-width: 842px) {
    .modal-dialog {
        width: 95%;
    }
}

@media only screen and (max-width: 632px) {
    #main-logo{
        /*float: none !important;*/
        /*float: left;*/
        vertical-align: middle;
        margin-left: 5%;
        margin-top: 0;
    }
    h1#title{
        display: inherit;
    }

    .lineTD {
        width: 100px !important;
    }

    .smallmap{
        height: 240px;
    }
    .divider{
        /*border-top: 1px dotted lightgray;*/
        /*margin-left: 100px;*/
        /*margin-right: 100px;*/
    }
    .boring-header{
    background-color: rgb(224, 247, 255);
    }
    #beo-left,#beo-right{
        border: none;
        padding-left: 0px;
        padding-right: 0px;
    }
    .olControlOverviewMapElement .olMap{
        width:90px !important;
        height: 45px !important;
    }

    td.padded{
        padding-left: 5px;
        padding-right: 5px;
    }

    body{
        margin: 2px;
    }
    #info {
        padding: 0px;
        border: none;
    }
    #ngi-copyright{
        font-size: 70%;
    }
}

@media only screen and (max-width: 480px) {
    #main-logo{
        padding-left: 0;
    }
    h1#title{
        padding-left: 0;
    }
}

@media only screen and (max-width: 425px) {
    #main-logo{
        padding-left: 0;
        height: 50px;
    }
    h1#title{
        padding-left: 0;
        font-size: 20px;
    }
    .lang-select-wrapper{
        right: 45%;
        bottom: -30%;
        top: unset;
    }
}