/* Branding for device */

.bg-header {
    background-color: #ffffff !important;
}
.bg-secondary-header {
    background-color: #d9d9d9 !important;
}
.bg-primary {
    background-color: #000000 !important;
}
a, .btn-link {
    color: #000000;
}
a:hover, a:focus, a:active, a.active,
.btn-link:hover, .btn-link:focus, .btn-link:active, .btn-link.active {
    color: #000000;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #000000;
}
footer {
    color: #fff;
    background-color: #000000;
}
footer .vkp-copyrights {
    border-top: 1px solid #333333 !important;
    background-color: #000000;
}
footer .text-muted {
    color: #999999 !important;
}
footer .vkp-copyrights a {
    color: #999999 !important;
    border-color: #999999 !important;
}
footer .vkp-copyrights a:hover,
footer .vkp-copyrights a:focus,
footer .vkp-copyrights a:active,
footer .vkp-copyrights a.active {
    color: #808080 !important;
    border-color: #808080 !important;
}
.navbar-toggler {
    color: #fff;
    background-color: #000000;
    border: 1px solid #000000;
}
.navbar-toggler:focus {
    outline: none;
}
#vkpSecondaryNavbar .navbar-toggler {
    background-color: #d9d9d9;
    border: none;
}
.btn-primary,
.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
}
.btn-primary.action-button,
#search .btn-primary {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
}
.btn-primary:hover,
.btn-primary.dropdown-toggle:hover {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
}
.btn-primary.action-button:hover {
    background-color: #c0c0c0;
    border-color: #c0c0c0;
}
.btn-primary:focus, .btn-primary.focus {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
    box-shadow: none;
}
.btn-primary.disabled,
.btn-primary:disabled {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
}
#btnBasket .badge {
    background-color: #ffffff;
    color: #fff;
}
.list-group-item.active {
     color: #fff;
     background-color: #333333;
     border-color: #333333;
 }
.ui-effects-transfer {
    border:1px solid #000000;
    z-index:100;
}
.page-link {
    color: #000000;
    background-color: #fff;
}
.page-link:hover {
    color: #000000;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #000000;
    border-color: #000000;
}
body.vkp-loading .overlay-center {
    background-color: #000000;
    color: #fff;
}
@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: #fff;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 #fff,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 #fff,
      .5em 0 0 #fff;}
}

.carousel-control-prev,
.carousel-control-next {
    color: #000000;
    font-size:40px;
}
.carousel-control-prev:focus,
.carousel-control-next:focus,
.carousel-control-prev:hover,
.carousel-control-next:hover {
    color: #000000;
}
span.twitter-typeahead .empty-message {
  color: #373a3c;
  background-color: #999999;
}

/**
 * Wizard style tabs
 */
.nav-pills.nav-wizard > li:not(:last-child) a.active:after {
  border-color: transparent transparent transparent #333333;
}

.nav-pills.nav-wizard > li:not(:first-child) a.active:before {
  border-color: #333333 #333333 #333333 transparent;
}

.nav-pills.nav-wizard > li a.active {
  background-color: #333333;
}

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: #000000;
    background-color: #000000;
}
.nav-pills.nav-wizard > li:last-child:hover a[href="#stepWizardComplete"]:not(.active),
.nav-pills.nav-wizard > li:last-child:hover a:not(.active) {
  color: #000000;
}

/* Tables */
.vkp-documents-list .table thead th {
    background-color: #000000;
}
.vkp-documents-list .table-bordered thead th {
    border-bottom-width: 1px;
    border-bottom-color: #333333;
}
.vkp-documents-list .table-bordered th {
    border-color: #333333;
}
.vkp-documents-list .table thead th a {
    color: #fff;
    font-weight: normal;
}

.vkp-page-documents .badge[data-property] {
    background-color: #000000;
    color: #fff;
}
.vkp-page-documents .badge[data-property] .fa {
    color:#fff !important;
}

/* Small devices */
@media (max-width: 768px) {
    .navbar .navbar-collapse {
        background-color: #ffffff;
        border-top: 1px solid #d9d9d9;
    }
}

.input-group-text-search-faq, .search-faq-show-all-button {
 background-color: #000000;
 color: white;
}

/* Custom CSS */
/* Hide Sub-header - Tijdelijke aanpassing 
.bg-secondary-header {
    display: none;
}
*/

/* FONT */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Bebas Neue', cursive;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
}

.btn-primary.action-button,
#search .btn-primary {
  background-color: black !important;
  border-color: black !important;
}

#btnBasket .badge {
  background-color: #343a40 !important;
}

.navbar .navbar-brand {
  color: #000 !important;
}

span.navbar-text.text-white.ml-auto.text-nowrap.d-none.d-md-flex {
  color: #000000 !important;
}


.navbar-text.text-white.ml-auto.text-nowrap.d-flex {
    color: #000000 !important;
  }


/* PRODUCT BOX */

/* Gradient op Product image + Full width image + padding */
.card h4 {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.5) 5%,
    rgba(0, 0, 0, 0.4) 10%,
    rgba(0, 0, 0, 0.3) 15%,
    rgba(0, 0, 0, 0.2) 20%,
    rgba(0, 0, 0, 0.1) 25%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 100%
  );
  font-size: 2rem;
}

#relationSelectUrl {

    color: #4d4d4d !important;
}

#relationSelectUrl > span {
    border-bottom: 1px #ffffff dashed !important;
}

.loginReminder {
  font-size: 0.8rem;
  background-color: rgba(0, 0, 0, 0.03);
  padding: 20px;
  display: block;
}

.card-footer.text-muted.d-flex > div > a {
  text-decoration: underline;
}