/* CSS talk bubble */
.talk-bubble {
    margin: 5px 0px 0px 10px;
    display: inline-block;
    position: relative;
    width: 275px;
    height: auto;
    background-color: rgb(37, 89, 185);
}

.border {
    border: 1px solid rgb(24, 68, 148);
}

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

/* Right triangle placed top left flush. */
.tri-right.border.left-top:before {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: -10px;
    right: auto;
    top: -8px;
    bottom: auto;
    border: 32px solid;
    border-color: rgb(24, 68, 148) transparent transparent transparent;
}

.tri-right.left-top:after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: -20px;
    right: auto;
    top: 0px;
    bottom: auto;
    border: 22px solid;
    border-color: rgb(37, 89, 185) transparent transparent transparent;
}

/* Right triangle, left side slightly down */
.tri-right.border.left-in:before {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: -40px;
    right: auto;
    top: 30px;
    bottom: auto;
    border: 20px solid;
    border-color: rgb(37, 89, 185) rgb(37, 89, 185) transparent transparent;
}

.tri-right.left-in:after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: -20px;
    right: auto;
    top: 38px;
    bottom: auto;
    border: 12px solid;
    border-color: rgb(37, 89, 185)rgb(37, 89, 185) transparent transparent;
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left:before {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: -8px;
    right: auto;
    top: auto;
    bottom: -40px;
    border: 32px solid;
    border-color: transparent transparent transparent rgb(37, 89, 185);
}

.tri-right.btm-left:after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: 0px;
    right: auto;
    top: auto;
    bottom: -20px;
    border: 22px solid;
    border-color: transparent transparent transparent rgb(37, 89, 185);
}

/*Right triangle, placed bottom left side slightly in*/
.tri-right.border.btm-left-in:before {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: 30px;
    right: auto;
    top: auto;
    bottom: -40px;
    border: 20px solid;
    border-color: rgb(37, 89, 185) transparent transparent rgb(37, 89, 185);
}

.tri-right.btm-left-in:after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: 38px;
    right: auto;
    top: auto;
    bottom: -20px;
    border: 12px solid;
    border-color: rgb(37, 89, 185) transparent transparentrgb(37, 89, 185);
}

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right-in:before {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: 30px;
    bottom: -40px;
    border: 20px solid;
    border-color: rgb(37, 89, 185) rgb(37, 89, 185) transparent transparent;
}

.tri-right.btm-right-in:after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: 38px;
    bottom: -20px;
    border: 12px solid;
    border-color: rgb(37, 89, 185)rgb(37, 89, 185) transparent transparent;
}

/*Right triangle, placed bottom right side slightly in*/
.tri-right.border.btm-right:before {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -8px;
    bottom: -40px;
    border: 20px solid;
    border-color: rgb(37, 89, 185)rgb(37, 89, 185) transparent transparent;
}

.tri-right.btm-right:after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: 0px;
    bottom: -20px;
    border: 12px solid;
    border-color: rgb(37, 89, 185) rgb(37, 89, 185) transparent transparent;
}

/* Right triangle, right side slightly down*/
.tri-right.border.right-in:before {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -40px;
    top: 30px;
    bottom: auto;
    border: 20px solid;
    border-color: rgb(37, 89, 185) transparent transparent rgb(37, 89, 185);
}

.tri-right.right-in:after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -20px;
    top: 38px;
    bottom: auto;
    border: 12px solid;
    border-color: rgb(37, 89, 185) transparent transparent rgb(37, 89, 185);
}

/* Right triangle placed top right flush. */
.tri-right.border.right-top:before {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -10px;
    top: -8px;
    bottom: auto;
    border: 32px solid;
    border-color: rgb(37, 89, 185)transparent transparent transparent;
}

.tri-right.right-top:after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -5px;
    top: 0px;
    bottom: auto;
    border: 20px solid;
    border-color: rgb(37, 89, 185) transparent transparent transparent;
}

/* talk bubble contents */
.talktext {
    padding: 5px 12px 12px 12px;
    text-align: left;
    font-size: 0.825rem;
    color: #fffefe;
}

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

.talk-header {
    padding: 10px 1px 0 12px;
    text-align: left;
    font-weight: 500;
    font-size: 0.925rem;
    color: #fffefe;
}