.session {
    /*background: #999 !important;*/
}

.presentation {
    /*background: #666 !important;*/
}

#myModal {
    z-index: 1041;
    .modal-footer {
        .btn {
            background-color: var(--primary-color);
            height: 3rem;
            font-size: 1.4rem;
        }
    }

    @media screen and (min-width: 567px) {
        .modal-dialog {
            max-width: 70vw;
        }
    }

}

/* =========================================
   Grid (sm)
========================================= */
@media (min-width: 576px) {
    .xwrapper {
        .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; }
        .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; }
        .col-sm-3 { flex: 0 0 auto; width: 25%; }
        .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
        .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; }
        .col-sm-6 { flex: 0 0 auto; width: 50%; }
        .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; }
        .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
        .col-sm-9 { flex: 0 0 auto; width: 75%; }
        .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; }
        .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; }
        .col-sm-12 { flex: 0 0 auto; width: 100%; }
    }
}

/* =========================================
   Wrapper scoped styles
========================================= */
.xwrapper {
    /* spacing */
    .mb-1 { margin-bottom: 0.25rem; }
    .mb-2 { margin-bottom: 0.5rem; }
    .mb-3 { margin-bottom: 1rem; }
    .mb-4 { margin-bottom: 1.5rem; }

    .row.filter-container {

        div {
            font-size: 1.6rem;
        }

        .btn {
            background: var(--primary-color);
            height: 3rem;
            font-size: 1.4rem;
        }

        .chosen-container {
            margin-right: 1rem !important;
        }

        input {
            &#sp_cool_search {
                margin-right: 1rem;
                font-size: 1.4rem;
                color: var(--black);
                + .input-group-prepend {
                    margin-left: -1rem;
                    margin-right: 1rem !important;
                }
            }
        }
    }

    .sessions, .presentation {
        .session-btn-container,
        .presentation-btn-container {
            .btn {
                font-size: 1.6rem;
            }
        }
    }

    /* card */
    .card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: var(--bs-card-bg, #fff);
        background-clip: border-box;
        border: var(--bs-card-border-width, 1px) solid
        var(--bs-card-border-color, rgba(0, 0, 0, 0.125));
        border-radius: var(--bs-card-border-radius, 0.375rem);

        /* later overrides (samengevoegd) */
        border: 1px solid #eee;
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 20px;
    }

    .card-body {
        flex: 1 1 auto;
        padding: var(--bs-card-spacer-y, 1rem) var(--bs-card-spacer-x, 1rem);

        /* later override */
        display: block;

        &::after {
            content: "";
            display: block;
            clear: both;
        }
    }

    .card-title { margin-bottom: 0.5rem; }

    .card-subtitle {
        margin-top: -0.25rem;
        margin-bottom: 0;
    }

    .card-text:last-child { margin-bottom: 0; }

    .card-link + .card-link { margin-left: 1rem; }

    /* typography / buttons */
    .small { font-size: 12pt; }

    .btn-default { padding: 7px; }

    .session-title,
    .presentation-title {
        margin-bottom: 10px;
    }

    p {
        display: inline;
        margin: 0 !important;
    }

    /* collapse buttons */
    .btn-collapse {
        background-color: var(--primary-color) !important;
        font-weight: bold;
        font-size: 15px;
        float: right;
        border: none;

        /* later overrides */
        width: 35px;
        height: 35px;
        color: white !important;
        background-color: #0086ac;
    }

    .btn-collapse-xs {
        height: 30px;
        width: 30px;
        padding-top: 1px;
        display: none;
    }

    /* layout helpers */
    .day-title {
        float: left;
        margin-top: 4px;
    }

    .presentation {
        border-left: 3px solid #000;
        padding: 5px;
        padding-left: 20px;
        margin-top: 20px;
    }

    .sub-sessions { margin-left: 25px; }

    .availability_container {
        font-size: small;
        font-style: italic;
    }

    .timeframes,
    .timeframe {
        border: none !important;
        padding: 0;
    }

    .timeframe-header { display: none !important; }

    /* search buttons */
    .btn-search { padding: 5px 10px 5px 10px; }

    .btn-clear-search {
        border: 1px solid #ced4da !important;
        border-left: 0 !important;
        border-right: 0 !important;
        display: none;
    }

    /* print mode */
    &.print {
        font-family: Arial, Verdana;
    }

    .print {
        .session {
            margin: 10px 0;
            border: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.125);
        }

        .session-title {
            font-weight: bold;
            font-size: 16px;
        }

        .time {
            font-size: 11px;
            color: grey;
        }

        .location { margin: 3px 0 3px 0; }

        .session-title,
        .presentation-title {
            clear: both;
            margin-top: 5px;
            margin-bottom: 3px;
        }

        .presentation {
            margin: 0;
            padding: 0;
            margin-bottom: 15px !important;

            div {
                margin-left: 7px;
                padding-left: 0px;
            }
        }

        .presentation-time { margin-bottom: 4px; }

        .session-persons,
        .presentation-persons {
            font-size: 13px;
            margin-left: 0 !important;
        }

        .btn-collapse,
        .btn-collapse-xs,
        .filter-container,
        .session-btn-container {
            display: none;
        }
    }

    /* collapse behavior */
    .collapse { display: none; }

    .collapse.show {
        visibility: visible;
        display: block;
    }

    .collapsing {
        position: relative;
        height: 0;
        overflow: hidden;
        transition-property: height, visibility;
        transition-duration: 0.35s;
        transition-timing-function: ease;

        &.width {
            transition-property: width, visibility;
            width: 0;
            height: auto;
        }
    }

    .abstract_image {
        max-width: -webkit-fill-available;
    }
}

/* =========================================
   Not wrapper-scoped (blijft global)
========================================= */
.session-btn-container,
.presentation-btn-container {
    padding-top: 10px;
}

.text-muted {
    color: #868e96 !important;
}

.location_text,
.session-time {
    font-size: 10pt;
    /* padding-left:5px; */
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.session-persons {
    clear: both;
    font-size: 12pt;
    color: #555;
}

/* =========================================
   Responsive overrides
========================================= */
@media (max-width: 575px) {
    .xwrapper {
        .session {
            padding-left: 0px;
            padding-right: 0px;
            border: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.125);
            border-radius: 0;
        }

        .btn-collapse-xs {
            display: block !important;
        }

        .timeframes {
            .btn-collapse { display: none; }
        }
    }
}

@media (min-width: 576px) {
    .xwrapper {
        .btn-collapse { display: block; }

        .timeframes {
            .btn-collapse-xs { display: none; }
        }
    }
}