@font-face {
  font-family: 'Open Sans';
  src: url('~/.fonts/OpenSans-Regular.ttf') format('truetype');
}

text {
  font-family: Open Sans !important;
}

.indicatortekst {
  font-size: 1rem; 
  text-align: center;
  line-height: 2.5rem;
}

.indicatortitel {
  font-size: 1rem;
  text-align: center; 
  line-height: 2.5rem;
  font-weight: 700;
}

body, .btn, .dropdown-menu, .jstree {
  font-size: 1rem;
  line-height: 2.5rem;
  font-family: Open Sans !important;
}

.selected {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  font-weight: 700 !important;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
  background-color: #C8D2C87F;
  border-top-color: #C8D2C87F;
  color: #000000;
}

.nav-tabs-custom>.nav-tabs>li.active>a {
  background-color: #C8D2C87F !important;
  color: #444;
}

.nav>li>a:hover {
  color: #444;
  background: #DFE5E4;
}

.nav>li>a:active {
  color: #444;
  background: #DFE5E4 !important;
}

.nav-tabs {
  height: 55px;
  border-bottom: 0px solid #F5F8FF;
  border-top: 0px solid transparent;
  margin: 0px;
  border-top-color: #FF5500;
}
li.nav-item:active {
  background-color: #FF5500;
}


.indbtn, .indbtn:hover, .indbtn:visited, .indbtn:hover, .indbtn:focus {
  color: #FFFFFF;
  background-color: #FF5500;
  height: 3rem;
  font-size: 1rem;
  border-radius: 25px;
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.indbtn:active {
  color: #FF5500 !important;
  background-color: #C8D2C87F !important;
  height: 3rem;
  font-size: 1rem;
  border-radius: 25px;
}

.rank_in_circle {
  font-size: 1rem;
  border: 2px solid #000000;
  border-radius: 25px;
  height: 3rem;
  line-height:2rem;
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.jstree-default, .jstree-themeicon {
  background-size: cover !important;
}

.jstree-proton .jstree-icon {
  width: 33px !important;
}

.jstree-clicked, .jstree-hovered {
  background: #F5F8FF !important;
  border-radius: 3px;
  box-shadow: inset 0 0 1px #F5F8FF !important;
}

.jstree-proton {
  font-size: 1rem;
  font-family: 'Source Sans Pro', sans-serif, Arial, sans-serif;
}

.#navbar-collapse:active{
  color: #FF5500 !important;
  background-color: #C8D2C87F !important;
}

.btn-stereo, .btn-stereo:hover, .btn-stereo:visited, .btn-stereo:hover, .btn-stereo:focus {
  color: #FFFFFF;
  background-color: #FF5500;
  border: 1px solid #000000;
}

.btn-stereo:active {
  color: #FF5500 !important;
  background-color: #C8D2C87F !important;
}

.btn-primary {
    background-color: #F5F8FF;
    border-color: #000000;
}

.btn-group>:not(.btn-check:first-child)+.btn, .btn-group>.btn-group:not(:first-child) {
    margin-left: 0px;
    border-radius: 0px;
}

a.nav-link.active {
  background-color: #C8D2C87F !important;
}


.leaflet .info {
  padding: 0px 0px;
  box-shadow: 0px;
  width: 0px;
}

.leaflet-touch .leaflet-control-layers-toggle {
    width: 58px;
    height: 58px;
}

.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
    border: 1px solid black;
    background-clip: padding-box;
}

.irs--shiny .irs-from, .irs--shiny .irs-to, .irs--shiny .irs-single {
  color: white !important;
  background-color: #FF5500 !important;
  font-size: 1rem !important;
  margin-top: -1.1rem;
}

.irs--shiny .irs-min, .irs--shiny .irs-max {
  color: black !important;
  background-color: white !important;
  font-size: 1rem !important;
  margin-top: -1.1rem;
}

.irs--shiny .irs-line {
  margin-top: 1rem;
}

.nav {
--bs-nav-link-color: black;
}

.pagination {
  --bs-pagination-color: black;
}

#seirow1, #wairow1 {
  border: thick solid #C8D2C87F;
}

.nav-link, .nav-tabs>li>a, .nav-pills>li>a, ul.nav.navbar-nav>li>a {
  font-weight: 700;
}

#wai_scenario_eindjaar, #wai_reset, #sei_scenario_eindjaar, #sei_reset {
  height: 3rem;
}

.btn-group-horizontal {
  width: 100% !important;
}

.downloadbutton_in_tab {
  display: block;
  padding: 8px 16px 8px 16px !important;
  background-color: #edf0f7 !important;
  border-width: 0;
}

i.fas.fa-download {
  color: #FF5500 ;
}

input[type="number"] {
  font-size: 1rem;
}

.leaflet-container {
  font-size: 1rem;
}

.tooltip {
  font-size: 1rem;
}

/* Put shiny notifications front and center */
#shiny-notification-panel {
  top: unset;
  bottom: 20px;
  left: unset;
  right: 20px;
  margin: 0;
  width: 100%;
  max-width: 450px;
}