/* Sport Lackner Grossarl branding for the reusable Rent extension. */
.tx-rent,
#addbasketModal,
#datepickerModal,
.flatpickr-calendar {
    --rent-site-bg: #07182f;
    --rent-site-panel: #0d2d54;
    --rent-site-panel-high: #133d6e;
    --rent-site-panel-muted: #0a2547;
    --rent-site-input: #071f3c;
    --rent-site-text: #ffffff;
    --rent-site-muted: #b8c8dc;
    --rent-site-accent: #bc000c;
    --rent-site-accent-hover: #990009;
    --rent-site-accent-soft: rgba(188, 0, 12, .18);
    --rent-site-border: rgba(184, 200, 220, .24);
    --rent-site-border-strong: rgba(219, 229, 241, .52);
}

.tx-rent {
    font-family: "Outfit", Arial, sans-serif;
}

.tx-rent .tx-rent-offer-grid > .tx-rent-offer-col .tx-rent-offer-card,
.tx-rent .tx-rent-offer-grid > .tx-rent-offer-col .tx-rent-offer-card .card-body {
    background: var(--rent-site-panel) !important;
    border-color: var(--rent-site-border) !important;
    color: var(--rent-site-text) !important;
}

.tx-rent .tx-rent-offer-grid > .tx-rent-offer-col .tx-rent-offer-card {
    box-shadow: 0 8px 18px rgba(0, 0, 0, .28) !important;
}

.tx-rent .tx-rent-offer-grid > .tx-rent-offer-col .tx-rent-offer-card .card-title {
    color: var(--rent-site-text) !important;
}

.tx-rent .btn-primary,
.tx-rent button.btn-primary,
.tx-rent input[type="submit"].btn-primary,
.tx-rent .tx-rent-period-bar .btn,
.tx-rent .tx-rent-basket-actions .tx-rent-basket-update-btn,
.tx-rent .tx-rent-basket-actions .tx-rent-basket-checkout,
.tx-rent .tx-rent-checkout-form .jetzt_buchen .btn,
.tx-rent .tx-rent-checkout-form .jetzt_buchen input[type="submit"],
#addbasketModal .btn-primary,
#addbasketModal .tx-rent-addbasket-submit {
    border-radius: .25rem;
    background: var(--rent-site-accent) !important;
    border-color: var(--rent-site-accent) !important;
    color: #ffffff !important;
}

.tx-rent .btn-primary:hover,
.tx-rent .btn-primary:focus,
.tx-rent .btn-primary:active,
.tx-rent button.btn-primary:hover,
.tx-rent button.btn-primary:focus,
.tx-rent button.btn-primary:active,
.tx-rent input[type="submit"].btn-primary:hover,
.tx-rent input[type="submit"].btn-primary:focus,
.tx-rent input[type="submit"].btn-primary:active,
#addbasketModal .btn-primary:hover,
#addbasketModal .btn-primary:focus,
#addbasketModal .btn-primary:active,
#addbasketModal .tx-rent-addbasket-submit:hover,
#addbasketModal .tx-rent-addbasket-submit:focus,
#addbasketModal .tx-rent-addbasket-submit:active {
    background: var(--rent-site-accent-hover) !important;
    border-color: var(--rent-site-accent-hover) !important;
    color: #ffffff !important;
}

#addbasketModal .typo3-messages .alert-success {
    background: var(--rent-site-accent) !important;
    border-color: var(--rent-site-accent) !important;
    color: #ffffff !important;
}

#addbasketModal .typo3-messages .alert-success p {
    color: #ffffff !important;
}

.tx-rent .nav-pills .nav-link.active,
.tx-rent .nav-pills .show > .nav-link,
.tx-rent #datepickerModal .flatpickr-day.selected,
.tx-rent #datepickerModal .flatpickr-day.startRange,
.tx-rent #datepickerModal .flatpickr-day.endRange {
    background: var(--rent-site-accent);
    border-color: var(--rent-site-accent);
    color: #ffffff;
}

.tx-rent .form-control:focus,
.tx-rent .form-select:focus,
.tx-rent input:focus,
.tx-rent select:focus,
.tx-rent textarea:focus {
    border-color: var(--rent-site-accent);
    box-shadow: 0 0 0 .2rem rgba(188, 0, 12, .18);
}

.tx-rent .descount,
.tx-rent .tx-rent-article-badge,
.tx-rent .tx-rent-checkout-form .verleih .tx-rent-checkout-badge {
    border-color: rgba(188, 0, 12, .34);
}

.tx-rent .tx-rent-period-bar {
    background: #09284d;
    border-color: var(--rent-site-border);
}

.tx-rent .carousel,
.tx-rent .tx-rent-checkout-form .tx-rent-checkout-product-media,
.tx-rent .warenkorb .verleih .persone .name .product-media {
    background: radial-gradient(circle at 50% 30%, #17477c 0%, #0d2d54 55%, #07182f 100%);
}

#datepickerModal .modal-content,
#datepickerModal .modal-header,
#datepickerModal .modal-body,
#datepickerModal .modal-footer,
#addbasketModal .modal-content,
#addbasketModal .modal-header,
#addbasketModal .modal-body,
#addbasketModal .modal-footer {
    background: var(--rent-site-panel) !important;
    border-color: var(--rent-site-border) !important;
    color: var(--rent-site-text) !important;
}

#datepickerModal .modal-title,
#datepickerModal .modal-header h5,
#datepickerModal .tx-rent-date-form h3,
#datepickerModal .tx-rent-date-form p,
#addbasketModal .modal-title,
#addbasketModal h1,
#addbasketModal h2,
#addbasketModal h3,
#addbasketModal h4,
#addbasketModal h5 {
    color: var(--rent-site-text) !important;
}

#datepickerModal .form-control,
#datepickerModal input[type="text"] {
    background: var(--rent-site-input) !important;
    border-color: var(--rent-site-border) !important;
    color: var(--rent-site-text) !important;
}

#datepickerModal .form-control:focus,
#datepickerModal input[type="text"]:focus {
    border-color: var(--rent-site-accent) !important;
    box-shadow: 0 0 0 .2rem rgba(188, 0, 12, .18) !important;
}

#datepickerModal .btn-primary,
#datepickerModal input[type="submit"].btn-primary {
    background: var(--rent-site-accent) !important;
    border-color: var(--rent-site-accent) !important;
    color: #ffffff !important;
}

#datepickerModal .btn-primary:hover,
#datepickerModal .btn-primary:focus,
#datepickerModal input[type="submit"].btn-primary:hover,
#datepickerModal input[type="submit"].btn-primary:focus {
    background: var(--rent-site-accent-hover) !important;
    border-color: var(--rent-site-accent-hover) !important;
}

.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
    background: var(--rent-site-accent) !important;
    border-color: var(--rent-site-accent) !important;
    color: #ffffff !important;
}

.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-calendar .flatpickr-current-month input.cur-year:hover,
.flatpickr-calendar .flatpickr-current-month input.cur-year:focus,
.flatpickr-calendar .numInputWrapper input:hover,
.flatpickr-calendar .numInputWrapper input:focus {
    outline-color: rgba(188, 0, 12, .5) !important;
}