/*=======================================
=            Frontend Styles            =
========================================*/

.allegiance-campaign {
    position: relative;
}

    .allegiance-campaign .allegiance-campaign-loading {
        text-align: center;
        font-size: 42px;
        padding-top: 5px;
        position: absolute;
        width: calc(100% + 2*12px);
        height: calc(100% + 2*12px);
        top: 0;
        left: 0;
        margin: -12px;
        background: white;
        overflow: hidden;
    }

    .allegiance-campaign .loader {
        position: sticky;
        top: 300px;
        /* https://projects.lukehaas.me/css-loaders/ */
        color: #000;
        font-size: 90px;
        text-indent: -9999em;
        overflow: hidden;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        margin: 72px auto;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: alleg-load6 1.7s infinite ease, alleg-round 1.7s infinite ease;
        animation: alleg-load6 1.7s infinite ease, alleg-round 1.7s infinite ease;
    }

@-webkit-keyframes alleg-load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    5%, 95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%, 59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }

    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }

    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }

    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@keyframes alleg-load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    5%, 95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%, 59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }

    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }

    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }

    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@-webkit-keyframes alleg-round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes alleg-round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


.allegiance-campaign .flex-controls {
    display: flex;
    flex-flow: row wrap;
    margin: -5px;
}

    .allegiance-campaign .flex-controls > label {
        flex: 1 0;
        display: block;
        min-width: 300px;
        margin: 5px;
    }

.allegiance-campaign .validationMessage {
    color: darkred;
    border-left: 4px solid red;
    padding: 2px 2px 2px 5px;
    display: inline-block;
}

.allegiance-campaign .allegiance-premium-item {
    clear: both;
    display: inline-flex;
    width: 25em;
    margin: 6px;
    padding: 8px;
    background-color: white;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
}

.allegiance-campaign .allegiance-premium-item-image {
    float: left;
    height: 8em;
    padding-right: 8px;
}

.allegiance-campaign .allegiance-premium-item-desc {
    font-size: larger;
}

.allegiance-campaign .allegiance-premium {
    clear: both;
    padding: 10px;
    margin: 6px 0;
    max-width: 1200px;
    border: 3px solid transparent
}

    .allegiance-campaign .allegiance-premium.selected {
        border-color: rgb(237, 237, 237);
        background-color: rgba(159, 159, 159, 0.07);
    }

        .allegiance-campaign .allegiance-premium.selected .allegiance-premium-desc {
            text-decoration: underline;
        }

.allegiance-campaign .allegiance-premium-heading {
    font-size: 1.3em;
    width: inherit !important;
    display: inline !important;
}

.allegiance-premium-total-validation.validationMessage {
    font-size: 1.4em;
    font-weight: bold;
    padding: 0px 8px;
    display: block;
    margin: 8px 0;
}

.allegiance-campaign .allegiance-employer-search-button {
    vertical-align: middle;
}

.allegiance-campaign .allegiance-component-submit {
    margin: 10px 0;
}

.allegiance-campaign .allegiance-summary-error {
    font-size: 1.3em;
    font-weight: bold;
}

.allegiance-campaign .allegiance-receipt-error {
    color: darkred;
    border-left: 4px solid red;
    padding: 2px 2px 2px 5px;
    display: block;
    font-size: 1.3em;
}

.allegiance-campaign .allegiance-receipt-error-reason-heading {
    display: block;
    font-weight: bold;
}

.allegiance-campaign .allegiance-receipt-error-reason-pretext {
    display: block;
    margin-top: 10px;
}

.allegiance-campaign .allegiance-receipt-error-reason-text {
    display: block;
    font-weight: bold;
}





/** Donation Type selection */

.allegiance-component-donation-type .options {
    display: flex;
    flex-flow: row wrap;
    font-size: 18px;
}

.allegiance-component-donation-type .option {
    display: flex;
    flex-flow: column nowrap;
    text-align: left;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
    color: #666;
    background-color: white;
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.1s ease-in-out, width 0.1s ease-in-out, padding 0.1s ease-in-out, margin 0.1s ease-in-out;
    height: 100%;
}

    .allegiance-component-donation-type .option.selected {
        box-shadow: 0px 0px 6px 0px rgb(101, 101, 101);
        padding: 16px;
        margin: 4px;
        background-color: white;
        color: #111;
    }

    .allegiance-component-donation-type .option h2 {
        margin: 0;
        /* font-weight: bold; */
        font-size: 1.8em;
    }

    .allegiance-component-donation-type .option h3 {
        font-weight: normal;
        font-size: 1em;
        white-space: pre-wrap;
    }

    .allegiance-component-donation-type .option ul {
        margin-bottom: 0;
        margin-top: auto;
        font-size: 1.5em;
        list-style: none;
        padding-left: 0px;
        display: flex;
        flex-flow: row nowrap;
        padding-top: 8px;
        border-top: 1px solid #ddd;
    }

        .allegiance-component-donation-type .option ul li {
            flex: 1 1 auto;
            padding: 4px;
            display: flex;
            flex-flow: column nowrap;
            align-content: center;
            align-items: center;
        }

            .allegiance-component-donation-type .option ul li:not(:first-child) {
                border-left: 1px solid #ddd;
            }

            .allegiance-component-donation-type .option ul li i {
                padding-top: 12px;
                font-size: 2em;
                display: block;
            }

