a:focus-visible {
    outline: none;
}


/* Spinner von Eingabefelder entfernen (Firefox)
https://blog.rudolphk.co.za/css-tip-remove-spinner-on-input-of-number-9fc4d9cac121
*/
    input[type='number'] {
        -moz-appearance: textfield;
    }

/* Spinner von Eingabefelder entfernen (Chrome)
   https://blog.rudolphk.co.za/css-tip-remove-spinner-on-input-of-number-9fc4d9cac121
*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*
    Als falsch validierte Input-Felder markieren
*/
.input-validation-error {
    border-color: red;
    background-color: #fffafa;
}


/* Größere Tooltip-Breite ermöglichen
   https://codepen.io/alexaguilar/pen/ZbmZJX
*/
.tooltip-inner {
    max-width: 450px;
}

/* Style-Fehler der DataTables-Pagination im ...-Eintrag entfernen */
.paginate_button.disabled a, .paginate_button.disabled a:hover {
    border-color: #dee2e6 !important;
}

/* im Universal-Style wurden nicht die Radiobuttons/ Checkboxen gestyled */
.form-check label {
    color: #555;
}

.asset {
    height: 220px;
    width: 220px;
    margin-bottom: 16px;
}


.asset-thumbnail {
    border: 1px solid #ccc;
    border-radius: 4px !important;    
}

.asset-thumbnail a {
    color: #555;
    margin-top: 80px;
}

.asset-thumbnail a:hover {
    color: rgb(206,0,109);
}


#basket_more_form {
    border: 1px solid #ce006d;
    padding: 8px;
    max-width: 360px;
}

#basket_more_form td {
    border-top-width: 0;
}

#basket_more_form input {
    max-width: 120px;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.caret-up {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-bottom: 4px dashed;
    border-bottom: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

#productMain .sizes {
    text-align: left !important;
}

#productMain .price {
    text-align: right !important;
    line-height: 0.9 !important;
}

#productMain .price-special {
    color: #ce006d !important;
}

.product .price-special {
    font-size: 1.1rem;
    color: #ce006d !important;
}

.price del {
    color: #555;
    font-size: 0.5em;
}

span.sammelbestellung {
    cursor: pointer;
}

.hidden {
    display: none;
}


.sammelbestellung input { 
    display: block !important;/* Standard-Einstellung von Universal überschreiben */
}


.team-member-alternative {
    padding-top: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.badge-small /* Icon-Badge */
{
    width: 24px;
    height: 24px;
}

li.tracking-inactive i {
    color: #c5c5c5;
}


li.tracking-done i {
    color: forestgreen;
}

li.tracking {
    background-color: #f3f3f3;
    padding: 8px;
    border-left: 1px solid #c5c5c5;
    font-size: 140%;
}

li.tracking-done {
    background-color: #ddd;
}


.deliveryadress-code h5 {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 3px;
    height: 46px;
}


#checkout .deliveryadress-code:hover {
    cursor: pointer;
}

.background-concrete {
    color: white;
    background: url("../images/texture-concrete.jpg") center top no-repeat !important;
    max-height: 120px;
    border: 0;
}


.background-concrete2 {
    color: white;
    background: url("../images/texture-concrete2.jpg") center top no-repeat !important;
    max-height: 120px;
    border: 0;
}

.background-wood {
    color: white;
    background: url("../images/texture-wood.jpg") center top no-repeat !important;
    background-color: #131313 !important;
    min-height: 120px;
    max-height: 240px;
    border: 0;
}

.product h3 {    
    word-wrap: break-word !important;    
}

@media only screen and (max-device-width: 768px) {
    .product h3 {
        font-size: 1em !important;
    }
}

@media only screen and (min-device-width: 769px) {
    .product h3 {
        font-size: 1.1em !important;
    }
}

    .product h3 a {
        display: block; /* notwendig, damit der Container nicht überschritten wird */
    }


.icon-outlined-square {
    border-radius: 5% !important;
    font-size: 2.4em !important;
    border-width: 2px !important;
}


/* -- temporäre Lösung für DataTables-Problem */
/*
div.dataTables_wrapper > .top {
    width: 100%;
    margin-left: 2px;
    margin-right: 8px;
}

table.dataTable {
    margin-left: 2px;
    margin-right: 8px;
    box-shadow: 4px 4px 15px 0 rgba(0, 0, 0, 0.1)
}

div.dataTables_wrapper > .bottom {
    width: 100%;
    margin-left: 2px;
    margin-right: 8px;
}
*/
/* --- Seminar-Seite */
.seminar-filter {
    margin-top: 8px;
}

/** Dokumenten-Seite */
.attatched-files-list a {
    margin-left: 0 !important;
}

.attatched-files-list li > a > h5 {
    color: black !important;
}

.attatched-files-list li > a:hover {
    color: black !important;
    text-decoration: none;
}



