@font-face {
    font-family: 'Baloo Thambi 2';
    src: local('Baloo Thambi 2'), local('Baloo'), url('../font/BalooThambi2-Regular.ttf') format('truetype');
}


/* BUTTON */

.spoter-btn-content {
    display: inline-block;
    text-align: center;
    align-self: flex-end;
    padding: 8px;
}

.spoter-btn-content:hover {
    cursor: pointer;
}

.spoter-button {
    display: block;
    margin: 0 auto;
    z-index: -999;
    border-radius: 50%;
    height: 72px;
    width: 72px;
    background-color: #29236c;
    box-shadow: rgba(228, 45, 127, 0.25) 0px 0px 0px 3.2px;
}

.spoter-label {
    display: block;
    margin-top: -8px;
    z-index: 999;
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 8px;
    background-color: #e42d7f;
    color: #f7f7f7;
}

.spoter-icon {
    margin-left: -12px;
    margin-bottom: 4px;
    color: #fff;
}


/* CHAT */

.spoter-content {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 65vh;
    background-color: transparent;
    background-image: url('../img/body-bg.png');
    background-size: contain;
    background-position-y: bottom;
    background-repeat: no-repeat;
    font-family: "Baloo Thambi 2", "Helvetica Neue", Arial, Helvetica, sans-serif !important;
    padding: .5rem .75rem;
}

.spoter-alert {
    text-align: center;
    margin: 8px;
    padding: 8px;
    clear: both;
}

.spoter-alert span {
    width: -moz-min-content;
    width: -webkit-min-content;
    border-radius: 7.5px;
    font-size: 13px;
    color: #888;
    box-shadow: 1px 1px #bbb;
    background-color: #e0f1fa;
    margin: 8px;
    padding: 8px;
}

.spoter-burbuja-content {
    display: block;
    width: 100%;
    clear: both;
    min-height: 32px;
}

.spoter-burbuja {
    border-radius: 7.5px;
    margin: 2px 6px 2px 10px;
    padding: 1px 8px 1px 8px;
    box-shadow: 1px 1px #bbb;
    position: relative;
    min-height: 28px;
    min-width: 35%;
    width: fit-content;
}

.spoter-msj-propio {
    background-color: #dcf8c6;
    max-width: 75%;
    border-top-right-radius: 0;
    float: right;
    margin-left: 6px;
    margin-right: 25px;
    margin-bottom: 4px;
}

.spoter-msj-propio:before {
    content: '';
    position: absolute;
    right: 0;
    top: 6px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left-color: #bbb;
    border-right: 0;
    border-top: 0;
    margin-top: -5px;
    margin-right: -10px;
}

.spoter-msj-propio:after {
    content: '';
    position: absolute;
    right: 0;
    top: 5px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left-color: #dcf8c6;
    border-right: 0;
    border-top: 0;
    margin-top: -5px;
    margin-right: -10px;
}

.spoter-msj-ajeno {
    background-color: #fefefe;
    max-width: 75%;
    border-top-left-radius: 0;
    display: inline-block;
}

.spoter-msj-ajeno:before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: #bbb;
    border-left: none;
    border-top: none;
    margin-top: -5px;
    margin-left: -10px;
}

.spoter-msj-ajeno:after {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: #fefefe;
    border-left: none;
    border-top: none;
    margin-top: -5px;
    margin-left: -10px;
}

.spoter-texto {
    font-size: 14.2px;
    width: 95%;
    overflow-wrap: break-word;
    line-height: 1.4;
    margin-bottom: 2px;
    overflow: hidden;
    display: inline;
}

.spoter-image {
    width: 191px;
    height: 248px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 0px;
    border-radius: 7.5px;
    cursor: -moz-zoom-in;
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
}

.spoter-audio {
    width: 179px;
    filter: invert(8%) sepia(28%) saturate(281%) hue-rotate(42deg) brightness(103%) contrast(95%);
}

.spoter-video {
    width: 191px;
    max-height: 248px;
    border: 0px;
    border-radius: 7.5px;
}


/* POPOVER */

.popover {
    max-width: 348px !important;
    font-family: "Baloo Thambi 2", "Helvetica Neue", Arial, Helvetica, sans-serif !important;
}

.popover-header {
    background-color: #e42d7f !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 400;
}

.popover-body {
    background-color: #e9ebeb;
    padding: 0;
}

.popover-footer {
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    background-color: #f7f7f7;
    border-top: thin solid #ebebeb;
}

textarea.spoter-textarea {
    border-color: #ccc;
}

.spoter-cancel:hover {
    cursor: pointer;
}

.spoter-submit {
    display: block;
    margin: auto;
    border-radius: 5px;
    background-color: #e42d7f;
    border-color: #e42d7f;
    font-style: italic;
}