﻿.currency-banner {
    display: flex;
    flex-wrap: wrap;
    /*padding: 10px 24px;*/
    background: #00254A;
    position: sticky;
    top: 0px;
    z-index: 998;
}

    .currency-banner .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
    }

    .currency-banner p {
        margin: 0;
        color: #fff;
    }

    .currency-banner .currency-title {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: auto;
    }

        .currency-banner .currency-title svg {
            margin-right: 8px;
        }

        .currency-banner .currency-title p {
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
        }

    .currency-banner .currency-accordion {
        display: none;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

        .currency-banner .currency-accordion p {
            margin-right: 8px;
        }

        .currency-banner .currency-accordion svg {
            transition: all .35s;
        }

    .currency-banner .currency-content {
        width: 70%;
        display: flex;
        box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 1);
        justify-content: space-between;
        align-items: center;
        transition: all .35s;
    }

        .currency-banner .currency-content p {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            margin: 16px 8px;
            cursor: pointer;
            border-radius: 4px;
            align-items: center;
            justify-items: stretch;
        }
            .currency-banner .currency-content p:first-child {
                margin-left: 16px;
            }
            .currency-banner .currency-content p:last-child {
                margin-right: 16px;
            }
        .currency-banner .currency-points:hover {
            outline: 1px solid #fff;
        }

        .currency-points.active {
            background-color: #fff;
            color: #00254A;
        }

        .currency-points.active svg *{
            stroke: #00254A;
        }

            .currency-banner .currency-content p br {
                display: none;
            }

            .currency-banner .currency-content p .value {
                font-size: 20px;
                font-weight: 500;
                margin-right: 8px;
                margin-bottom: unset;
            }

            .currency-banner .currency-content p .desc {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 10px;
                text-align: center;
            }

            .currency-banner .currency-content p svg {
                width: 16px;
                height: 16px;
                margin-left: 3px;
            }


.currency-points .desc a {
    display: flex;
}

@media (min-width: 990px) {
    .currency-banner {
        min-height: 85px;
    }
        .currency-banner .currency-content {
            box-shadow: none;
            width: 80%;
            display: flex;
        }

            .currency-banner .currency-content p {
                padding: 16px;
                margin-right: 0;
                margin-left: auto;
                width: fit-content;
            }
                .currency-banner .currency-content p:first-child {
                    margin-left: auto;
                }

                .currency-banner .currency-content p:last-child {
                    margin-right: 0;
                }
                .currency-points .desc a {
                height: 17px;
                margin-left: .55rem;
            }
}


@media screen and (max-width: 991px) {
    .currency-banner {
        padding: 0px;
    }

    .currency-banner .container{
        width: 100%;
        padding: 0;
        margin: 0;
    }

        .currency-banner .currency-title {
            padding: 20px;
        }

        .currency-banner .currency-accordion {
            display: flex;
            padding: 20px;
        }

        .currency-banner .currency-content {
            width: 100%;
            background-color: #002e5d;
            justify-content: flex-end;
            align-items: stretch;
            overflow: hidden;
            height: 0;
            padding: 0;
            opacity: 0;
            transition: height 0ms 400ms, opacity 400ms 0ms;
        }

            .currency-banner .currency-content p {
                width: 33.33%;
                line-height: normal;
            }

                .currency-banner .currency-content p br {
                    display: block;
                }

                .currency-banner .currency-content p svg {
                    width: 30px;
                    margin-left: 0px;
                }

                .currency-banner .currency-points .value {
                    margin-bottom: -10px;
                }
}

/*Action Cards (Modals) */
.modal-backdrop.in {
    display: none;
}

#Points .modal-dialog, #Dbc .modal-dialog, #Cash .modal-dialog, #Certs .modal-dialog {
    background-color: transparent;
}

    .modal-dialog .modal-content .actionTitle {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        font-size: 20px;
        color: #00254A;
        font-weight: 500;
        line-height: 1;
    }

    .modal-dialog .modal-content .actionBody {
        font-size: 20px;
        color: #212121;
        font-weight: 400;
        margin-top: 20px;
    }

