.card {
    margin-bottom: 15px;
    border: none;
    border: none;
    padding: 8px;
    background: none;
    opacity: 1;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

    .card:hover {
        transform: translateY(-5px);
    }

.hidden {
    opacity: 0;
    height: 0 !important;
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
}

.category-button {
    margin-right: 10px;
    margin-bottom: 10px;
}

.masonry-grid {
    column-count: 1;
    /*column-gap: 1rem;*/
}

    .masonry-grid .card {
        display: inline-block;
        width: 100%;
        width: 46%;
        display: inline-flex;
        margin: 10px;
    }

        .masonry-grid .card.card100per {
            display: inline-block;
            width: 99%;
        }

/* @media (min-width: 576px) {
            .masonry-grid {
                column-count: 2;
            }
        }

        @media (min-width: 768px) {
            .masonry-grid {
                column-count: 2;
            }
        }

        @media (min-width: 992px) {
            .masonry-grid {
                column-count: 2;
            }
        }*/



.HighriseNotificationsBG {
    margin: 20px;
}

.notificationCategoryBG {
    margin: 10px;
    text-align: center;
    margin-top: 0px;
    margin-bottom: -15px;
}

.notificationCatItem {
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
    border-radius: 6px;
    background: #fff;
    display: inline-block;
    padding: 5px 10px;
    font-weight: 500;
    color: #3c4043;
    margin: 0px 4px 8px;
}

    .notificationCatItem:hover {
        background: #eaf3fe;
        cursor: pointer;
    }

    .notificationCatItem i {
        display: none;
    }

.activeNotificationCat {
    background: #ebf4ff;
    color: #48b4cd;
}

    .activeNotificationCat i {
        display: inline;
    }

.highriseNotificationCard {
    background: #fff;
    border-radius: 8px;
    color: #3c4043;
    position: relative;
    transition: width .2s cubic-bezier(.4,0,.2,1) 0s;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
    box-shadow: hsl(0, 0%, 80%) 0 0 16px;
    box-shadow: 0 30px 30px -25px rgb(195 195 195);
}

.highriseNotificationCardHeader {
    font-family: Roboto, Arial, sans-serif;
    line-height: 26px;
    font-size: 14px;
    letter-spacing: 0.222px;
    font-weight: 500;
    color: #3c4043;
    flex-grow: 1;
    margin: 0;
    padding: 0;
    padding-right: 8px;
    padding: 11px 16px 2px;
    text-shadow: 5px 5px 8px #cfcfcf;
}

.highriseNotificationCardBodyExtraInfo {
    font-family: Roboto, Arial, sans-serif;
    line-height: 17px;
    font-size: 12px;
    letter-spacing: .025em;
    font-weight: 400;
    color: #5f6368;
    padding: 8px 16px 16px;
}

.highriseNotificationCardBody {
    line-height: 20px;
    font-size: 13px;
    letter-spacing: .0178571429em;
    font-weight: 500;
    color: #202124;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 16px 8px;
}

.highriseNotificationCardFooter {
    border-top: solid thin #dadce0;
    padding: 8px;
}

    .highriseNotificationCardFooter .btn-primary {
        background: #dcf8ff;
        border: solid 1px #d7f7ff;
        color: #18aacc;
        font-size: 13px;
        font-weight: bold;
        text-shadow: none;
        border-radius: 4px;
        line-height: 19px;
        height: 30px;
        padding: 0px 15px;
    }

        .highriseNotificationCardFooter .btn-primary:hover {
            background: #15a4c6;
            color: #fff;
        }

.ribbon {
    position: absolute;
    top: 40px;
    right: -7px;
    z-index: 1;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: var(--tblr-font-weight-bold);
    line-height: 1;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    background: var(--tblr-primary);
    border-color: var(--tblr-primary);
    border-radius: 3px 0 3px 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    min-width: 2rem;
}

    .ribbon:before {
        position: absolute;
        right: 0px;
        bottom: 100%;
        width: 0;
        height: 0;
        content: "";
        filter: brightness(70%);
        border: 3px solid #dd4b39;
        /* border-color: inherit; */
        border-top-color: transparent;
        border-right-color: transparent;
    }

a.viewMore {
    text-decoration: underline;
}

.offcanvas {
    min-width: 95%;
}

.offcanvas-body {
    background: -moz-linear-gradient(-45deg, #c7c7c5 0, #f0f0f0 100%);
    background: -webkit-linear-gradient(-45deg, #c7c7c5 0, #f0f0f0 100%);
    background: linear-gradient(135deg, #c7c7c5 0, #f0f0f0 100%);
    background: #f0f0f0;
}

.highriseNotificationCardDate {
    padding: 3px 16px 2px;
}

    .highriseNotificationCardDate i {
        border-radius: 50%;
        height: 20px;
        width: 20px;
        background: #f3e8fd;
        color: #9132e7;
        text-align: center;
        line-height: 20px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px -62px 13px -111px inset, rgba(0, 0, 0, 0.3) 0px -2px 19px -10px inset;
    }

.highriseNotificationCardFooter .btn-info {
    padding: 0px 15px;
    font-weight: bold;
}

    .highriseNotificationCardFooter .btn-info:hover {
    }

#pnlLoginNotification {
    top: 0px !important;
    right: 0px !important;
    left: 20% !important;
    position: fixed !important;
    height: 100%;
    overflow-y: auto;
}

    #pnlLoginNotification .AgreementContainer {
        padding: 20px;
        border: 1px double #ccc;
        width: 100%;
        margin: 0 auto;
        border: none;
        background: #f0f0f0;
        box-shadow: 3px 3px 3px #ccc;
        height: 100%;
    }

.moduleHeader {
    position: sticky;
    width: 100%;
    background: #fff;
    top: 0px;
    left: 0px;
    padding: 2px 18px;
    z-index: 99;
}