:root {
    --savth-light-color: #EEF6D1;
    --savth-color-logo: #CBEB82;
    --main-bg-color: #7FB600;
    --main-bg-color-darker: #6D9C00;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 1rem;
    box-sizing: boder-box;
    background: linear-gradient(rgba(203, 235, 130, 0.7), rgba(109, 156, 0, 0.2));
    background-size: cover;

    --bs-body-font-size: 14px;
}

a {
    color: var(--main-bg-color-darker);
}

a:hover {
    color: var(--main-bg-color);
}

.important-field {
    position: absolute;
    left: -9999px;
}

.kontakt-formular {
    background-color: #fff;
    border-radius: 1rem;
    border: 1px solid var(--main-bg-color-darker);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 100%;
    padding: 2rem;
    margin: 1rem;
    box-sizing: border-box;
}

.form-control,
.form-select {
    font-size: 14px;
}

.form-control:focus,
.form-check-input:focus,
.form-select:focus {
    border-color: var(--savth-color-logo);
    box-shadow: 0 0 0 0.25rem rgba(203, 235, 130, 0.5);
}

.form-check-input:checked {
    background-color: var(--main-bg-color-darker);
    border-color: var(--main-bg-color-darker);
}

.form-label {
    font-weight: 500;
}

.btn-primary {
    background-color: var(--main-bg-color);
    border-color: var(--main-bg-color);
}

.btn-primary:hover {
    background-color: var(--main-bg-color-darker);
    border-color: var(--main-bg-color-darker);
}

.btn-primary:focus {
    background-color: var(--main-bg-color-darker);
    border-color: var(--main-bg-color-darker);
    box-shadow: 0 0 0 0.25rem rgba(203, 235, 130, 0.5);
}

.btn-primary:disabled {
    background-color: var(--main-bg-color-darker);
    border-color: var(--main-bg-color-darker);
    color: #eee;
    opacity: 0.7;
    cursor: not-allowed;
}

/* ====== START Select2 styling ====== */
/* Container & input field styling */
.select2-container--default .select2-selection--multiple {
    background-color: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.25rem;
    min-height: 38px;
    font-size: 14px;
    box-shadow: none;
}

/* Focused state */
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--savth-color-logo);
    box-shadow: 0 0 0 0.25rem rgba(203, 235, 130, 0.5);
}

/* Selected tags (pills) */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--main-bg-color-darker);
    color: #fff;
    border: none;
    border-radius: 0.4rem;
    padding: 0.25rem 0.5rem;
    margin-top: 0.25rem;
    margin-right: 0.25rem;
    font-size: 13px;
}

/* 'x' remove-icon inside the selected tags */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff;
    margin-right: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #eee;
}

/* Dropdown options */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--savth-color-logo);
    color: #000;
}

/* Selected options inside dropdown */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--savth-color-logo);
    color: #000;
}

/* Dropdown panel */
.select2-container--default .select2-results {
    font-size: 14px;
}

/* Fix select2 width issues inside Bootstrap */
.select2-container {
    width: 100% !important;
}
/* ====== END Select2 styling ====== */

img.logo-top{
	max-width: 65%;
	margin: 0 auto 1rem;
	display: block;
}

.alert-success {
  --bs-alert-color: #FFF;
  --bs-alert-bg: var(--main-bg-color);
  --bs-alert-border-color: var(--main-bg-color);
}