body {
    text-wrap: pretty;
}


/* START: customization for post-applsue lottiefiles : */

:root {
    --lottie-class-decoration-image-5: /assets/shared/lottiefiles/post-applause-hearts.json?loop=true;
    --lottie-class-decoration-image-4: /assets/shared/lottiefiles/post-applause-clap.json?loop=true;
    --lottie-class-decoration-image-3: /assets/shared/lottiefiles/post-applause-confetti.json?loop=true;
    --lottie-class-decoration-image-2: /assets/shared/lottiefiles/post-applause-love-letter.json?loop=true;
    --lottie-class-decoration-image-1: /assets/shared/lottiefiles/post-applause-guitar.json?loop=true;
}

.decoration-image.decoration-image-1,
.decoration-image.decoration-image-2,
.decoration-image.decoration-image-3,
.decoration-image.decoration-image-4,
.decoration-image.decoration-image-5 {
    background-image: url(/assets/shared/spotlight/post-applause-lottie-background.png);
}


/*Finessing of individual lottie files */

#dotlottie-player-decoration-image-3,
#dotlottie-player-decoration-image-4,
#dotlottie-player-decoration-image-5 {
    margin-top: 38px;
    margin-left: -10px;
}

#dotlottie-player-decoration-image-1 {
    margin-top: 20px;
    margin-left: -10px;
}

#dotlottie-player-decoration-image-2 {
    scale: 1.4;
    margin-top: 20px;
    margin-left: -8px;
}

#dotlottie-player-decoration-image-3 {
    scale: .9;
    margin-left: 0;
    margin-top: 13px;
}


/* disable lottiefiles on the 404 page */

.custom-content-404 #dotlottie-player-decoration-image-1,
.custom-content-404 #dotlottie-player-decoration-image-2,
.custom-content-404 #dotlottie-player-decoration-image-3,
.custom-content-404 #dotlottie-player-decoration-image-4,
.custom-content-404 #dotlottie-player-decoration-image-5,
.custom-content-404 #dotlottie-player-decoration-image-6 {
    display: none;
}


/* Increase size of the lottie files in the applause form */

.decoration-header-container .decoration-background {
    height: 15em;
}

.decoration-header-container .decoration-image {
    width: 26em;
    height: 27em;
}

.decoration-header-container .decoration-background {
    margin-bottom: 10em;
}

.decoration-header-container .decoration-main-message {
    font-size: 3em;
}


/* END: customization for lottiefiles */


/* post applause lottie file added to the decoration images */


/* This css affects all client sites and should mostly match the Plus site document - BB */


/* Forcing any Cloudflare streaming video communication popup to have a larger width */

@media screen and (min-width: 618px) {
    /*    .legacy-message-general-modal, .legacy-message-welcome-modal {
        width: 618px !important;
    }*/
    .modal-video-cloudflare {
        width: 87vw !important;
        max-width: 900px !important;
    }
    .modal-video-cloudflare .templateContainer {
        width: 82vw !important;
        max-width: 868px !important;
    }
    .modal-video-cloudflare .messageBody {
        width: 80vw !important;
        max-width: 826px !important;
    }
}


/* apply fix for communication popup to limit the width of the header */

@media (min-width: 618px) {
    .legacy-message-general-modal,
    .legacy-message-welcome-modal,
    .legacy-message-game-modal {
        width: 618px;
        margin: 10px auto;
    }
}


/* temp fix for scrollbar that's been added to the notification popup after we changed the communication template to 750px for showcase */

.legacy-message.legacy-message-loading {
    height: fit-content !important;
    max-height: 65vh;
    overflow-y: auto;
}


/* When displaying a communication popup on the inbox page, allow scroller to show */

.communication-modal .legacy-message.legacy-message-loading {
    overflow-y: auto;
    max-height: 80vh;
}


/* Allow the scrollbar to have more space */

.legacy-message-modal .modal-body {
    padding: 6px;
}


/* forcing the headphone graphic on a mission teaser video to display properly */

#communication-popup-audio-message img {
    height: 12px !important;
    width: 19px !important;
}


