@import "cbs_variables.css";s

body {
  letter-spacing: var(--cbs-letter-spacing);
  padding-top: 56px !important;
}

h1 {
  color: var(--zoo-red-primairy); 
  font-size: 18pt;
  line-height: 1.3;
}

h2 {
	color: var(--zoo-red-dark1);
	  font-size: 16pt;
	  line-height: 1.3;
}

h3 {
	color: var(--zoo-red-dark2);
	  font-size: 14pt;
	  line-height: 1.3;
}

h4 {
	color: var(--zoo-red-dark3);
	  font-size: 12pt;
	  line-height: 1.3;
}

h5, h6 {
  	color: var(--zoo-red-dark3);
	  line-height: 1.3;
}

/* Maximale breedte van een paragraaf
p, ol, ul {
  max-width: 900px;
}*/

p {
	    margin-bottom: var(--spacing-regular)!important;
}

/* padding container volgens gutter */
.container, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
  padding-right: var(--bs-gutter-x);
  padding-left: var(--bs-gutter-x);
  padding-top: 25px !important;
  margin-top: 80px;
  margin-bottom: 150px;
}

.main {
  padding-top: 25px !important;
}

/* menu navbar subitems border */
.dropdown-menu {
  border: 0;
}


/* focus en active box 
:is(button, input, textarea, summary):focus, active {
  box-shadow: 0 0 0 .25rem var(--zoo-white), 0 0 0 .50rem var(--cbs-web-text) !important;
} */

/* breedte text */
@media (min-width: 1400px) {
    .bslib-page-main {
        max-width: 1140px;
    }
}

/* styling module tonen en downloaden data */
.module_data{
  margin-bottom: 0px;
}

.module_data_button {
  margin-right: 16px;
}


/* navbar */
.navbar-brand > img {
  width: var(--cbs-brand_width);
}

.navbar{
  border-bottom: 1px solid var(--cbs-light-gray) !important;
  padding: 0px var(--bs-navbar-padding-x);
}

.navbar-nav {
  max-width: 1320px!important;
  margin-bottom: 10px;
}

.nav-link, .nav-link:hover {
  box-shadow: unset !important;
  font-size: var(--font-size-regular);
  font-family: var(--font-family-text);
  color: var(--zoo-blue-dark2);
}

.navbar-nav .nav-link.active, .navbar-nav .nav-tabs>li>a.active, .navbar-nav .nav-pills>li>a.active, .navbar-nav :where(ul.nav.navbar-nav > li)>a.active, .navbar-nav .nav-link.show, .navbar-nav .nav-link.in, .navbar-nav .nav-tabs>li>a.show, .navbar-nav .nav-tabs>li>a.in, .navbar-nav .nav-pills>li>a.show, .navbar-nav .nav-pills>li>a.in, .navbar-nav :where(ul.nav.navbar-nav > li)>a.show, .navbar-nav :where(ul.nav.navbar-nav > li)>a.in {
    color: var(--zoo-blue-dark2);
}

.dropdown-menu>li>a {
  color: var(--zoo-blue-dark2);
}

/* tabset */
.nav-tabs {
	margin-bottom: 25px;
    --bs-nav-tabs-link-active-color: var(--zoo-blue-dark2); 
    --bs-nav-tabs-link-active-bg: var(--zoo-white);
    --bs-nav-tabs-border-color: var(--zoo-blue-dark2);
    --bs-nav-tabs-link-active-border-color: var(--zoo-blue-dark2) var(--zoo-blue-dark2) var(--zoo-blue-dark2);
    border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}

/*.nav-tabs>li>a {
	margin-right: 5px;
	border: 1px solid var(--zoo-blue-dark2)!important;
}*/

.nav-tabs>li>a {
	margin-right: 5px;
	border-width: 1px 1px 0px 1px !important;
	border-style: solid !important;
	border-color: var(--zoo-blue-dark2)!important;
	background-color: var(--zoo-blue-dark2);
	color: var(--zoo-white);
}

.nav-tabs>li>a:active {
	border: 0px;
	color: var(--zoo-blue-dark2)!important;
	background-color: var(--zoo-white)!important;
}

.nav-tabs>li>a:hover {
  color: var(--zoo-blue-dark2)!important;
  background-color: var(--zoo-white)!important;
}

.nav-tabs>li>a:focus {
	border: 3px solid black;
	color: var(--zoo-blue-dark2)!important;
	background-color: var(--zoo-white)!important;
}


/* intro page */
.foto_home {
  margin-bottom: var(--spacing-large);
  width: 100%;
}

/* Leaflet */
.legend i {
  margin: 1px;
}


.form-group {
    margin-bottom: var(--spacing-regular);
}

.icon-bar {
  background-image: url("/cbsstyling/icons/hamburger.svg") !important;
}


/* Sidebar */
.sidebar {
  overflow: visible !important;
}

/* close button */
.btn-close {
    top: .75rem !important;
    right: .5rem !important;
    z-index: 2 !important;
    padding: .5rem !important;
}