.allegiance-component-donation-type .fa-credit-card {
    color: rgb(64, 165, 255);
}

.allegiance-component-donation-type .fa-money-check {
    color: rgb(133, 119, 206);
}

.allegiance-component-donation-type .fa-calendar-check {
    color: rgb(77, 189, 81);
}

.allegiance-component-donation-type .fa-calendar-times {
    color: rgb(216, 49, 49);
}

.allegiance-component-donation-type .option-check {
    margin-top: 15px;
}

/*Donate*/
.allegiance-component-question,
.cc-expiration,
.allegiance-component.allegiance-component-donation-type label,
.allegiance-component.allegiance-component-donation-amount label,
.allegiance-component.allegiance-component-donor-info.flex-controls label,
.allegiance-component.allegiance-component-premiums.flex-controls label,
.allegiance-component-cc-input .flex-controls label,
.allegiance-captcha-validation,
.allegiance-component.allegiance-component-premiums label.premium-size-selection  {
    display: block;
    font-size: 19px;
    font-weight: 400;
}

.allegiance-component.allegiance-component-donation-amount {
    margin-top: 2%;
}


.allegiance-component.allegiance-component-donor-info.flex-controls,
.allegiance-component.allegiance-component-donor-info.flex-controls input,
.allegiance-component.allegiance-component-employer-match input[type=text],
.allegiance-component.allegiance-component-question input[type=text],
.allegiance-component.allegiance-component-question textarea,
.allegiance-component.allegiance-component-donor-info.flex-controls label select,
.allegiance-component.allegiance-component-premiums label select
{
    display: block;
    width: 100%;
    padding: 0.5em 0.6em;
}

*[role=radiogroup] label {
    display: block;
}

.allegiance-component.allegiance-component-question textarea {
    width: 100%;
}

.allegiance-input {
    line-height: 1.8;
}

.allegiance-other-amount {
    line-height: 1.8 !important;
    width: 250px !important;
    display: inline !important;
    max-height: 40px !important;
    margin: 0 !important;
}

.allegiance-component.allegiance-component-donor-info.flex-controls input,
.allegiance-component.allegiance-component-employer-match input,
.allegiance-input,
.search__input,
allegiance-other-amount,
.allegiance-component.allegiance-component-donor-info.flex-controls label select,
.allegiance-component.allegiance-component-premiums label select {
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #eee;
    border-radius: 0;
}

    .allegiance-component-cc-input .flex-controls input:focus,
    .allegiance-component-cc-input .flex-controls select:focus,
    .allegiance-component.allegiance-component-donor-info.flex-controls input:focus,
    .allegiance-component.allegiance-component-employer-match input:focus,
    .allegiance-component.allegiance-component-donor-info.flex-controls label select:focus {
        border-color: #7c9cd4;
        outline: 1px auto #7c9cd4;
        /* box-shadow: 0 0 8px 0 rgba(255,237,80,0.75); */
    }

.allegiance-component.allegiance-component-donor-info.flex-controls label {
    margin-top: 2%;
}

.allegiance-component.allegiance-component-donor-info.flex-controls {
    margin-left: -3%;
}

.allegiance-component.allegiance-component-employer-match input[type=text] {
    line-height: 1.8;
    width: 250px !important;
    display: inline !important;
    margin-bottom: 0px;
}

.allegiance-component.allegiance-component-employer-match input:hover {
    /* background-color: #73acf3; 
    color: #fff; */
}

.donate-image-container {
    width: 100%;
    margin-left: -12%;
}

    .donate-image-container img.wbur-donate-image {
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        display: block;
    }

.matching-gifts-text {
    font-size: 18px;
    font-weight: 400;
    margin-top: 1%;
}

.allegiance-employer-search-button {
    font-size: unset;
    letter-spacing: 0.01em;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 0px;
    background-color: white;
}

    .allegiance-employer-search-button:hover {
        color: #333;
        background-color: rgb(237, 237, 237);
        border-color: #7c9cd4;
        outline: 1px auto #7c9cd4
    }