/* Dev environment Highlight ------ name on the top left of the page, doesn't show for live or plus sites */

.environment-uat a#main-company-logo::after,
.environment-dev a#main-company-logo::after,
.environment-dr a#main-company-logo::after,
.environment-sandbox a#main-company-logo::after {
    background-color: red;
    border-radius: 20px;
    padding: 2px 10px;
    color: white;
    position: relative;
    top: -10px;
    margin: 0 auto;
    text-align: center;
    left: 35%;
    font-size: 14px;
    text-transform: uppercase;
    box-shadow: 0px 0px 5px gray;
    text-decoration: none;
}

.environment-uat a#main-company-logo::after {
    content: "uat";
}

.environment-dev a#main-company-logo::after {
    content: "dev";
}

.environment-dr a#main-company-logo::after {
    content: "dr";
}

.environment-sandbox a#main-company-logo::after {
    content: 'sandbox';
}


/* End Dev environment Highlight */


/* Spotlight Filter refinement --------- simple styles to the filter options on the spotlight pages - BB */

.spotlight-filter .filter-participant,
.spotlight-filter .filter-recognition,
.spotlight-filter .filter-sent,
.spotlight-filter .filter-time-period {
    margin-right: 2em;
}

.dropdown .caret {
    margin-top: -13px !important;
}

#promo-dropdown .caret {
    margin-top: 8px !important;
}

.spotlight-filter {
    margin: 1.5em 0em 0em 0em;
}

.incentive-results-report .dropdown .caret,
.incentive-edit .dropdown .caret,
.incentive-view .dropdown .caret {
    margin-top: 8px !important;
}


/* End Spotlight Filter refinement */


/* INCENTIVE PAGES -> Special CSS Classes    */


/* Hide Main Points Earned Bar */

.hide-points-bar .progress-info-container {
    display: none;
}


/* Hide the date for a promo card */

.hide-promo-date .promo-card-dates {
    display: none;
}


/* Your Targets Widget - Change Text from "Current YTD points" to "your YTD Points Earned" */

.current-points-change .current-sales::before {
    content: 'Your YTD Points Earned:';
    color: #656364;
    font-size: 1.5em;
}

.current-points-change .current-sales .widget-tile-text {
    display: none;
}


/* Hide the date on an incentive or award */

.hide-award-or-incentive-date .promo-card-dates {
    display: none;
}

.hide-award-or-incentive-date .promo-card-title {
    margin-bottom: 4px;
}


/* Drop the ribbons for specific incentives or awards where no-ribbon class is added */

.no-ribbons .ribbons-container {
    display: none;
}


/* Hide the entire top incentive banner */

.hide-banner .promo-card-container {
    display: none;
}


/* When we changed "All communications" to "Communication Management" on the control panel, the title was awkwardly wrapping. This fixes it */

#Management_Communications .SubColumn {
    width: 100%;
    line-height: 1.1em;
    padding: 0px 5px 0px 10px;
}


/* Incentive Group was pulling up beside the Incentive title on edit and results page. This pushes it down onto it's own line */

.incentive-results-report .promo-card-container .promo-card-header,
.incentive-edit .promo-card-container .promo-card-header {
    display: block;
}


/* Fixing the issue with forced horizontal view on games */

#mission-container iframe {
    width: 100vw;
    height: 100vh;
    border: none;
}


/* TEMPORARY Hide Award & Incentive Communications, except for vibe users */

article.promo-header-action-container {
    display: none;
}

.permission-role-vibe article.promo-header-action-container {
    display: block;
}


/* New Incentive Resultes Dropdown icon colours */

.dropdown-promo-results i {
    color: #f18d06;
}

.dropdown-promo-view i {
    color: #00f;
}

.dropdown-promo-edit i {
    color: #2a9fd8;
}


/* hide incentive groups or brands from incentive dropdown when there are no incentives available to that brand */

.promo-filter-container .no-incentives {
    display: none;
}

#root.incentive-edit .promo-edit-container .legacy-iframe {
    height: 3000px;
    /* remove extra scroll bars */
}


