/* FORM */
.input-container {
    margin-top: 1rem;
}
/* FORM */

/* CARDS */
#my-cards {
    margin-top: 3rem;
    text-align: center;
    text-wrap: nowrap;
}

#my-cards > .cards {
    background-color: var(--light_gray);
    border-radius: 1rem;
    border-left: 0.8rem solid transparent;
    border-right: 0.8rem solid transparent;
    margin-bottom: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;

    display: flex;
    flex-flow: row nowrap;
    justify-content: start;
    align-items: center;
    overflow-x: scroll;
}

#my-cards > .cards > .card-placd {
    padding: 0.5rem 4.1rem 0.5rem 2.5rem;
}

#my-cards > .cards > .card-data {
    padding: 0.5rem 2rem;
    flex-grow: 2;

    display: flex;
    flex-flow: row nowrap;
    justify-content: start;
    align-items: center;
    column-gap: 1.8rem;
}

#my-cards > .cards > .card-placd,
#my-cards > .cards > .card-data > div > p:first-child {
    font-weight: bold;
}

#my-cards > .cards > .sum {
    padding: 0.5rem 2.5rem 0.5rem 4.1rem;

}

#my-cards > .cards > .sum > p {
    font-weight: bold;
}

#my-cards > .total {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    font-weight: bold;
    padding-right: 2.5rem;
}

#my-cards .Blue,
.Blue {
    border-left-color: var(--blue) !important;
    border-right-color: var(--blue) !important;
}

#my-cards .Orange,
.Orange {
    border-left-color: var(--orange) !important;
    border-right-color: var(--orange) !important;
}

#my-cards .Green, 
.Green {
    border-left-color: var(--green) !important;
    border-right-color: var(--green) !important;
}

#my-cards .Red, 
.Red {
    border-left-color: var(--red) !important;
    border-right-color: var(--red) !important;
}

#my-cards .Black, 
.Black {
    border-left-color: var(--black) !important;
    border-right-color: var(--black) !important;
}

#my-cards .Pink, 
.Pink {
    border-left-color: var(--pink) !important;
    border-right-color: var(--pink) !important;
}

#my-cards .Yellow,
.Yellow {
    border-left-color: var(--yellow) !important;
    border-right-color: var(--yellow) !important;
}

#my-cards .Purple, 
.Purple {
    border-left-color: var(--purple) !important;
    border-right-color: var(--purple) !important;
}

#my-cards .Brown, 
.Brown {
    border-left-color: var(--brown) !important;
    border-right-color: var(--brown) !important;
}

/* CARDS */

p {
    margin: 0 !important;
}