/* DEEB Algemeen */
@font-face {font-family: "EtelkaTextPro";
    src: url("fonts/EtelkaTextPro.eot"); /* IE9*/
    src: url("fonts/EtelkaTextPro.eot") format("embedded-opentype"), /* IE6-IE8 */
    url("fonts/EtelkaTextPro.woff2") format("woff2"), /* chrome firefox */
    url("fonts/EtelkaTextPro.woff") format("woff"), /* chrome firefox */
    url("fonts/EtelkaTextPro.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
    url("fonts/EtelkaTextPro.svg") format("svg"); /* iOS 4.1- */
}

body {
  font-family: EtelkaTextPro, Arial;
}

h1, h2, h3, h4, h5, h6 {
  font-family: EtelkaTextPro, Arial ;
}

.control-label{
  font-size: 12px;
}

label {
    font-size: 12px;
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

html {
 font-family: EtelkaTextPro, Arial;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

.well {
  min-height: 20px;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: transprent;
}

element.style {
  background-color: #d20f42;
}

.content-wrapper{
  background-color: #f5f5f5;
}

/* Klasse voor inputvelden zonder dikke blauwe rand en 100% breedte */
.form_blue_border input {
  border-radius: 8px;
  border: solid 2px #d20f42;
  height: 36px;
  font-size:14px;
}

.marker {
 background-image: url('Markers/marker.png');
 background-size: cover;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 cursor: pointer;
}

.propertyview-collapsable-panel {
  width: 100%;
  height: 40px;
  background-color: #eeeeee;
  border-radius: 8px;
  border-width: 0px;
  line-height: 40px;
  padding-left: 10px;
  color: #333333;
  cursor: pointer;
}


.propertyview-input-div {
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 5px;
  font-weight: normal;
  font-size: 14px;
  width: 370px;
  display: inline-block;
}

.propertyview-input-div label {
  font-weight: normal;
  font-size: 12px;
  width: 174px;
  margin: 0px;
  vertical-align: middle;
}

.propertyview-text:disabled {
  background-color: #f5f5f5;
}

.propertyview-dropdown {
  background-color: #ffffff;
}

.propertyview-dropdown:disabled {
  background-color: #f5f5f5;
}

.propertyview-input-div-container {
  width: 174px;
  float: right;
  margin-right: 20px;
}

.propertyview-input-div input, select {
  border-radius: 8px;
  border-color: #d2d6de;
  border-style: solid;
  border-width: 2px;
  box-shadow: none;
  font-size: 12px;
  height: 36px;
  width: 150px;
  padding: 6px 12px;
}

.selectize-control {
  margin: 0;
}

.selectize-input {
    border: 1px solid #f5f5f5;
    padding: 6px 12px;
    display: inline-block;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    box-shadow: none;
    border-radius: 4px;
    font-size: 12px;
}

.markerwhite {
 background-image: url('Markers/marker_white.png');
 background-size: cover;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 cursor: pointer;
}

.markerFromExternalSiteClass {
 background-image: url('https://image.flaticon.com/icons/svg/33/33622.svg');
 background-size: cover;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 cursor: pointer;
}


.main-panel {
  padding-top: 45px;
}

.btn {
  border-radius: 8px;
  height: 36px;
  font-size:14px;
  width: 245px;
  margin: 2px;
  background: #ffffff;
  background-color: #ffffff;
  border-color: #D20F4E;
}


  .btn-default.hover, .btn-default:active, .btn-default:hover {
    background-color: #d20f4e;
    color: #ffffff;
    border: transparent;
    position: static;
}

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover,
.open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
    background-color: #300C38;
    border-color: #EB4356;
    color: #ffffff;
    position: static;
}

.button.confirm, .button.confirm.active.focus {
    background-color: #D20F4E;
}

.btn-white {
  background-color: #ffffff;
}

.btn-primary {
    background: linear-gradient(90deg, #EB4356 0%, #EF7A56 100%);
    background-color: #b80735;
    border-color: #D20F4E;
    color: #ffffff;
    left: 592px;
    top: 647px;
}

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover,
.open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    background-color: #300C38;
    border-color: #EB4356;
    color: #ffffff;
    position: static;
    left: 592px;
    top: 647px;
}

.btn-transparent {
  color: #d20f42;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 10px;
}

.btn-transparent:hover {
  color: #d20f42;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 10px;
}


.btn-secondary {
  background-color: #ffffff;
}

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

.div-gbo-link {
  padding-bottom: 10px;
  padding-left: 10px;
}

.div-gbo-list {
  overflow-y: scroll;
  height: 50vh;
}


.div-filter-list {
  overflow-y: scroll; 
  height: 75vh;
}

.div-afsluiter-link {
  padding-bottom: 10px;
  padding-left: 10px;
}

.button_div_right {
  float:right;
  padding:0;
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
}

.form-overwrite {
    height: inherit;
    background-color: #ebebeb;
}

.form_blue_border input {
    border-radius: 8px;
    border: solid 1px #f5f5f5;
    height: 36px;
    font-size: 14px;
}

.progress {
  height: 21px;
  margin-bottom: 21px;
  margin-left: 40px;
  margin-right: 40px;
  background-color: #f5f5f5;
}

.form-control {
  border-radius: 8px;
}



.panel-default {
  border-color: #ffffff;
  border-radius: 8px;
}

.panel-default2 {
  border-color: #ffffff;
  border-radius: 8px;
  margin: auto;
  transform: translate(-50%, -50%);
}

/* Roy: ik heb alle panels oner elkaar gezet mogelijk vervolgstap is class wise te werken */

#panel_etn {
  background-color: #ffffff);
}

#panel_pwd {
  background-color: #ffffff;
}

