/*

    CSS is split over three files to create color specific css-files:
    - site.css => Default values without red color
    - siteStandard => Only extensions to classes setting red color values
    - siteMonochrome => Only extensions to classes setting black color values

    When a color is outsourced in siteStandard or siteMonochrome then the class in this file is tagged with
    / * Placeholder css * /

*/

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
/*
input,
select,
textarea {
    max-width: 280px;
}*/

/*
    popover.js buttons not as big as normal buttons
*/
.popoverButton {
    background-color: transparent;
    border-width: 0px;
}

/*
    Reporting search in page head.
*/
/*  Search form buttons*/
.searchFormBtn {
    width: 11rem !important;

}

    .searchFormBtn .searchFormBtnNoWidth {
        font-size: .9rem;
    }



.pagination a {
    z-index: auto !important;
}
/*
    Reporting tables: Reduce font size to keep table in grid container.
*/
.pagedDataTable {
    width: 100%;
    border-collapse: collapse;
}

    .pagedDataTable th, .pagedDataTable td {
        font-size: .9rem;
        border-bottom: 1px solid #dee2e6;
    }

    .pagedDataTable > tbody td {
        border-left: 1px solid #dee2e6;
        border-right: 1px solid #dee2e6;
    }

.thMonthEven {
    background-color: #FAFAFA !important;
}

.thMonthImpair {
    background-color: #C0C0C0 !important;
}

/*.pagedDataTable input {*/ /* For buttons */
/*padding: 0.25em 0.3em !important;
    font-size: .9rem !important;
}*/

.rowCounter {
    font-weight: bold;
}

/*
    Display a text instead of button when invoice was handled by user.
    => Text is initially hidden.
*/
.txtDone {
    display: none;
    font-size: 75%;
}

/*
    badge-button based menu styling for Brandenburg
*/
.pagedDataTable > tbody td > .dropdown-menu {
    padding: 0px !important; /* Padding Brandenburg-like */
    color: #161616;
}

    .pagedDataTable > tbody td > .dropdown-menu > a:hover {
        /* Placeholder css */
        background-color: #eee;
    }
    /*
    Feedback for user after successful action, replacing the button
*/
    .pagedDataTable > tbody td > .dropdown-menu > div {
        display: none;
    }

/*
    User sets layout of list table
*/
.userReportingColumnSettingsTable {
    width: 100%;
}

    .userReportingColumnSettingsTable th, .userReportingColumnSettingsTable td {
        font-size: .9rem;
        white-space: nowrap;
    }

.cursorLeftRight {
    cursor: e-resize;
}

/*
    Input field width when not 100%
*/
.input100percent {
    width: 100% !important;
}

.input50percent {
    width: 50% !important;
}

.input25percent {
    width: 25% !important;
}

.input20percent {
    width: 20% !important;
}

.input10percent {
    width: 10% !important;
}

/*
    Customize tool-tips
*/
.tooltip-inner {
    background-color: #FFF23D !important;
    color: #000;
    max-width: 300px;
}

.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #FFF23D !important;
}

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #FFF23D !important;
}

.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #FFF23D !important;
}

.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #FFF23D !important;
}

/***************************************************************************************************************/
/* XAR Brandenburg specific layout                                                              */
/***************************************************************************************************************/
/* Farbdefinitionen*/
/* Rot: #C73C35 */
/* Dunkelgrau: #161616 => Auch für Schrift, ist fast schwarz */
/* Mittelgrau: #C0C0C0 */
/* Hellgrau: #EEE */
/* Lichtgrau: #FAFAFA */
/* Weiss: #FFF */
/* Grauer Rahmen für Input Felder: #CACACA */

