html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 80px;
  min-width: 320px;
  font-family: 'Roboto', sans-serif;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 80px;
  line-height: 25px;
  padding:15px 0;
  background-color: #363839;
  color:#fff;
}

#headerbar {
    min-height: 40px;
    line-height: 40px;
    margin-bottom: 25px;
}

#headerbar a {
  color:#fff;
  text-decoration: none;
}

#headerbar a:hover {
  color:#ccc;
}

.inloggen #logo {
    margin: 10px 0 30px;
}
#logo a {
  display:inline-block;
}

.footer a {
    color:rgb(119, 119, 119);
}
.footer a:hover {
    color:#fff;
    text-decoration: none;
}
.form-group.no-margin {
    margin-left: 0;
    margin-right: 0;
}

.alert {
  position: relative;
}
.alert i.fa {
  position: absolute;
  top:18px;
  left:7px;
}
.alert p {
  padding-left: 15px;
}


table.dataTable thead th {
    position: relative;
    background-image: none !important;
}

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    position: absolute;
    top: 12px;
    right: 8px;
    display: block;
    font-family: FontAwesome;
}
table.dataTable thead th.sorting:after {
    content: "\f0dc";
    color: #ddd;
    font-size: 0.8em;
    padding-top: 0.12em;
}
table.dataTable thead th.sorting_asc:after {
    content: "\f0de";
}
table.dataTable thead th.sorting_desc:after {
    content: "\f0dd";
}
.no-sort::after { display: none!important; }

.no-sort { pointer-events: none!important; cursor: default!important; }

.container.main {
  padding-bottom: 35px;
}

.filterbtn {
  margin: 0 0 15px 15px;
}

.row .activity {
  padding-top:20px;
  padding-bottom:20px;
  border-top:1px solid #666;
  overflow: auto;

}
.activity.odd {
  // background:#f9f9f9;
}
.activity.late {
  background-color: #fcf8e3;
  color: #8a6d3b;
}

.activity.completed {
  background-color: #dff0d8;
  color: #3c763d;

}
.activity.completed.filtered {
  display:none;
}


.activity.header {
  font-weight: bold;
  padding-top:15px;
  padding-bottom:6px;
}

#datetimepicker {
  display:inline-block;

}
#datetimepicker input {
  display:none;
  width:0;
  margin-top:30px;
}
#datetimepicker .input-group-addon {
  display:inline;
  border:1px solid #ccc;
  border-radius:4px;
}

.showdetails {
      display:none;
    }

.activity .adres strong {
  display:block;
}

 /* Large Devices, Wide Screens */
  @media only screen and (max-width : 1200px) {

  }

  /* Medium Devices, Desktops */
  @media only screen and (max-width : 992px) {

  }

  /* Small Devices, Tablets */
  @media only screen and (max-width : 768px) {
    .activity .adres {
      padding: 12px 0;
    }
    .activity .adres strong {
      cursor: pointer;
    }

    div.tijden, div.aankomst {
      width:50%;
      float:left;
    }

    div.description {
      position: absolute;
      right:15px;
      top:0;
    }

    div.details {
      display:none;
    }
    .showdetails {
      display:inline-block;
    }

  }

  /* Extra Small Devices, Phones */
  @media only screen and (max-width : 480px) {
    body {
      margin-bottom: 80px;
    }
    .footer {
      min-height: 80px;
      line-height: 20px;
      padding:10px 0;
    }
    span.seperator {
      text-indent: -9999px;
      display:block;
      height:0px;
    }




  }

  /* Custom, iPhone Retina */
  @media only screen and (max-width : 320px) {

  }