.dante-event-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.dante-event-listitem {
    width: calc(25% - 15px);
    margin-right: 20px;
    margin-bottom: 20px;
    transition: all 0.3s;
}

.dante-eventlistitem-inner {
    position: relative;
    min-height: 300px;
    padding: 25px 20px 75px 20px;
    transition: all 0.3s;
    background-color: #F3F6F9;
    overflow: hidden;
    border-radius: 12px;
}

.dante-tags-main {
    position: absolute;
    right: 10px;
    top: 2px;
}

.dante-event-date {
    font: normal normal 500 28px / 32px "BM", sans-serif;
    letter-spacing: 0px;
    color: #333333;
    margin-bottom: 20px;
}

.dante-details {
    font: normal normal normal 18px / 24px "BL", sans-serif;
    letter-spacing: 0px;
    color: #241E4D;
}

.dante-duration, .dante-location, .dante-offers {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    font: normal normal normal 18px / 24px "BL", sans-serif;
    letter-spacing: 0px;
    color: #241E4D;
}

.dante-offers {
    font-weight: bold;
}

/* The room, under the campus. Dante staff type this into the schedule's free-text CourseLocation
   field, so it is secondary detail rather than the location itself. */
.dante-location-room {
    display: block;
    font-size: 15px;
    line-height: 20px;
    opacity: 0.75;
}

    .dante-duration i, .dante-location i, .dante-offers i {
        padding-right: 8px;
        color: #212121;
        margin-right: 10px;
        width: 15px;
        font-size: 18px;
        align-self: center;
    }

.places-limited {
    font: normal normal 300 12px / 16px "BL", sans-serif;
    background-color: #7BBDD6;
    padding: 2px 8px;
    display: inline-flex;
    border-radius: 6px;
    color: #fff;
}

.places-full {
    font: normal normal 300 12px / 16px "BL", sans-serif;
    background-color: #E9CD53;
    padding: 2px 8px;
    display: inline-flex;
    border-radius: 6px;
    color: #241E4D;
}

.dante-item-footer {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    margin: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.dante-register {
    background-color: #241E4D !important;
    color: #fff !important;
    border: 1px solid #241E4D;
    border-radius: 25px;
    padding-right: 55px;
    padding: 0 15px;
    font: normal normal 300 20px / 28px "BL", sans-serif;
    color: #241E4D;
    font: normal normal normal 18px / 24px "BM", sans-serif;
    letter-spacing: 0px;
    padding: 11px 24px;
    transition: all 0.3s;
    opacity: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .dante-register span {
        flex: 1;
        padding-right: 10px;
    }

    .dante-register i {
        flex-shrink: 0;
    }

    .dante-register:hover {
        background-color: #5F509B;
        color: #fff;
    }

    .dante-register:active {
        transform: translateY(0);
    }

.dante-waiting-list {
    border: 1px solid #241E4D;
    border-radius: 25px;
    padding-right: 55px;
    padding: 0 15px;
    font: normal normal 300 20px / 28px "BL", sans-serif;
    color: #241E4D;
    font: normal normal normal 18px / 24px "BM", sans-serif;
    letter-spacing: 0px;
    padding: 11px 24px;
    transition: all 0.3s;
    opacity: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #241E4D !important;
    background-color: transparent;
}

    .dante-waiting-list span {
        flex: 1;
        padding-right: 10px;
    }

    .dante-waiting-list i {
        flex-shrink: 0;
    }

    .dante-waiting-list:hover {
        background-color: #5F509B;
        color: #fff;
    }

    .dante-waiting-list:active {
        transform: translateY(0);
    }

.dante-event-register {
    color: #fff;
}

.dante-waiting-list span {
    color: #241E4D;
}

.dante-waiting-list:hover {
    color: #fff !important;
    background-color: #AC3F90;
}

    .dante-waiting-list:hover span {
        color: #fff !important;
    }


.dante-register-interest-container {
    display: flex;
    gap: 10px;
    text-align: center;
    margin: 60px 0;
    clear: both;
}

.dante-register-private-interest {
    width: 100%;
    display: flex;
    font: normal normal normal 20px / 24px "BM", sans-serif;
    letter-spacing: 0px;
    color: #241E4D;
    padding: 16px 28px;
    background-color: #F3F6F9;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

    .dante-register-private-interest a {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #AC3F90;
        transition: all 0.3s;
        border: 1px solid #AC3F90;
        border-radius: 25px;
        padding: 11px 25px 11px 24px;
        position: relative;
    }

    .dante-register-private-interest i {
        margin-left: 15px;
    }

    .dante-register-private-interest a:hover {
        color: #fff !important;
        background-color: #AC3F90;
    }

.dante-accordion-item {
    border-bottom: 1px solid #ddd;
    padding-bottom: 0px !important;
}

.dante-accordion-header {
    font: normal normal 500 32px / 36px "BM", sans-serif;
    letter-spacing: 0px;
    color: #241e4d;
    position: relative;
    margin: 0;
    padding-right: 3em;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
}

    .dante-accordion-header::after {
        content: '+';
        position: absolute;
        right: 20px;
        transition: transform .3s ease;
    }

    .dante-accordion-header.active::before {
        transform: rotate(90deg);
    }

    .dante-accordion-header.active::after {
        content: '−';
    }

.dante-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
    margin-bottom: 0px !important;
}

    .dante-accordion-content.open {
        display: block !important;
        transition: all 3s;
        padding-bottom: 15px;
    }

.dante-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

    .dante-modal.show {
        display: flex;
    }

.dante-modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    max-width: 450px;
    width: 90%;
    text-align: center;
}

.dante-modal-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}

.dante-modal-primary,
.dante-modal-secondary {
    border: none;
    cursor: pointer;
    padding: 12px 24px;
    border-radius: 25px;
    transition: .3s;
}

.dante-modal-primary {
    background: #241E4D;
    color: #fff;
}

    .dante-modal-primary:hover {
        background: #5F509B;
    }

.dante-modal-secondary {
    background: #f3f6f9;
}

/* Breakpoints for .dante-event-listitem itself live in arloCourse.css, whose deeper
   selectors win - only rules it does not already cover belong here. */
@media (max-width: 767px) {

    .dante-eventlistitem-inner {
        min-height: 0;
    }

    .dante-register-interest-container {
        margin: 40px 0;
    }

    .dante-register-private-interest {
        flex-direction: column;
        gap: 15px;
        padding: 20px;
    }
}