/*Wijzing 20-05-2021 YM => 'Paarse kleur' */
/* Custom Fonts*/
@font-face{
	font-family: 'ARLRDBD';
	src: url('assets/fonts/ARLRDBD.ttf') format('truetype');
}

body {
	overflow-y: hidden;
	overflow-x: hidden;
	background: url(https://chipage.nl/hst-new/assets/img/Foto_0.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    background-size: cover;
	font-family: 'ARLRDBD';
	
}

:root{
  --animate-duration: 200ms;
  --animate-delay: 0.9s;
  
/* FIREFOX */   
	overflow-x: hidden;
	scrollbar-color: #2e3b66 #50597e;

}

/* INTERNET EXPLORER */
{
    scrollbar-face-color: #686868;
    scrollbar-track-color: #060607;
}

/* CHROME */
::-webkit-scrollbar {
  width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #50597e;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #2e3b66;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #6983d9;
}



.sidebar-sticky::-webkit-scrollbar {
  width: 6px;
  height: 8px;
  background-color: LavenderBlush; /* or add it to the track */
  /*Paarse kleur*/
  background-color:	#330099;
}

.sidebar-sticky::-webkit-scrollbar-track {
  background-color: LavenderBlush; /* or add it to the track */
  /*Paarse kleur*/
   background-color:	#330099;
}
	
.sidebar-sticky::-webkit-scrollbar-thumb {
  background-color: MediumPurple; /* or add it to the track */
   background-color:	#330066;
    /*Paarse kleur*/
   background-color:	#330099;
}

.sidebar-sticky::-webkit-scrollbar-thumb:hover {
  background-color: RebeccaPurple; /* or add it to the track */
  background-color:	#330066;
   /*Paarse kleur*/
   background-color:	#330099;
}


/*
	checkout.php
 */
 
#checkout-right {
	background-color: #fff !important;
	color: #000 !important;
}
 
 

/* Fonts */

#navbar-left{
	height: 100vh;
	overflow-y: auto;
    scrollbar-color: #ccc #fff;
    scrollbar-width: thin;
}

#navbar-breadcrumb {
	background-color: #1e1f3e;
	z-index: 1030 !important;
}

#memo-field {
	color: #fff;
	
}

#memo-field a{
	color: #fff;	
}

#memo-field a:hover{
	color: Plum;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */


.sticky {
  position: fixed;
  top: 0;
  width: 100%;   
}
#content {
  min-height: 100vh;
}


@media (min-width: 992px) {
	.carousel-control-next, .carousel-control-next, .carousel-control-prev, .carousel-control-prev {    
	color: #fff;
    text-decoration: none;
    outline: 0;   
}

.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {
    background-color: #000!important;
	color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: .2;
}
	.sidebar-sticky {
	  position: fixed;
	  /*margin-top: 10em; */
	  margin-top:10em;
	  overflow-y: scroll;
	  top: 0;
	  bottom: 0;
	  scrollbar-width: thin;
	  scrollbar-color: mediumpurple LavenderBlush;
}
	
	.content-sticky {
		  top: 0;
		  /*margin-top: 12em;*/
		  margin-top: 12em
		  
	}

}
	



/* Accordion Parent */
.accordion-button {
	color: #fff;
	text-shadow: 1px 1px #000;	
}

.accordion-button:hover {
   background-color: LavenderBlush;
   opacity: 0.9;
   color: purple;
   border: none !important;
   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
   outline:0 !important;
}


/* active class*/
.accordion-button:not(.collapsed){
	opacity: 0.9;
	background-color: LavenderBlush;
	color: purple;

}
/* active class*/

.accordion-button:not(.collapsed)::after {
color: purple !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23800080'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}


.accordion-button::after {
color: #fff !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.accordion-button:focus {

   border: none !important;
   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
   outline:0 !important;
}

/* Accordion Child */
.accordion-body {
	color:#fff;
}

.accordion-body li:hover {	
color: Plum;
cursor: pointer;
text-shadow: 1px 1px #000;
}

/* Breadcrumb item */
element {

}
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0.5rem;
}
*, ::before, ::after {
    box-sizing: border-box;
}
.breadcrumb {
	--bs-breadcrumb-divider: '>';
	color: #fff;
    list-style: none;
}

/* General Bootstrap Buttons*/
.btn-outline-dark {  
  color: #fff !important;
  background-color: #7733ff !important;
  border-color: #7733ff !important;
  /*Paarse kleur*/
  background-color:#330099 !important;
}

.btn-outline-dark:hover {
  background-color: #fff !important;
  color: #7733ff !important;
  border-color: #7733ff !important;
  /*Paarse kleur*/
  color: #330099 !important;
}

.btn-primary {
	 background-color: #ffeffd !important;
	 border-color: #ffeffd !important;
	 color: #760069 !important;
}

.btn-primary:hover {
	 background-color: #fcccf7 !important;
	 border-color: #fcccf7 !important;
	 color: #760069 !important;
}

.btn-dark {
      background-color: #7733ff !important;
      border-color: #7733ff !important;
}


/* Checkout */

.form-floating {
	color: #000;
}

.form-check-input:checked 
{
    background-color: #000 !important;
    border-color: #000 !important;
}

.form-check-input:focus
{
        border-color: #000;
        box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
}


.form-select:focus
{
        border-color: #000;
        box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
} 

.form-control:focus
{
        border-color: #000;
        box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
} 

/* Images Resize */
.prod-imgage
{
  max-width: auto;
  height: 100%;
  
}

.product-img {
	
	min-width: 100%;
	object-fit: cover;
}


/*================================*/
#kaartje {
	background-color: #fff ;
	color: #000 ;
}
#kaartje.img {
     height: 100%;
	 max-width: auto;
}

.kaartinfo{
	margin:10px;
	 float:left;
}
.kaartbutton{
	 float:right;
}

h7 {
	font-size: 13px;
}