body, h1,h2,h3,h4,h5,h6 {
  font-family:  sans-serif;
}


#main {
  margin-left: 160px
}


/* Algemeen */
.ois-hoekje{
  background-image: url(../images/ois_element_hoek.svg);
  background-repeat: no-repeat;
  background-position-y: 10px;
}

.ois-blauw,.ois-blauw:hover{
    color:#00385f!important;
}

.ois-hide{
  display:none;
}

.ois-blauw-bg{
  color:#fff!important;
  background-color:#00385f!important;
}

.ois-login-container {
    position: relative;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: flex-start;
  
  }

.ois-form {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 10px;
  }

.ois-titel{
  position: relative;
  color:#00385f;
  left: 40px;
  top:  15px;
}

.ois-nav-text{
  color: grey;
}

.ois-table thead{
  font-weight:600;
}


.ois-blue,.ois-blue-selected{
  color:#fff!important; 
}

.ois-blue-selected{
  background-color: #001e33!important;
}

.ois-footer-text {
    color: #c2c2c2;
    align-self: center;
    margin: 25px;
    letter-spacing: 5px;
  }

.ois-page-content{
  margin-top: 50px;
  padding-left: 50px;
 
}

.ois-lijst{
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

.ois-lijst-header{
  padding:5px;
}

.ois-lijst-table, .ois-lijst-waarschuwingen, .ois-lijst-distributie{
  display:none;
}

.ois-lijst-waarschuwingen{
  padding:10px;
}

.ois-lijst-kopregel{
  font-size:larger;
  border-bottom: 1px solid #DDDDDD;
  padding:10px 10px 5px 10px;
  margin-bottom: 5px;
  color: #00385f;
  font-weight:600;
  background-color: #EAEAEA;
}

.ois-lijst-kopregel div{
  display: inline;
  position: relative;
}

.ois-lijst-item{
  background-color:#EFEFEF;
  margin:10px 5px;
  border: 1px solid #DDDDDD;
}

.ois-lijst-histogram, .ois-lijst-violin{
  flex:1;
  width:50%;
}

.ois-img-icon{
  width:24px;
  cursor:pointer;
}

.ois-goodbad-icons{
  float:right;
}

/* https://thebrandsmen.com/css-image-hover-effects/ */
.ois-img-grey{
  filter: grayscale(100%);
  opacity:0.2;
  transition: all 1s ease;;
  -webkit-filter: grayscale(100%);
  -webkit-transition: all 0s ease;
}

.ois-img-grey:hover{
  filter: grayscale(0%);
  filter: gray;
  opacity:0.5;
  -webkit-filter: grayscale(0%);
  filter: none;
  transition: 0s ease;
}

.ois-img-full{
  filter: grayscale(0%);
  filter: gray;
  -webkit-filter: grayscale(0%);
  filter: none;
  transition: 0s ease;
}

.ois-img-full:hover{
  filter: grayscale(20%);
  transition: all 1s ease;;
  -webkit-filter: grayscale(20%);
  -webkit-transition: all 0s ease;
}

.ois-kompasdiv{
  border-radius: 10px;
  border: 2px solid #DDDDDD;
  padding: 0;
}

.ois-kompasstats{
  border-radius: 10px;
  border: 2px solid #EEEEEE;
  padding: 20px;
  max-height:800px;
  overflow:auto;
}

.ois-kompasstats ul{
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

.ois-kompasstats-titel{
  /*color:#000000;*/
  font-size: large;
  font-weight: 400;
  text-wrap: wrap;
  text-align: left;
  margin-bottom: 10px;
  width:100%;
}

.ois-kompasstats-omschrijving{
  font-weight: 600;
  text-wrap: wrap;
  text-align: left;
  margin-bottom: 10px;
  width:100%;
}

.ois-kompasstats-info{
  margin: 20px 20px 20px 0;
  max-width:250px;
}

.ois-kompasstats-info table{
  width:100%;
  vertical-align: top;
}

.ois-kompasstats-info table td{ 
  vertical-align: top;
}

.ois-kompasstats-wijken{
  margin: 20px 20px 20px 0;
  width:100%;
}

.ois-lijstlabel{
  display:inline-block;
  width:150px;
}

/* Style the tab */
.kompasstats-tab {
  overflow: hidden;
  border: 0 solid #ccc;
  /*background-color: #f1f1f1*/;
}

/* Style the buttons inside the tab */
.kompasstats-tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  /*padding: 14px 16px;*/
  transition: 0.3s;
  font-size: 16px;
  color:#aaa;
}

/* Change background color of buttons on hover */
.kompasstats-tab button:hover {
  color: #bbbbbb;
}

/* Create an active/current tablink class */
.kompasstats-tab button.active {
  color:#000;
}

/* Style the tab content */
.kompasstats-tabcontent {
  display: none;
  padding: 0 12px;
  border-top: none;
  height: 570px;
}

#kompasstats-top10{
  padding:10px;
  overflow: hidden;
}

#kompasstats-top10 label{
  margin-bottom:100px;
}

.kompasstats-indicatorBold{
  font-weight:600;
}

#kompasstats-top10titel{
  font-size:medium;
  font-weight:600;
}

.w3-content{
  max-width:1250px;
}

.w3-row-padding img {
  margin-bottom: 12px
}
/* Set the width of the sidebar to 160px */
.w3-sidebar {
  width: 160px;
  background: #00385f;
}
/* Add a left margin to the "page content" that matches the width of the sidebar (160px) */

.ois-button{
  border: 1px solid #aaa !important; 
  border-radius: 4px;
}

.ois-button-grey {
	border-radius: 4px;
  border: 1px solid #ccc !important;
  color: #242424 !important;
  background-color: #fff !important;
}

/* Remove margins from "page content" on small screens */
@media only screen and (max-width: 600px) {

  #main {margin-left: 0}

  #ois-header{
    margin-top:  35px;
  }

}