/** ************************************************************************ **
 *   BUTTON 
 ** ************************************************************************ **/
a.wn-button,
a.wn-button:hover { text-decoration: none; color: white; outline: none; }
.wn-button:hover { cursor: pointer; }
@media (max-width: 575px) {
    .wn-button { width: 100%; }
}
.wn-button { 
    margin-left: auto; margin-right: auto; 
    padding: 15px 18px 12px 18px;
    border-radius: 15px;
    font-family: 'puffin_displaybold', serif; font-style: normal; font-weight: normal;
    font-size: 19px; line-height: 1.1em;
}

/** Standard - #E20613 **/
.wn-button.button-standard { 
    background: #E20613 0% 0% no-repeat padding-box; 
    border-radius: 15px;
    min-width: 260px;
}
.wn-button.button-standard:hover { background: #E20613 0% 0% no-repeat padding-box; }
.wn-button.button-standard {
    margin-left: auto;
    margin-right: auto;
}


/** Blue - #253482 **/
.background-color-blue-dark .wn-button,
.background-color-blue-dark-button .wn-button,
.background-item-blue-dark .wn-button,
.wn-button.button-blue { 
    background: #253482 0% 0% no-repeat padding-box; 
    border-radius: 15px;
    min-width: 260px;
}
.background-color-blue-dark .wn-button:hover,
.background-color-blue-dark-button .wn-button:hover,
.background-item-blue-dark .wn-button:hover,
.wn-button.button-blue:hover { background: #253482 0% 0% no-repeat padding-box; }
.background-color-blue-dark .wn-button,
.background-color-blue-dark-button .wn-button,
.background-item-blue-dark .wn-button,
.wn-button.button-blue { margin-left: auto; margin-right: auto; }

/** Green - #93C460 **/
.wn-button.button-green { 
    background: #93C460 0% 0% no-repeat padding-box; 
    border-radius: 15px;
    min-width: 260px;
}
.background-color-green .wn-button:hover 
.background-color-green-button .wn-button:hover 
.wn-button.button-green:hover { background: #93C460 0% 0% no-repeat padding-box; }
.wn-button.button-green { margin-left: auto; margin-right: auto; }

/** White - #93C460 **/
.background-color-red .wn-button,
.background-color-red-button .wn-button,
.background-item-red .wn-button,
.wn-button.button-white { 
    background: white 0% 0% no-repeat padding-box; 
    color: #E20613; 
    border-radius: 15px;
    min-width: 260px;
}
.background-color-red .wn-button,
.background-color-red-button .wn-button { color: #E20613; }

.background-color-red .wn-button:hover,
.background-color-red-button .wn-button:hover,
.background-item-red .wn-button:hover,
.wn-button.button-white:hover { background: white 0% 0% no-repeat padding-box; color: #E20613; }
.background-color-red .wn-button,
.background-color-red-button .wn-button,
.background-item-red .wn-button,
.wn-button.button-white { margin-left: auto; margin-right: auto; color: #E20613;  }

/** Standard - white button + red #E20613 **/
.wn-button.button-standard-outline { background-color: #ffffff; color: #4B9266; border: 3px solid #E20613; font-family: 'puffin_displaybold', serif; font-style: normal; font-weight: normal; font-size: 30px; line-height: 40px; }
.wn-button.button-standard-outline:hover,
.wn-button.button-standard-outline.active { background-color: #E20613; color: #ffffff; border: 3px solid #E20613; }
.wn-button.button-standard-outline.wn-button-inactive,
.wn-button.button-standard-outline.wn-button-inactive:hover { background-color: lightgray; color: #E20613; border: 3px solid lightgray; font-family: 'puffin_displaybold', serif; font-style: normal; font-weight: normal;}
/** WeserGold - as default */
.wn-button.button-wego-outline { background-color: #ffffff; color: #4B9266; border: 3px solid #E20613; font-family: 'puffin_displaybold', serif; font-style: normal; font-weight: normal; font-size: 30px; line-height: 40px; }
.wn-button.button-wego-outline:hover,
.wn-button.button-wego-outline.active { background-color: #E20613; color: #ffffff; border: 3px solid #E20613; }
.wn-button.button-wego-outline.wn-button-inactive,
.wn-button.button-wego-outline.wn-button-inactive:hover { background-color: lightgray; color: #E20613; border: 3px solid lightgray; }
/** Quelly - as default */
.wn-button.button-quelly-outline { background-color: #ffffff; color: #4B9266; border: 3px solid #E20613; font-family: 'puffin_displaybold', serif; font-style: normal; font-weight: normal; font-size: 30px; line-height: 40px; }
.wn-button.button-quelly-outline:hover,
.wn-button.button-quelly-outline.active { background-color: #E20613; color: #ffffff; border: 3px solid #E20613; }
.wn-button.button-quelly-outline.wn-button-inactive,
.wn-button.button-quelly-outline.wn-button-inactive:hover { background-color: lightgray; color: #E20613; border: 3px solid lightgray; }
/** Durstloescher - white button + blue #299bd9 **/
.wn-button.button-durstloescher-outline { background-color: #ffffff; color: #299bd9; border: 3px solid #299bd9; font-family: 'puffin_displaybold', serif; font-style: normal; font-weight: normal; font-size: 30px; line-height: 40px; }
.wn-button.button-durstloescher-outline:hover,
.wn-button.button-durstloescher-outline.active { background-color: #299bd9; color: #ffffff; border: 3px solid #299bd9; }
.wn-button.button-durstloescher-outline.wn-button-inactive,
.wn-button.button-durstloescher-outline.wn-button-inactive:hover { background-color: lightgray; border: 3px solid lightgray;}
/** Extaler - white button + blue #E20613 **/
.wn-button.button-extaler-outline { background-color: #ffffff; color: #63aeca; border: 3px solid #63aeca; font-family: 'puffin_displaybold', serif; font-style: normal; font-weight: normal; font-size: 30px; line-height: 40px; }
.wn-button.button-extaler-outline:hover,
.wn-button.button-extaler-outline.active { background-color: #63aeca; color: #ffffff; border: 3px solid #63aeca; }
.wn-button.button-extaler-outline.wn-button-inactive,
.wn-button.button-extaler-outline.wn-button-inactive:hover { background-color: lightgray; border: 3px solid lightgray;}
/** Naturella - white button + green #92c35f **/
.wn-button.button-extaler-outline { background-color: #ffffff; color: #92c35f; border: 3px solid #92c35f; font-family: 'puffin_displaybold', serif; font-style: normal; font-weight: normal; font-size: 30px; line-height: 40px; }
.wn-button.button-extaler-outline:hover,
.wn-button.button-extaler-outline.active { background-color: #92c35f; color: #ffffff; border: 3px solid #92c35f; }
.wn-button.button-extaler-outline.wn-button-inactive,
.wn-button.button-extaler-outline.wn-button-inactive:hover { background-color: lightgray; border: 3px solid lightgray;}
/** Moevenpick - white button + dark blue #152868 **/
.wn-button.button-extaler-outline { background-color: #ffffff; color: #152868; border: 3px solid #152868; font-family: 'puffin_displaybold', serif; font-style: normal; font-weight: normal; font-size: 30px; line-height: 40px; }
.wn-button.button-extaler-outline:hover,
.wn-button.button-extaler-outline.active { background-color: #152868; color: #ffffff; border: 3px solid #152868; }
.wn-button.button-extaler-outline.wn-button-inactive,
.wn-button.button-extaler-outline.wn-button-inactive:hover { background-color: lightgray; border: 3px solid lightgray;}


/** ************************************************************************ **
 *   BUtton text sizes  
 ** ************************************************************************ **/
.wn-button.text-size-sm { font-size: 18px; }
.wn-button.text-size-md { font-size: 22px; }


.standard-form .form-group label { 
    color: var(--wg-color-green-dark) !important;
    margin-bottom: 0; padding-bottom: 0; 
}
.standard-form .form-group .form-control {
    border: 1px solid var(--wg-color-green-dark) !important;
    font-size: inherit;
}
.standard-form .form-group .form-control:focus { 
    box-shadow: none; 
    border-color: var(--wg-color-green-dark); 
}
/* .standard-form .form-group .form-control option:hover { background-color: #E20613; color: white; } */
.standard-form .form-group .form-input input[type=email]:focus, 
.standard-form .form-group .form-input input[type=password]:focus, 
.standard-form .form-group .form-input input[type=text]:focus, 
.standard-form .form-group .form-input input[type=number]:focus, 
.standard-form .form-group .form-input input[type="checkbox"]:focus, 
.standard-form .form-group .form-input input[type="radio"]:focus, 
.standard-form .form-group .form-input select:focus, 
.standard-form .form-group .form-input textarea:focus {
    box-shadow: none; 
    border-color: var(--wg-color-green-dark); 
    outline: 1px solid var(--wg-color-green-dark) !important;;
}
    





/** ************************************************************************ **
 *   Form - Select
 ** ************************************************************************ **/
.form-group-select-border label { font-size: 22px; margin-bottom: 5px !important; } 
.form-group-select-border .form-control {
    background-color: transparent;
    border: 2px solid #4B9266;
    border-radius: 15px;
    min-height: 50px;
    font-size: inherit;
}

.form-group-select-border .form-control.form-control-select option:hover { 
    background-color: #E20613; color: white; 
}


/**
* The radio
*/
.custom-wn { margin-top: 25px; margin-bottom: 15px; margin-left: 50px; }
.custom-wn .custom-radio {
    display: block;
    position: relative;
    padding-left: 50px;
    padding-right: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    /** font-size: 20px; line-height: 1.8em; **/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

/* Hide the browser's default radio button */
.custom-wn .custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.custom-wn .custom-radio .checkround {
    position: absolute;
    top: 6px;
    left: 0;
    height: 30px;
    width: 30px;
    background-color: #EAF2DF;
    border-color: #EAF2DF;
    border-style: solid;
    border-width: 1px;
    border-radius: 50%;
}

/* When the radio button is checked, add a green background */
.custom-wn .custom-radio input:checked ~ .checkround {
    background-color: #EAF2DF;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkround:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.custom-wn .custom-radio input:checked ~ .checkround:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.custom-wn .custom-radio .checkround:after {
    left: 5px;
    top: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #519163;
    border-color: #EAF2DF;
    border-style: solid;
    border-width: 1px;

}


/** Select arrow */
.form-select-customer-arrow,
.form-control-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234B9266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
    padding-right: 40px;
}