/* css classes for the floating buttons that we use for interacting with a form */
.btn-circle {
    width: 56px;
    height: 56px;
    line-height: 56px !important;
    text-align: center !important;
    padding: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23) !important;
}

body {
    background: #f4f6f9;
    overflow: -moz-scrollbars-none;
}

/* additional custom placeholder styles (classes copied from bootstrap css) */
.form-control::-webkit-input-placeholder {
    font-style: italic;
}

.form-control::-moz-placeholder {
    font-style: italic;
}

.form-control:-ms-input-placeholder {
    font-style: italic;
}

.form-control::placeholder {
    font-style: italic;
}


/* select2 placeholder style */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: #939ba2 !important;
    /*override default value*/
    opacity: 1;
    font-style: italic;
}

.select2-selection.select2-selection--multiple .select2-search__field::placeholder {
    color: #939ba2;
}

/* sets select2 placeholder for multiple items */
.select2 .select2-selection.select2-selection--multiple input::placeholder {
    font-style: italic;
}

/* force overwrite of adminlte settings */
select:not(.is-invalid) ~ .select2-container--bootstrap4 .select2-selection.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--focus .select2-selection {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25) !important;
}

form.was-validated select:invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection,
select.is-invalid ~ .select2-container--bootstrap4.select2-container--focus .select2-selection {
    -webkit-box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .25) !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .25) !important;
}

.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .25) !important;
}

.select2-container--bootstrap4 .select2-selection[aria-expanded=true] {
    /*border-color: #007bff;*/
    -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25) !important;
}

.select2-sm .select2-selection__rendered {
    line-height: unset !important;
}

.select2-sm.select2-selection--single {
    height: unset !important;
}

.select2-results__option--highlighted .subtitle {
    color: var(--light) !important;
}

.select2-selection__rendered .subtitle,
.select2-results__option:not(.select2-results__option--highlighted) .subtitle {
    color: var(--secondary);
}

.input-group.input-group-sm .select2-selection {
    height: calc(1.8125rem + 2px) !important;
    /*from adminlte*/
}

.input-group.input-group-sm .select2-selection__rendered {
    /*values from normal input-group-sm select*/
    line-height: 1.5 !important;
    font-size: .875rem !important;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

    .input-group.input-group-sm .select2-selection__rendered .select2-selection__placeholder {
        line-height: 1.5;
        /*the placeholder defaults to another line-height, use 1.5 again here*/
    }

    .input-group.input-group-sm .select2-selection__rendered .select2-selection__clear {
        margin-top: 0.1rem;
    }

/* the following two statement should fix initially missing placeholders for some select2 elements: https://stackoverflow.com/a/61059820 */
.select2-search--inline {
    display: contents;
    /*this will make the container disappear, making the child the one who sets the width of the element*/
}

.select2-search.select2-search--inline:first-child > .select2-search__field:placeholder-shown {
    width: 100% !important;
    /*makes the placeholder to be 100% of the width while there are no options selected*/
}

.select2-selection.select2-selection--multiple {
    padding-right: 2rem;
}

.select2-selection--multiple .select2-selection__clear {
    position: absolute;
    right: 1rem;
}

.select2-container .select2-selectable-groups .select2-results__group {
    cursor: pointer;
}

    .select2-container .select2-selectable-groups .select2-results__group.select2-results__option--highlighted {
        color: #f8f9fa !important;
    }

/*workaround for http://192.168.20.35:8080/browse/LTPORTAL-4006*/
.select2-selection.select2-selection--multiple.select2-max-height {
    max-height: 250px;
    overflow-y: auto;
}


.modal-footer .btn-primary:focus-visible {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

.modal-footer .btn-secondary:focus-visible {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

.modal-footer .btn-success:focus-visible {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}

.modal-footer .btn-danger:focus-visible {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}

/* 
    In case multiple modal dialog are open the backdrops tend to stack.
    Rather than trying to manually hide them via JS it was easier and 
    less prone to errors to just hide any sibling backdrops after the
    first one.
*/
.modal-backdrop ~ .modal-backdrop {
    display: none;
}

.lnt-page-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1008;
    background: var(--light);
    color: var(--dark);
}

    .lnt-page-overlay.opaque {
        background: rgba(0, 0, 0, .5);
        color: var(--light);
    }

    .lnt-page-overlay > .overlay-content {
        position: fixed;
        top: 50vh;
        left: 50vw;
    }

.right-static-content {
    right: 1rem;
}

/* Extending boostrap behaviour */
.btn-primary:focus-visible {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-default:focus-visible {
    background-color: #e9ecef;
    color: #2b2b2b;
}

.input-group .show-pw-btn {
    top: 0;
    visibility: hidden;
}

/* ... well ... this checks if the input has something init and then shows the button */
.input-group:has(input:-webkit-autofill, input:not(:placeholder-shown):not(:-webkit-autofill)) .show-pw-btn {
    visibility: visible;
}

.input-group .show-pw-btn {
    padding-inline: 0;
    padding-block: 0.375rem;
    z-index: 3;
}