/*
#fbcccc -> hsl(0, 85%, 89%)
#36699F
#2d659e
#7786a7
*/
.center-content {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-flow: wrap;
}

.content-spaced {
    margin: 48px !important;
}

.button-spaced {
    margin: 4px;
}

.red-cross {
    color: #d9534f;
}

.description-header {
    font-size: 1.0rem;
}

.description-text-container {
    padding: 10px;
    align-content: center;
    min-width: 280px;
    max-width: 50%;
}

.left-side-description-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.right-side-description-container {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: space-evenly;
}

.front-page-gif {
    max-width: 50%;
    min-width: 250px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

code {
    margin-block-start: 1em;
    margin-block-end: 1em;
}

.all-card-container {
    max-height: 200px;
    overflow-y: scroll;
    border: 1px solid grey;
}

.raw-transaction-container {
    max-height: 200px;
    overflow-y: scroll;
    border: 1px solid grey;
}

.validation-rule-container {
    display: flex;
    align-items: center;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    border-radius: 5px;
    margin: 2px;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card-container {
    display: flex;
    padding: 2px 5px;

    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.date-text {
    width: 25%;
    font-size: small;
}

.description-text {
    width: 30%;
    padding-left: 3px;
}

.category-text {
    width: 25%;
    font-size: small;
}

.amount-text {
    width: 10%;
    text-align-last: right;
}

.card-text {
    align-content: center;
    padding-left: 5px;
    padding-right: 10px;
}

.card-image {
    border-radius: 5px 5px 0 0;
}

.fail-reason-button:hover {
    cursor: pointer;
}