@import "./../components/compare-financial-institution/financial-institution-card.css";
@import "./../components/compare-financial-institution/feature-card.css";
@import "./../components//compare-financial-institution/feature-card_select-account.css";
@import "./../components/compare-financial-institution/modal-compare-financial-institutions.css";
@import "./../components/compare-financial-institution/entries-financial-institutions-grid.css";

/* financial-institution compare pgae */
.feature-col {
    margin-top: 1rem;
}

.bg-light {
    background-color: transparent !important;
}

.grid-col2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-col3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-col4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.financial-institutions-info-box {
    position: relative;
}

.financial-institutions-box {
    height: auto;
    display: grid;
    position: relative;
    padding: 0rem 0rem 1rem 0rem;
    min-height: 227px;
}

.add-card-box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.financial-institution-rate-star > div > span {
    color: #3A3A3A;
}

.financial-institution-rate {
    color: #7E7F86;
}

.financial-institutions-feature {
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.feature-cards-container {
    display: grid;
    position: relative;
}

.financial-institutions-info {
    border-bottom: 1px solid #ebebeb;
    border-top: 1px solid #ebebeb;
}

.feature-card-duplicate {
    position: relative;
}

.financial-institution-rate {
    font-size: 12px;
}

hr {
    margin: 0px !important;
}

@media (max-width: 767px) {
    .feature-card.feature-card-duplicate .feature-card-li:first-child {
        margin-top: 0.5rem;
    }

    .feature-col:nth-child(2) .feature-card-label {
        opacity: 0;
    }

    .feature-col {
        padding: 0rem;
    }

    .addFinancialInstitutions {
        font-size: 15px;
        padding: 0.2rem 0.7rem;
    }

    .fsz18fw700 {
        font-size: 12px !important;
        font-weight: 700 !important;
        font-variation-settings: "wght" 700, "KSHD" 100;
    }

    .fsz14fw400 {
        font-size: 14px;
        font-weight: 700;
        font-variation-settings: "wght" 700, "KSHD" 100;
    }

    .fsz12fw600 {
        font-size: 18px;
        font-weight: 700;
        font-variation-settings: "wght" 700, "KSHD" 100;
    }

    .financial-institution-rate-star > div > span {
        font-size: 12px;
    }

    .financial-institution-rate,
    .financial-institution-rate-star > div {
        font-size: 10px;
    }

    .add-card-box > a {
        font-size: 10px !important;
        padding: 0.5rem !important;
    }
}

@media (min-width: 768px) {
    .feature-col {
        padding: 0rem 1rem;
    }

    .addFinancialInstitutions {
        font-size: 15px;
        padding: 0.5rem 1rem;
    }

    .fsz18fw700 {
        font-size: 16px;
        font-weight: 700;
        font-variation-settings: "wght" 700, "KSHD" 100;
    }

    .fsz16fw600 {
        font-size: 16px;
        font-weight: 600;
        font-variation-settings: "wght" 600, "KSHD" 100;
    }

    .fsz14fw500 {
        font-size: 14px;
        font-weight: 500;
        font-variation-settings: "wght" 500, "KSHD" 100;
    }

    .financial-institution-rate-star > div > span {
        font-size: 14px;
    }

    .financial-institution-rate-star > div {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .fsz18fw700 {
        font-size: 14px;
        font-weight: 700;
        font-variation-settings: "wght" 700, "KSHD" 100;
    }
}

@media (max-width: 1023px) {
    .border-left-none {
        border-left: none;
    }

    .border-right-none {
        border-right: none;
    }

    .financial-institutions-info {
        background-color: #fff;
        position: relative;
        padding-top: 1rem;
        position: sticky;
        top: -100px;
        z-index: 9;
    }
}

@media (min-width: 1024px) {
    .financial-institutions-info {
        background-color: #fff;
        position: relative;
        padding-top: 1rem;
        position: sticky;
        top: -100px;
        z-index: 9;
    }

    .feature-card.feature-card-duplicate .feature-card-data {
        min-height: 21px;
    }
}

@media (min-width: 1280px) {
    .addFinancialInstitutions {
        font-size: 16px;
        padding: 1rem 2rem;
    }
}

@keyframes shutter {
    0% {
        transform: rotateX(-100deg);
        transform-origin: top;
    }
    100% {
        transform: rotateX(0deg);
        transform-origin: top;
    }
}

@keyframes shutter-reverse {
    0% {
        transform: rotateX(0deg);
        transform-origin: top;
    }
    100% {
        transform: rotateX(-100deg);
        transform-origin: top;
    }
}

.financialLoader {
    width: 15px;
    aspect-ratio: 1;
    border-radius: 50%;
    clip-path: inset(-45px);
    box-shadow: -60px 15px, -60px 15px, -60px 15px;
    transform: translateY(-15px);
    animation: financialLoader 1s infinite linear;
    position: absolute;
    margin-left: 50%;
    margin-right: 50%;
    z-index: 111;
    margin-top: 120px;
    color: #185adb;
}

@keyframes financialLoader {
    16.67% {
        box-shadow: -60px 15px, -60px 15px, 19px 15px
    }
    33.33% {
        box-shadow: -60px 15px, 0px 15px, 19px 15px
    }
    40%, 60% {
        box-shadow: -19px 15px, 0px 15px, 19px 15px
    }
    66.67% {
        box-shadow: -19px 15px, 0px 15px, 60px 15px
    }
    83.33% {
        box-shadow: -19px 15px, 60px 15px, 60px 15px
    }
    100% {
        box-shadow: 60px 15px, 60px 15px, 60px 15px
    }
}

.contentstyle {
    p {

        padding: 0 !important
    }

    .financial-institution-name-fa {
        padding-left: 0.2rem !important
    }
}