/*------------------------- Main -------------------------*/

.lrn-events .filters-outer {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.lrn-events .main-section {
    padding-left: 15px !important;
    padding-right: 15px !important;
}


@media(max-width:991px) {
    .lrn-events .filters-outer {
        padding-bottom: 0 !important;
    }

    .lrn-events .main-section {
        padding-top: 0 !important;
    }
}

/*------------------------- Filters -------------------------*/
.lrn-events .filters-listing__inner {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    overflow-x: scroll;
}

.lrn-events .filter-group {
    display: none;
}

.lrn-events .filter-group button {
    display: inline-flex;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    border: none;
    padding: 0;
    font-size: 14px;
    line-height: normal;
    font-weight: 800;
    margin: 0;
    color: var(--danger);
    background: none;
    text-decoration: underline;
    transition: all 250ms ease;
}

.lrn-events .filter-group button:hover {
    filter: brightness(110%);
    transition: all 250ms ease;
}

.lrn-events .filter-group button.clear {
    display: none;
}

.lrn-events .filter-group .filters {
    padding: 0;
    margin: 0;
    list-style: none;
}

.lrn-events .filters li:nth-child(n+6) {
    display: none;
    /* Number Should be editable */
}

.lrn-events .filters.expand li:nth-child(n+6) {
    display: block;
}

.lrn-events .filters input[type="checkbox"] {
    width: auto;
}

.lrn-events .filters input[type="checkbox"]:not(:checked),
.lrn-events .filters input[type="checkbox"]:checked {
    left: -9999px;
    position: absolute;
}

.lrn-events .filters label span {
    position: relative;
    padding-left: 2rem;
    display: inline-block;
    line-height: 1.75rem;
    cursor: pointer;
    margin: 0 0 .3rem;
    color: #1B242B;
    /* should be editable */
    font-family: Poppins;
    /* should be editable */
    font-size: 1rem;
    /* should be editable */
    font-style: normal;
    /* should be editable */
    text-decoration: none;
}

.lrn-events .filters input[type="checkbox"]:not(:checked)+span {
    cursor: pointer;
    display: inline-block;
    line-height: 1.75rem;
    padding-left: 2rem;
    position: relative;
}

.lrn-events .filters input[type="checkbox"]:checked+span:before,
.lrn-events .filters input[type="checkbox"]:not(:checked)+span:before {
    background: #fff;
    border-radius: 3px;
    content: "";
    height: 1.5rem;
    left: 0;
    position: absolute;
    top: 1px;
    width: 1.5rem;
}

.lrn-events .filters input[type="checkbox"]:checked+span:before,
.lrn-events .filters input[type="checkbox"]:not(:checked)+span:before {
    border: 1px solid #8E9C9C;
    /* should be editable */
}

.lrn-events .filters input[type="checkbox"]:checked+span:before {
    background: var(--danger);
    /* should be editable */
}

.lrn-events .filters input[type="checkbox"]:checked+span:after,
.lrn-events .filters input[type="checkbox"]:not(:checked)+span:after {
    content: url('data:image/svg+xml; utf8, <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5L3.5 7L9 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    height: 8px;
    left: 6px;
    position: absolute;
    top: -3px;
    transition: all .2s ease;
    width: 10px;
}

.lrn-events .filters input[type="checkbox"]:not(:checked)+span:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.lrn-events .filters input[type="checkbox"]:checked+span:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.lrn-events .filter-select {
    min-width: 180px;
}

.lrn-events .filter-select select {
    min-height: 3.3rem;
}

.lrn-events .filter-select select {
    background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M7.80794 10.7695L4.09346 6.31215C3.65924 5.79109 4.02976 5 4.70803 5L11.292 5C11.9702 5 12.3408 5.79108 11.9065 6.31215L8.19206 10.7695C8.09211 10.8895 7.90789 10.8895 7.80794 10.7695Z" fill="%23A51B63"/>%20</svg>');
    background-position: calc(100% - 12px);
    background-repeat: no-repeat;
    height: auto;
}

@media (min-width:992px) {
    .lrn-events .filters-listing__inner {
        display: block;
        overflow-x: unset;
    }

    .lrn-events .filter-group {
        display: block
    }

    .lrn-events .filter-select {
        display: none;
    }
}

/*------------------------- Cards -------------------------*/
.lrn-events .card .card-inner {
    background-color: var(--white);
    border-radius: 5px;
    border: 1px solid var(--Supporting-18, #EAEAEA);
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.10);
    transition: all 250ms ease;
}

.lrn-events .card .card-inner:hover {
    background-color: var(--white);
    border: 1px solid #00A59C;
}
.lrn-events .card-tags span {
    border-radius: 100px;
    background: #00635E;
    color: #fff;
}
.lrn-events .card-tags span[data-class="in_person"] {
    background: #A50063;
}
.lrn-events .card-tags span[data-class="on_demand"] {
    background: #8E9C9C;
}
.lrn-events .card-tags span[data-class="webinar"] {
    background: #8DA2B4;
}
.lrn-events .cards {
    row-gap: 30px;
    align-items: stretch;
}

.lrn-events .card {
    display: flex;
    background-color: transparent;
    border: 0;
    border-radius: 0;
}

.lrn-events .card .card-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
}

.lrn-events .card-date {
    display: flex;
    color: #1B242B;
    font-size: 14px;
    align-items: center;
    line-height: 1;
    gap: 5px;
    flex-wrap: wrap;
}

.lrn-events .card-date .date {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.lrn-events .card-inner .expand-icon {
    display: flex;
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
    pointer-events: none;
}

.lrn-events .card-inner .card-content {
    padding: 25px 40px 25px 16px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 200px);
}

.lrn-events .card-inner .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    height: 200px;
}

