.fchat-card {
    position: relative;
    box-sizing: border-box;
    padding: 1.5rem;
    border-radius: 5px
}

.fchat-card,.fchat-card-default {
    background-color: #f7f7f9;
    color: #92929e
}

.fchat-card-inverse {
    background-color: #fff;
    color: #92929e
}

.fchat-card-primary {
    background-color: #319ed7;
    background-color: var(--fchat-header-background-color);
    color: #fff;
    color: var(--fchat-header-text-color)
}

.fchat-card-xsmall {
    padding: .5rem
}

.fchat-card-small {
    padding: 1rem
}

.fchat-card-medium {
    padding: 2rem
}

.fchat-card-large {
    padding: 2.5rem
}

.card-container>div {
    margin-bottom: 8px
}

.card-container:last-child {
    margin-bottom: 0
}

.card-container:first-child:before {
    content: " ";
    position: absolute;
    top: -1px;
    left: -16px;
    right: -16px;
    height: 25px;
    z-index: -1;
    background-color: var(--fchat-header-background-color)
}

.card-container .fchat-card,.card-container .fchat-kb-search {
    border: 1px solid #d9dbe4
}

.card-container .fchat-kb-search {
    z-index: 2;
    position: relative
}

.card--logo,.header-card {
    margin: 10px 0
}

.card--logo .fchat-image {
    height: 3.75rem;
    width: 3.75rem
}

.card--heading {
    font-size: 33px;
    font-weight: 700
}

.card--heading .emojione {
    width: calc(2rem + 2px);
    height: calc(2rem + 2px);
    vertical-align: text-bottom
}

.card--chat .fchat-button {
    width: 100%
}

.card--agents .fchat-avatar {
    margin: 0 3px
}

.card--video iframe,.card--video video {
    width: 100%;
    border-radius: 5px
}

.card--heading .link,.card--text .link {
    color: inherit;
    text-decoration: underline;
    outline: 0
}

.card--text .emojione {
    width: calc(1rem + 2px);
    height: calc(1rem + 2px);
    vertical-align: text-bottom
}

.card--form.submitting form {
    opacity: .6
}


.card-container .fchat-button-cta {
    background-color: #fff;
    color: #545454;
    border-color: #545454
}

.card-container .fchat-button-cta:focus,.card-container .fchat-button-cta:hover {
    background: #f7f7f9
}

.card--alignment-left {
    text-align: left!important
}

.card--alignment-right {
    text-align: right!important
}

.card--alignment-center {
    text-align: center!important
}

.card--flex-left {
    -ms-flex-pack: start!important;
    justify-content: flex-start!important
}

.card--flex-right {
    -ms-flex-pack: end!important;
    justify-content: flex-end!important
}

.card--flex-center {
    -ms-flex-pack: center!important;
    justify-content: center!important
}