/* -- Filterung nach Liefernaten -- */
.supplier-image-medium {
    width: 180px;
    height: 100px;
    border: 1px solid #ccc;
    margin: 4px;
}

.supplier-image-small {
    width: 90px;
    height: 50px;
    border: 1px solid #ccc;
    margin: 4px;
}

/* Aktivierter Zustand in der Sidebar */
ul ul a.nav-link.active {
    padding-left: 30px !important;
}

/* Responsive Navbar */
#navbar .nav-item .dropdown-item .dropdown-item a {
    padding-left: 40px !important;
}


/* für NAV-Pills */
.nav-item-wide {
    flex-basis: auto !important;
}


/* Cookie Banner */
.cookieConsent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 999;
    opacity: 1;
    border-radius: 0;
    background: #212327;
    color: #ecf0f1;
}

.cookieConsent .copyrights {
    padding-top: 32px;
    padding-bottom: 32px;
    background: #333;
    font-size: 0.8rem;
}


#product.box {
    margin-top: 40px !important;
    margin-bottom: 20px !important;
}

#details.box {
    /* überschreibt den Default-Margin von .box aus dem Universal Style */
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    border: 0 !important;
}


ol.breadcrumb {
    background-color: transparent;
    margin-bottom: 0 !important; /* die Überschrift in der Top-Leiste springt sonst, je nachdem, ob ein Breadcrumb vorhanden ist oder nicht */
}


.form-control.is-invalid, .was-validated .form-control:invalid {
    background-image: none;
    padding: .375rem .75rem;
    border-color: #dc3545;
    border-width: 1px;
}

.minus-btn.is-invalid, .plus-btn.is-invalid {
    border-color: #dc3545;
    border-width: 1px;
}


/* 
    Fix for odd behaviour of bootstrap-select in Mitglieder-Liste und Lieferanten-Liste
*/
.mitglieder-filter .filter-option-inner-inner,
.mitglieder-filter button,
.lieferanten-filter .filter-option-inner-inner,
.lieferanten-filter button {
    color: #999 !important;
}

/* Artikel-Seiten */
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: white;
}

.overlay190 {
    max-height: 190px;
}

.overlay250 {
    max-height: 250px;
}

.overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 0.9em;
    text-align: left;
    margin-left: 20px;
}

.image:hover .overlay {
    opacity: 0.6;
}

a.disabled {
    pointer-events: none;
    cursor: default;
}


.tab-content.orderform {
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}


/* Video Player-Styling */
.vjs-big-play-button {
    width: 103px !important;
    height: 60px !important;
    object-fit: contain !important;
    background-color: rgba(255, 255, 255, 0.25) !important;
    border: none !important;
    margin: 0 auto !important;
    line-height: 60px !important;
    top: 50% !important;
    left: 50% !important;
    border-radius: 10px !important;
    margin-top: -39.5px !important;
    margin-left: -39.5px !important;
}

a.disabled {
    pointer-events: none;
    cursor: default;
}


div.row p {
    width: 100%;
}


/* Fraesorder */
#farbanzeige {
    width: 36px;
    height: 100%;
    background-color: #C1BFBF;
}


/* Entnommen aus Universal Theme für Bootstrap 5 */
.lined {
    position: relative;
    padding-bottom: 0.7rem;
}

.lined::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 6.25rem;
    height: 2px;
    background: #ce006d;
}


.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto
}

@media(min-width: 576px) {
    .container-sm,
    .container {
        max-width: 540px
    }
}

@media(min-width: 768px) {
    .container-md,
    .container-sm,
    .container {
        max-width: 720px
    }
}

@media(min-width: 992px) {
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 960px
    }
}

@media(min-width: 1200px) {
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1140px
    }
}

@media(min-width: 1400px) {
    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1320px
    }
}


/* auf weißen Hintergrund ist der Default-Style weiß, d.h. der Dot ist nicht sichtbar */
.owl-carousel .owl-dots .owl-dot.active span {
    background-color: #eee;
}



/* Selectpicker-Anpassungen, damit dieser zum Style passt */
.bootstrap-select > .dropdown-toggle, .bootstrap-select > .dropdown-toggle.bs-placeholder {
    border: 1px solid #ced4da !important;
    background-color: #fff !important;
    font-weight: 400;
    text-transform: none;
    font-size: 16px;
    letter-spacing: normal;
    padding-top: 6px;
    padding-bottom: 6px;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
    color: rgb(73, 80, 87) !important;
}

/* Shop/ Section-Seite */
.grayscale-with-hover-effect {
    filter: grayscale(100%) brightness(1.1);    
    opacity: 0.85;
    transition: filter 0.3s;
}

.grayscale-with-hover-effect:hover {
    filter: grayscale(0%) brightness(1);
    opactiry: 1;
}