#panel_left {
  background-color: #ffffff;
}

#panel_dropdown {
  background-color: #ffffff;
}
#panel_center {
  background-color: #ffffff;
}

/* DDLG */

.panel-default2 {
  border-color: #ffffff;
  border-radius: 8px;
  margin: auto;
  transform: translate(-50%, -50%);
}

.panel-title {
  font-family: EtelkaTextPro, Arial;
}

.side-panel-transparent {
  background-color: #ffffff;

  top: 45px;
  height: calc(100% - 45px);
}

.side-panel-big {
  width:800px;
  background-color: #ffffff;

  top: 45px;
  height: calc(100% - 45px);
}

.div-panorama {
  position: absolute;
  top: 45px;
  right: 0;
  width: 400px;
  z-index: 0;
}

.div-mapbox-full {
  position: absolute;
  top: 45px;
  bottom: 0;
  width: calc(100%);
  z-index: 0;
}

.div-login-full {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(windturbines.jpg);
  background-size:cover;
  margin: 0;
  padding: 0;
}

.geocoder {
  position:absolute;
  width:300px;
  left:110px;
  top:55px;
  z-index: 1;
}

.mapboxgl-ctrl-geocoder {
  min-width:100%; }
  body {
  margin: 0;
  padding: 0;
}

.legend {
    background-color: #fff;
    border-radius: 3px;
    bottom: 45px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    font: 12px/20px EtelkaTextPro;
    padding: 10px;
    position: absolute;
    left: 45px;
    z-index: 1;
}

.legend-extra {
    width: 100%;
    font: 12px/20px EtelkaTextPro;
    padding: 10px;
}

.legend-key {
  display: inline-block;
  border-radius: 20%;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}

.legend h4 {
    margin: 0 0 10px;
}

.legend div span {
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    margin-right: 5px;
    width: 10px;
}

.legend-extra h4 {
    margin: 0 0 10px;
}

.legend-extra div span {
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    margin-right: 5px;
    width: 10px;
}



/* define class fileinput_2 to hide inputTag in fileInput2 */
.fileinput_2 {
  width: 0.2px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.mapboxgl-canvas {
  left: 0;
}

/* ETN */

.vertical-flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  align-items: center;
}

.no-background {
  background-image:none;
}

#kaart_lcc_overzicht {
  height: calc(100vh - 45px) !important;
}

#leaflet_selectie_1 {
  height: calc(100vh - 300px) !important;
}

#leaflet_selectie_2 {
  height: calc(100vh - 300px) !important;
}

#leaflet_selectie_3 {
  height: calc(100vh - 300px) !important;
}

#leaflet_selectie_4 {
  height: calc(100vh - 300px) !important;
}

#leaflet_selectie_5 {
  height: calc(100vh - 300px) !important;
}

/* Onderstaande 2 opties sloopt de legenda toggle van plotly */
.plot-container .legend .traces .legendtoggle {
  display: none;
}

.plot-container .legend .traces .legendtext {
  cursor: default;
}

.input-group .input-group-btn .btn{
  margin-top: -1px;
  margin-right: 5px;
}

  /* Modal specifiek */

  .modal .modal-footer {
    display: none;
  }

  /* Maak tabs minder groot in tabsetpanels*/
  .nav-tabs > li {
    width: 50%;
  }
  
  .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    color: #d20f42;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-bottom-color: #d20f42;
    border-bottom-width: thin ;
    cursor: default;
}

  .nav > li {
    padding-bottom: 3px;
  }

 .nav-tabs > li > a {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 14px;
    color: #000000;
    background-color: #ffffff;
}


  .nav-pills > li {
    width: 180px;
  }
  
  .nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
    padding-top: 2px;
    padding-bottom: 2px;
    width: 180px;
    height: 50px;
    color: #d20f42;
    background-color: #e5e5e5;
    border-color: 1px solid #000000;
    cursor: default;
}


 .nav-pills > li > a {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 14px;
    color: #000000;
    background-color: #ffffff;
    width: 180px;
    height: 50px;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    border-top-color: #d20f42;
    background-color: #ffffff;
    color: #000000;
    width: 180px;
    height: 50px;
}


  .modal-body {
    padding: 0;
    padding-left: 15px;
    padding-right: 15px;
  }
  
