:root{
    --bs-primary:#428bca;
    --bs-success:#5cb85c;
    --bs-info:#5bc0de;
    --bs-warning:#f0ad4e;
    --bs-danger:#d9534f;
    --bs-secondary:#6c757d;

    --bs-font-sans-serif:"Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-color:#333;
    --bs-body-bg:#fff;

    --bs-link-color:var(--bs-primary);
    --bs-link-hover-color:#2e6da4;
    --app-font:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

.container.form-container{
    max-width:980px;
    margin-left:auto;
    margin-right:auto;
    padding-left:24px;
    padding-right:24px;
}

@media (max-width: 576px){
    .form-container .form-row{
        grid-template-columns:1fr;
        row-gap:6px;
    }
    .form-container .fieldlabel{ margin-bottom:2px; }
    .select2-container{ max-width:100% !important; }
}

.tooltip{
    --bs-tooltip-bg:darkblue;
    --bs-tooltip-color:#fff;
}
.tooltip .tooltip-arrow::before{
    border-top-color:var(--bs-tooltip-bg)!important;
    border-right-color:var(--bs-tooltip-bg)!important;
    border-bottom-color:var(--bs-tooltip-bg)!important;
    border-left-color:var(--bs-tooltip-bg)!important;
}

.select2-container{ max-width:520px; width:100%!important; }
.select2-selection,
.select2-dropdown{
    border-color:#c2c2c2!important;
    border-radius:0!important;
    margin-bottom:3px!important;
}
.select2-selection__arrow,
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single .select2-selection__rendered{
    height:24px;
    line-height:20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height:20px;
}
.select2-results{
    font-size: inherit;
}
.select2-results__option,
.select2-search--dropdown .select2-search__field{
    padding-top:2px;
    padding-bottom:2px;
}

.errorField{
    border:1px solid red;
    border-bottom-width:4px;
}

.btn-secondary{
    color:#333;
    background-color:#fff;
    border-color:#ccc;
}
.btn-primary{
    color:#fff;
    background-color:var(--bs-primary);
    border-color:#2e6da4;
}

:root{
    --app-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: var(--app-font);
}

body, h1, h2, h3, h4, h5, h6,
p, a, span, div,
label, legend, small, strong, em,
input, select, textarea, button,
.form-text {
    font-family: var(--font-body);
    color: var(--font-body-color);
}

body.main {
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
}

.container.form-container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1200px;
}

@media (max-width: 1199.98px) and (min-width: 768px) {
    .container.form-container {
        max-width: 768px;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 767.98px) {
    .container.form-container {
        max-width: 320px;
        padding-left: 7px;
        padding-right: 7px;
    }

    label.fieldlabel {
        float: none;
        width: 100%;
        display: block;
        margin-bottom: 5px;
    }

    table.option-background {
        display: block !important;
        height: auto !important;
        border: none !important;
    }

    table.option-background tr,
    table.option-background td {
        display: block !important;
        width: 100% !important;
    }

    table.option-background td {
        border: 1px solid #c2c2c2;
        margin-bottom: -1px;
        padding: 5px 10px !important;
    }

    table.option-background td:first-child {
        border-radius: 4px 4px 0 0;
    }

    table.option-background td:last-child {
        border-radius: 0 0 4px 4px;
        margin-bottom: 10px;
    }

    table.option-background label {
        width: 100% !important;
        display: block;
        cursor: pointer;
        margin: 0;
    }
}