/* Componenten ####################*/

/* Card */
.bslib-card {
  box-shadow: none;
  border-color: var(--zoo-border-color);
}

.card {
  overflow: visible !important;
}

.card-header {
	  border-color: var(--zoo-border-color);
}

.card-body {
  overflow: visible !important;
}

.bslib-gap-spacing {
	gap: unset;
}

/* Accordion */
.accordion{
  margin-bottom: var(--spacing-regular);
}

.accordion-button {
  border: 1px solid !important;
  background-color: var(--zoo-blue-dark2)!important;
	color: var(--zoo-white)!important;
  border-radius: var(--zoo-border-radius) !important;
  border-color: var(--zoo-border-color);
  font-family: var(--font-family-text);
  font-size: var(--font-size-medium);
  font-weight: 400 !important;
  padding: 20px 16px;
  margin-bottom: 20px;
}
.accordion-item {
  margin-top: var(--spacing-regular);
}

.accordion-icon {
	margin-right: 10px;
}

.accordion-button:hover {
  background-color: var(--zoo-white)!important;
  color: var(--zoo-border-color)!important;
}

.accordion-button:active {
  color: var(--zoo-white);
  background-color: var(--zoo-border-color);
}

.accordion-button:hover::after {
   background-image: url("/cbsstyling/icons/chevron-white.svg") !important;
}

/* banner */
.alert .alert-header {
    display: flex;
    align-items: flex-start;
}
.alert .alert-content {
    padding-left: 2rem;
    color: var(--cbs-web-text);
}
.alert .alert-header h2 {
    margin-top: 0;
    font-size: var(--font-size-regular);
    font-family: var(--font-family-text);
    color: var(--cbs-web-text);
}
.alert .alert-header i {
    display: inline-block;
    margin-top: 0;
    height: 1rem;
    width: 1.25rem;
}
.alert .alert-header span {
    display: inline-block;
    width: 2rem;
    min-width: 2rem !important;
}


.circle-alert-info {background: url(../cbsstyling/icons/circle-alert-info.svg) 0 0 no-repeat;}
.triangle-alert-error {background: url(../cbsstyling/icons/triangle-alert-error.svg) 0 0 no-repeat;}
.circle-alert-warning {background: url(../cbsstyling/icons/circle-alert-warning.svg) 0 0 no-repeat;}
.circle-alert-success {background: url(../cbsstyling/icons/circle-alert-success.svg) 0 0 no-repeat;}
.alert-info {
    background: #ddedf1;
    border-color: var(--cbs-dark-aqua);
}
.alert-success {
    background: #eaf0e3;
    border-color: var(--cbs-dark-green);
}
.alert-warning {
    background: #f5ecdd;
    border-color: var(--cbs-orange);
}
.alert-danger {
    background: #f4e0e1;
    border-color: var(--cbs-red);
}


/* Modal alert */
.modal-title {
  width: 100%;
}
.modal-info{
  position: relative;
  font-size: var(--font-size-extra-large);
}
.modal-info .btn-close {
  position: absolute;
  top: 0px !important;
}
.modal-header {
  color:var(--cbs-dark-aqua);
}
.modal-body {
  padding: var(--spacing-small) var(--spacing-large) var(--spacing-large) !important;
}

/* groote van modal als je size op xl zet */
.modal-xl {
	--bs-modal-width: 90% !important;
}

/* slider */
.irs-single {
  background-color: var(--cbs-dark-aqua) !important;
  color: var(--zoo-white) !important;
}
.irs-bar {
  background-color: var(--cbs-dark-aqua) !important;
}
.irs-handle {
  background-color: var(--cbs-dark-aqua) !important;
}
.slider-animate-button {
  opacity: 1;
  color: var(--cbs-dark-aqua);
}

/* Button */
.btn {
  margin-bottom: var(--spacing-smaller);
}

.btn-default {
  color: var(--zoo-white);
  background-color: var(--zoo-blue-dark2);
  border-color: var(--zoo-border-color);
  min-height: 37px;
}

.btn-default:hover,
.btn-default:active {
  background-color: var(--zoo-white)!important;
  color: var(--zoo-blue-dark2)!important;
  border-color: var(--zoo-border-color)!important;
}

.btn:disabled, .btn.disabled{
  background-color: var(--zoo-white);
  color: var(--zoo-blue-dark2);
  border-color: var(--zoo-border-color);
  opacity: 1;
}

.btn-secondary {
  color: var(--zoo-white);
  background-color: var(--zoo-blue-dark2);
  border-color: var(--zoo-border-color);
}

.btn-secondary:disabled, .btn-secondary.disabled {
 background-color: var(--zoo-white);
  color: var(--zoo-blue-dark2);
  border-color: var(--zoo-border-color);
  opacity: 1;
}

.btn-secondary:hover,
.btn-secondary:active  {
  background-color: var(--zoo-white)!important;
  color: var(--zoo-blue-dark2)!important;
  border-color: var(--zoo-border-color)!important;
}

