/**
 * Primefaces Carousel
 *
 * Carousel is a multi purpose component to display a set of data or general content with slide effects.
 * https://primefaces.github.io/primefaces/7_0/#/components/carousel
 *
 * 1. Common carousel
 *  - Used in packages results
 *  - E.g. <p:carousel styleClass="carousel" />
 *
 * 2. Month selector
 *  - Used in package config
 */

/* 1. Common carousel */

.carousel {
    padding: 0;
}

.carousel .ui-carousel-items {
    width: 1000000px !important; /* Override primefaces default value (32000px) */
}

/* 1. Common carousel - Header */

.carousel .ui-carousel-header {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 0 1rem 0; /* 0 0 16px 0 */
}

.carousel .ui-carousel-header .ui-carousel-header-title {
    padding: 0;
    width: auto;
}

.carousel .ui-carousel-button {
    margin: 0 0 0 1rem; /* 0 0 0 16px */
    color: #e72c6c;
}
.carousel--font-size-45 .ui-carousel-button {
    font-size: 45px;
}

.carousel .ui-carousel-button.ui-state-disabled {
    color: #3e3e3e;
}

.carousel .ui-carousel-button.ui-carousel-prev-button:before,
.carousel .ui-carousel-button.ui-carousel-next-button:before {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
}

.carousel .ui-carousel-button.ui-carousel-prev-button {
    order: 2;
    margin-left: auto;
}

.carousel .ui-carousel-prev-button:before {
    content: "\f053";
}

.carousel .ui-carousel-button.ui-carousel-next-button {
    order: 3;
}

.carousel .ui-carousel-next-button:before {
    content: "\f054";
}

.carousel.ui-carousel .ui-carousel-viewport .ui-carousel-items .ui-carousel-item {
    margin-bottom: 10px;
}

/* 1. Common carousel - Hide pages dropdown */

.carousel--hide-dropdown-pages .ui-carousel-dropdown,
.carousel--hide-dropdown-pages .ui-carousel-dropdown-responsive {
    display: none !important; /* Override primefaces inline styles in responsive mode */
}

/* 1. Common carousel - Gap between items without lateral space */

.carousel--gap-16.ui-carousel .ui-carousel-viewport {
    margin: 0 -0.5rem 0 -0.5rem; /* 0 -8px 0 -8px */
}

.carousel--gap-16.ui-carousel .ui-carousel-viewport .ui-carousel-items .ui-carousel-item {
    padding: 0 0.5rem 0 0.5rem; /* 0 8px 0 8px */
}

/* 1. Common carousel - Lateral navigation */

.carousel--lateral-nav {
    position: relative;
}

.carousel--lateral-nav .ui-carousel-button.ui-carousel-prev-button,
.carousel--lateral-nav .ui-carousel-button.ui-carousel-next-button {
    position: absolute;
    top: 55%;
    z-index: 1;
}

.carousel--lateral-nav .ui-carousel-button.ui-carousel-prev-button {
    left: -18px;
}

.carousel--lateral-nav .ui-carousel-button.ui-carousel-next-button {
    right: -18px;
}

.carousel--lateral-nav-margin .ui-carousel-button.ui-carousel-prev-button {
    left: -40px;
}

.carousel--lateral-nav-margin .ui-carousel-button.ui-carousel-next-button {
    right: -40px;
}

/* 2. Month selector */

.carousel-month-selector {
    background-color: #f8f8f8;
    padding: 0;
}

/* 2. Month selector - Header */

.carousel-month-selector.ui-carousel .ui-carousel-header .ui-carousel-header-title,
.carousel-month-selector.ui-carousel .ui-carousel-header .ui-carousel-dropdown {
    display: none;
    visibility: hidden;
}

.carousel-month-selector.ui-carousel .ui-carousel-header {
    padding: 0;
}

/* 2. Month selector - Prev/next buttons */

.carousel-month-selector.ui-carousel .ui-carousel-header .ui-carousel-button {
    text-indent: initial;
    float: none;
    margin: 0;
}

.carousel-month-selector.ui-carousel .ui-carousel-prev-button:before,
.carousel-month-selector.ui-carousel .ui-carousel-next-button:before {
    font-family: 'Font Awesome 5 Free';
    color: #e72c6c;
}

.carousel-month-selector.ui-carousel .ui-carousel-prev-button.ui-state-disabled:before,
.carousel-month-selector.ui-carousel .ui-carousel-next-button.ui-state-disabled:before {
    color: #3e3e3e;
}

.carousel-month-selector.ui-carousel .ui-carousel-prev-button:before {
    content: "\f077";
}

.carousel-month-selector.ui-carousel .ui-carousel-next-button:before {
    content: "\f078";
}

.carousel-month-selector.ui-carousel .ui-carousel-prev-button,
.carousel-month-selector.ui-carousel .ui-carousel-next-button {
    height: 2rem; /* 32px */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
    text-decoration: none;
}

.carousel-month-selector.ui-carousel .ui-carousel-next-button {
    position: absolute;
    bottom: -32px; /* Next month section */
    left: 0;
}

.carousel-month-selector.ui-carousel .ui-carousel-prev-button:not(.ui-state-disabled):hover,
.carousel-month-selector.ui-carousel .ui-carousel-next-button:not(.ui-state-disabled):hover {
    background-color: #fef0d3;
}

/* 2. Month selector - Item */

.carousel-month-selector.ui-carousel .ui-carousel-viewport .ui-carousel-items .ui-carousel-item.carousel-month-selector__item {
    margin: 0;
    width: auto !important; /* Override dynamic primefaces inline style */
    height: auto !important; /* Override dynamic primefaces inline style */
}

.carousel-month-selector__link {
    background-color: #e6e6e6;
    padding: 0.3125rem 0.75rem; /* 5px 12px */
    margin: 0 0.25rem; /* 0 4px */
    font-size: 0.875rem; /* 14px */
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color: inherit;
    text-decoration: none;
    line-height: 1.6;
    border-bottom: 2px solid #f8f8f8; /* Used like margin because with margin property primefaces don´t calculate the viewport height properly */
    border-top: 2px solid #f8f8f8; /* Used like margin because with margin property primefaces don´t calculate the viewport height properly */
}
.carousel-month-selected{
    background-color: #e72c6c;
    color: #ffffff;
}

.carousel-month-selector__link:not(.carousel-month-selector__link--is-selected):hover {
    background-color: #fef0d3;
    color: #363636;
}

.carousel-month-selector__link--is-selected {
    color: #ffffff;
    background-color: #e72c6c;
    cursor: default;
}

.carousel-month-selector__month {
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 0.795rem;
}

.carousel-month-selector__price {
    font-size: 90%;
}

.nextPageMonth, .prevPageMonth{
    height: 2rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
    text-decoration: none
}
.nextPageMonth:before{
    content: "\f078";
    font-family: 'Font Awesome 5 Free';
    color: #e72c6c;
}

.prevPageMonth:before{
    content: "\f077";
    font-family: 'Font Awesome 5 Free';
    color: #e72c6c;
}

.nextPageMonth.ui-state-disabled:before,
.prevPageMonth.ui-state-disabled:before{
    color: #3e3e3e;
}

.nextPageMonth:not(.ui-state-disabled):hover,
.prevPageMonth:not(.ui-state-disabled):hover {
    background-color: #fef0d3;
}