button {
	border: none;
}
button, .button {
	background-color:#fff;
}
button > .fa, .button > .fa, .icon-button > .fa, .icon-button-dropdown > .fa {
	font-size:16px;
}

*:is(button, .button) > svg {
	fill: currentColor;
	max-height: 20px;
}
*:is(button, .button) > .fa {
	color:currentColor!important;
}
.icon-button-small {
    height: 20px!important;
}
.icon-button-small .fa {
	transform: scale(1,1)!important;
}
button, .button, .submit, header .icon-button {
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	gap:4px;
	border-radius: var(--border-radius-buttons,5px);
	padding: 5px;
	border: 1px solid var(--colorgreen);
	border-color: var(--colorgreen);
	min-height: 34px; 
	min-height: 30px; 
}
*:is(button, .button, .submit) > .fa:first-child:last-child {
	margin: auto;
}
.icon-button > *:is(img, svg) {
	height: 20px; 
	min-height: 20px;
}
*:is(button, .button, .submit, header .icon-button) > * {
	margin-top: auto;
	margin-bottom: auto;
}
.button-small:not(*[class*="big"]) {
   display: inline-flex;
    min-height: 34px;
}

.fa-paint-brush::before {
    transform: translateY(0%)!important;
}
.button-small:not(*[class*="big"]) .fa:not(.fa-info-circle) {
    max-height: 18px;
    display: inline-block;
   
}
.button:not(*[class*="big"]) > * {
    margin: auto;
}

.button:not(*[class*="big"]) .fa:first-child:not(:last-child) {
     margin-left: auto;
    margin-right: 5px;
}
.button:not(*[class*="big"]) .fa + * { 
    margin-left: 0px;
    margin-right: auto;
}
.button:not(*[class*="big"]) > *:first-child {
     margin-left: auto;
}
.button:not(*[class*="big"]) > *:last-child {
     margin-right: auto;
}
button, .button, 
button > span, .button > span, .submit > span, header .icon-button > span.text {
    color: var(--colorgreen);
}
.button.alt-color, button.alt-color, button[type="submitorange"], button[class*="submitorange"], .button[class*="submitorange"] {
    border-color:var(--colororange);
}
button[type*="submit"].big-button:not(.button-orange):not([disabled]), 
.button-green { 
   background-color: var(--colorgreen)!important;
}
button[type*="submit"].big-button:not([disabled]), 
button[type*="submit"].big-button:not([disabled]) > *, 
.button-green, 
.button-green > * {
 
    color: #fff!important;
}

/* compacter en leesbaarder */
:is(
	.button.alt-color,
	button.alt-color,
	button[class*="submitorange"],
	.button[class*="submitorange"]
) > :is(.fa, .text),
:is(
	.button.alt-color,
	button.alt-color,
	button[class*="submitorange"],
	.button[class*="submitorange"]
) {

    color:var(--colororange);
}

.button.alt-color .icon-button-dropdown {
	color:#333;
}
.filter-button:not(.alt-color) {
    border-color:#ccc;
    color:#666;
}
header div.icon-button:not(onClick*="openDropDown"):hover, 
header .dropdown-button:not(onClick*="openDropDown"):hover,  
.icon-button.dropdown-open,
header .dropdown-button.dropdown-open  {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
    
}


.icon-button.dropdown-open,
header .dropdown-button.dropdown-open {
   /* transition: none!important;
    box-shadow: 0px 0px 0px 2px var(--colorgreen), 0px 0px 0px 100vw rgba(0,0,0,0.08);*/
}

.button.alt-color, button.alt-color, button[type="submitorange"] {
    
}
.big-button {
	padding: 15px 15px!important;
}
.kdp-product-thumbnail:hover .button, .button:hover, .big-button:hover, button:hover {
	box-shadow: 0px 0px 0px 2px var(--colorgreen); 
}
.button.alt-color:hover, button.alt-color:hover, button[type="submitorange"]:hover, button[class*="submitorange"]:hover, .button[class*="submitorange"]:hover {
  
    box-shadow: 0px 0px 0px 2px var(--colororange);
}

