/* Site-specific styles */
body { background-color: #f3faf4; font-family: 'Open Sans', sans-serif; }

/* header.navbar.navbar-default  */
.navbar { background: #007558; border: none; border-radius: 0; min-height: 100px; margin-bottom: 0; }
.navbar .navbar-brand { height: auto; }
.navbar .navbar-collapse { float: right; }
.navbar .navbar-nav { margin-top: 2em; font-size: 15px; }
.navbar .navbar-nav li a { color: white; padding: 5px; margin: 10px; background-color: transparent; }
.navbar .navbar-nav li.active a, .navbar .navbar-nav li:hover a { border-bottom: 3px solid #00a77e; background-color: transparent !important; color: white !important; }
.navbar .navbar-nav li:hover li a { border-bottom: none; }
.navbar .navbar-nav li.open a { background-color: transparent; color: white; }
.navbar .navbar-nav li .dropdown-menu { font-size: 15px; padding: 0; }
.navbar .navbar-nav li .dropdown-menu li a { color: #00533f !important; margin: 0 10px; padding: 10px; border-bottom: none !important; }
.navbar .navbar-nav li .dropdown-menu li:hover { background-color: #f3faf4 !important; }
.navbar .navbar-nav li .dropdown-menu li:hover a { border-bottom: none !important; }
.navbar .navbar-nav li .dropdown-menu li.active a { border-bottom: none !important; }

.form-horizontal .control-label { text-align: left; }

.loginform { width: 50%; margin: 0 auto; }
.loginform .loginbtn { margin-top: 40px; }
.loginform .loginbtn .btn { margin-right: 10px; }

.contact-gebruik { padding: 20px; border: 1px solid #d9d9d7; }

#canvas { background-color: white; margin-top: 0; padding: 2em; min-height: 400px; position: relative; }
#canvas p { font-size: 15px; line-height: 1.5em; margin: 20px 0; }
#canvas form p { margin: 0 0 5px 0; }

footer { height: 300px; margin: 1.5em 0 2em 0; font-size: 0.9em; background: url("../img/footer-vbnbeheer.png") no-repeat bottom center; /* background-color: black; color: white; padding: 2em 0; */ }
footer p { font-size: 16px; color: white; margin: 170px 0 0 0px; }

/* typografie */
h1 { font-size: 2.5em; color: #00533f; }

.naasth1 { position: absolute; top: 20px; right: 30px; }
.naasth1 .fa { margin-right: 7px; }

h2 { font-size: 1.5em; color: #00533f; }

/* helper classes */
.clear { clear: both; }

.hidden { display: none; }

.klein { font-size: 0.9em !important; }

.overfl { overflow: auto; }

.ruim { margin: 3em 0; }

.subtiel { color: silver; }

.alarm { color: red; }

a.overlay { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; }

a.overlay span { display: none; }

a { color: #007558; }

a.passief i { color: silver; }

.alert-info { background-color: #f3faf4; border: 1px solid #ebf6ed; color: inherit; }

.alert-danger a { color: inherit; text-decoration: underline; }

/* forms */
form fieldset { position: relative; margin-top: 10px; height: auto; background-color: #f5f5f5; border-top: none; margin-bottom: 3em; padding: 80px 20px 20px 20px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }
form fieldset legend { position: absolute; top: 0px; left: 0px; right: 0px; font-size: 1.2em; font-weight: bold; border-bottom: 2px solid white; text-transform: uppercase; /* background: $groen20; color: white; */ padding: 15px 20px; color: #007558; }
form .intro { color: #8F9596; font-size: 0.9em; margin-top: 0; }
form .fa-star { font-size: 8pt; color: silver; }

.btn-primary { background-color: #007558; border: 1px solid #007558; }

.progress-bar[aria-valuenow="1"], .progress-bar[aria-valuenow="2"] { min-width: 3%; }

.progress-bar[aria-valuenow="0"] { color: silver; min-width: 3%; }

.form-group { position: relative; }

.ui-state-error { border: 1px solid maroon; /* & + span	{content: "\f06a"; font-family: FontAwesome; color: black; border: 1px solid blue; 
	display: block; position: absolute; right: 20px; top: 6px; width: 20px; height: 20px;} */ }

.form-inline.well { box-shadow: none; border: 1px solid #f5f5f5; border-width: 2px 0; border-radius: 0; background: none; padding: 10px 0; clear: both; margin-top: 30px; }

.form-inline .chosen-container { min-width: 150px; }

.form-inline .form-group.breed .chosen-container { min-width: 300px; }

.form-control.disabled { background: none; border: none; box-shadow: none; width: 30%; display: inline-block; }

/* lijsten */
.table { margin-top: 2em; }

.label-vogelweek { background-color: #007558; }

.label-gruttoweekend { background-color: #00a77e; }

/* door de maintenance toegekend bij uitlijnen imgs. 
plaats desgewenst andere padding of borders. */
.imgmid { margin: 10px auto 10px auto; }

.imglinks { float: left; margin: 0 10px 10px 0; }

.imgrechts { float: right; margin: 0 0 10px 10px; }

.imgcenter { text-align: center; }

.imgcontainer { position: relative; display: block; }
.imgcontainer em { position: absolute; bottom: 0; left: 0; right: 0; padding: 3px 5px; font-size: 0.9em; background-color: rgba(255, 255, 255, 0.7); }

/* weergave iframes en video */
.video-container, .map-container { border: medium none; height: 0; margin: 0 0 15px; overflow: hidden; padding-bottom: 51%; padding-top: 30px; position: relative; }

.video-container iframe, .map-container iframe, .map-container object, .map-container embed, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

iframe { border: medium none; }

/* bladeren */
.pagination li a { color: #00a77e; }
.pagination li a:hover { color: #007558; }
.pagination li.active a { color: white; background-color: #00a77e; border-color: #00a77e; }
.pagination li.active a:hover { background-color: #007558; }

/* uitlijning elementen */
.mb0 { margin-bottom: 0px; }

.mb10 { margin-bottom: 10px; }

.mb20 { margin-bottom: 20px; }

.mb30 { margin-bottom: 30px; }

.mb40 { margin-bottom: 40px; }

.mb50 { margin-bottom: 50px; }

.mt0 { margin-top: 0px; }

.mt10 { margin-top: 10px; }

.mt20 { margin-top: 20px; }

.mt30 { margin-top: 30px; }

.mt40 { margin-top: 40px; }

.mt50 { margin-top: 50px; }

/* module specifieke styling */
#excursies.adminview .btn-default span, #excursies:not(.adminview) .nrs { display: none; }

.well { border: none; box-shadow: none; background-color: #ebf6ed; }

.welkomstekst h2 { margin: 10px 0 20px 30px; font-size: 24px; }
.welkomstekst h3 { font-size: 20px; }
.welkomstekst .well { width: 85%; margin: 20px auto; border-radius: 6px; }
.welkomstekst ul { list-style: none; }
.welkomstekst ul li { margin: 8px 0; }
.welkomstekst ul li:before { content: '\f0da'; font-family: 'fontawesome'; margin-left: -10px; padding-right: 5px; color: #007558; }
.welkomstekst .datum { color: #00533f; font-weight: bold; display: block; margin-bottom: 5px; }

body #gegevens-disclaimer h2 { font-size: 1.3em; margin-top: 0; }
body #gegevens-disclaimer p { font-size: 0.9em; }

#app { margin-top: 40px; }
#app table { margin-top: 0; }
#app .col:not(.col-video) { height: 500px; overflow: auto; }
#app .col:not(.col-video)::-webkit-scrollbar { display: none; }
#app .col-soorten ul { list-style: none; padding-left: 5px; }
#app .col-soorten ul li { font-size: 90%; padding: 0 5px; border-radius: 4px; line-height: 1.6em; color: #666; cursor: pointer; }
#app .col-soorten ul li.active { position: relative; background-color: #ededed; font-weight: bold; text-transform: uppercase; }
#app .col-soorten ul li.active:after { content: '\000BB'; position: absolute; right: 5px; }
#app .col-files .loader { width: 64px; height: 64px; margin: auto; margin-top: 100px; background-image: url("/media/img/preloader.gif"); }
#app .col-files .no-files { width: 80%; padding: 20px; border: 1px solid #dedede; background-color: #fdfdfd; border-radius: 4px; text-align: center; margin: 0 auto; margin-top: 55px; }
#app .col-files .actions span { display: block; float: left; margin-left: 10px; padding-top: 3px; width: 20px; height: 20px; cursor: pointer; }
#app .col-files .actions span .glyphicon { margin-left: 20px; }
#app .col-video table { margin-top: 10px; }
#app .col-video td, #app .col-video th { border: 0; }

/* Media-queries */
/* Large desktop */
@media (max-width: 1200px) { .loginform { width: 75%; }
  .loginform .loginbtn { text-align: right; }
  .loginform .loginbtn .btn { margin-bottom: 10px; }
  .navbar .container { width: 100%; padding: 0; }
  .navbar .container .navbar-brand { margin-left: 25px !important; }
  .navbar .container .navbar-brand img { width: 120px; } }
/* Alle non-desktops */
@media (max-width: 991px) { .navbar .navbar-nav { margin-top: 1em; }
  .navbar .navbar-nav li a { padding-left: 20px; margin: 5px; }
  .navbar .navbar-toggle { border-color: #f3faf4; border: none; background-color: #00a77e; padding: 14px; margin: 20px 40px; }
  .navbar .navbar-toggle .icon-bar { background-color: #ebf6ed; }
  .navbar .navbar-toggle:hover, .navbar .navbar-toggle:active { background-color: #00533f; }
  .navbar .navbar-collapse.in { display: block !important; background-color: #00a77e; overflow-y: auto; margin: 18px 0; padding: 0; width: 100% !important; border: none; z-index: 1000001; float: left; }
  .navbar .navbar-collapse.in .navbar-nav { margin: 0 !important; }
  .navbar .navbar-collapse.in .navbar-nav li { border-bottom: 1px solid rgba(235, 246, 237, 0.5); }
  .navbar .navbar-collapse.in .navbar-nav li a { line-height: 28px; border: none; }
  .navbar .navbar-collapse.in .navbar-nav li:hover { background-color: rgba(235, 246, 237, 0.5); }
  .navbar .navbar-collapse.in .navbar-nav li:hover a { border: none; }
  .navbar .navbar-collapse.in .navbar-nav li li { background-color: #ebf6ed; padding-left: 30px; } }
/* Portrait tablet to landscape and desktop */
@media (max-width: 767px) { #canvas { position: static !important; }
  .welkomstekst .well { width: 100%; }
  .loginform { width: 100%; }
  .form-horizontal .btn { margin-bottom: 20px; } }
/* Styles voor printen */
@media print { #menu, #header, header, #crumbs, .nav, .navbar, #footer, footer, #sidebar, a.verborgen, .dummy, .meta, .noprint { display: none; visibility: collapse; }
  #content, .printonly { border: none; width: 100%; margin: auto; }
  a { color: black; text-decoration: none; }
  th { text-align: left; }
  .links { float: left; }
  .rechts { float: right; }
  .imglinks { float: left; margin: 0 10px 10px 0; }
  .imgrechts { float: right; margin: 0 0 10px 10px; }
  a[href]:after, abbr[title]:after { content: ""; }
  .tab-content > .tab-pane, .pill-content > .pill-pane { display: block; } }