/* drop white space left behind by notification bar when closed
---Update Nov 25 2024-Ben This code seems redundant as we already hide the notification bar on the games page. I'm commenting it out ---- 
#root.games main {
    margin-top: 0 !important;
}
*/

.report-questions-overview .question-column {
    max-width: 25vw;
}


/* Temporary Fix for issue related to signOnTask modal making everything not clickable */

body.is-gameplay .modal-backdrop {
    display: none;
}

body.is-gameplay.modal-open .modal-backdrop {
    display: block;
}

body.modal-open .modal-backdrop {
    display: block;
}


/*Hide Help icons on the report page */

reports-list #report-point-overview .fa-question-circle,
reports-list #report-login-activity .fa-question-circle,
reports-list #report-dashboarc-activity .fa-question-circle,
reports-list #report-submissions .fa-question-circle,
reports-list #report-groups-shared .fa-question-circle,
reports-list #report-groups-team .fa-question-circle,
reports-list #report-groups .fa-question-circle,
reports-list #report-communications-welcome .fa-question-circle,
reports-list #report-communications-general .fa-question-circle,
reports-list #report-communications-invitations .fa-question-circle,
reports-list #report-applause-overview .fa-question-circle,
reports-list #report-pending-certificates .fa-question-circle,
reports-list #report-certificates .fa-question-circle,
reports-list #report-all-awards .fa-question-circle {
    display: none;
}


/* gameplay links and highlights  --------- BB*/

li.navbar-item.NavLink_Games,
.is-gameplay li.sidebar-item.NavLink_Games {
    background-color: #666;
    margin-bottom: 0px;
    height: 28px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    margin-right: 8px;
    animation-name: pulsate;
    animation-fill-mode: both;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    border-radius: 6px;
}

li.navbar-item.NavLink_Games a,
.is-gameplay li.sidebar-item.NavLink_Games a {
    color: white;
}

@keyframes pulsate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.is-gameplay li.sidebar-item.NavLink_Games {
    padding: 0 6px;
    font-size: 13px;
    background-color: #e12b7e;
}

.is-gameplay li.sidebar-item.NavLink_Games {
    display: inline-block;
}

li.sidebar-item.NavLink_Games {
    background-color: #333;
    display: none;
    width: max-content;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: bold;
}

.is-gameplay li.navbar-item.NavLink_Games {
    display: inline-block;
}

li.navbar-item.NavLink_Games {
    display: none;
}

li.navbar-item.NavLink_Games {}

.is-gameplay .games-link {
    display: block;
}

.games-link {
    display: none;
}


/* This fixes the Pulsing "Play Now" button on games page that was being cut-off */

.navbar-item.NavLink_Games {
    margin: 1px 11px;
}


/* End gameplay links and highlights*/


/* Activate short top nav bar for games */

.games #main-company-logo {
    width: 11em;
}

.games #main-company-logo-image {
    display: block;
}

.games .navbar-item.NavLink_Games {
    font-size: 10px;
    height: auto;
}

.games .navbar-sub-links-container,
.games .navbar-secondary-links-container {
    display: none;
}

.games .navbar-sections-container {
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
}

.games .navbar-section {
    margin: 0;
}

.games .navbar-section,
.navbar-sections-container {
    width: max-content;
}

.games .navbar-container {
    height: 4em;
}

.games .navbar-main-section {
    font-size: 1.2em;
    margin-right: 20px;
    /* Ben dropped this height because it stops proper vertical alignment of the nav on the games page 
  height: 2.1em; */
}


/* End short top nav bar for games */


/* Hide taskbar on games */

.games .taskbar {
    display: none;
}


/* Fixing a padding issue on for incentive page targets hit widget */

.target-achieved .target-tile .target-container {
    padding-left: 34px;
    text-align: center;
}


/* Add a checkmark to the poll results to highlight the selected answer" */

.answer-column.selected::after {
    content: "✔";
}


/* Hide the footer when playing a mission or game */

.games #footer {
    display: none;
}


