.user-history-block {
    max-width: 1240px !important;
    margin: auto;
}

.user-history-banner-block {
    max-width: none !important;
}

.user-history-title-banner div {
    max-width: 1240px !important;
    margin: auto
}

/* <editor-fold desc "DESIGN SLICK ARROW / DOTS"> */
.slick-arrow-dot-holder {
    margin-bottom: 1px;
}

.slick-arrow-dot-holder-mobile {
    margin-right: 0;
    padding-right: 0;
}

.slick-arrow-dot-holder .slick-prev,
.slick-arrow-dot-holder .slick-next {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    line-height: 0;
    transform: none;
}

.slick-arrow-dot-holder .slick-prev {
    margin-right: 11px;
}

.slick-arrow-dot-holder .slick-next {
    margin-left: 11px;
}

.slick-arrow-dot-holder .slick-prev:before,
.slick-arrow-dot-holder .slick-next:before {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 900;
    font-size: 16px;
    line-height: 20px;
    color: var(--ers-white-color);
    opacity: 1;
}

.slick-arrow-dot-holder .slick-prev,
.slick-arrow-dot-holder .slick-next {
    border: var(--ers-white-color);
    background-color: var(--ers-cobalt-color);
    color: var(--ers-white-color);
}

.slick-arrow-dot-holder .slick-prev:before {
    content: "\f104";
}

.slick-arrow-dot-holder .slick-next:before {
    content: "\f105";
}

.slick-arrow-dot-holder .slick-dots {
    position: relative;
    bottom: 0;
    display: flex !important;
    align-items: center;
}

