/*start of carousel of tiles (learningactivityGroup) CSS*/
.learningActivityTileView_Clickable {
    cursor: pointer;
}

.learningActivityTileView_margin {
    margin-left: 5px;
}

.carousel-inner {
    overflow: hidden;
    z-index: 3;
}

    .carousel-inner:has(.isHoverEffectEnable:hover) {
        overflow: unset;
    }

.posRelative {
    position: relative;
    z-index: 1;
}

.learningActivityGroupCarouselCardImage {
    margin-top: auto;
    margin-bottom: auto;
    object-fit: contain;
    width: 100%;
    max-height: 100%;
    position: relative;
    z-index: 1
}


.ui.card, .ui.cards > .cardNoBorder {
    border: none !important;
    box-shadow: none !important;
}

.pnlLearningActivityItemSquareWrapperClass {
    display: flex;
    flex-direction: column;
}


.pnLearningActivityGroupCarouselCardClass {
    cursor: pointer;
    max-width: 100%;
    display: block;
}


.learningActivityGroupCarouselCardSquareImageWrapper {
    aspect-ratio: 1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.learningActivityGroupCarouselCard4_3ImageWrapper {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .25);
    margin-bottom: 8px;
}

.learningActivityGroupCarouselCard16_9ImageWrapper {
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .25);
    margin-bottom: 8px;
}


.learningActivityGroupCarouselCardText {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.1;
    margin: 0.3rem 0.1rem;
    padding: 0.1rem;
    height: 2.4em; /* Fixed height for 2 lines */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* limit text to 2 lines */
}

.learningActivityGroupCarouselCatalogButton {
    width: 99%;
    max-width: 100px;
    border-radius: .2rem;
}

.pnlLearningActivityCreditTileViewClass {
    text-align: left;
}

.pnlAcessButtonWrapperClass {
    text-align: right;
}



.flexColumn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pnlImageContainerImage {
    flex: 0 0 80%;
}

.ui.cards {
    position: relative;
}

/* Default state for tiles */
.pnlLearningActivityItemSquareWrapperClass {
    position: relative;
    transition: transform 0.1s ease, z-index 0.1s ease;
    transform-origin: center; /* Ensures scaling happens around the center */
    z-index: 1;
}



.extraTileContent {
    position: absolute;
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100%;
    background: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 0px 5px 10px 5px;
}

.learningActivitySubtitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    font-size: 0.8rem;
}

@media only screen and (max-width:767px) {
    .extraTileContent {
        display: block;
        position: relative;
    }

    .pnlLearningActivityCreditTileViewClass {
        text-align: left;
    }

    .pnlAcessButtonWrapperClass {
        text-align: left;
    }

    .pnlStarRating > .factor360PageHeaderFlexboxWrapper {
        margin-left: 1px;
    }
}

@media only screen and (min-width:768px) {
    /* Hover effect: grows the tile slightly */
    .isHoverEffectEnable:hover {
        transform: scale(1.4); /* Slightly increase the size */
        z-index: 2000 !important; /* Bring the hovered tile above others */
    }
    /* Extra content animation */
    .extraTileContent {
        opacity: 0;
        visibility: hidden;
        transition: transform 0.1s ease, opacity 0.1s ease;
        transform: translateY(-100%); /* Initially off-screen */
    }

    /* Show extra content on hover */
    .isHoverEffectEnable:hover .imageAndTitle {
        background: #fafafa;
    }

    .isHoverEffectEnable:hover .extraTileContent {
        transform: translateY(0); /* Slide in smoothly */
        opacity: 1;
        visibility: visible;
        background: #fafafa;
    }


    .isHoverEffectEnable:hover .learningActivityGroupCarouselCardText {
        display: block;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: none;
        padding-top: 0.7em;
        height: auto;
        font-size: 0.8rem;
        padding-right: 10px;
        padding-left: 10px;
    }

    .isHoverEffectEnable:hover .learningActivitySubtitle {
        font-size: 0.65rem;
    }


    .posRelative:has(:hover) {
        z-index: 200;
    }

    .pnlStarRating {
        padding-top: 5px;
    }

        .pnlStarRating > .factor360PageHeaderFlexboxWrapper {
            margin-bottom: 3px !important;
            margin-left: auto;
            margin-right: auto;
        }

    .ui.five.cards .card .learningActivityGroupCarouselCatalogButton,
    .ui.six.cards .card .learningActivityGroupCarouselCatalogButton,
    .ui.seven.cards .card .learningActivityGroupCarouselCatalogButton,
    .ui.eight.cards .card .learningActivityGroupCarouselCatalogButton,
    .ui.nine.cards .card .learningActivityGroupCarouselCatalogButton,
    .ui.ten.cards .card .learningActivityGroupCarouselCatalogButton {
        padding: .18rem .18rem;
        font-size: .75rem;
    }

    .ui.five.cards .card .learningActivityCredit,
    .ui.six.cards .card .learningActivityCredit,
    .ui.seven.cards .card .learningActivityCredit,
    .ui.eight.cards .card .learningActivityCredit,
    .ui.nine.cards .card .learningActivityCredit,
    .ui.ten.cards .card .learningActivityCredit {
        font-size: .65rem;
    }
}

@media (min-width: 767px) and (max-width: 1200px) {
    .ui.five.cards .card .pnlRatingWrapper,
    .ui.six.cards .card .pnlRatingWrapper,
    .ui.seven.cards .card .pnlRatingWrapper,
    .ui.eight.cards .card .pnlRatingWrapper,
    .ui.nine.cards .card .pnlRatingWrapper,
    .ui.ten.cards .card .pnlRatingWrapper {
        scale: 0.7;
        margin-right: 60%;
    }
}




.goldilockCarouselNextPrev.nextPrevCarouselOfCourseGroup {
    top: calc(50% - 1.4rem); /*it is 50% (center) - line height (2.4rem)- paddingtop (1rem)*/
}


.pnlAcessButtonWrapperClass .accessButtonHlnk .learningActivityGroupCarouselCatalogButton {
    line-height: 1.1;
}