.verification-message {
    background-color: #ffdbdb;
    padding: 20px;
    width: 100%;
}

.allegiance-campaign button.allegiance-submit-button {
    font-size: 24px;
    min-width: 150px;
    height: 48px;
    color: #000;
    background-color: #ffffff;
    margin-bottom: 20px;
    margin-top: 4%;
    padding: 0;
    border: 1px solid black
}

    .allegiance-campaign button.allegiance-submit-button:hover {
        border: 1px solid black;
        color: white;
        background-color: #000;
    }

    

.payment-details-container {
    margin-bottom: 30px;
    border: 1px solid #D0D0D0;
    margin-top: 4%;
}

.cc-expiration, .allegiance-campaign .flex-controls label {
    margin: 3%;
}

.allegiance-component-cc-input .flex-controls,
.allegiance-component-cc-input .flex-controls select,
.allegiance-component-cc-input .flex-controls input {
    display: block;
    width: 100%;
}

.allegiance-component-cc-input .flex-controls select {
        padding: 0.5em 0.6em;
}

.allegiance-component-cc-input .card-inputs {
    margin-left: -2.5%;
}

.payment-details-container {
    border: none;
    width: 98%;
}

.payment-require-right {
    float: right;
    font-weight: 400;
    font-size: 16px;
}

.donors-row-margin {
    margin-top: 1%;
    margin-bottom: 0.5%;
    vertical-align: middle;
}

.fixed-height {
    height: 100px;
}

.donors-right {
    display: inline-block;
    float: right;
    margin-right: 25%;
}

.amount-left {
    display: inline-block;
    float: left;
    margin-left: 15%;
}

.line-break {
    width: 100%;
}

.expCol {
    float: right;
    font-size: 1em;
    border-color: #b2b2b2;
    background: #efefef;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 18px;
    min-width: 8%;
    margin-top: 12.5px;
}

.allegiance-premium-thumbnail {
    height: 60px;
    width: 60px;
    display: inline !important;
}

/*
    allegiance-pagination
*/

ul.allegiance-pagination {
    display: inline-block;
    padding: 5px;
    margin: 0;
}

    ul.allegiance-pagination li {
        display: inline;
    }

        ul.allegiance-pagination li a {
            float: left;
            padding: 8px 16px;
            text-decoration: none;
            border: 1px solid #ddd; /* Gray */
        }

.allegiance-pagination-showing {
    float: right;
}

ul.allegiance-pagination li:before {
    content: none;
}

.disabled {
    pointer-events: none;
    color: black;
}
/*
    Tooltip 
*/
.couponcode:hover + .coupontooltip {
    display: block;
    opacity: 1;
}

.coupontooltip {
    height: auto;
    max-width: 600px;
    display: none;
    position: absolute;
    z-index: 1000;
    width: auto;
    -webkit-transition: opacity 0.3s ease-out;
    opacity: 0;
    overflow: hidden;
}
/*
    Premium search 
*/
.search__input {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaBAMAAABWeiG6AAAAA3NCSVQICAjb4U/gAAAAD1BMVEXe3t7////m5ub39/fv7+9d3/qMAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFnRFWHRDcmVhdGlvbiBUaW1lADAxLzExLzEyymPybAAAABh0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzT7MfTgAAAJJJREFUGJVVkOsRwyAMgxXCAKFmAHpZoLlkgKTdf6cK23lYP4DvBLINShD68kX63biDep/4gmpxbMjr1jAaViTuFTCccPTDRzcwSEMqBsWWvYahZTBxNBwiRvd6a7inkOx1J69b0W/L2RV7notwKnN5zZR93uZ8GAp5FrWtf1n6SLRx/ZraN9JOTxR+3wPLVgJSfwffF4JRS32lAAAAAElFTkSuQmCC) no-repeat 5px;
    padding: 6px 15px 6px 35px !important;
    width: 250px !important;
    display: inline !important;
    max-height: 40px !important;
    line-height: 1.8;
}
/*
    CC expiration break line
*/
.br-on-mobile {
    display: none;
}

@media screen and (max-width: 600px) {
    .br-on-mobile {
        display: block;
    }
    .allegiance-campaign .allegiance-premium-item {
        width: 20em;
    }
    ul.allegiance-pagination {
        padding: 5px 0 5px 0;
    }
}

/*
    css for radio checkbox to display in grid
*/
@media only screen and (min-width: 600px) {

    .grid-view-radio li {
        display: block;
        float: left;
        width: 30%;
    }
}
.allegQuestionList {
    list-style-type: none;
    margin: 0;
}