.slick-arrow-dot-holder .slick-dots li button:before {
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--ers-cobalt-color);
    content: '';
    opacity: 1;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.slick-arrow-dot-holder .slick-dots li.slick-active button:before {
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    font-size: 14px;
    border-radius: 50%;
    border: 1px solid var(--ers-cobalt-color);
    background-color: var(--ers-white-color);
    content: '';
    opacity: 1;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.slick-arrow-dot-holder .slick-dots li {
    margin: 0;
}

.slick-arrow-dot-holder .slick-dots > li {
    display: inline-block;
}

.slick-arrow-dot-holder .slick-dots > li:only-child {
    display: none;
}

.slick-arrow-dot-holder .slick-disabled {
    border: 1px solid var(--ers-cobalt-color);
    background-color: var(--ers-white-color);
    opacity: 1;
}

.slick-arrow-dot-holder .slick-disabled:before {
    color: var(--ers-cobalt-color);
}

.slick-slide {
    margin-left: 30px!important;
    margin-right: 0!important;
}

.slick-list {
    margin-left: -30px!important;
}
/* </editor-fold desc "DESIGN SLICK ARROW / DOTS"> */

/* <editor-fold desc "USER HISTORY CAROUSEL"> */
.ers-user-history-carousel {
    padding: 0;
    margin-bottom: 0 !important;
}

.user-history-carousel-blocks-item {
    height: 162px;
    width: 288px;
    filter: saturate(50%);
}

.user-history-carousel-blocks-item {
    background-size: 100% !important;
    transition: background-size 0.2s ease-out;
    -moz-transition: background-size 0.2s ease-out;
    -ms-transition: background-size 0.2s ease-out;
    -o-transition: background-size 0.2s ease-out;
    -webkit-transition: background-size 0.2s ease-out;
}

.user-history-carousel-blocks-item:hover {
    background-size: 110% !important;
    transition: background-size 0.2s ease-in;
    -moz-transition: background-size 0.2s ease-in;
    -ms-transition: background-size 0.2s ease-in;
    -o-transition: background-size 0.2s ease-in;
    -webkit-transition: background-size 0.2s ease-in;
}

.background-cover {
    background-size: 100% !important;
}

.user-history-carousel-name {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    color: grey;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-history-carousel-thumbnail {
    height: 162px;
    width: 288px!important;
    margin-left: 29px;
}

@media (max-width: 576px) {
    .ers-background-cover {
        height: 186px !important;
        background-size: cover !important;
    }

    .user-history-carousel-sm-blocks-item {
        height: 162px;
        width: 100%;
    }
}
/* </editor-fold desc "USER HISTORY CAROUSEL"> */

/* <editor-fold desc "USER HISTORY LIST"> */
.user-history-container-card {
    margin-bottom: 2.5rem;
    min-height: 162px;
}

.user-history-container-card img { /** VIGNETTE **/
    height: 162px;
    width: 288px;
}

.user-history-container-card h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-history-container-card .over-title,
.user-history-container-card .user-history-container-cat { /** TAG & CAT **/
    color: var(--ers-cobalt-color) !important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-history-container-date {
    margin-top: 0.4rem;
}

/* mobile format */
@media (max-width: 767px) {
    .user-history-container-card div {
        padding-left: 0;
        padding-right: 0;
    }

    .user-history-container-card div {
        padding-left: 0;
        padding-right: 0;
    }

    .user-history-container-date {
        justify-content: flex-start!important;
    }
}
/* </editor-fold desc "USER HISTORY LIST"> */

/* <editor-fold desc "USER HISTORY CONTAINER PAGINATION"> */
.user-history-container-pagination {
    margin-left: auto;
    margin-right: auto;
}

.user-history-container-pagination .pagination {
    margin: 0 1rem 0 1rem;
}

.user-history-container-pagination .user-history-container-selected-item,
.user-history-container-pagination .user-history-container-selected-item > span {
    background-color: var(--ers-cobalt-color) !important;
    border-color: var(--ers-cobalt-color) !important;
    color: var(--ers-white-color) !important;
}

.user-history-container-pagination .pagination > .ui-state-default {
    border-radius: initial;
    border: solid var(--ers-black15-color) 1px;
    margin: 0;
}

.user-history-container-pagination .pagination > .ui-state-default {
    width: 40px;
    height: auto;
}

.user-history-container-pagination .pagination > .ui-state-default > .ui-button-text {
    padding: .4em 0;
    justify-self: center;
}


.user-history-container-pagination .pagination > .ui-state-default:not(.ers-actual-state),
.user-history-container-pagination .pagination > .ui-state-default:not(.ers-actual-state) span {
    background: var(--ers-white-color);
    color: var(--ers-cobalt-color);
    font-size: var(--ers-secondary-text-size);
    font-weight: 700;
}

.user-history-container-pagination .pagination > .ers-actual-state {
    background: var(--ers-cobalt-color);
    color: var(--ers-white-color) !important;
    font-size: var(--ers-secondary-text-size);
    font-weight: 700;
}

.user-history-containercme-pagination .pagination > .prev {
    border-radius: 3px 0 0 3px;
}

.user-history-container-pagination .pagination > .next {
    border-radius: 0 3px 3px 0;
}

.user-history-container-pagination .user-history-container-first-item,
.user-history-container-pagination .user-history-container-last-item {
    width: 75px;
    border-radius: 3px;
    border: solid var(--ers-black15-color) 1px;
    background: var(--ers-white-color);
    height: 36px;
}

.user-history-container-pagination .user-history-container-first-item span,
.user-history-container-pagination .user-history-container-last-item span {
    color: var(--ers-cobalt-color);
}

/* mobile format */
@media (max-width: 767px) {
    .user-history-container-pagination .pagination {
        margin: 0;
        width: 100%;
        justify-content: center;
    }

    .user-history-container-pagination .user-history-container-first-item,
    .user-history-container-pagination .user-history-container-last-item {
        display: none!important;
    }

    .user-history-container-pagination .mid-part-item + .last-part-item,
    .user-history-container-pagination .mid-part-item + .last-part-item + .last-part-item,
    .user-history-container-pagination .mid-part-item + .last-part-item + .last-part-item + .last-part-item {
        display: none!important;
    }

    .user-history-container-pagination .pagination > .ui-state-default {
        min-width: min-content;
        max-width: 40px;
    }
}
/* </editor-fold desc "USER HISTORY CONTAINER PAGINATION"> */