/* Temp fix: applying fix for navbar container size */

.navbar-container {
    width: 70%;
}


/* Temp fix: the above fix increased the logo sizes, this shrinks it */

#main-company-logo {
    width: 18em;
}


/* Fixed an issue with the height of the monthly login trends when data is empty - Haventree and Global snapshot pages */

.widget-type-ParticipantEngagement .widget-body.widget-body-no-data {
    height: 150px;
}


/* Fix viewport when playing a game or in a mission */

.games #mission-container iframe {
    height: 94.5vh;
}

.games #nav-header {
    height: 5.5vh;
}

.games #main-company-logo {
    height: 3vh !important;
    padding: 0;
}

.games #nav-header-container {
    display: flex;
    justify-content: space-between;
    flex-direction: inherit;
    align-items: center;
    height: 100%;
}

.games .navbar-main-section {
    font-size: 1.2em;
    margin: 0;
    width: 50vw;
}

.games .navbar-section.navbar-sub-section {
    position: relative;
}

@media (max-width: 992px) {
    .games .navbar-desktop-sidebar-toggle {
        margin-top: auto;
    }
}


/* End viewport change when playing game or mission */


/* Fix notification size on mobile devices (the image header was causing the inner message frame to cut off content) */

.legacy-message #headerImage\ campaign-icon {
    width: 100%;
    max-width: 100% !important;
}

.legacy-message table {
    width: 100% !important;
}


/* Fix sso login link (it was breaking the button width) */

.login-panel .sso-link {
    white-space: break-spaces;
    font-size: 1em;
}


/* FIXES FOR IFRAMED TEAMS APP - "IsTeamsApp" */


/* Common elements dropped from all pages */

.is-teams-app #nav-header,
.is-teams-app .award-header,
.is-teams-app .taskbar,
.is-teams-app.spotlight-items .spotlight-banner,
.is-teams-app #footer,
.is-teams-app .sidebar-container,
.is-teams-app .award-header {
    display: none;
}


/* Spotlight Page */

.is-teams-app .contact-name,
.is-teams-app .comment-name,
.is-teams-app .contact-link,
.is-teams-app .recipient a,
.is-teams-app .custom-content-container a {
    pointer-events: none;
    color: inherit;
}


/* Hide delete applause button (doesn't work in App) */

.is-teams-app .btn.btn-default.icon-button.delete-item-button {
    display: none;
}

.is-teams-app .milestone-name {
    pointer-events: none;
}


/* Spotlight Page - milestone popup */

.is-teams-app .send-applause-header,
.is-teams-app .belated-milestone,
.is-teams-app .send-applause-cell {
    display: none;
}


/* Sidebar Nav */

.is-teams-app .sidebar-user-section .sidebar-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.is-teams-app suggest-input {
    display: none;
}

.is-teams-app .picture-container {
    border: 1px solid #ccc;
}

.is-teams-app .sidebar-section.sidebar-main-section {
    font-weight: bold;
}

.is-teams-app .sidebar-section.sidebar-user-section a {
    color: #333;
}

.is-teams-app .sidebar-link.sidebar-link-user {
    position: initial;
    margin-top: 12px;
}

.is-teams-app .sidebar-user-section .sidebar-item:nth-child(2) {
    margin-top: -16px;
}

.is-teams-app .sidebar-link-user {
    width: 100%;
}

.is-teams-app .primary-theme.sidebar {
    background-color: white;
}

.is-teams-app .sidebar {
    flex-direction: row;
    height: max-content;
}

.is-teams-app .sidebar-footer-section .sidebar-link,
.is-teams-app .sidebar-secondary-section .sidebar-link {
    color: #5B5FC7;
    font-size: 14px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

.is-teams-app #change-language-dropdown-toggle-sidebar {
    display: none;
}

.is-teams-app .sidebar-footer-section {
    margin-top: 0 !important;
}

.is-teams-app .sidebar-link {
    color: #5B5FC7;
}

.is-teams-app .sidebar-section.sidebar-user-section {
    pointer-events: none;
    border-right: 1px solid #ccc;
    width: 200px;
    text-align: right;
    padding-right: 44px;
}

