/*
Theme Name: Bowling Vereniging Venray
Author: Giel van Gorp
Version: 1.0
*/

.training-item.first {
    border: 1px solid var(--orange);
    overflow: auto;
}

.training-item.first button {
    border: 1px solid var(--orange) !important;
    color: white !important;
    background-color: var(--orange) !important;
}

.training-item.first button:hover {
    background-color: white !important;
    color: var(--orange) !important;
}

.training-item.first .first-card {
    position: absolute;
    top: 0;
    margin: auto;
    transform: translate(25%, -50%);
    background-color: var(--orange);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.25rem 0.5rem;
    border-bottom-left-radius: 1rem;
}

.training-hero {
    position: relative;
    overflow: hidden;
    /* background:
        radial-gradient(circle at top left, rgba(255,159,28,.25), transparent 28%),
        radial-gradient(circle at bottom right, rgba(255,255,255,.08), transparent 35%),
        linear-gradient(135deg,
            #04152e 0%,
            #082a5e 45%,
            #0b4b8a 100%); */
}

.training-hero::before{
    content:"";
    position:absolute;
    inset:0;
    /* background:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); */
    background-size:40px 40px;
    mask-image:linear-gradient(to bottom, black, transparent);
    opacity:.4;
}

.training-hero::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    /* background:rgba(255,159,28,.12); */
    filter:blur(80px);
    right:-120px;
    top:-120px;
}

.training-hero .training-backdrop {
    /* backdrop-filter: blur(16px);
    background: rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15); */
}

.training-slider {
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.training-slider::-webkit-scrollbar {
    display: none;
}

.training-card {
    width: 185px;
}

.training-item {
    transition: transform .25s ease, box-shadow .25s ease;
}

.training-item button {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.training-item button:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.training-scroll-btn {
    width: 42px;
    height: 42px;
    color: var(--primary-color);
    transition: all .2s ease;
}

.training-scroll-btn:hover {
    background-color: var(--primary-color);
    color: white;
    transform: scale(1.08);
}

.modal-footer div div:last-child button {
    background-color: var(--primary-color) !important;
    transition: all .2s ease;
    border: none;
    color: white !important;
}

.modal-footer div div:last-child button:hover {
    background-color: var(--primary-color) !important;
    opacity: 0.8;
}

.check-square {
    background: black;
    width: 16px;
    height: 16px;
}

.btn-check:checked + .btn {
    background: linear-gradient(
        135deg,
        var(--primary-color),
        #154b87
    );
    border-color: transparent;
    color: white;
    box-shadow: 0 .4rem 1rem rgba(8,42,94,.25);
}