﻿
.bulletStyle > .nav-item {
    list-style: disc;
}

.arrowStyle > .nav-item {
    padding: 10px;
    border-bottom: 1px solid #009BBF;
    background: url("/Images/quickLinkArrowBackgroundButton.png") right no-repeat;
    width: 100%;
}


.pnlListOfCourseClass .ui.big.button {
    font-size: inherit !important;
}

.pnlListOfCourseClass .factor360CatalogItemBadge {
    font-size: inherit !important;
}

.hlnkCardClass {
    display: grid;
    height: 100%;
}

.goldilockTextAsLink:hover {
    opacity: 0.8;
    cursor: pointer;
}

.button.bigButton {
    font-size: 135%;
}

.goldilockCustomPaddingNone {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
}

.goldilockRowPadding50px {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.goldilockRowPadding75px {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
}

.goldilockRowPadding100px {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.goldilockRowPadding125px {
    padding-top: 125px !important;
    padding-bottom: 125px !important;
}

.goldilockRowPadding150px {
    padding-top: 150px !important;
    padding-bottom: 150px !important;
}


.button.fatGoldilockButton {
    padding: 5px 40px;
}

.button.mediumButton.fatGoldilockButton {
    padding: 6px 40px;
}

.button.bigButton.fatGoldilockButton {
    padding: 10px 40px;
}



@media only screen and (min-width:768px) {
    /* Hover effect: grows the tile slightly */
    .customHoverEffectBigPop:hover {
        transform: scale(1.2); /* Slightly increase the size */
        z-index: 2000 !important; /* Bring the hovered tile above others */
        border-radius: 15px;
    }

        .customHoverEffectBigPop:hover > .dynamicTileComponentCard {
            border-radius: 5px;
            box-shadow: 0 1px 20px 8px rgb(54 54 54 / 28%);
        }

    .customHoverEffectSmallPop:hover {
        transform: scale(1.075); /* Slightly increase the size */
        z-index: 2000 !important; /* Bring the hovered tile above others */
        border-radius: 15px;
    }

        .customHoverEffectSmallPop:hover > .dynamicTileComponentCard {
            border-radius: 5px;
            box-shadow: 0 1px 20px 8px rgb(54 54 54 / 28%);
        }


    .dynamicTile__imageWrapper {
        overflow: hidden;
    }

    .customHoverEffectZoom:hover img {
        transform: scale(1.1);
        transition: .5s;
    }

    .customHoverEffectZoom:hover .dynamicTile__image {
        transform: scale(1.1);
        transition: .5s;
        overflow-y: hidden;
    }


    .customHoverEffectBigZoom:hover img {
        transform: scale(1.4);
        transition: 1s;
    }

    .customHoverEffectBigZoom:hover .dynamicTile__image {
        transform: scale(1.4);
        transition: 1s;
        overflow-y: hidden;
    }
}



.fiveTileCol {
    flex: 0 0 auto;
    width: 83.3333333333%;
}

@media (min-width: 768px) {

    .fiveTileCol {
        flex: 0 0 auto; /* 100% / 5 */
        width: 20%;
    }
}


.rowTextWithLeftImageContentImgContainer_image, .rowTextWithRightImageContentImgContainer_image {
    width: 100%;
    height: 100%;
    object-fit: fill; /* fills container, no distortion */
    object-position: center; /* center focus */
}

.rowTextWithLeftImageContentImgContainer, .rowTextWithRightImageContentImgContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0; /* image behind content */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.goldilockComponentEditable .rowTextWithLeftImageContentImgContainer, .goldilockComponentEditable .rowTextWithRightImageContentImgContainer {
    width: 100%;
    margin-left: 0;
}

.rowTextWithLeftImageContent, .rowTextWithRightImageContent {
    position: relative;
    z-index: 1;
}
