/* reset */
button.button, input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    line-height: 0;
}

/* knop basis */
button.button {
    position: relative;
    margin-bottom: 20px;
    margin-right: 0px;
    margin-left: 0px;
    overflow: hidden;
    z-index: 1;
    background-color: yellow;
}

button.button {
    display: inline-block;
    font-size: 15px;
    height: 35px;
    line-height: 35px;
    text-decoration: none;
    border-radius: 7px;
}

button.button a {
    display: block;
    height: 35px;
    line-height: 35px;
    border-radius: 7px;
    background-color: yellow;
}

button.button a,
button.button.border {
    border-width: 1px;
    border-style: solid;
}

button.button:hover {
    cursor: pointer;
}

/* KLEUREN */
/********************************************************?
/* BACKGROUND */

/* donkergrijs */
button.button.bg-donkergrijs,
button.button.bg-donkergrijs a {
    color: #fff;
    background-color: #333;
}
button.button.bg-donkergrijs:hover,
button.button.bg-donkergrijs a:hover {
    color: #fff;
    background-color: #666;
}

/* wit */
button.button.bg-wit,
button.button.bg-wit a {
    color: #222;
    background-color: #fff;
}
button.button.bg-wit:hover,
button.button.bg-wit a:hover {
    color: #fff;
    background-color: #666;
}

/* transparent */
button.button.bg-transparent,
button.button.bg-transparent a {
    color: #777;
    background-color: transparent;
}
button.button.bg-transparent:hover,
button.button.bg-transparent a:hover {
    color: #222;
    background-color: transparent;
}

/* BORDER */

/* donkergrijs */
button.button.border-donkergrijs.border,
button.button.border-donkergrijs a {
    border-color: #333;
}
button.button.border-donkergrijs.border:hover,
button.button.border-donkergrijs a:hover {
    border-color: #666;
}
/* wit */
button.button.border-wit.border,
button.button.border-wit a{
    border-color: #fff;
}
button.button.border-wit.border:hover,
button.button.border-wit a:hover {
    border-color: #666;
}
/* action */
button.button.bg-action a {
    background-color: var(--action);
    color: #fff;
}
button.button.border-action a {
    border-color: var(--action);
}
button.button.bg-action a:hover {
    background-color: var(--action-hover);
}
button.button.border-action a:hover {
    border-color: var(--action-hover);
}
/* tekst */
button.button span.txt {
    position: relative;
    display: block;
    top: -2px;
    float: left;
}
/* padding */
button.button.padding-left {
    padding-left: 20px;
}
button.button.padding-right {
    padding-right: 20px;
}
button.button a {
    padding-left: 0px;
}
button.button.padding-left a {
    padding-left: 20px;
    margin-left: -20px;
}
button.button.padding-right a {
    padding-right: 20px;
    margin-right: -20px;
}
/* margin */
button.button.margin-left {
    margin-left: 5px;
}
button.button.margin-right {
    margin-right: 5px;
}
/* ICONS */
.icon-container {
    position: relative;
    display: block;
    width: 33px;
    line-height: 37px;
    float: left;
    overflow: hidden;
}
/* breedte */
button.button.width-100-procent, button.button.width-100-procent a {
    width: 100%;
}
button.button.width-250, button.button.width-250 a {
    width: 250px
}