.is-teams-app .quick-links-section.quick-links-main-section {
    border-left: 1px solid #ccc;
}

.is-teams-app .no-button-styling.sidebar-link {
    display: none;
}

.is-teams-app #quick-links-container {}

.is-teams-app .quick-links-section.quick-links-main-section {
    font-size: 1.3em;
}

.is-teams-app .quick-links-section.quick-links-user-section {
    font-size: 1.3em;
}

.is-teams-app #quick-links-container .quick-links-section {
    margin-top: 0;
}

.is-teams-app .error-modal .alert-icon-error {
    display: none;
}

.is-teams-app .error-modal .modal-body {
    display: none;
}

@media (max-width: 768px) {
    #root.auth.is-teams-app .main {
        margin-top: 0;
    }
}


/* END FIXES FOR IFRAMED TEAMS APP - "IsTeamsApp" */


/* Sidebar fix */

.browser-name-chrome .sidebar-container {
    transform: none !important;
}

.browser-name-chrome .sidebar::-webkit-scrollbar {
    display: none;
}


/* fixing update password submit button */

.task-type-UpdatePassword .modal-footer {
    height: 65px;
}


/* fix spacing on secondary nav */

.navbar-sub-section,
.navbar-secondary-section {
    text-align: center;
}


/* Fix incentive page list view */

.list-view {
    background-color: white;
}

.list-view:nth-child(2n+1) {
    background-color: #F5F5F5;
}

.list-view-header th {
    color: #000000;
    font-size: 10pt;
    font-weight: bold;
    border-bottom: 3px solid #06c !important;
    background-color: #dfe7ef;
}


/* Modernize angular tables with new styles */

.dx-header-row,
#dx-col-1.options-column {
    background-color: #dfe7ef;
    white-space: nowrap;
    color: black;
    border-bottom: 3px solid #06c;
}

.table>thead>tr.success>th {
    background-color: #dfe7ef;
    white-space: nowrap;
    color: black;
    border-bottom: 3px solid #06c;
    font-weight: normal;
    font-size: 11pt;
}


/* Some of the modern grids have coloured font awesome icons, this fixes them */

#report-all-users .fa {
    color: #666;
    font: normal normal normal 16px/1 FontAwesome;
}


/* page loading logo was too big on mobile, this fixes it */

.company-loading-logo {
    width: 80%;
    max-width: fit-content;
}


/* Fix popup on widget (?) so text doesn't push down to a second line */

.popover {
    max-width: 100%;
}

.report-questions-overview .question-column {
    max-width: 25vw;
}


/* IE Sunset and Unsupported Screens - Wrap the text in buttons */

.login-panel .btn {
    white-space: normal;
}


/* IE Sunset and Unsupported Screens - add a slight gray border around the container for clients with white login panels */

.browser-support-container {
    border: 1px solid lightgray;
}


/* add additional emphasis to the points earned on a certificate  BB - 12-18-2024*/

.points-alert-message .alert-message.alert-message-warning {
    font-size: 16px;
    border: 1px solid orange;
    font-weight: bold;
}


/* Temporary changes to reloadable card store that will be eventually moved to the LESS files  BB - 02-04-2025 */

.address-form {
    margin: 5px 15px;
}

.form-control {
    border-radius: 7px;
    height: 50px;
}

.registration button.btn.btn-default {
    height: 50px;
}

.address-confirmation {
    background-color: #f5f5f5;
    padding: 15px 25px;
    border-radius: 10px;
    margin: 15px;
    border: 1px solid lightgray;
    line-height: 1.3em;
    font-size: 16px;
}

.address-confirmation-title {
    text-transform: uppercase;
}

.success-message-description {
    color: #777;
}

.success-message-header {
    color: #21bb21;
    font-size: 1.6em;
}


/* Fix display issue for (view more) link on the spotlight page for milestones and birthdays */

#anniversary-section .sub-section {
    height: auto;
    line-height: 20px;
    font-size: 14px;
    display: flex;
    align-content: center;
    align-items: center;
}