.version-variant-modal {
    padding-top: 5px;
    padding-left: 15px;
    padding-right: 15px;
    height: 600px;
    width: 800px;
    background: white;
  }
  
  
.tooltip-inner {
text-align: left
}
  
  .quickscan-modal {
    padding-top: 5px;
    padding-left: 15px;
    padding-right: 15px;
    height: 600px;
    width: 800px;
    background: white;
  }
  
  .quickscan-scroll {
    overflow-y: scroll;
    height: 435px;
  }
  
    .quickscan-scroll-berekening {
    overflow-y: scroll;
    height: 479px;
  }
  
  .bodemonderzoek-modal{
    padding-top: 10px;
    height: 500px;
  }
  
  .secnet-modal{
    border-radius: 25px;
    padding-top: 10px;
    height: 500px;
  }

.verion-variant-footer {
  width: 800px;
  background: white;
}


  /* uitzondering voor shiny-modal (bij gebruik van modalDialog()) */
  #shiny-modal .modal-footer{
    display: block;
  }
  
  #shiny-modal .model-content{
    padding-bottom: 25px;
  }

  .modal .close {
    display: none;
  }

/* DDE */

/* Generic plot module*/
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* The Modal (background) */
.modal {
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

.modal-backdrop {
    /* bug fix - no overlay */
    display: none;
}

/* Dark popup */

.mapboxgl-popup-content {
    background-color: #202020;
    color: #fff;
    margin-left: 5px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 5px;
    z-index: 1000;
}

.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
    border-top-color: #202020;
}

.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
    border-bottom-color: #202020;
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: #202020;
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: #202020;
}

#popup-menu ul,
#menu li {
    margin: 0;
    padding: 0;
    z-index: 100;
}

