.call-card{
    background: var(--theme-color-grad);
    border-radius: 0.5rem;
    color: var(--theme-complementary-color);
    padding: 1rem;
    display: flex;
    flex-direction: row;
    transition: .4s ease-in-out;
    gap: 0.25rem;
    align-items: center;
    margin: 1rem auto;
    width: var(--container-m);

    .call-content{
        flex:auto;
        margin-left: 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;

        .call-header{
            color: var(--theme-complementary-color);
            margin-bottom: 0px;
        }
        .missed-call>*{
            fill: var(--danger);
            color: var(--theme-complementary-color);
        }
        .connected-call>*{
            fill: var(--success-dark);
            color: var(--theme-complementary-color);
        }
    }
    .mode-bar{
        display: flex;
        justify-content: center;

        .duration-summary{
            font-size: .75rem;
            line-height: 1rem;
            margin-right: 1rem;
        }
    }
}