/*!**********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/components/LoyaltyGrid.css ***!
  \**********************************************************************************/
  :root {
    --loyalty-copper-color: 184, 104, 51;
    --loyalty-bronze-color: 205, 127, 50;
    --loyalty-silver-color: 192, 192, 192;
    --loyalty-gold-color: 254, 222, 0;
}

.loyalty-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.loyalty-points-card {
    grid-column-start: 1;
    grid-row-start: 2;
}

.euros-spent-card {
    grid-column-start: 2;
    grid-row-start: 2;
}

.rank-table-card {
    grid-column-start: 1;
    grid-row: 3 / 6;
}

.discount-rank-card {
    grid-column-start: 2;
    grid-row-start: 3;
}

.next-rank-card {
    grid-column-start: 2;
    grid-row-start: 4;
}

.reset-rank-card {
    grid-column-start: 2;
    grid-row-start: 5;
}

.loyalty-points-rank-card {
    grid-column: 1 / 3;
    grid-row-start: 1;
}

.loyalty-card-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: #fff;
    border: 1px solid #d8dee2;
    border-radius: 9px;
    padding: 2rem;
    gap: 1rem;
}

.loyalty-card-container > span {
    text-align: center;
}

.loyalty-card-row {
    display: flex;
    align-items: center;
}

.rank-table th {
    text-align: center;
}

.loyalty-value {
    font-size: 4rem;
    font-weight: bold;
}

.loyalty-points-logo {
    width: 6rem;
    height: 6rem;
}

.loyalty-title {
    font-size: 2rem;
    font-weight: 600;
}

.loyalty-value-spacing {
    margin-right: 1.5rem;
}

.yellow-text {
    color: #fedb4c
}

.green-text {
    color: green;
}

.red-text {
    color: red;
}

.copper-text {
    color: rgb(var(--loyalty-copper-color))
}

.bronze-text {
    color: rgb(var(--loyalty-bronze-color))
} 

.silver-text {
    color: rgb(var(--loyalty-silver-color))
}

.gold-text {
    color: rgb(var(--loyalty-gold-color))
}

.platinium-text {
    color: aquamarine;
}

.palladium-text {
    color: aqua;
}

.rhodium-text {
    color: antiquewhite;
}

.yellow-btn {
    background-color: #fedb4c;
    color: #fff;
    border: 1px solid #fedb4c;
    padding: 1rem 2rem;
    border-radius: 50px;
    margin: 1rem;
}

.yellow-btn:hover {
    background-color: #fff;
    color: #fedb4c;
}

@media (max-width: 700px) {
    .loyalty-container {
        grid-template-columns: 100%;
    }

    .loyalty-container > * {
        grid-column-start: 1;
        grid-column: unset;
        grid-row: unset;
    }
    
    .rank-table-card {
        grid-row-start: 1;
    }
    
    .rank-card {
        grid-row-start: 2;
    }
    
    .next-rank-card {
        grid-row-start: 3;
    }
    
    .reset-rank-card {
        grid-row-start: 4;
    }
    
    .loyalty-points-card {
        grid-row-start: 5;
    }
    
    .euros-spent-card {
        grid-row-start: 6;
    }

    .loyalty-points-rank-card {
        grid-row-start: 7;
    }
}