.lrn-events .card-inner .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lrn-events .card-inner .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.lrn-events .card-tags span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    margin: 0;
    font-size: 11px;
    line-height: normal;
}

@media (min-width: 768px) {
    .lrn-events .card-inner .card-content {
        padding: 25px 50px 25px 25px;
    }
}

@media (min-width:992px) {
    .lrn-events .cards {
        padding-left: 15px;
    }
}


/*------------------------- Modal -------------------------*/
.lrn-events .sr-modal .modal-header {
    padding: 1rem 3rem;
}

.lrn-events .sr-modal .modal-body {
    padding: 0;
}

.lrn-events .modal-body .info-wrapper {
    padding: 24px;
}

.lrn-events .modal-body .cta-container {
    padding: 15px 40px;
    background: #F6F6F6;
    border-radius: 0 0 10px 10px;
}

.lrn-events .modal-backdrop.fade.show {
    display: none;
}

.lrn-events .modal-content {
    border: 2px solid #EDEDED;
    /* should be editable */
    border-radius: 10px;
    /* Should be editable */
}

.lrn-events .sr-modal button.close {
    position: absolute;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.25rem;
    border-radius: 50%;
    opacity: 1;
    right: 1rem;
    top: 1rem;
    background: transparent;
    color: #333;
    color: var(--primary);
    border: 1px solid;
    text-align: center;
    display: -ms-grid;
    display: grid;
    place-content: center;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    z-index: 1;
}

.lrn-events .modal-body .item-outline {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    font-size: 16px;
}

.lrn-events .modal-body .description {
    margin-top: 2rem;
    background: #F6F6F6;
    padding: 15px;
    border-radius: 10px;
}

.lrn-events .description ul {
    list-style-image: url('https://lrn.com/hubfs/check.svg');
    padding-left: 1.5rem;
}

.lrn-events .description li {
    font-size: 14px;
}

.lrn-events .filter-group h5 {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 400;
    color: var(--primary);
    font-weight: bold;
}

@media(min-width:768px) {
    .lrn-events .modal-body .info-wrapper {
        padding: 40px;
    }

    .lrn-events .modal-body .description {
        padding: 30px
    }
}

.lrn-events .card.soon .card-inner:after {
    content: "Coming Soon";
    background: var(--danger);
    color: #fff;
    font-size: 13px;
    display: inline;
    position: absolute;
    left: -1px;
    top: -1px;
    border-top-left-radius: 5px;
    padding: 1px 10px;
}

    {
    #------------------------- Pagination -------------------------#
}

.lrn-events .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.lrn-events .pagination {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lrn-events .pagination .prev,
.lrn-events .pagination .next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 2px solid #162E5C;
    background: white;
    border-radius: 50%;
    color: #162E5C;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.lrn-events .pagination .prev:hover:not(.disabled),
.lrn-events .pagination .next:hover:not(.disabled) {
    border-color: #162E5C;
    color: #fff;
    background: #162E5C;
}


.lrn-events .pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.lrn-events .pagination-btn.page-number {
    font-size: 16px;
    line-height: 1;
    height: 100%;
    background: none;
    border: none;
    font-weight: 600;
    border-bottom: 1px solid;
    width: 25px;
    text-align: center;
    opacity: 0.6;
}

.lrn-events .pagination .page-number.active {
    opacity: 1;
}

.lrn-events .pagination-btn svg {
    width: 20px;
    height: 20px;
}

.event-divider {
  border: none;
  border-top: 2px solid #e5e7eb;
  margin: 2rem 0;
}
.cards-upcoming, .cards-ondemand {
  margin-bottom: 0;
}

.event-badge, .event-ribbon {
    position: absolute;
    top: 28px;
    left: auto;
    right: -40px;
    width: 160px;
    height: 22px;
    background: #c56903;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    line-height: 22px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transform: rotate(45deg);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.event-ribbon-upcoming {
  background: #c56903;
}
.event-badge-ondemand {
  background: #8E9C9C;
}