/* Add an animation for when the points get removed from your account */


/* We need to add a class to the navbar points container to trigger this animation */

.reloadable-card .points-animation-container,
.rewards .points-animation-container {
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 5px lightgray, 0px 0px 1px black;
    position: absolute;
    z-index: 1000000;
    right: 30px;
    cursor: initial;
    padding: 15px 25px 20px 25px;
    display: none;
    font-size: 15px;
    text-wrap: wrap;
    font-weight: bold;
    border: 9px solid #F4A420;
    opacity: 0;
    overflow: auto;
    border-radius: 51px;
    line-height: 1.1em;
    background-color: black;
    top: 7px;
}

.navbar-mobile-sidebar-toggle .minus-points .fa {
    font-size: 1em;
}

.minus-points,
#navbar-mobile-points .minus-points {
    color: #F4A420;
}

#animation-container.main {
    margin-left: 10px;
    margin-top: 20px;
}

#navbar-mobile-points .minus-points {
    margin-top: 0;
}

#navbar-points-animation::before,
#navbar-mobile-points-animation::before {
    content: "account update";
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 2px;
    padding: 5px;
    color: white;
    margin-bottom: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}

.language-code-fr #navbar-points-animation::before,
.language-code-fr #navbar-mobile-points-animation::before {
    content: "mise à jour du compte";
}

.reloadable-card #nav-header-container .navbar-container #navbar-desktop-points .minus-points,
.reloadable-card #nav-header-container .navbar-container #navbar-desktop-points .plus-points,
.reloadable-card #nav-header-container .navbar-container #navbar-mobile-points .minus-points,
.reloadable-card #nav-header-container .navbar-container #navbar-mobile-points .plus-points,
.rewards #nav-header-container .navbar-container #navbar-desktop-points .minus-points,
.rewards #nav-header-container .navbar-container #navbar-desktop-points .plus-points,
.rewards #nav-header-container .navbar-container #navbar-mobile-points .minus-points,
.rewards #nav-header-container .navbar-container #navbar-mobile-points .plus-points {
    position: relative;
    z-index: 10;
}

.reloadable-card #dotlottie-player-navbar-points-animation,
.reloadable-card #dotlottie-player-navbar-mobile-points-animation,
.rewards #dotlottie-player-navbar-points-animation,
.rewards #dotlottie-player-navbar-mobile-points-animation {
    position: absolute;
    margin-top: -53px;
    width: fit-content;
}

.reloadable-card .point-animation #nav-header-container .navbar-container #navbar-desktop-points .points-animation-container,
.reloadable-card .point-animation #nav-header-container .navbar-container #navbar-mobile-points .points-animation-container,
.rewards .point-animation #nav-header-container .navbar-container #navbar-desktop-points .points-animation-container,
.rewards .point-animation #nav-header-container .navbar-container #navbar-mobile-points .points-animation-container {
    animation: pointHighlight 3.5s ease 3.5s 1 forwards;
}

.point-animation #navbar-mobile-points .points-animation-container,
.point-animation #navbar-desktop-points .points-animation-container {
    display: none;
}

.reloadable-card .point-animation #navbar-mobile-points .points-animation-container,
.reloadable-card .point-animation #navbar-desktop-points .points-animation-container,
.rewards .point-animation #navbar-mobile-points .points-animation-container,
.rewards .point-animation #navbar-desktop-points .points-animation-container {
    display: block;
}

.success-message {
    max-width: 1280px;
}

.success-message-description b {
    text-transform: lowercase;
    font-weight: normal;
}

.card-container .top-content .right-container .new-card-delivery-message {
    font-size: .9em;
    display: none;
}

.card-container .close-button {
    font-size: 21px;
}

@media (max-width: 768px) {
    .card-transaction-success-container .success-message .success-message-header {
        font-size: .9em;
    }
    .card-transaction-success-container .success-message .success-message-description {
        font-size: .6em;
    }
    .card-transaction-success-container .success-message {
        width: 100%;
    }
}

