@import "/styles/fonts.css?cssVer=Indigo";
@import "/styles/LoyaltyStream/text.css?cssVer=Indigo";
@import "/styles/LoyaltyStream/buttons.css?cssVer=Indigo";
@import "/styles/LoyaltyStream/header.css?cssVer=Indigo";
@import "/styles/LoyaltyStream/menu.css?cssVer=Indigo";
@import "/styles/LoyaltyStream/grid.css?cssVer=Indigo";
@import "/styles/SitePages/site-page.css?cssVer=Indigo";
@import "/styles/LoyaltyStream/telerik.css?cssVer=Indigo";

body {
    --body-outline: #ced4da;
    margin: 0px;
}

body:not(.applyBg) {
     background-image: linear-gradient(var(--page-background-colour-gradient-direction), var(--page-background-colour), var(--page-background-colour-gradient));
}

footer {
    padding-top: 50px;
}

.centered-pane {
    margin-left: 10%;
    margin-right: 10%;
}


.modal-content {
    width: 100%
}

.modal .modal-content {
    border-radius: 15px;
}

    .modal .modal-content img {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

.modal-content-div {
    padding: 20px;
    background-color: #0D526A;
    color: #ffffff;
    width: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

    .modal-content-div h3 {
        text-align: center;
    }

    .modal-content-div span {
        color: #ffffff;
    }


.site-page-contents {
    padding-bottom: 20px;
    padding-top:20px;
}

.site-page-contents, .site-page-width {
    padding-left: 10%;
    padding-right: 10%;
}

    .site-page-contents .page-title {
        padding-bottom: 30px;
    }

.vertically-centered {
    display: flex;
    align-items: center;
}

.underlined {
    border-bottom: 1px solid rgba(var(--text-colour-rgb), 0.2);
}

footer {
    background-color: var(--footer-background-colour);
    background-image: linear-gradient(var(--footer-background-colour-gradient-direction), var(--footer-background-colour), var(--footer-background-colour-gradient));
}

.hide {
    display: none;
}

.top5 {
    margin-top: 5px !important;
}

.top7 {
    margin-top: 7px !important;
}

.top10 {
    margin-top: 10px !important;
}

.top15 {
    margin-top: 15px !important;
}

.top20 {
    margin-top: 20px !important;
}

.top30 {
    margin-top: 30px !important;
}

.top40 {
    margin-top: 40px !important;
}

.top50 {
    margin-top: 50px !important;
}

.lft5 {
    margin-left: 5px !important;
}

.lft10 {
    margin-left: 10px !important;
}

.rght5 {
    margin-right: 5px !important;
}

.rght10 {
    margin-right: 10px !important;
}

/* Content Program Card Styling */
.program-cards .card {
    margin-right: 10px;
    margin-top: 10px;
    max-width: 250px;
}

    .program-cards .card:last-of-type {
        margin-right: 0;
    }

    .program-cards .card input {
        display: block;
        margin: 0 auto;
    }

.bot10 {
    margin-bottom: 10px !important;
}

.bot20 {
    margin-bottom: 20px !important;
}

.bot100 {
    margin-bottom: 100px !important;
}

.form-control-inline {
    width: auto;
    display: inline-block;
}

@media (min-width: 768px) {
    .w-md-auto {
        width: auto !important;
    }
}

.clear-footer {
    background-color: transparent;
    border-top: none;
}

.remember-me {
    font-weight: bold;
    padding-left: 5px;
}

.react-tel-input .form-control {
    width: 100% !important;
}

.loading-image {
    padding-top: 50px;
}

.loading-image img {
    max-width: 200px;
}