.body {
    background-color: #FAFAFA;
    color: #161616;
    font-family: OpenSans,Helvetica,Arial;
    line-height: 1.69rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.content {
    background-color: #FFF;
    padding-left: 30px;
    padding-right: 30px;
    border-style: solid;
    border-width: 0px 1px;
    border-color: #EEE; /* Hellgrau */
}

.bb-area-toolbar {
    font-size: 0.813rem;
    background-color: #FAFAFA !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
}

.bb-toolbar {
    line-height: 0.75rem;
    padding-top: 1rem;
    padding-right: 0px !important;
    padding-bottom: 0.25rem !important;
    padding-left: 0px !important;
}

    .bb-toolbar .nav-item:last-child a {
        padding-right: 0px !important;
    }

    .bb-toolbar .nav-item:not(:last-child) a {
        border-right: 1px solid #161616;
    }



@media (max-width: 768px) {
    .bb-toolbar .nav-item:not(:last-child) a {
        border-right: none;
    }
}

.bb-toolbar-container {
    padding: 0px;
}

    .bb-toolbar-container .nav-link {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

.bb-absenderkennung {
    color: #fff;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
}

    .bb-absenderkennung a {
        color: #fff;
    }

        .bb-absenderkennung a:hover {
            text-decoration: underline;
            color: #fff;
        }

.bb-themenlogo {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.bb-hauptnav {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #EEE; /* Hellgrau */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.bb-bg-hellgrau {
    background-color: #EEE;
}

.bb-bg-red {
    /* Placeholder css */
}

.bb-font-red {
    /* Placeholder css */
}

.bb-logo {
    height: 90px;
}

.bb-area-top-nav-bar {
    padding-top: 1px;
    padding-bottom: 6px;
}

.bb-area-breadcrumbs {
    padding-top: 1rem;
}

.bb-breadcrumbs {
    min-height: 2rem;
    line-height: 2rem;
    font-size: 0.813rem;
}

.bb-breadcrumbs-bold {
    font-weight: bold;
    padding-right: 5px;
}

.bb-breadcrumbs a {
    color: #161616;
    text-decoration: none;
}

/* Additional spacing to the content only for the top breadcrumb container */
.bb-breadcrumbs-top {
    padding-bottom: 0.5rem;
}

.bb-alert-container {
    padding-bottom: 1rem;
}

    .bb-alert-container .alert {
        margin-bottom: 0px !important;
    }

.bb-content {
    /* padding-bottom: 1px;*/ /*0px is not working when trying to hide grey background from body! */
    padding-bottom: 1rem;
}

.bb-search-input {
    display: inline-block;
    background-color: #fff;
    height: 2rem;
    color: #161616;
    padding: 0 0 0 5px;
    margin: 0px;
    border: solid 1px #eee;
    /* Unable to position the icon top correct next to the input field: There is always a difference of one pixel ... */
    /* => Seems as position changes using other default font types. */
    /* => Work-around for all browsers: Position relative */
    position: relative;
    top: 1px;
}

    .bb-search-input:focus {
        /* Placeholder css */
        /* Disabling the glow of the input field. */
        -webkit-box-shadow: none;
        outline: -webkit-focus-ring-color auto 0px;
    }

.bb-aera-content {
    min-height: 400px;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.bb-area-info {
    padding-top: 1rem;
}

.bb-ul-list {
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px;
    list-style-position: outside;
}

    .bb-ul-list li {
        line-height: 2rem;
        border-top: solid 1px #161616;
    }

    .bb-ul-list a {
        color: #161616;
        text-decoration: none;
    }

        .bb-ul-list a:hover {
            /* Placeholder css */
            text-decoration: underline;
        }

.fa-li .fa-caret-right { /* Used on Privacy page for unordered list icons */
    /* Placeholder css */
}

.bb-panel-gray {
    background: #eee;
    padding: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

/* Using FontAwesome .ttf for icons is a must for Brandenburg! */
.bb-icon-text {
    text-decoration: none;
    vertical-align: middle;
    padding: 0px;
    margin-right: 5px;
}

.bb-icon-button {
    /* Placeholder css */
    padding: 0px;
    color: #fff;
    height: 2rem;
    width: 2rem;
    padding: 8px 7px 0 0;
}

.bb-footer {
    /*font-size:0.813rem;*/
    height: 2rem;
    line-height: 2rem;
    color: #fff;
    /* Placeholder css */
}

    .bb-footer a {
        color: #fff;
    }

        .bb-footer a:hover {
            text-decoration: underline;
            color: #fff;
        }

.bb-footer-zusatzinfo {
    float: right;
}

.bb-navbar {
    padding: 0px;
}

.navbar-nav a {
    color: #161616 !important;
    text-decoration: none;
}

.dropdown-item.active {
    background-color: #eee;
}

.control-label-bold {
    font-weight: bold;
    margin-top: 0.7rem;
}

.bb-no-line-break {
    white-space: nowrap;
}

.bb-controlReadonly {
    background-color: #EEE !important;
    border-color: #CACACA !important;
}

.bb-maintenance-info {
    /* Placeholder css */
}

.bb-maintenance-ongoing {
    /* Placeholder css */
}

/* Color changing border of information box if maintenance is ongoing */
.bb-maintenance-ongoing {
    /* Placeholder css */
    animation: ongoingKeyFrames 15s infinite;
}

@keyframes ongoingKeyFrames {
    50% {
        border-color: #C0C0C0;
    }
}

/* Contact page hidden container table for address */
.contact-address-table {
    border: none;
}

    .contact-address-table td {
        vertical-align: top;
        border: none !important;
    }

.contact-address-table-td-red {
    font-weight: bold;
    padding-right: 15px;
    /* Placeholder css */
}

.contact-address-table-td-pair {
}

.contact-address-table-span { /* Added to get a black vertical line */
    padding-left: 15px;
    border-width: 0 0 0 1px !important;
    border-color: #000;
    border-style: solid;
}

/* Comments for checkboxes on right side of checkboxes */
.checkbox-comment-label {
    margin-left: 1rem;
}

/***************************************************************************************************************/
/* Overriding bootstrap styles for checkboxes                                                                  */
/* See: https://stackoverflow.com/questions/48373119/change-bootstrap-4-checkbox-background-color              */
/***************************************************************************************************************/

/* !!!!! Watch out: Copy-pasting or even modifying in VisualStudio will add spaces before and after the '~' sign!!!!! */
/* !!!!! => Remove these blank imperatively !!!!! */

/* Use a layout structure as below. Important: ID's must match => Modify ASP.NET radio button building!
 <div class="custom-control custom-checkbox">
    <input type="checkbox" name="customCheckbox" id="customCheckboxID" class="custom-control-input">
    <label class="custom-control-label" for="customCheckboxID">Toggle this custom radio</label>
</div>
*/

.custom-control-label:before { /* unchecked */
    background-color: #eee;
    /* Placeholder css */
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { /* checked */
    /* Placeholder css */
}

.custom-control-input:active ~ .custom-control-label::before {
    /* Placeholder css */
}

/** focus shadow pinkish **/
.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before { /* halo-glow when focus */
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 0, 247, 0.15);
    /* Placeholder css */
}

/* End of overriding bootstrap styles for checkboxes                                                           */
/***************************************************************************************************************/

/***************************************************************************************************************/
/* Overriding bootstrap styles for radios                                                                      */
/* => https://stackoverflow.com/questions/48401587/bootstrap4-radio-button-background-and-fill-color/48401949  */
/***************************************************************************************************************/

/* !!!!! Watch out: Copy-pasting or even modifying in VisualStudio will add spaces before and after the '~' sign!!!!! */
/* !!!!! => Remove these blank imperatively !!!!! */

/* Use a layout structure as below. Important: ID's must match => Modify ASP.NET radio button building!
 <div class="custom-control custom-radio">
    <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
    <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
    <label class="custom-control-label" for="customRadio2">Toggle this custom radio</label>
</div>

*/

/* This is the default state */
.custom-radio .custom-control-label::before {
    background-color: #eee; /* grey */
}

/* This is the checked state */
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    /* Placeholder css */
    /* this bg image SVG is just a white circle, you can replace it with any valid SVG code */
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E);
    border-radius: 50%;
}

/* active state i.e. displayed while the mouse is being pressed down */
.custom-radio .custom-control-input:active ~ .custom-control-label::before {
    color: #fff;
    background-color: rgba(255, 123, 255, 0.25); /* pink */
}

/* the shadow; displayed while the element is in focus */
.custom-radio .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 123, 255, 0.25); /* pink, 25% opacity */
}

/* End of overriding bootstrap styles for radios                                                               */
/***************************************************************************************************************/

/***************************************************************************************************************/
/* Overriding bootstrap styles for input fields                                                                */
/***************************************************************************************************************/
.content .form-control {
    border-radius: 0px !important;
    background-color: #fff;
}

    .content .form-control:focus {
        /* Placeholder css */
        box-shadow: none !important;
    }

.form-control.numeric-value-selector {
    display: inline !important;
}
/*
    Change Autocomplete styles in Chrome
    https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:hover {
    border: 1px solid #CACACA;
    -webkit-text-fill-color: #0a0a0a;
    -webkit-box-shadow: 0 0 0px 1000px #fefefe inset;
    transition: background-color 5000s ease-in-out 0s;
}

    /*
    When using chrome: After the initial load of the page with autofill-fields (as login), the font size is smaller than requested until the first click on the page (somewhere in the page body, must not be in the field).
    After the click the font size resizes to 1rem or whatever value is set.
    => Workaround, found on
*/
    input:-webkit-autofill::first-line {
        font-family: OpenSans,Helvetica,Arial !important;
        font-size: 1rem !important;
    }

    /* Coloring border on focus */
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill:focus {
        /* Placeholder css */
    }

.btn {
    /* No blue glow on click */
    box-shadow: none !important;
    /* Rectangular buttons, no rounded corners */
    border-radius: 0px !important
}
/* Primary buttons (Blue in Bootstrap) */
.btn-primary {
    /* Placeholder css */
    padding: 0.85em 1em !important;
    margin: 0 0 1em 0 !important;
}

    .btn-primary:focus, .btn-primary:hover {
        background-color: #fff !important;
        color: #161616 !important;
    }

/* Styling a button for an upload input field als in LeitwegUpload */
.bb-upload-container .btn-primary {
    padding: 0.375rem !important;
    margin: 0 !important;
}

/* Helper buttons (Grey in Bootstrap) */
.btn-light {
    padding: 0.85em 1em !important;
    margin: 0 0 1em 0 !important;
}
/* End of overriding bootstrap styles for input fields                                                         */
/***************************************************************************************************************/

/***************************************************************************************************************/
/* Overriding bootstrap styles for tables and pagination                                                       */
/***************************************************************************************************************/
/* Table head */
th {
    /* Placeholder css */
    background-color: #fff !important;
    border-width: 0 0 2px 0 !important;
}

td .btn-primary {
    margin: 3px !important;
}

/* Invert stripe background colors */
.table-striped > tbody > tr:nth-child(odd) > td {
    background-color: #fff;
}

.table-striped > tbody > tr:nth-child(even) > td {
    background-color: #eee;
}
/* Pagination */
.page-item a {
    /* Placeholder css */
}

    .page-item a:hover {
        /* Placeholder css */
        background-color: #fff !important;
    }

    .page-item a:focus {
        box-shadow: none !important;
    }

.page-item.active a {
    /* Placeholder css */
    color: #fff !important;
}

    .page-item.active a:hover {
        background-color: #fff !important;
        color: #161616 !important;
    }
/* End of overriding bootstrap styles for tables and pagination                                                */
/***************************************************************************************************************/

/***************************************************************************************************************/
/* Overriding bootstrap styles for toasts when clicking on 'Entfernen' of a Leitweg entry                      */
/***************************************************************************************************************/
/* Table head */
.badge {
    /* Placeholder css */
    color: #fff !important;
    border-radius: 0px !important;
    /* No blue glow on click */
    box-shadow: none !important;
    font-weight:400 !important;
    font-size:100% !important;
}

/* Clicked item => unselect */
.badge-light {
    color: #161616 !important;
    background-color: #EEE !important;
    /* Placeholder css */
}

.badge-readonly {
    color: #161616 !important;
    background-color: #EEE !important;
    border-color: #EEE !important;
    font-weight: normal !important;
    font-size: 75% !important;
    color: #212529 !important;
    padding: 0.25em 0.4em;
}

.badge-error {
    font-size: 75%;
    line-height: 1;
    font-weight: bold;
    padding: 0.25em 0.4em;
}

.toast {
    flex-basis: 140px !important;
    background-color: #FAFAFA !important;
}

.toast-header {
    padding: .25rem;
}

.toast-headerBgColor {
    /* Placeholder css */
}

/* End of overriding bootstrap styles for toasts when clicking on 'Entfernen' of a Leitweg entry               */
/***************************************************************************************************************/

/***************************************************************************************************************/
/* Overriding bootstrap styles for drop-down menus                                                             */
/***************************************************************************************************************/
.bb-hauptnav .navbar ul > li > div {
    background-color: #fafafa;
}

.bb-hauptnav .navbar ul > li > div {
    border-radius: 0;
    padding: 0;
    border-collapse: collapse;
    border-width: 1px 1px 0 1px;
}

    .bb-hauptnav .navbar ul > li > div a {
        line-height: 2rem;
        border-collapse: collapse;
        border-width: 0 0 1px 0;
        border-style: solid;
        border-color: rgba(0,0,0,.15);
    }

    .bb-hauptnav .navbar ul > li > div > a:hover {
        /* Placeholder css */
        background-color: #EEE;
    }

.bb-hauptnav .navbar ul > li > a.nav-link {
    padding-right: 0 !important;
}
/* End of overriding bootstrap styles for drop-down menus                                                      */
/***************************************************************************************************************/

/***************************************************************************************************************/
/* Search: Virtual table to prevent line-break between search input box and search button                                */
/***************************************************************************************************************/
.bb-searchtable {
    display: table;
    border-spacing: 0;
    /* To get the item to the right border without spacing or padding to the right. */
    position: absolute;
    right: 0px;
}

.bb-searchtable-row {
    display: table-row;
}

.bb-searchtable-cell {
    display: table-cell;
}
/* End of virtual table to prevent line-break between search input box and search button                         */
/***************************************************************************************************************/

/***************************************************************************************************************/
/* Overriding bootstrap default sizes due to Brandenburg Style Guides                                          */
/***************************************************************************************************************/
html {
    font-size: 1rem;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.688rem;
}

h3 {
    font-size: 1.375rem;
}

h4 {
    font-size: 1rem;
    font-weight: bold;
    font-style: italic;
}

h5 {
    font-size: 1rem;
    font-weight: bold;
    font-style: normal;
}

h6 {
    font-size: 1rem;
    font-weight: normal;
    font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0px;
    padding-bottom: 0.5rem;
    line-height: 1.4;
    text-rendering: optimizeLegibility;
    background-color: transparent;
}

p {
    line-height: 1.6;
    margin-bottom: 1rem;
}

a {
    /* Placeholder css */
    text-decoration: none;
}

    a:hover {
        /* Placeholder css */
        text-decoration: underline;
    }
/* End of overriding bootstrap default sizes due to Brandenburg Style Guides                                   */
/***************************************************************************************************************/

/***************************************************************************************************************/
/* Burger menu with mouseover                                                                                  */
/* https://webdesign.tutsplus.com/tutorials/how-to-make-the-bootstrap-navbar-dropdown-work-on-hover--cms-33840 */
/* Must use jQuery 3.3.1, 3.5.0 crashes!                                                                       */
/***************************************************************************************************************/
.bb-navbar .nav-item:not(:last-child) {
    margin-right: 35px;
}

.dropdown-toggle::after {
    transition: transform 0.15s linear;
}

.show.dropdown .dropdown-toggle::after {
    transform: translateY(3px);
}

.dropdown-menu {
    margin-top: 0px;
}
/* End of burger menu with mouseover                                                                           */
/***************************************************************************************************************/