@keyframes pointHighlight {
    0% {
        right: -300px;
        opacity: 0;
    }
    10% {
        opacity: 1;
        right: 30px;
    }
    85% {
        right: 30px;
        transform: scale(1);
    }
    90% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(0);
        right: 30px;
        opacity: 0;
    }
}


/* Shrink the size of the reloadable card value on the demonination selection */

.popup-content h3:nth-of-type(2) {
    font-size: 18px;
}


/* this is the animation for the text on the card reload success page */

.success-message-header,
.success-message-description {
    opacity: 0;
}

.card-transaction-success-container .reloadable-card-image {
    margin-top: 40px;
}

.success-message-header {
    animation: fadeUp 1s ease-in-out 1 alternate 1.5s forwards;
}

.success-message-description {
    animation: fadeUp 1s ease-in-out 1 alternate 1.75s forwards;
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        margin-top: 100px;
    }
    100% {
        opacity: 1;
        margin-top: 40px;
    }
}


/* Add styles to the tabs on the reloadable card store page */

.nav-tabs>li>a {
    background-color: #f6f6f6;
    color: #999;
    border: 1px solid #eaeaea;
}

.nav-tabs>li>a:hover {
    color: #555;
}


/* We've added points earned to the Milestone message popup on the template structure, this applies the styles to the points */

#anniversary-message-points.alert-message {
    margin: 0;
    border: 1px solid orange;
    font-weight: bold;
}

#Milestone-Header #Picheader.img-responsive {
    width: 100%;
}

.communication-modal .communication-modal-close-icon {
    top: -0.4em;
    background-color: white;
    right: -.5em;
    border-radius: 26px;
    opacity: 1;
    width: 29px;
    height: 32px;
    border: 2px solid white;
}


/* Temp fix for the animation-points position issue */

.navbar-desktop-sidebar-toggle {
    display: contents;
}

@media (max-width: 600px) {
    .card-transaction-success-container dotlottie-player {
        margin-top: -50%;
    }
}


/* New styles for the reloadable card store page */

.reloadable-title {
    text-transform: uppercase;
    display: block;
    font-weight: bold;
}

.reloadable-alert {
    color: #cc3333;
    font-style: italic;
    display: block;
}

.reloadable-highlight {
    font-style: italic;
}


/* fixes for the store reloadable card to the btns */

.redeem-button-wrapper .btn {
    white-space: initial;
    border: none;
    background-color: none;
    border-radius: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: none;
    width: 100%;
}

.card-container .top-content .right-container .redeem-buttons {
    max-width: none;
    width: 100%;
}

.redeem-button-wrapper {
    border: 1px solid lightgray;
    border-radius: 8px;
}


/* Hide the 4th value from the reloadable card denominations when there are 5 values showing */

.btn-group.redeem-buttons:has(.redeem-button-wrapper:nth-child(5)) .redeem-button-wrapper:nth-child(4) {
    display: none !important;
    /* Added !important to ensure it overrides other rules */
}

.card-container .top-content .right-container .redeem-buttons .redeem-button-wrapper button {
    min-width: fit-content;
    max-width: initial;
    border: 1px solid lightgray;
}

@media (max-width: 1104px) {
    .card-container .top-content .right-container .redeem-buttons {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (max-width: 900px) {
    .card-container .top-content .right-container .redeem-buttons {
        grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    }
}


/* Tweaks to the reloadable card store page */


/* Temporary fix for centering the address on the reloadable card store page */

.card-container .top-content .right-container .popup-content .confirmation-content .address-confirmation {
    margin: 1em 5em;
}

.card-container .top-content .right-container .need-points-message {
    margin-bottom: 24px;
}

.card-container .top-content .left-container h3 {
    font-size: 2em;
}

.language-code-en .card-container .dollar-value::before {
    vertical-align: super;
    font-size: .6em;
}


/* add some extra padding below the post applause elements */

.spotlight-post-submit .links-container {
    margin-bottom: 3em;
    margin-top: 1em;
}

.register-header .add-user-icon {
    display: none;
}