/*Date input*/
.shiny-date-input > input {
  color: var(--cbs-dark-gray);
}


/*Dropdown selection button */
.form-label, .shiny-input-container .control-label {
    margin-bottom: 12px;
    font-weight: bold;
}
.form-label, .shiny-input-container .control-label .hint{
    font-weight: normal;
}

.shiny-input-container button {
    padding: 6px 12px;  /* bewust geen 18.5px padding, veel te groot */
    background-color: var(--zoo-blue-dark2);
    color: var(--zoo-white);
    border-color: var(--zoo-border-color);
}

.shiny-input-container button:hover, focus, active {
  color: var(--zoo-blue-dark3);
  border-color: var(--cbs-web-text);
  background-color: var(--zoo-white);
  border-color: var(--zoo-border-color);
}

.bs-placeholder,
.bs-placeholder:active {
  color: var(--zoo-white)!important;
}

.bs-placeholder:focus,
.bs-placeholder:hover {
  color: var(--zoo-blue-dark3)!important;
}

.bootstrap-select .dropdown-toggle:focus {    
    outline: unset !important;
    outline-offset: unset;
}

.btn-light {
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--cbs-web-text);
}

.btn-light:disabled {
  background-color: var(--zoo-white);
  color: var(--zoo-blue-dark2);
  border-color: var(--zoo-border-color);
  opacity: 1;
}

.btn-light:disabled::after {
  color: var(--zoo-white);
}

.shiny-input-container .dropdown-menu {
  color: var(--zoo-blue-dark2);
  background-color: var(--zoo-white);
  border: 1px solid var(--zoo-border-color);
  border-radius: var(--cbs-border-radius);
  max-height: 300px;
  z-index: 9999;
} 

.dropdown-menu > li.active > a {
  color: var(--zoo-white);
  background-color: var(--zoo-blue-dark2);
  text-decoration: none;
}

.bs-searchbox {
  margin-bottom: var(--spacing-regular);
}

/*Dropdown selection button - selectizeInput*/
.selectize-input {
	padding: 6px 12px!important;
	color: var(--zoo-white)!important;
	background-color: var(--zoo-blue-dark2) !important;
	border-color: var(--zoo-border-color) !important;
}

.selectize-control.single .selectize-input:not(.no-arrow):after {
  border-color: var(--zoo-white) transparent transparent transparent !important;
}

.selectize-input:hover {
	padding: 6px 12px!important;
	color: var(--zoo-blue-dark2)!important;
	background-color: var(--zoo-white)!important;
	border-color: var(--zoo-border-color) !important;
}

.selectize-control.single:hover .selectize-input:not(.no-arrow):hover:after {
  border-color: var(--zoo-blue-dark2) transparent transparent transparent !important;
}


.selectize-input.disabled {
	padding: 6px 12px!important;
	background-color: var(--zoo-white)!important;
	color: var(--zoo-blue-dark2) !important;
	border-color: var(--zoo-border-color) !important;
	opacity: 1!important;
}

.selectize-dropdown-content {
  color: var(--zoo-blue-dark2)!important;
  border: 1px solid var(--zoo-border-color)!important;
  border-radius: var(--cbs-border-radius)!important;
  padding-top: 8px!important;
  padding-bottom: 8px!important;
  max-height: 300px;
  z-index: 9999;
}

/* szla: selectize-dropdown-option is een zelf aangemakte css class
en toegevoegd in js/utils.js. deze word dus actief als jde de 'options = list(render = I("ZoO.item_render"))'
toegevoegd aan de selectizeInput() functie*/

.selectize-dropdown-options {
  padding: 4px 16px 4px 16px;
  font-size: var(--font-size-regular);
}

.selectize-dropdown-options.selected {
  background-color: var(--zoo-blue-dark2)!important;
}

.selectize-control.multi .selectize-input.has-items {
  padding: 1px 12px 2px;
}

/* inputs */

.form-check-input:checked, 
.shiny-input-container 
.checkbox input:checked, 
.shiny-input-container 
.checkbox-inline input:checked, 
.shiny-input-container 
.radio input:checked, 
.shiny-input-container 
.radio-inline input:checked {
    background-color: var(--zoo-blue-dark2)!important;
    border-color: var(--zoo-blue-dark2) !important;
}

.form-check-input,
.shiny-input-container
.checkbox input,
.shiny-input-container
.checkbox-inline input, 
.shiny-input-container 
.radio input, 
.shiny-input-container 
.radio-inline input {
    border: var(--bs-border-width) solid var(--zoo-border-color)!important;
}

/* font-styling */
.text_b {
  font-weight: var(--font-weight-bold);
}
.text_i {
  font-style: italic;
}
.text_u {
  text-decoration: underline;
}

a {
	color: var(--zoo-blue-dark2);
}
a:hover {
	color: var(--zoo-blue-dark1);
}