.kdp-product-thumbnail:hover .button > .text, .button:hover > .text, .big-button > .text, .button:hover > .fa, button:hover > .text, button:hover .fa {
	
}

.kdp-product-thumbnail:active .button, .button:active:not(.button-orange), button:active:not(.button-orange) {
    color:#fff;
	border-color: var(--colorgreen);
	background-color:var(--colorgreen);
}
.button.alt-color:active, button.alt-color:active, button[type="submitorange"]:active, button[class*="submitorange"]:active, .button[class*="submitorange"]:active {
    background-color:var(--colororange);
    border-color: var(--colororange);
}

.icon-button-wrapper:hover .icon-button,
.icon-button:hover, .icon-button.dropdown-open, .dropdown-button.button-orange.dropdown-open {
	background-color:var(--colororange);
}


.kdp-product-thumbnail:active .button > *:not(div), .button:active > *:not(div) {
	color:#fff;
}
.big-button {
	width: 100%;
	display: flex;
	text-align: center;
}
.big-button > * {
	margin: 0px;
	margin-top: auto;
	margin-bottom: auto;
}
.big-button > *:first-child, 
.big-button img[src*="loading"]:first-child + * {
	margin-left: auto;
}
.big-button > *:last-child {
	margin-right: auto;
}
.icon-button, .button {
	position: relative;
}
.big-button .fa[class*="cart"] {
    transform: scale(1.5,1.5);
}
.big-button .fa + .text {
    margin-left: 5px;
}

.button .tooltip-wrapper, button .tooltip-wrapper {
 
}

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}
button[disabled], .button.disabled {

    cursor: not-allowed;
}

button[type*="submit"][disabled].big-button:not(.button-orange),
.button-gray {
    filter: grayscale(100%);
    /*border-color:#8C8C8C!important;*/
}
button[type*="submit"][disabled].big-button:not(.button-orange),
.button-gray, .form-button { 
    border-color:var(--linecolorlight)!important;
}
.button-gray, .button-gray > * {
    /*color:#666666!important;*/
    color:#000!important;
}
button[type="submit"][disabled].big-button:not(.button-orange),
button[type="submit"][disabled].big-button:not(.button-orange) > span, 
.button-gray[disabled], .button-gray[disabled] > * {
	opacity: 1!important;
	color:var(--linecolorlight)!important;
}
.button-gray:hover {
    box-shadow: 0px 0px 0px 2px #8C8C8C20;
}

.button, button {
    position: relative;
}
img[src*="loading-snake"] { 
	will-change: transform;
}

.button img[src*="loading-snake"], button img[src*="loading-snake"] {
    opacity: 0;
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px!important;
    right: 2px!important;
    width: calc(100% - 4px);
    max-height: calc(100% - 4px)!important;
    max-width: 100%!important;
    object-fit: contain;
    object-position: center;
}
form.busy .button img[src*="loading-snake"] + .fa, form.busy button img[src*="loading-snake"] + .fa,
form.busy .button img[src*="loading-snake"] + .text, form.busy button img[src*="loading-snake"] + .text,
form.busy .button img[src*="loading-snake"] + * + .text, form.busy button img[src*="loading-snake"]  + * + .text {
    opacity: 0!important; 

}
form.busy .button img[src*="loading-snake"], form.busy  button img[src*="loading-snake"] { 
      opacity: 1;
}
form.busy .card a:not(.button), form.busy .card input, form.busy .card label {
    filter: grayscale(100%);
}
.button img[src*="loading-snake"][src*="orange"], button img[src*="loading-snake"][src*="orange"] {
    filter: brightness(20000000000%) grayscale(100%);
}




.kdp-filterlinks-wrapper a.button:not(.very-important) {
	color:#999999;
	background-color:#f6f6f6;
	box-shadow: inset 0px 0px 0px 1px #eee!important;
	border:none!important;
	font-size: 13px;
	border-radius: 25px;
}
.kdp-filterlinks-wrapper a.button:not(.very-important):is(.selected, :hover) {
	box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1)!important;
}