.expense-breakdown{
    /* background-color: red; */
    padding: .5rem;
    border: 1px solid rgb(161, 161, 161);
    border-radius: .3rem;
    margin-bottom: .5rem;
    position: relative;
    overflow: hidden;
}
/* .expense-breakdown::after{
    content: "";
    position: absolute;
    height: 100%;
    width: 50px;
    background: rgb(255,255,255);
    background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
    top: 0px;
    left: -50%;
    transform: skewX(10deg);
    transition: 1s;
} */

.expense-breakdown.expense-breakdown-focused{
    animation: expense-breakdown-focused-animation 1s;
    animation-delay: 1s;
}

/* .expense-breakdown.expense-breakdown-focused::after{
    left: 150%;
} */

@keyframes expense-breakdown-focused-animation {
    0%{
        box-shadow: 0 0 0px 0px #0062ff;
    }
    25%{
        box-shadow: 0 0 7px 1px #0062ff;
    }
    50%{
        box-shadow: 0 0 2px 1px #0062ff;
    }
    75%{
        box-shadow: 0 0 7px 1px #0062ff;
    }
    100%{
        box-shadow: 0 0 0px 0px #0062ff;
    }
}


.expense-breakdown .icon-expand-nf{
    font-size: x-large;
    width: 24px;
    height: 24px;
    text-align: center;
    cursor: pointer;
    transition: 1s;
    transform: rotate(180deg);
}

.expense-breakdown .icon-expand-nf:hover{
    color: black;
}

.expense-breakdown .icon-history-nf{
    font-size: x-large;
    width: 24px;
    height: 24px;
    text-align: center;
    cursor: pointer;
    transition: 1s;
}

.expense-breakdown .icon-history-nf:hover{
    color: black;
}

.expense-breakdown .short-view{
    max-width: 100%;
    transition: 1s;
    opacity: 1;
}

.expense-breakdown .short-view .text-muted{
    white-space: nowrap;
}

.expense-breakdown.expense-breakdown-short-view .short-view{
    max-width: 0px;
    overflow: hidden;
    max-height: 59px;
    padding: 0;
    opacity: 0;
}

.expense-breakdown.expense-breakdown-short-view .icon-expand-nf{
    transform: rotate(0deg);
}

.form-control.form-control-required, label.form-control-required{
    box-shadow: 0 0 3px 1px red;
    animation: form-control-required-shake .5s;
}

@keyframes form-control-required-shake {
    0% { transform: translate(1px, 1px)}
    10% { transform: translate(-1px, -2px)}
    20% { transform: translate(-3px, 0px)}
    30% { transform: translate(3px, 2px)}
    40% { transform: translate(1px, -1px) }
    50% { transform: translate(-1px, 2px) }
    60% { transform: translate(-3px, 1px) }
    70% { transform: translate(3px, 1px)}
    80% { transform: translate(-1px, -1px)  }
    90% { transform: translate(1px, 2px)}
    100% { transform: translate(1px, -2px)  }
}

.expense-breakdowns-modal-history.show .modal-dialog{
    animation: expense-breakdowns-modal-history-show 1s;
}

@keyframes expense-breakdowns-modal-history-show {
    from{
        transform: translateX(100%);
    }
    to{
        transform: translateX(0%);
    }
}

.expense-breakdowns-modal-history .modal-dialog{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 400px;
    height: 100%;
    margin: 0px;
}

.expense-breakdowns-modal-history .modal-dialog .modal-content{
    height: 100%;
    margin: 0px;
}