$grey-color: #D9D9D9;
$hover-color: red;

.card.user-profile {
    .info-name {
        font-size: 18px;
    }

    .info {
        span {
            //border-radius: 5px;
            //background-color: $grey-color;
            //padding: 2px 5px;
            cursor: help;

            &:hover {
                opacity: 0.5;
                //color: $hover-color;
            }
        }
    }
}

.card.flow-history {
    .items {
        div {
            padding-bottom: 5px;
        }

        .info-date {
            text-align: right;
            padding-right: 15px;
        }
    }
}

.card.custom-variable {
    .items {
        flex-wrap: wrap;

        span {
            cursor: help;
            padding-right: 5px;
            padding-top: 5px;
            padding-bottom: 5px;
            max-width: 80px;
            display: inline-block;

            &:hover {
                color: $hover-color;
            }
        }
    }
}

.card.chat-card {
    .chat-content {
        //background-color: $grey-color;
        //border-radius: 10px;
        padding: 1rem;
        height: 500px;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

.card.flow-history .items div,
.card.custom-variable .items {
    display: flex;
    flex-direction: row;
}

.card.flow-history .items div {
    justify-content: space-between;
}

.card.custom-variable .items {
    justify-content: space-evenly
}

.card.flow-history,
.card.custom-variable {
    .items {
        max-height: 200px;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

.card.custom-variable .items span,
.txt-nowrap {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}





/* CSS talk bubble */
.talk-bubble {
    margin-bottom: 20px;
    position: relative;
    min-width: 25%;
    max-width: 75%;
    width:max-content;
    height: auto;
    background-color: #fff;
    clear: both;

    &.border {
        border: 1px solid #666;
    }

    &.round {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    }

    /* talk bubble contents */
    .talktext {
        padding: 5px 10px;
        text-align: left;
        overflow: hidden;

        .img-wrap,
        .attach-wrap {
            text-align: center;
            margin-bottom: 10px;

            a {
                padding: 10px;
            }

            img {
                width: 100%;
                height: 100%;
                max-width: 150px;
            }
        }

        .attach-wrap {
            background-color: $grey-color;
            border-radius: 5px;

            a {
                text-align: left;
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;
            }
        }

        p {
            /* remove webkit p margins */
            -webkit-margin-before: 0em;
            -webkit-margin-after: 0em;
        }

        .btn-group,
        .cta-group {
            margin-top: 5px;
            text-align: center;

            button {
                margin: 5px;
                border-radius: 10px !important;
            }
            overflow: hidden;
        }
    }

    .read-receipt {
        min-height: 10px;
        font-size: 0.9em;
        padding: 5px;
        padding-bottom: 0px;
        overflow: hidden;
        display: flex;
        justify-content: flex-end;
    }

    $tri-border-color: #fff;
    $tri-inner-color: #fff;

    &.tri-right {

        &.border.btm-left-in:before,
        &.btm-left-in:after,
        &.border.btm-right-in:before,
        &.btm-right-in:after {
            content: ' ';
            position: absolute;
            width: 0;
            height: 0;
        }

        &.border.btm-left-in:before,
        &.btm-left-in:after {
            right: auto;
            top: auto;
        }

        &.border {

            &.btm-left-in:before,
            &.btm-right-in:before {
                top: 0.45rem;
                border: 0.45rem solid;
            }

            &.btm-left-in:before {
                left: -0.89rem;
                border-color: $tri-border-color $tri-border-color transparent transparent;
            }

            &.btm-right-in:before {
                left: auto;
                right: -0.89rem;
                border-color: $tri-border-color transparent transparent $tri-border-color;
            }

        }

        //&.btm-left-in:after {
        //    left: 38px;
        //}
        //
        //&.btm-left-in:after,
        //&.btm-right-in:after {
        //    bottom: -8px;
        //    border: 4px solid;
        //}

        //&.btm-left-in:after {
        //    border-color: $tri-inner-color transparent transparent $tri-inner-color;
        //}

        //&.btm-right-in:after {
        //    border-color: $tri-inner-color $tri-inner-color transparent transparent;
        //}
        //
        //&.btm-right-in:after {
        //    left: auto;
        //    right: 38px;
        //}

        &.btm-right-in {
            float: right;
        }

        &.btm-left-in {
            clear: both;
        }
    }
}

/* date caption */
.talk-date,
.talk-workflow {
    display: flex;
    justify-content: center;
    margin: 10px 0px;
}

.talk-date {
    span {
        border-radius: 5px;
        padding: 5px 10px;
        background-color: #fff;
    }
}