/*Treeview CSS*/
.treeview-checkbox{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;margin:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;height:36px;}
.treeview-checkbox .caption,.treeview-checkbox .check{display:block;line-height:1;font-size:12px;margin:0 4px;position:relative;}
.treeview-checkbox .check{border:2px #d9d9d9 solid;width:20px;height:20px;-ms-flex-negative:0;flex-shrink:0;line-height:36px;}
.treeview-checkbox .check::before{position:absolute;vertical-align:middle;font-size:0;content:"";height:5px;width:10px;background-color:transparent;color:transparent;border-left:2px solid;border-bottom:2px solid;border-color:#fff;left:50%;top:50%;margin-left:-5px;margin-top:-4px;display:none;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.treeview-checkbox input{width:1px;height:1px;position:absolute;top:0;left:0;opacity:0;}
.treeview-checkbox input[type=checkbox]:checked~.check{border-color:#d20f42;background-color:#d20f42;}
.treeview-checkbox input[type=checkbox]:checked~.check::before{display:block;}
.treeview-checkbox input[type=checkbox]:disabled~.check{border-color:#e9e9e9;background-color:#e9e9e9;}
.treeview-checkbox input[data-indeterminate=true]~.check{border-color:#d20f42;background-color:#d20f42;}
.treeview-checkbox input[data-indeterminate=true]~.check::before{display:block!important;width:7px;height:7px;background-color:#fff;border:2px solid #fff;left:50%;top:50%;margin-left:-4px;margin-top:-3px;-webkit-transform:rotate(0);transform:rotate(0);}
.treeview-checkbox .check{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:15px;height:15px;}
.treeview-checkbox .caption{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;font-size:12px;}
.treeview{margin:0;padding:0 0 0 0px;font-size:.8125rem;list-style:none inside;display:block;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.treeview li{display:block;position:relative;padding:2px 0;cursor:pointer;line-height:1.25rem;}
.treeview li .caption{position:relative;}
.treeview li .node-toggle{position:relative;cursor:pointer;padding-right:1.5rem!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.treeview li .node-toggle::before{display:block;position:absolute;vertical-align:middle;color:transparent;font-size:0;content:"";height:.3125rem;width:.3125rem;background-color:transparent;border-left:1px solid;border-bottom:1px solid;border-color:#1d1d1d;top:50%;left:100%;margin-left:-1rem;margin-top:-.1625rem;z-index:2;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out;-webkit-transform-origin:center center 1px;transform-origin:center center 1px;}
.treeview li .node-toggle{position:absolute;left:0;top:0;-webkit-transform:translateX(-100%);transform:translateX(-100%);width:24px;height:24px;}
.treeview li .node-toggle::before{-webkit-transform:rotate(-135deg);transform:rotate(-135deg);}
.treeview li.expanded>.node-toggle::before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.treeview ul{margin:0 0 0 1rem;padding:0;list-style:none inside;display:block;position:relative;font-weight:400;}
.treeview li .treeview-checkbox,.treeview li .treeview-checkbox .caption,.treeview li .treeview-checkbox .check{line-height:1;}
.treeview li .treeview-checkbox{height:24px;}


/*Mapbox module*/
.div-mapbox-full-screen {
  position: absolute;
  left: 100px;
  top: 50px;
  bottom: 0;
  height:calc(100% - 50px);
  width: calc(100% - 100px);
  z-index: 0;
}

.div-print-paper {
  position: relative;
  width: 100%;
  height: 100%;
}

.geocoder-user-settings-map {
  position:absolute;
  width:275px;
  top:233px;
  left:50px;
}

.circle-div {
    width: 50px;
    height: 36px;
    display: inline-block;
    position: absolute;
    text-align: center;
    border-radius: 50%;
    background: #bbb;
}

.circle-div-done {
    width: 50px;
    height: 36px;
    display: inline-block;
    position: absolute;
    text-align: center;
    border-radius: 50%;
    background: #00a65a;
}


.div-user-settings-map {
  width: 100%;
  height: 350px;
}


.geocoder-user-settings-map {
  position:absolute;
}

.div-mapbox-left {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50%);
  z-index: 0;
}
.div-mapbox-right {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(50%);
  z-index: 0;
}
.div-mapbox {
  position: absolute;
  left: 0;
  top: 45px;
  bottom: 0;
  width: calc(100% - 400px);
  height: calc(100% - 45px);
  z-index: 0;
}

.div-mapbox-ddlg_user_settings {
  width: 100%;
  height: 350px;
}

.geocoder_user_settings {
  position:absolute;
  width:300px;
  top: 145px;
}


.div-mapbox-ddlg {
  position: absolute;
  left: 0;
  top: 45px;
  bottom: 0;
  width: calc(100% - 400px);
  height: calc(100% - 45px);
  z-index: 0;
}

.geocoder-left {
  position:absolute;
  width:300px;
  left:25px;
  top:55px;
  z-index: 1;
}
.geocoder-right {
  position:absolute;
  width:300px;
  padding-left: 25px;
  left:50%;
  top:55px;
  z-index: 1;
}

.side-panel-white {
  overflow-y: auto;
  background-color: #ffffff;
  width: 415px;
  top: 80px;
  height: calc(100% - 100px);
  right: 10px;
  padding: 10px;
  z-index:1;
}

.side-panel-white-VT {
  overflow-y: auto;
  background-color: #ffffff;
  width: 415px;
  top: 80px;
  height: calc(100% - 100px);
  right: 10px;
  padding: 10px;
  z-index:1;
	transition:300ms linear;
}

.side-panel-white-ddlg {
  overflow-y: auto;
  background-color: #ffffff;
  width: 415px;
  top: 45px;
  height: calc(100% - 45px);
  padding: 0.1px;
  right: 0;
  z-index:1;
}

.side-panel-white-left{
  overflow-y: auto;
  max-height:calc(100% - 45px);
  border-radius: 8px;
  right: -60px;
  margin-bottom: 55px;
  top: 50px;
  left: 43px;
  width: 300px;
  position: relative;
  background-color: #fff;
  padding: 15px;
  z-index:0;
}

.side-panel-white-left-VO{
  overflow-y: auto;
  max-height:calc(100% - 45px);
  border-radius: 8px;
  margin-bottom: 5px;
  top: 10px;
  left: 61px;
  width: 300px;
  position: relative;
  background-color: #fff;
  padding: 15px;
  z-index:0;
}

.cityplan-colour-panel{
  overflow: visible;
  max-height:calc(100% - 45px);
  width: 300px;
  border-radius: 8px;
  left: 43px;
  margin-top: 50px;
  position: relative;
  background-color: #fff;
  padding:15px;
  z-index:0;
}

.cityplan-colour-panel-VO{
  overflow: visible;
  max-height:calc(100% - 45px);
  width: 300px;
  border-radius: 8px;
  left: 61px;
  top: 10px;
  position: relative;
  background-color: #fff;
  padding:15px;
  z-index:0;
}

.cityplan-info-panel{
  border-radius: 8px;
  background-color: #fff;
  padding: 15px;
  z-index: 0;
  top: 29px;
  right: 430px;
  height: 530px;
  position: absolute;
  width: 300px;
}

.cityplan-info-panel-VO{
  border-radius: 8px;
  background-color: #fff;
  padding: 15px;
  z-index: 0;
  top: 80px;
  right: 430px;
  height: 560px;
  position: absolute;
  width: 300px;
}

.side-panel-white-right{
  overflow-y: auto;
  max-height:calc(100% - 45px);
  width: calc(20%);
  right: 10px;
  top:27px;
  z-index:1;
  background-color: #fff;
  padding:15px;
}


.current_layer-panel-white{
  overflow-x: auto;
  width: 415px;
  height:40px;
  right: 10px;
  top:45px;
  background-color: rgba(255,255,255,0.5);
  padding-left:15px;
  padding-top:8px;
  padding-right: 8px;
  z-index:1;
}


.drawing-panel{
  overflow-x: visible;
  padding-top:60px;
  width: 50px;
  height:100%;
  left: 50px;
  top:0;
  background-color: #f5f5f5;
  z-index:1;
  display:flex;
  justify-content:center;
}
.drawing-panel-left{
  overflow-x: visible;
  width: auto;
  height:auto;
  right: calc(50% + 400px);
  top:27px;
  z-index:1;
}
.drawing-panel-right{
  overflow-x: visible;
  width: auto;
  height:auto;
  right: 410px;
  top:27px;
  z-index:1;
}

.mapbox-draw-button{
  width: 30px;
  height: 30px;
  padding: 0 0;
  z-index:1;
  color: #272727;
  background-color:#f5f5f5;
  border-color:#f5f5f5;
  margin: 2px;
}

.btn-mapbox-dropdown-button{
  width: 30px;
  height: 30px;
  padding: 0 0;
  z-index:1;
  color: #272727;
  background-color:#f5f5f5;
  border-color:#f5f5f5;
  margin: 2px;
}

.maplayer-info-button {
    top: 50px;
    right:406px;
    position: absolute;
    padding: 0 0;
    width: 20px;
    color: #272727;
    height: 20px;
    z-index: 2;
    background-color: transparent;
    border-color: transparent;
    margin: 2px;
}

.maplayer-info-button:active {
    top: 50px;
    right:406px;
    position: absolute;
    padding: 0 0;
    width: 20px;
    color: #272727;
    height: 20px;
    z-index: 2;
    background-color: transparent;
    border-color: transparent;
    margin: 2px;
}

.maplayer-info-button:focus {
    top: 50px;
    right:406px;
    position: absolute;
    padding: 0 0;
    width: 20px;
    color: #272727;
    height: 20px;
    z-index: 2;
    background-color: transparent;
    border-color: transparent;
    margin: 2px;
}

.maplayer-info-button:hover {
    top: 50px;
    right:406px;
    position: absolute;
    padding: 0 0;
    width: 20px;
    color: #272727;
    height: 20px;
    z-index: 2;
    background-color: transparent;
    border-color: transparent;
    margin: 2px;
}

.maplayer-info-button.active.focus, .maplayer-info-button.active:focus, .maplayer-info-button.active:hover, .maplayer-info-button:active.focus, .maplayer-info-button:active:focus, .maplayer-info-button:active:hover, .open>.dropdown-toggle.maplayer-info-button.focus, .open>.dropdown-toggle.maplayer-info-button:focus, .open>.dropdown-toggle.maplayer-info-button:hover {
    top: 50px;
    right:406px;
    position: absolute;
    padding: 0 0;
    width: 20px;
    color: #272727;
    height: 20px;
    z-index: 2;
    background-color: transparent;
    border-color: transparent;
    margin: 2px;
}


.mapbox-draw-button:hover{
  width: 30px;
  height: 30px;
  padding: 0 0;
  z-index:5;
  color: #272727;
  background-color:#ffffff;
  border-color:#ffffff;
  margin: 2px;
}

.mapbox-draw-button:focus{
  width: 30px;
  height: 30px;
  padding: 0 0;
  z-index:5;
  color: #272727;
  background-color:#ffffff;
  border-color:#ffffff;
  margin: 2px;
}


.mapbox-draw-button:active{
  width: 30px;
  height: 30px;
  padding: 0 0;
  z-index:5;
  color: #272727;
  background-color:#ffffff;
  border-color:#ffffff;
  margin: 2px;
}

.mapbox-draw-button:active:hover{
  width: 30px;
  height: 30px;
  padding: 0 0;
  z-index:5;
  color: #272727;
  background-color:#ffffff;
  border-color:#ffffff;
  margin: 2px;
}


.collapse-button {
    width: 100px;
    height: 24px;
    float: right;
    margin-right: 15px;
    border-radius: 6px;
    font-size:smaller;
    text-align: center;
}

.collapse-button-current-layer {
    width: 100px;
    height: 24px;
    float: right;
    margin-right: 0px;
    border-radius: 6px;
    font-size:smaller;
    text-align: center;
    background-color: rgba(0,0,0,0);
    border-color: rgba(0,0,0,0);
}


.side-panel-white.collapsing{
    max-height: calc(100% - 100px) !important;
}

.side-panel-white-project-viewer{
  width: 415px;
  padding: 10px;
  right: 0px;
  z-index:1;
  overflow-y: auto;
  background-color: #ffffff;
  top: 45px;
  height: calc(100% - 45px);
}

/*for the the slider*/
.irs {
    height: 40px;
    margin-bottom: 8px;
}
.mapbox-slider-div
{
  padding-left: 20px;
}


.form-control[disabled],fieldset[disabled] .form-control {
  cursor: auto;
}

/*########################################################
          Start of CSS for testitem module
##########################################################*/
/*---------------Layout of the rows/columns---------------*/
.testItemColumn {
  float: left;
  width: 33.33%;
}
.testItemColumn-left {
  width: 70%;
}
.testItemColumn-center {
  width: 15%;
}
.testItemColumn-right {
  width: 15%;
}
/* Clear floats after the columns */
.testItemRow:after {
  content: "";
  display: table;
  clear: both;
}
/*---------------Layout of the checkbox---------------*/
/* The container */
.testItemContainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.testItemContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.testItemCheckmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ED2939;
}

/* When the checkbox is checked, add a blue background */
.testItemContainer input:checked ~ .testItemCheckmark {
  background-color: #50C878;
}

/* When the checkbox is checked, add a blue background */
.testItemContainer input:indeterminate ~ .testItemCheckmark {
  background-color: #FFD300;
}

/* Create the checkmark/indicator (hidden when not checked) */
.testItemCheckmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.testItemContainer input:checked ~ .testItemCheckmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.testItemContainer .testItemCheckmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*########################################################
                 End of testitem module
##########################################################*/


/*########################################################
          Start of CSS for team messsenger module
##########################################################*/
.team-member-container {
  display: flex;
  flex-wrap: wrap;
}

.team-member-container > div {
  position: relative;
  background-color: #ffffff;
  width: 60px;
  height: 60px;
  overflow:hidden;
  border-radius: 50%;
  margin: 5px;
}
.team-member-user {
  width: 100%;
  height: 100%;
}
/*########################################################
              End of team messsenger module
##########################################################*/
/* change color of the navbar menu */
.skin-blue .main-header .navbar {
  background-color: #ffffff;
}

.skin-blue .sidebar-menu> .active>a, .skin-blue .sidebar-menu>li:hover>a {
  color: #000000;
  background: #ffffff;
}

.skin-blue .sidebar-menu> .active>a {
  color: #000000;
  background: #ffffff;
}

.skin-blue .sidebar-menu>li.active>a, .skin-blue .sidebar-menu>li:hover>a{
  color: #d20f42;
  background: #ffffff;
  border-left-color: #d20f42;
}

/* increase left margin to allow for more logo text */
.sidebar-mini.sidebar-collapse .main-header .navbar {
    margin-left: 200px;
}

/* chang style of top left 'logo' panel */
.sidebar-mini.sidebar-collapse .main-header .logo {
  font-family: EtelkaTextPro, Arial;
  width: 200px;
  color: #d20f42;
  background-color: #ffffff ;
  text-align: left;
}

/* change style of sidebar */
.skin-blue .main-sidebar {
  background-color: #ffffff;
}

/* remove toggle button (allways collapse sidebar) */
.skin-blue .main-header .navbar .sidebar-toggle {
    display: none;
    background-color: #ffffff;
}

.mainloading-screen{
    width: calc(100vw + 100px);
    height: calc(100vh + 100px);
    background-color: #ffffff;
    left:-50px;
    top:-50px;
    z-index: 9000;
    position: fixed;
}


.mainloading-screen-spinner {
    height: 50px;
    position: absolute;
    top: calc(50% + 25px);
    left: calc(50% - 50px);
}


.mainloading-screen-text{
   font-family: EtelkaTextPro, Arial;
    font-size: 20px;
    position: absolute;
    color: #d20f42;
    width: 400px;
    left: calc(50% - 200px);
    top: calc(50% - 50px);
    text-align: center;
}

.mainnavigation-container{
    position: relative;
    overflow: hidden;
    width: 120px;
    height: 160px;
    left: calc(50vw + 50px - 60px);
    top: calc(50vh + 50px);
}

.loading-screen{
    width: calc(100vw + 100px);
    height: calc(100vh + 100px);
    background-color: rgba(255, 255, 255, 0.75);
    left:-50px;
    top:-50px;
    z-index: 100;
    position: absolute;
}


.loading-screen-spinner {
    height: 50px;
    position: absolute;
    top: 100px;
    left: calc(50% - 75px);
}


.loading-screen-text{
    position: absolute;
    color: #d20f42;
    width: 400px;
    left: 0px;
    top: 15px;
    text-align: center;
}

.navigation-window{
    width: 100%;
    height: calc(100vh - 50px);
    background-color: #fff;
    left:0;
    top:0;
    z-index: 100;
    position: relative;
}
.navigation-window-close-button{
    left:calc(50% - 100px);
    top:calc(100% - 50px);
    position: static;
}

.navigation-content{
  left:0;
  top:0;
  width:100%;
  height:calc(100% - 50px);
  background-color: #fff;
  overflow: auto;
  position: relative;
}
.navigation-container{
    position: relative;
    overflow: hidden;
    width: 80px;
    height: 160px;
    left: 150px;
    top: 75px;
}


/*Necessary code for animation on load screen*/
@media print{
*,:after,:before{background:0 0!important;color:#000!important;-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important;}
}
*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.ld.ld-spin{-webkit-animation:ld-spin 1s infinite;animation:ld-spin 1s infinite;}
/*! CSS Used keyframes */
@keyframes
ld-spin{0%{-webkit-transform:rotate(0);transform:rotate(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);animation-timing-function:cubic-bezier(.215,.61,.355,1);}to{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}
@-webkit-keyframes
ld-spin{0%{-webkit-transform:rotate(0);transform:rotate(0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg);animation-timing-function:cubic-bezier(.215,.61,.355,1);}to{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}



.ld.ld-bounce-px-ltr{-webkit-animation:ld-bounce-px-ltr 1s infinite linear;animation:ld-bounce-px-ltr 1s infinite linear;}
/*! CSS Used keyframes */
@keyframes ld-bounce-px-ltr{
  0%{-webkit-transform:translate(-80px,-20px);transform:translate(-80px,-20px);}
  12.5%{-webkit-transform:translate(-60px,-12px);transform:translate(-60px,-12px);}
  25%{-webkit-transform:translate(-50px,0);transform:translate(-50px,0);}
  37.5%{-webkit-transform:translate(-25px,-12px);transform:translate(-25px,-12px);}
  50%{-webkit-transform:translate(0,-20px);transform:translate(0,-20px);}
  62.5%{-webkit-transform:translate(25px,-12px);transform:translate(25px,-12px);}
  75%{-webkit-transform:translate(50px,0);transform:translate(50px,0);}
  87.5%{-webkit-transform:translate(60px,-12px);transform:translate(60px,-12px);}
  to{-webkit-transform:translate(80px,-20px);transform:translate(80px,-20px);}}
@-webkit-keyframes ld-bounce-px-ltr{
  0%{-webkit-transform:translate(-80px,-20px);transform:translate(-80px,-20px);}
  12.5%{-webkit-transform:translate(-60px,-12px);transform:translate(-60px,-12px);}
  25%{-webkit-transform:translate(-50px,0);transform:translate(-50px,0);}
  37.5%{-webkit-transform:translate(-25px,-12px);transform:translate(-25px,-12px);}
  50%{-webkit-transform:translate(0,-20px);transform:translate(0,-20px);}
  62.5%{-webkit-transform:translate(25px,-12px);transform:translate(25px,-12px);}
  75%{-webkit-transform:translate(50px,0);transform:translate(50px,0);}
  87.5%{-webkit-transform:translate(60px,-12px);transform:translate(60px,-12px);}
  to{-webkit-transform:translate(80px,-20px);transform:translate(80px,-20px);}}
/*End of necessary code for animation on load screen*/


.data-button-container{
  position:absolute;
  left:65px;
  top:65px;
  font-family:EtelkaTextPro, Arial;
}

.ontwerp_openedProjectContainer{
  position:absolute;
  left:420px;
  top:55px;
  width:calc(100% - 355px - 475px);
  z-index:1;
}
.ontwerp_DG_progress{
  position:absolute;
  left:80px;
  top:0px;
  height: 0px;
  width:1700px;
  z-index:2000;
  background:black;
}
.tipify{
  margin-bottom: -37px;
  margin-left: 50px;
  margin-top: 20px;
}



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

body {
  background: #455a64;
}

.loading-container {
  position: absolute;
  top: 60%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 2000px;
          perspective: 2000px;
  -webkit-transform: rotateX(-30deg) rotateY(-45deg);
          transform: rotateX(-30deg) rotateY(-45deg);
}

.loading-holder {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translate3d(0em, 3em, 1.5em);
          transform: translate3d(0em, 3em, 1.5em);
}
.loading-holder:last-child {
  -webkit-transform: rotateY(-90deg) rotateX(90deg) translate3d(0, 3em, 1.5em);
          transform: rotateY(-90deg) rotateX(90deg) translate3d(0, 3em, 1.5em);
}
.loading-holder:first-child {
  -webkit-transform: rotateZ(-90deg) rotateX(-90deg) translate3d(0, 3em, 1.5em);
          transform: rotateZ(-90deg) rotateX(-90deg) translate3d(0, 3em, 1.5em);
}
.loading-holder:nth-child(1) .loading-box {
  background-color: #d21242;
}
.loading-holder:nth-child(1) .loading-box:before {
  background-color: #740a24;
}
.loading-holder:nth-child(1) .loading-box:after {
  background-color: #a30e33;
}
.loading-holder:nth-child(2) .loading-box {
  background-color: #e5384c;
}
.loading-holder:nth-child(2) .loading-box:before {
  background-color: #a21525;
}
.loading-holder:nth-child(2) .loading-box:after {
  background-color: #cf1b30;
}
.loading-holder:nth-child(3) .loading-box {
  background-color: #ea754f;
}
.loading-holder:nth-child(3) .loading-box:before {
  background-color: #bd3f16;
}
.loading-holder:nth-child(3) .loading-box:after {
  background-color: #e55121;
}

.loading-box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: ani-box 6s infinite;
          animation: ani-box 6s infinite;
  width: 3em;
  height: 3em;
}
.loading-box:before, .loading-box:after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
}
.loading-box:before {
  left: 100%;
  bottom: 0;
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
}
.loading-box:after {
  left: 0;
  bottom: 100%;
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}

@-webkit-keyframes ani-box {
  8.33% {
    -webkit-transform: translate3d(-50%, -50%, 0) scaleZ(2);
            transform: translate3d(-50%, -50%, 0) scaleZ(2);
  }
  16.7% {
    -webkit-transform: translate3d(-50%, -50%, -3em) scaleZ(1);
            transform: translate3d(-50%, -50%, -3em) scaleZ(1);
  }
  25% {
    -webkit-transform: translate3d(-50%, -100%, -3em) scaleY(2);
            transform: translate3d(-50%, -100%, -3em) scaleY(2);
  }
  33.3% {
    -webkit-transform: translate3d(-50%, -150%, -3em) scaleY(1);
            transform: translate3d(-50%, -150%, -3em) scaleY(1);
  }
  41.7% {
    -webkit-transform: translate3d(-100%, -150%, -3em) scaleX(2);
            transform: translate3d(-100%, -150%, -3em) scaleX(2);
  }
  50% {
    -webkit-transform: translate3d(-150%, -150%, -3em) scaleX(1);
            transform: translate3d(-150%, -150%, -3em) scaleX(1);
  }
  58.3% {
    -webkit-transform: translate3d(-150%, -150%, 0) scaleZ(2);
            transform: translate3d(-150%, -150%, 0) scaleZ(2);
  }
  66.7% {
    -webkit-transform: translate3d(-150%, -150%, 0) scaleZ(1);
            transform: translate3d(-150%, -150%, 0) scaleZ(1);
  }
  75% {
    -webkit-transform: translate3d(-150%, -100%, 0) scaleY(2);
            transform: translate3d(-150%, -100%, 0) scaleY(2);
  }
  83.3% {
    -webkit-transform: translate3d(-150%, -50%, 0) scaleY(1);
            transform: translate3d(-150%, -50%, 0) scaleY(1);
  }
  91.7% {
    -webkit-transform: translate3d(-100%, -50%, 0) scaleX(2);
            transform: translate3d(-100%, -50%, 0) scaleX(2);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0) scaleX(1);
            transform: translate3d(-50%, -50%, 0) scaleX(1);
  }
}

@keyframes ani-box {
  8.33% {
    -webkit-transform: translate3d(-50%, -50%, 0) scaleZ(2);
            transform: translate3d(-50%, -50%, 0) scaleZ(2);
  }
  16.7% {
    -webkit-transform: translate3d(-50%, -50%, -3em) scaleZ(1);
            transform: translate3d(-50%, -50%, -3em) scaleZ(1);
  }
  25% {
    -webkit-transform: translate3d(-50%, -100%, -3em) scaleY(2);
            transform: translate3d(-50%, -100%, -3em) scaleY(2);
  }
  33.3% {
    -webkit-transform: translate3d(-50%, -150%, -3em) scaleY(1);
            transform: translate3d(-50%, -150%, -3em) scaleY(1);
  }
  41.7% {
    -webkit-transform: translate3d(-100%, -150%, -3em) scaleX(2);
            transform: translate3d(-100%, -150%, -3em) scaleX(2);
  }
  50% {
    -webkit-transform: translate3d(-150%, -150%, -3em) scaleX(1);
            transform: translate3d(-150%, -150%, -3em) scaleX(1);
  }
  58.3% {
    -webkit-transform: translate3d(-150%, -150%, 0) scaleZ(2);
            transform: translate3d(-150%, -150%, 0) scaleZ(2);
  }
  66.7% {
    -webkit-transform: translate3d(-150%, -150%, 0) scaleZ(1);
            transform: translate3d(-150%, -150%, 0) scaleZ(1);
  }
  75% {
    -webkit-transform: translate3d(-150%, -100%, 0) scaleY(2);
            transform: translate3d(-150%, -100%, 0) scaleY(2);
  }
  83.3% {
    -webkit-transform: translate3d(-150%, -50%, 0) scaleY(1);
            transform: translate3d(-150%, -50%, 0) scaleY(1);
  }
  91.7% {
    -webkit-transform: translate3d(-100%, -50%, 0) scaleX(2);
            transform: translate3d(-100%, -50%, 0) scaleX(2);
  }
  100% {
    -webkit-transform: translate3d(-50%, -50%, 0) scaleX(1);
            transform: translate3d(-50%, -50%, 0) scaleX(1);
  }
}