.modal-content iframe, .modal-content video {
    max-width: 300px;
}

@media screen and (min-width: 375px) {
    .modal-content iframe, .modal-content video {
        max-width: 305px;
    }
}

@media screen and (min-width: 390px) {
    .modal-content iframe, .modal-content video {
        max-width: 320px;
    }
}

@media screen and (min-width: 400px) {
    .modal-content iframe, .modal-content video {
        max-width: 340px;
    }
}

    @media screen and (min-width: 600px) {
        .modal-content iframe, .modal-content video {
            max-width: 550px;
        }
    }

    .currency-banner svg .st0 {
        fill: none;
    }

#Points.modal, #Dbc.modal, #Cash.modal, #Certs.modal {
    top: unset;
}

@media screen and (min-width: 600px) {
    #Points.modal, #Dbc.modal, #Cash.modal, #Certs.modal {
        top: 1rem;
    }
}

    #Points .modal-dialog .modal-content, #Dbc .modal-dialog .modal-content, #Cash .modal-dialog .modal-content, #Certs .modal-dialog .modal-content {
        padding: 24px;
        background-color: #F5F5F5;
        display: flex;
        align-items: stretch;
        justify-content: center;
        flex-direction: column;
    }

        #Points .modal-dialog .modal-content svg, #Dbc .modal-dialog .modal-content svg, #Cash .modal-dialog .modal-content svg, #Certs .modal-dialog .modal-content svg {
            height: 24px;
            fill: #00254A;
        }

            #Points .modal-dialog .modal-content svg path, #Dbc .modal-dialog .modal-content svg path, #Cash .modal-dialog .modal-content svg path, #Certs .modal-dialog .modal-content svg path {
                fill: #00254A;
            }

        #Points .modal-dialog .modal-content a, #Dbc .modal-dialog .modal-content a, #Cash .modal-dialog .modal-content a, #Certs .modal-dialog .modal-content a {
            font-size: 16px;
            font-weight: 500;
            color: #0074FF;
            margin-top: 35px;
        }

#Points.modal.fade .modal-dialog, #Dbc.modal.fade .modal-dialog, #Cash.modal.fade .modal-dialog, #Certs.modal.fade .modal-dialog {
    transform: translate3d(0, 100vh, 0);
}
#Points.modal.fade.in .modal-dialog, #Dbc.modal.fade.in .modal-dialog, #Cash.modal.fade.in .modal-dialog, #Certs.modal.fade.in .modal-dialog {
    opacity: 1;
}

@media screen and (min-width: 600px) {
    #Points.modal.fade .modal-dialog, #Dbc.modal.fade .modal-dialog, #Cash.modal.fade .modal-dialog, #Certs.modal.fade .modal-dialog {
        transform: translate(0, -25%);
    }
}
#Points.modal.fade.in .modal-dialog, #Dbc.modal.fade.in .modal-dialog, #Cash.modal.fade.in .modal-dialog, #Certs.modal.fade.in .modal-dialog {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

        #Points .modal-dialog .modal-header, #Dbc .modal-dialog .modal-header, #Cash .modal-dialog .modal-header, #Certs .modal-dialog .modal-header {
    top: 64px;
    left: -4px;
    position: relative;
    z-index: 1;
    border: none;
}

        #Points .modal-dialog .modal-header .close, #Dbc .modal-dialog .modal-header .close, #Cash .modal-dialog .modal-header .close, #Certs .modal-dialog .modal-header .close {
            width: 20px;
            font-size: 4.6rem;
            font-weight: 200;
            opacity: 1;
        }

            #Points .modal-dialog .modal-header .close:hover, #Dbc .modal-dialog .modal-header .close:hover, #Cash .modal-dialog .modal-header .close:hover, #Certs .modal-dialog .modal-header .close:hover {
                opacity: .4;
            }