/*
 * It is advised not to edit the smartadmin_production.css
 * as this will override any changes you make in the 
 * later versions of this theme. 
 * 
 * We advise that you use use this CSS to override 
 * SmartAdmin styles. 
 * 
 * Rename the stylesheet to whatever your liking so it will stay
 * unique to you with each update of SmartAdmin.
 */
html {
    background-color: transparent;
}
/* width */
::-webkit-scrollbar {
    width: 10px !important;
}
/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 0px !important;
}
body.smart-style-6,
body.smart-style-7 {
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
}
body.smart-style-7 ::-webkit-scrollbar-track {
    background: #333 !important;
    border-radius: 0px !important;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 0px !important;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}
.bi-align {
    position:relative;
    bottom: 0.25em !important;
}
/*
 * INDEX
 * 
 * - HTML
 * - BODY
 * - CUSTOM STYLES
 */
.nav-tabs>li>a>.fas,
.nav-tabs>li>a>.zmdi {
    opacity: .5;
}
.fa-rotate-45-translate-5 {
    -ms-transform: translate(-3px) rotate(45deg) ; /* IE 9 */
    -webkit-transform: translate(-3px) rotate(45deg); /* Chrome, Safari, Opera */
    transform: translate(-3px) rotate(45deg);
}
.fa-translate-10 {
    -ms-transform: translate(-10px); /* IE 9 */
    -webkit-transform: translate(-10px); /* Chrome, Safari, Opera */
    transform: translate(-10px);
}
.fa-rotate-45 {
    -ms-transform: rotate(45deg) ; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}
.fa-rotate-225 {
    -ms-transform: rotate(225deg) ; /* IE 9 */
    -webkit-transform: rotate(225deg); /* Chrome, Safari, Opera */
    transform: rotate(225deg);
}
/* form styles */
.help-block {
    color: #F44336;
    margin-left: 0.5em;
}
.padding-2 {
    padding: 2px !important;
}
/*
* missed call icon
*/
.fa-rotate-135-translateY-p3 {
    -ms-transform: translateY(3px) rotate(135deg) scale(1.5,1.5); /* IE 9 */
    -webkit-transform: translateY(3px) rotate(135deg) scale(1.5,1.5); /* Chrome, Safari, Opera */
    transform: translateY(3px) rotate(135deg) scale(1.5,1.5);
}
.fa-rotate-135-translateY-5 {
    -ms-transform: translate(-1px,-7px) rotate(135deg); /* IE 9 */
    -webkit-transform: translate(-1px,-7px) rotate(135deg); /* Chrome, Safari, Opera */
    transform: translate(-1px,-7px) rotate(135deg);
}
:root .fa-rotate-45-translate-5,
:root .fa-translate-10 {
    filter: none;
}
/*
green,     red,       blue,      orange,     yellow,   purple,   black
"#46a546", "#c3325f", "#049cdb", "#ff6600", "#ffc40d", "#7a43b6", "#333333"
*/
.color-green,
.color-ready {
    color: #46a546;
}
.color-purple,
.color-away {
    color: #7a43b6;
}
.color-red,
.color-inbound {
    color: #c3325f;
}
.color-blue,
.color-outbound {
    color: #049cdb;
}
.color-yellow,
.color-wrapup {
    color: #ffc40d;
}
.color-transparent {
    opacity: 0;
}
.bgcolor-green,
.bgcolor-ready {
    background-color: #46a546;
}
.bgcolor-purple,
.bgcolor-away {
    background-color: #7a43b6;
}
.bgcolor-red,
.bgcolor-inbound {
    background-color: #c3325f;
}
.bgcolor-blue,
.bgcolor-outbound {
    background-color: #049cdb;
}
.bgcolor-yellow,
.bgcolor-wrapup {
    background-color: #ffc40d;
}
.bgcolor-transparent {
    background-color: transparent !important;
}
.bgcolor-black {
    background-color: black;
}
.logo-bg-ready {
    background: transparent; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.8),#46a546); /*Safari 5.1-6*/
    background: -o-linear-gradient(right, rgba(0,0,0,0.8),#46a546); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right, rgba(0,0,0,0.8),#46a546); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(0,0,0,0.8),#46a546); /*Standard*/
    border-bottom: 1px solid rgba(0,0,0,0.3);
}
.logo-bg-away {
    background: transparent; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.8),#7a43b6); /*Safari 5.1-6*/
    background: -o-linear-gradient(right, rgba(0,0,0,0.8),#7a43b6); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right, rgba(0,0,0,0.8),#7a43b6); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(0,0,0,0.8),#7a43b6); /*Standard*/
    border-bottom: 1px solid rgba(0,0,0,0.3);
}
.logo-bg-inbound {
    background: transparent; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.8),#c3325f); /*Safari 5.1-6*/
    background: -o-linear-gradient(right, rgba(0,0,0,0.8),#c3325f); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right, rgba(0,0,0,0.8),#c3325f); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(0,0,0,0.8),#c3325f); /*Standard*/
    border-bottom: 1px solid rgba(0,0,0,0.3);
}
.logo-bg-outbound {
    background: transparent; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.8),#049cdb); /*Safari 5.1-6*/
    background: -o-linear-gradient(right, rgba(0,0,0,0.8),#049cdb); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right, rgba(0,0,0,0.8),#049cdb); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(0,0,0,0.8),#049cdb); /*Standard*/
    border-bottom: 1px solid rgba(0,0,0,0.3);
}
.logo-bg-wrapup {
    background: transparent; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.8),#ffc40d); /*Safari 5.1-6*/
    background: -o-linear-gradient(right, rgba(0,0,0,0.8),#ffc40d); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right, rgba(0,0,0,0.8),#ffc40d); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(0,0,0,0.8),#ffc40d); /*Standard*/
    border-bottom: 1px solid rgba(0,0,0,0.3);
}
.fa-whatsapp-color {
    color: #25D366;
    border-radius: 50%;
}
.fa-sms-color {
    color: #00BFFF;
    border-radius: 50%;
}
.fa-messenger-color {
    color: #0078FF;
    border-radius: 50%;
}
.fa-line-color {
    color: #00c300;
    border-radius: 50%;
}
.fa-weixin-color {
    color: #09B83E;
    border-radius: 50%;
}
.fa-azure-color {
    color: #00A4EF;
}
.fa-telegram-color {
    color: #6CC1E3;
}
.fa-webchat-color {
    color: #6CC1E3;
}
.fa-botbonnie-color {
    color: #FF4B68;
}
.fa-instagram-color {
    color: #E1306C;
    border-radius: 50%;
}
.fa-openai-color {
    color: #10a37f;
    border-radius: 50%;
}
body.smart-style-7 .fa-whatsapp-color {
    color: #25D366;
    border-radius: 50%;
}
body.smart-style-7 .fa-sms-color {
    color: #00BFFF;
    /*background-color: #fff;*/
    border-radius: 50%;
}
body.smart-style-7 .fa-messenger-color {
    color: #0078FF;
    /*background-color: #fff;*/
    border-radius: 50%;
}
body.smart-style-7 fa-line-color {
    color: #00c300 !important;
    border-radius: 50%;
}
/*body.smart-style-7 i.avatar-imtype-icon.ng-isolate-scope.fa-lg.fa-fw.fab.fa-line.fa-line-color,
i.ng-isolate-scope.fa-lg.fa-fw.fab.fa-line.fa-line-color{
    color: #00c300 !important;
}*/
body.smart-style-7 .fa-weixin-color {
    color: #09B83E;
    border-radius: 50%;
}
body.smart-style-7 .fa-azure-color {
    color: #00A4EF;
    /*background-color: #fff;*/
}
body.smart-style-7 .fa-telegram-color {
    color: #6CC1E3;
    /*background-color: #fff;*/
}
body.smart-style-7 .fa-webchat-color {
    color: #6CC1E3;
    /*background-color: #fff;*/
}
body.smart-style-7 .fa-instagram-color {
    color: #E1306C;
    border-radius: 50%;
}
body.smart-style-7 .fa-openai-color {
    color: #10a37f;
    border-radius: 50%;
}
/*
styles for avatar
*/
img.ready {
    border-left: 3px solid #46a546 !important;
}
img.away {
    border-left: 3px solid #7a43b6 !important;
}
img.busy {
    border-left: 3px solid #c3325f !important;
}
img.busyout {
    border-left: 3px solid #049cdb !important;
}
img.wrapup {
    border-left: 3px solid #ffc40d !important;
}
img.transparent {
    border-left: 3px solid transparent !important;
}

.border-left-ready {
    border-left: 6px solid #46a546 !important;
}
.border-left-away {
    border-left: 6px solid #7a43b6 !important;
}
.border-left-busy {
    border-left: 6px solid #c3325f !important;
}
.border-left-busyout {
    border-left: 6px solid #049cdb !important;
}
.border-left-wrapup {
    border-left: 6px solid #ffc40d !important;
}
.border-left-transparent {
    border-left: 6px solid transparent !important;
}

img.campaign-logo-wb {
    width: auto;
    height: 100%;
}

img.avatar-lg {
    width: 100px;
    height: 100px;
}
img.avatar-md2 {
    width: 70px;
    height: 70px;
}
img.avatar-md {
    width: 50px;
    height: 50px;
}
img.avatar-sm {
    width: 30px;
    height: 30px;
}
img.avatar-xs {
    width: 20px;
    height: 20px;
}
/*
date range picker overwrites
*/
div.daterangepicker_input > input.form-control {
    padding-left: 2em;
}
/*
user timeline chart
*/
#userStatesTimeline {
    /*overflow-y: auto;
    height: calc(100vh - 160px);*/
    text-align: center;
}
.divTimeline {
    display: block;
    width: 100%;
    white-space: nowrap;
}
.divTimeline span {
    display: inline-block;
}
.divTimeline .hourlabelcell {
    width: 2em;
    display: inline-block;
    text-decoration: none;
}
.divTimeline span.timecell:hover {
    box-shadow:0px 0px 0px 2px black inset;
}
.divTimeline .hourlabelcell:hover {
    color: #fff;
    background-color: #000;
}
.divTimeline .usertimeline-seperator span {
    font-size: 0.8em;
    color: #999;
}
.popover {
    max-width: 100%;
}
/*
dashboard micro-stats sparklines
*/
.sparklineTitle {
    text-align: center;
    white-space: nowrap;
}
.sparklineValue {
    text-align: center;
    white-space: nowrap;
    font-size: 1.5em;
    font-weight: bold;
}
.sparklineValue > span {
    font-size: 0.65em;
    font-weight: normal;
}
/*
overwrite color of pseudo element in header logo on pages not login
*/
.darkLogo:before {
    color: #565656 !important;
}
/*
fix button group pixel shift on tooltip
*/
.btn-group .btn+.btn {
    margin-left: 0px !important;
}
/*
fix shadow on buttons
*/
.btn {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
/*
make disabled buttons more distinct
*/
.btn[disabled] {
    opacity: .1;
}
/*
call queue exceed SLA
*/
.callqueue-sla {
    border-left: 5px solid red;
}
.callqueue-norm {
    border-left: 5px solid transparent;
}
/*
call duration time label on hold, retrieve button
*/
.calldurationlabel {
    background-color: #000;
    opacity: 0.8;
    color: white;
    font-weight: bold;
    font-size: 0.6em;
    margin-top: -0.6em;
    padding: 1px;
}
/*
callback past scheduled callback date
*/
.callback-expired {
    border-left: 5px solid red;
}
.callback-norm {
}
.draggable-callback {
}
/*
fixed clockpicker not visible in modal dialog
*/
.clockpicker-popover {
    z-index: 999999 !important;
}
/*
wall posts padding adjustments
*/
.profile-message li.message.message-reply {
    background: #f6f7f9;
    padding: 10px;
    margin: 0px !important;
}

.chat-body li.message {
    display: block;
    position: relative;
    padding: 5px;
    margin: 0;
}

.ticket-photo img{
    display:inline-block;
    border-left:4px solid #fff;
    position:absolute
}
/*
overlay icon on top of image
*/
.profile-pic .editpic {
    position: absolute;
    left: 0px;
    top: 38px;
    width: 100%;
    text-align: right;
    padding-right: 5px;
    z-index: 5;
    cursor: pointer;
}
.hoverpic {
    cursor: pointer;
}
/*
smart table
*/
.st-sort-ascent:before {
    content: '\25B2';
}
.st-sort-descent:before {
    content: '\25BC';
}
.st-selected {
    color: #fff !important;
    background-color: #565656 !important;
}
table[st-table] thead tr th[st-sort] {
    cursor: pointer;
}
table[st-table] tbody tr td, .table-ocod tbody tr td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    vertical-align: middle;
}
.form-table {
    width: 100%;
}
.form-table tbody tr td, .form-table thead tr th {
    padding-bottom: 10px;
}
.form-table tbody tr td:first-child {
    width: 30%;
}

.dimmed, .dimmed-processing {
    position: relative;
}

.dimmed:after {
    content: " ";
    z-index: 10;
    display: block;
    position: absolute;
    height: 100% !important;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
    visibility: visible !important;
}

.dimmed-processing:after {
    content: " processing... ";
    z-index: 10;
    display: block;
    position: absolute;
    height: 100% !important;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
    visibility: visible !important;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 2em;
    padding-top: 1em;
}

.dimmed .jarviswidget {
    margin: 0 !important;
}
/*
Single select2
*/
.ui-select-choices-group ul {
    padding: 0;
}
.ui-select-focusser {
    display: none;
}
.select2-results li {
    border-bottom: 1px solid lightgray;
}
.select2-results li:last-child {
    border-bottom: none;
}
.ui-select-placeholder {
    width: auto !important;
}
.select-with-clear {
    display: inline-block !important;
    width: calc(100% - 35px);
}
/*
generic
*/
.pointer {
    cursor: pointer;
}
.smart-form .select select {
    padding-left:10px !important;
    padding-right:10px !important;
    margin-right:20px;
    background-color:transparent;
}
.widget-toolbar-icon {
    padding: 5px;
    vertical-align: middle;
}
.badge-danger {
    background-color: #d43f3a;
}
.badge-warning {
    background-color: #d58512;
}

.badge-success {
    background-color: #398439;
}

.badge-info {
    background-color: #269abc;
}

.badge-inverse {
    background-color: #333333;
}
/****
*
* WALL POST
*
***/
[contenteditable=true]:empty:before{
    content: attr(data-placeholder);
    display: block; /* For Firefox */
    color: lightgray;
}
/* img on left of post input */
.image-input-post {
    min-height: 51px;
    display: block;
    position: relative;
}
.image-input-post img {
    display: inline-block;
    position: absolute;
}
.image-input-post .div-textarea {
    display: inline-block;
    margin-left: 70px;
    min-height: 40px;
    width: calc(100% - 80px) !important;
    background-color: #fff !important;
    border:1px solid lightgray;
    padding: 5px !important;
}
.image-input-post .div-textarea:focus {
    border:1px solid #66afe9;
}
/* img on left of comment input */
.image-input {
    min-height: 51px;
}
.image-input .div-textarea {
    display: inline-block;
    margin-left: 40px;
    min-height: 30px;
    width: calc(100% - 40px) !important;
    background-color: #fff !important;
    border:1px solid lightgray;
    padding: 5px !important;
}
.image-input .div-textarea:focus {
    border:1px solid #66afe9;
}
/* like color */
.reaction-like {
    color: #489fdf;
    font-weight: bold;
    font-size: 1.5em;
}
/* img on left of post input */
.post-title {
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
    font-size: 1em;
}
.post-desc {
    font-size: 0.85em;
}


/* --- article --- */
.article-post {
    display: block;
    position: relative;
    border:1px solid lightgray;
    border-bottom:2px solid lightgray;
    height:158px;
    margin: auto;
    background-color: #fff;
}
.article-post img {
    display: inline-block;
    position: absolute;
    width:158px;
    height:158px;
    object-fit: cover;
    border: 0 !important;
    top: -1px;
}
.article-post div {
    display: inline-block;
    margin-left: 158px;
    width: calc(100% - 165px) !important;
    padding: 7px !important;
}
.article-post .post-bottom-left {
    position: absolute;
    left: 165px;
    bottom: 0;
    font-size: 0.8em;
    color: lightgray;
}
/* --- video --- */
.aspect-ratio {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 51%;
}
.aspect-ratio iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.video-post {
    display: block;
    position: relative;
    border:1px solid lightgray;
    border-bottom:2px solid lightgray;
    margin: auto;
    background-color: #fff;
}

.video-post iframe {
    max-width: 450px;
    width: 100%;
}
.video-post .post-bottom-left {
    position: absolute;
    left: 7px;
    bottom: 0;
    font-size: 0.8em;
    color: lightgray;
}
/* --- basic --- */
.basic-post {
    display: block;
    position: relative;
    border:1px solid lightgray;
    border-bottom:2px solid lightgray;
    height:158px;
    margin: auto;
    background-color: #fff;
}
.basic-post div {
    display: inline-block;
    max-width: 450px;
    padding: 7px !important;
}
.basic-post .post-bottom-left {
    position: absolute;
    left: 7px;
    bottom: 0;
    font-size: 0.8em;
    color: lightgray;
}
/* --- website --- */
.website-post {
    display: block;
    position: relative;
    border:1px solid lightgray;
    border-bottom:2px solid lightgray;
    margin: auto;
    background-color: #fff;
}
.website-post img {
    max-width: 450px;
    max-height: 253px;
    border: 0px !important;
    position: relative !important;
}
.website-post div {
    display: inline-block;
    max-width: 450px;
    padding: 7px !important;
}
.website-post .post-bottom-left {
    position: absolute;
    left: 7px;
    bottom: 0;
    font-size: 0.8em;
    color: lightgray;
}
/* wallpost animation */
.animated-list.ng-leave {
    -webkit-animation-name: fadeOutUp;
    -moz-animation-name: fadeOutUp;
    -o-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

.animated-list.ng-enter {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
/* wallpost collage */
.photo-collage-1 {
    display: block;
    position: relative;
    margin: auto;
}
.photo-collage-1 img {
    border:1px solid lightgray !important;
    position: relative !important;
    object-fit: cover;
    cursor: pointer;
}
.photo-landscape {
    width: 100%;
    max-height: 400px;
    max-width: 400px;
}
.photo-portrait {
    height: 100%;
    max-height: 400px;
    max-width: 400px;
}
.photo-collage-2 {
    display: block;
    position: relative;
    margin: auto;
    width: 450px;
    height: 225px;
}
.photo-collage-2 img {
    border:1px solid lightgray !important;
    position: relative !important;
    width: 220px;
    height: 225px;
    object-fit: cover;
    cursor: pointer;
}
.photo-collage-3 {
    display: block;
    position: relative;
    margin: auto;
    width: 450px;
    height: 450px;
}
.photo-collage-3 img:first-child {
    border:1px solid lightgray !important;
    position: relative !important;
    width: 223px;
    height: 450px;
    object-fit: cover;
    cursor: pointer;
}
.photo-collage-3 img:nth-child(2) {
    border:1px solid lightgray !important;
    width: 223px;
    height: 223px;
    margin-left: 5px;
    object-fit: cover;
    cursor: pointer;
}
.photo-collage-3 img:nth-child(3) {
    top: 228px;
    border:1px solid lightgray !important;
    width: 223px;
    height: 223px;
    margin-left: 5px;
    object-fit: cover;
    cursor: pointer;
}
.photo-collage-4, .photo-collage-more {
    display: block;
    position: relative;
    margin: auto;
    width: 450px;
    height: 450px;
}
.photo-collage-4 img:first-child, .photo-collage-more img:first-child {
    border:1px solid lightgray !important;
    position: relative !important;
    width: 223px;
    height: 223px;
    object-fit: cover;
    cursor: pointer;
}
.photo-collage-4 img:nth-child(2), .photo-collage-more img:nth-child(2) {
    border: 1px solid lightgray !important;
    width: 223px;
    height: 223px;
    margin-left: 5px;
    object-fit: cover;
    cursor: pointer;
}
.photo-collage-4 img:nth-child(3), .photo-collage-more img:nth-child(3) {
    top: 228px;
    left: 0;
    border:1px solid lightgray !important;
    width: 223px;
    height: 223px;
    object-fit: cover;
    cursor: pointer;
}
.photo-collage-4 img:nth-child(4) {
    top: 228px;
    border:1px solid lightgray !important;
    width: 223px;
    height: 223px;
    margin-left: 5px;
    object-fit: cover;
    cursor: pointer;
}
.photo-collage-more div.morephotos {
    position: relative;
    width: 223px;
    height: 223px;
    top: 5px;
    left: 228px;
}
.photo-collage-more div.morephotos div.moreoverlay {
    z-index: 5;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    width: 223px;
    height: 223px;
    cursor: pointer;
    display:table;
}
.photo-collage-more div.morephotos div.moreoverlay span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 5em;
}
.photo-collage-more div.morephotos img {
    border:1px solid lightgray !important;
    margin-left:0px;
    object-fit: cover;
    cursor: pointer;
}

.processingModal {
    text-align: center;
    padding: 0!important;
}

.processingModal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
    margin-top: -20%;
}

.processingModal .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

/* textarea */
textarea.custom-scroll, div.custom-scroll-call-remarks {
    padding-left: 10px !important;
    border: 1px dashed #BDBDBD !important;
    background-color: rgba(248,248,248,.9) !important;
}

textarea.custom-scroll:focus, div.custom-scroll-call-remarks:focus {
    border-color: #2196F3 !important;
}

textarea.textarea-monospace {
    font-family: monospace !important;
    text-wrap: nowrap;
}

div.custom-scroll-call-remarks {
    height: 5em;
    overflow-y: auto;
    white-space: pre-wrap;
    resize: vertical
}

/*ivr edit row*/
.editing-row {
    background-color: lightyellow;
    border-bottom: 2px solid red;
    border-top:2px solid red;
}
.select-item-badge {
    font-size: 0.9em;
    background-color: dimgray;
    color: white;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 5px;
}

body > .ui-select-container {
    z-index: 2147483647;
}

.white-border {
    border: 1px solid #fff;
}

/* btn phone controls */
.btn-phone-control {
    padding: 10px 8px;
    border: 0 !important;
}

/* chat bubbles 
* https://codepen.io/Founts/pen/gmhcl
*/
.MessagingBody {
    height: calc(100vh - 250px);
    position: relative;
    margin-bottom: 0px !important;
    padding: 10px 0 0 0 !important;
    background-color: #ddd !important;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column-reverse;
}
.emoji-str {
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
}
.talk-bubble {
    margin: 5px 20px 5px 20px;
    display: inline-block;
    position: relative;
    width: 70%;
    height: auto;
    border-radius: 6px;
    font-family:  "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
}
.talk-bubble-reaction {
    margin-bottom: 30px !important;
}
.talk-bubble-unsend {
}
.talk-bubble-genai {
    border-left: 6px solid lightseagreen;
}
.talk-bubble-genai.talk-out .talk-text .talk-quote {
    display: none;
}
.sys-bubble {
    display: inline-block;
    width: 95%;
    border-radius: 6px;
    align-self: center;
    font-family:  "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;

    text-transform: uppercase;
    margin-bottom: 1.5em;
    padding: 3px;
    background-color: darkgray;
    color: white;
}
.sys-bubble-gpt-summarize:before {
    font-family: "FontAwesomeLatest";
    font-weight: bold;
    content: '\f10d';
    color: orange;
    position: absolute;
    top: -0.65em;
    left: -0.35em;
    font-size: large;
    text-shadow: 1px 1px 3px #666666;
}
.sys-bubble-gpt-summarize {
    text-transform: none;
    padding: 5px;
    background-color: lightyellow;
    color: #666666;
    border: 1px solid orange;
    width: calc(100% - 40px);
}
.sys-bubble-note:before {
    font-family: "FontAwesomeLatest";
    font-weight: bold;
    content: '\f249';
    color: lightskyblue;
    position: absolute;
    top: -0.65em;
    left: -0.35em;
    font-size: large;
    text-shadow: 1px 1px 3px #666666;
}
.sys-bubble-note {
    text-transform: none;
    padding: 5px;
    background-color: lightyellow;
    color: #666666;
    border: 1.5px dashed steelblue;
    /*width: calc(100% - 70px); /* 50px avatar + 20px left margin */
    margin-left: unset !important;
    margin-right: unset !important;
}
.sys-bubble.sys-bubble-note .talktext,
.sys-bubble.sys-bubble-gpt-summarize .talktext,
body.smart-style-7 .sys-bubble.sys-bubble-note .talktext,
body.smart-style-7 .sys-bubble.sys-bubble-gpt-summarize .talktext {
    text-align: left;
    padding: 0.5em 0.5em 1em 0.5em;
}
.sys-bubble.sys-bubble-note .talktext .timestamp,
.sys-bubble.sys-bubble-gpt-summarize .talktext .timestamp,
body.smart-style-7 .sys-bubble.sys-bubble-note .talktext .timestamp,
body.smart-style-7 .sys-bubble.sys-bubble-gpt-summarize .talktext .timestamp {
    right: 15px;
    width: unset;
}
.bubble-summarize-tokens {
    position: absolute;
    top: -0.4em;
    right: 0.4em;
    color: white;
    background-color: orange;
    padding: 0 5px;
    border-radius: 3px;
}
.sys-bubble.sys-bubble-transfer {
    margin-bottom: 5em;
}
.template-bubble {
    width: 280px !important;
}
.talk-in {
    background-color: #fff;
}
.talk-in:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -10px;
    right: auto;
    top: 0px;
    bottom: auto;
    border: 12px solid;
    border-color: #fff transparent transparent transparent;
}
.talk-in.talk-bubble-trans {
    width: 125px;
    background-color: transparent;
}
body.smart-style-7 .talk-in.talk-bubble-trans {
    width: 125px;
    background-color: transparent;
}
.talk-in.talk-bubble-trans:after {
    border: 0;
}
.talk-bubble-carousel {
    width: 80% !important;
}
body.smart-style-7 .talk-in.talk-bubble-trans:after {
    border: 0;
}
.talk-system-avatar {
    position: absolute;
    right: 0px;
    top: -5px;
    width: 30px !important;
    height: 30px !important;
}
.talk-out-avatar {
    position: absolute;
    right: -40px;
    width: 30px !important;
    height: 30px !important;
}
.talk-out-with-avatar {
    margin-right: 50px;
}
.talk-out {
    background-color: #DCF8C6;
    margin-left: auto;
}
.talk-out:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -10px;
    top: 0px;
    bottom: auto;
    border: 12px solid;
    border-color: #DCF8C6 transparent transparent #DCF8C6;
}
.talk-out.other {
    background-color: #eef6ff;
    margin-left: auto;
}
.talk-out.other:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -10px;
    top: 0px;
    bottom: auto;
    border: 12px solid;
    border-color: #eef6ff transparent transparent #eef6ff;
}
.talk-out.talk-bubble-trans {
    width: 125px;
    background-color: transparent;
}
body.smart-style-7 .talk-out.talk-bubble-trans {
    width: 125px;
    background-color: transparent;
}
.talk-out.talk-bubble-trans:after {
    border: 0;
}
.talk-in-avatar {
    position: absolute;
    left: -40px;
    width: 30px !important;
    height: 30px !important;
}
.talk-in-with-avatar {
    margin-left: 50px;
}
/* talk bubble contents */
.talktext{
    padding: 1em 1em 1.5em 1em;
    text-align: left;
    line-height: 1.5em;
    overflow-wrap: break-word;
}
.talktext .timestamp {
    position: absolute;
    right: 5px;
    font-size: 0.75em;
    color: #000;
    white-space: nowrap;
}
.talk-in .talktext .timestamp {
    right: unset;
    min-width: 150px;
}

.talk-out .talktext .timestamp {
    min-width: 150px;
}
.talktext .gptsummarize{
    position: absolute;
    top: 3em;
    width: 100%;
}
.talktext .toxicity {
    position: absolute;
    left: 14px;
    font-size: 0.75em;
    color: red;
    font-weight: bold;
}
.talktext .btn.active {
    background-color: #000;
    color: #fff;
}
.talktext .msg-sentiment .sentiment-good {
    color: orange;
    font-size: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
}
.talktext .msg-sentiment .sentiment-bad {
    color: #e54e33;
    font-size: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
}
.talktext .msg-sentimentString .sentiment-positive {
    color: #319a31;
    font-size: 2em;
    background-color: white;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 5px;
}
.talktext .msg-sentimentString .sentiment-mixed {
    color: #a768ff;
    font-size: 2em;
    background-color: white;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 5px;
}
.talktext .msg-sentimentString .sentiment-negative {
    color: #ff4343;
    font-size: 2em;
    background-color: white;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 5px;
}
.talktext .msg-send-error a i {
    color: #ff4343;
    font-size: 2em;
    position: relative;
    vertical-align: middle;
    margin: 0 5px;
}
.talktext .msg-status-icon {
    margin: 0 5px;
    vertical-align: middle;
}
.talktext .msg-status-icon i {
    font-size: 1.5em;
}
.talktext video {
    max-width: 270px;
    max-height: 270px;
}
.talktext .talk-quote {
    background: #eee;
    border-left: 3px solid teal;
    padding: 5px;
    border-radius: 3px;
    margin-bottom: 7px;
}
.talktext div.talk-image {
    max-height: 300px;
    overflow: hidden;
    cursor:pointer;
}
.talktext .talk-image img {
    cursor: pointer;
    width: 100%;
}
.talktext .talk-image span {
    position: relative;
    background:rgba(255,255,255,0.85);
    text-wrap: pretty;
    display: block;
}
body.smart-style-7 .talktext div.talk-sticker,
.talktext div.talk-sticker {
    background-color: transparent;
}
body.smart-style-7 .talktext .talk-sticker img,
.talktext .talk-sticker img {
    width: 120px;
    height: unset;
}
.talktext .talk-doc span:nth-child(1) {
    display: block;
}
.talktext .talk-doc span.doc {
    cursor: pointer;
    display: block;
    margin: 0.5em;
}
.talktext .talk-video span:nth-child(1) {
    display: block;
}
.talktext .talk-video video {
    display: block;
    margin-top: 0.5em;
}
.talktext .talk-location .location-latlng {
    display: block;
}
.talktext .talk-location .location-latlng .fa-location-dot {
    color: indianred;
}
.talktext .talk-location .location-accuracy {
    display: block;
    font-size: 0.75em;
    color: gray;
}
.talktext span.quickreplybutton {
    padding: 0 10px;
    border-radius: 10px;
    background-color: lightgray;
    color: black;
    margin-right: 2px;
    white-space: nowrap;
}
.talktext-template {
    text-align: right !important;
    padding-right: 20px !important;
}
.talktext.talk-unsend {
    visibility: hidden;
    line-height: 0 !important;
}
.talktext.talk-unsend:before {
    content: ' ~ message deleted ~ ';
    font-style: italic;
    visibility: visible;
    padding: 0em !important;
    line-height: 1em !important;
}
.sys-bubble .talktext {
    padding: 0;
    text-align: center;
    line-height: 1em;
}
.sys-bubble .talktext .timestamp {
    text-transform: none;
    padding-top: 3px;
    right: unset;
    width:100%;
}
.talk-textarea {
    display: inline-block;
    min-height: 70px;
    max-height: 78px;
    line-height: 1.5em;
    width: calc(100% - 120px) !important;
    background-color: #fff !important;
    border:1px solid lightgray;
    border-radius: 5px;
    padding: 0.5em;
    margin: 10px 0 0 10px;
    overflow-y: auto;
    margin-left:60px;
}
.toxic {
    margin: 5px 0 0 10px;
    margin-left:60px;
}
.talk-textarea:focus {
    border:1px solid #66afe9;
    border-radius: 5px;
}
.btn-gptsummarize{
    width: 100%;
}
.btn-talk-textarea-left,
.btn-talk-textarea-left:active {
    position:absolute;
    bottom:15px;
    left:5px;
    top:auto;
    height:70px;
    width:50px;
}
.btn-talk-textarea-leftTop,
.btn-talk-textarea-leftTop:active {
    position:absolute;
    left:8px;
    top:7px;
    height:45px;
    width:45px;
}
.btn-talk-textarea-leftBottom,
.btn-talk-textarea-leftBottom:active {
    position:absolute;
    left:5px;
    bottom: 15px;
    width:45px;
    display:inline-block;
}
.btn-talk-textarea-left-translate,
.btn-talk-textarea-left-translate:active {
    position:absolute;
    left:8px;
    top:45px;
    height:45px;
    width:45px;
}
.btn-talk-textarea-right,
.btn-talk-textarea-right:active {
    position:absolute;
    right:5px;
    bottom:15px;
    left:auto;
    top:auto;
    height:70px;
    width:50px;
}
.btn-talk-textarea-rightTop,
.btn-talk-textarea-rightTop:active {
    position:absolute;
    right:5px;
    left:auto;
    top:7px;
    height:50px;
    width:45px;
}
.btn-talk-textarea-rightBottom,
.btn-talk-textarea-rightBottom:active {
    position:absolute;
    right:5px;
    left:auto;
    bottom: 15px;
    width:45px;
    display:inline-block;
}
.MessageTypePanel{
    position:absolute;
    bottom:0;
    height:100px;
    width:100%;
    padding:0;
    background-color: #fff !important;
}
.btn-emoji {
    font-size: 1em;
    padding: 5px;
}
.btn-emoji button {
    font-size: 2em;
    background-color: transparent;
    padding: 5px;
    margin: 0;
    border: 2px solid transparent;
    width: 2em;
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
}
.btn-sticker button {
    width: unset;
    min-width: 120px;
}
.btn-sticker button img {
    height: 100px;
}
.btn-emoji button:hover {
    border: 2px solid lightblue;
    border-radius: 5px;
}
body.smart-style-6 div.translatePanelContainer,
body.smart-style-7 div.translatePanelContainer {
    position:absolute;
    bottom:100px;
    height:225px;
    width:100%;
    padding:0;
    border-top: 1px solid grey;
}
body.smart-style-6 div.translatePanelContainer {
    background-color: #fff !important;
}
body.smart-style-7 div.translatePanelContainer {
    background-color: #666 !important;
}
body.smart-style-6 div.hiddenEmojiPanel,
body.smart-style-7 div.hiddenEmojiPanel {
    height: calc(100vh - 235px);
    position: relative !important;
    margin-bottom: 100px !important;
    padding:10px 0 0 0 !important;
    overflow-y: scroll !important;
    display: flex;
    flex-direction: column-reverse;
}
body.smart-style-6 div.hiddenEmojiPanel {
    background-color: #ddd !important;
}
body.smart-style-7 div.hiddenEmojiPanel {
    background-color: #666 !important;
}
body.smart-style-6 div.visibleEmojiPanel,
body.smart-style-7 div.visibleEmojiPanel {
    height: calc(100vh - 455px);
    position: relative !important;
    margin-bottom: 320px !important;
    padding: 10px 0 0 0 !important;
    overflow-y: auto !important;
    display: flex;
    flex-direction: column-reverse;
}
body.smart-style-6 div.visibleEmojiPanel {
    background-color: #ddd !important;
}
body.smart-style-7 div.visibleEmojiPanel {
    background-color: #666 !important;
}
div.emoji-panel nav {
    height: 35px;
}
div.emoji-panel nav>ul {
    list-style: none;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}
div.emoji-panel nav>ul>li {
    list-style: none;
    overflow: hidden;
}
div.emoji-panel nav>ul>li, div.emoji-panel nav>ul>li>a {
    display: inline-block;
    font-size: 1.1em;
    height: 35px;
    text-align: center;
}
div.emoji-panel .nav-tabs>li>a {
    padding: 0 10px;
    font-size: x-large;
}
div.emoji-panel nav>ul>li>a {
    padding: 0 10px;
    font-size: x-large;
}
div.emoji-panel nav>ul>li>a {
    border-bottom: 2px solid transparent;
}
div.emoji-panel nav>ul>li>a.active {
    border-bottom: 2px solid red;
}
#emoji-container {
    height: calc(300px - 82px);
    overflow-y: scroll;
}
#emoji-container section {
    padding: 10px;
}
#emoji-container h2 {
    font-size: 10pt;
    font-weight: bold;
    color: grey;
    margin: 0;
}
#line-container {
    height: calc(300px - 82px);
    overflow-y: scroll;
}
#line-container section {
    padding: 10px;
}
#line-container h2 {
    font-size: 10pt;
    font-weight: bold;
    color: grey;
    margin: 0;
}
#tab-LINE nav>ul>li>a>img {
    height: 30px;
}
/*
 *
 * CSS related to messaging
 *
 */
/* for emoji display (transparent bg) */
.emoji {
    display: inline-block;
    border: 0;
    font-size: 1.5em;
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
}
.large-emoji-container {
    display: inline-block;
}
.emoji-xlarge {
    font-size: 3em;
    line-height: 1em;
    display: inline-block;
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
}
.emoji-large {
    font-size: 2em;
    line-height: 1em;
    display: inline-block;
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
}
.emoji-medium {
    font-size: 1.5em;
    line-height: 1em;
    display: inline-block;
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
}

.emoji-small-right {
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: white;
    position: relative;
    float: right;
    top: 1.2em;
    padding: 3px;
    font-size: 1.1em;
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
}

.emoji-small-left {
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: white;
    position: relative;
    float: left;
    top: 1.2em;
    padding: 3px;
    font-size: 1.1em;
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
}
/* tenant info after login */
.tenant-info {
    float: right;
    padding: 3px;
    color: white;
    background: rgba(0,0,0,.2);
}

/* analytics > email aging */
.bgcolor-emailagingsla{
    background-color:#FFCCCC ;

}

/* analytics > callqueue */
.bgcolor-corn {
    background-color: cornsilk;
    font-size: 1.1em;
    font-weight: bolder;
    color: #424242 !important;
}
.bgcolor-red-a100 {
    background-color: #ff8a80 !important;
    font-size: 1.1em;
    font-weight: bolder;
    color: #000;
}
.bgcolor-red-a100 small {
    color: #000  !important;
}
#jarviswidget-fullscreen-mode table.callqueue th {
    font-size: 2.2em;
}
#jarviswidget-fullscreen-mode table.callqueue td {
    font-size: 2.2em;
}
#jarviswidget-fullscreen-mode table.callqueue td .avatar-md {
    width: 70px !important;
    height: 70px !important;
}
table.callqueue .language-badge {
}
table.callqueue .product-badge {
    background-color: dimgray;
    color: white;
    padding: 2px 10px;
    border-radius: 3px;
}
#wallboard-widget .widget-body {
    background-color:#37474f !important;
    border:0px;
    padding: 0px;
}
.wallboard {
    margin: 0 auto;
    width: 100%;
    font-size: 2em;
    font-weight: bold;
}
.wallboard .component-image {
    max-height: 100%;
    max-width: 100%;
}
.wallboard .component-title {
    display:block;
    text-wrap: nowrap;
    /*font-size: 2vh;*/
}
.wallboard .component-value {
    display:block;
    font-size: 7.5vmin;
    word-break: break-all;
    line-height: 7vmin;
}
.wallboard .component-value-unit {
    font-size: 3vmin;
    bottom: 0.5vmin;
    position: relative;
}

#jarviswidget-fullscreen-mode {
    background-color:#37474f;
}
#jarviswidget-fullscreen-mode .wallboard .component-title {
    display:block;
    font-size: 1.5em;
}
#jarviswidget-fullscreen-mode .wallboard .component-value {
    display:block;
    font-size: 3.5em;
    word-break: break-all;
    line-height: 10vmin;
}
/*#jarviswidget-fullscreen-mode .wallboard .component-value.withpercent {
    padding-top: 0.5em;
    font-size: 2.5em;
}
*/
.font-bold{
    font-weight: bold;
}
/* mgmt wallboard */
.colordropdown .select2-choice {
    padding: 0;
}
.colordropdown .select2-chosen > span {
    padding-left: 10px;
}
.colordropdown .select2-result-label {
    padding: 0;
}
.colordropdown .select2-result-label > span {
    padding: 7px 10px;
}
#componentContents td select, #componentContents td input[type="text"] {
    padding: 5px;
}
/* password strength color */
.password0 {
    background-color: #d50000;
    width: 25%;
}
.password1 {
    background-color: #d50000;
    width: 25%;
}
.password2 {
    background-color: #ff3d00;
    width: 50%;
}
.password3 {
    background-color: #ffd600;
    width: 75%;
}
.password4 {
    background-color: #4caf50;
    width: 100%;
}
/* pagination */
.select-page {
    width: 3.5em;
    text-align: center;
}
.pagination>li> a {
    min-width: 2em;
    text-align: center;
    text-transform: none !important;
    padding: 5px !important;
}
.pagination li a input {
    padding: 0;
    margin: -5px 0;
}

.form-label-textarea {
    vertical-align:top;
    padding-top:0.5em;
}

.zmdi-hc-lg.zmdi-1_7x {
    font-size: 1.666666em;
}
/* FontAwesome Latest Solid */
@font-face {
    font-family: 'FontAwesomeLatest';
    src: url('../webfonts/fa-solid-900.eot');
    src: url('../webfonts/fa-solid-900.eot') format('embedded-opentype'), url('../webfonts/fa-solid-900.woff2') format('woff2'), url('../webfonts/fa-solid-900.woff') format('woff'), url('../webfonts/fa-solid-900.ttf') format('truetype'), url('../webfonts/fa-solid-900.svg') format('svg');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'FontAwesomeLatest';
    src: url('../webfonts/fa-regular-400.eot');
    src: url('../webfonts/fa-regular-400.eot') format('embedded-opentype'), url('../webfonts/fa-regular-400.woff2') format('woff2'), url('../webfonts/fa-regular-400.woff') format('woff'), url('../webfonts/fa-regular-400.ttf') format('truetype'), url('../webfonts/fa-regular-400.svg') format('svg');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'FontAwesomeBrands';
    src: url('../webfonts/fa-brands-400.eot');
    src: url('../webfonts/fa-brands-400.eot') format('embedded-opentype'), url('../webfonts/fa-brands-400.woff2') format('woff2'), url('../webfonts/fa-brands-400.woff') format('woff'), url('../webfonts/fa-brands-400.ttf') format('truetype'), url('../webfonts/fa-brands-400.svg') format('svg');
    font-weight: 400;
    font-style: normal;
}
/* FontAwesome v4.7.0 backwards compat fix for smartadmin css */
@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.table.no-border > tbody > tr > td {
    border: 0;
}
/* style lang and prod badges */
.select-item-badge.highlight {
    background-color: steelblue !important;
}
/**
 * Scroll to Top
 */
.scrolltop {
    display:none;
    width:100%;
    margin:0 auto;
    position:fixed;
    bottom:20px;
    right:10px;
}
.scroll {
    position:absolute;
    right:20px;
    bottom:20px;
    padding-top:0.8em;
    background:#2196F3;
    background:rgba(33,150,243,0.7);
    text-align: center;
    margin: 0 0 0 0;
    cursor:pointer;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    width:50px;
    height:50px;
    border-radius:50%;
    color:white;
}
.scroll:hover {
    background:rgba(33,150,243,1.0);
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}
.scroll:hover .fa {
    padding-top:-10px;
}
.scroll .fa {
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}
.badge-align-fix {
    line-height: normal;
    vertical-align: unset;
    min-width: 1.5em;
}
.badge-border {
    border: 0.5px solid lightgrey;
}
.chat-body li.message .message-text {
    cursor: default;
}
.chat-body li.message.pinned {
    border-right: 2px solid #2196F3;
}
table.license td, table.license th {
    text-align: right;
}
table.license thead th {
    padding: 0 !important;
    text-align: center;
}
table.license td:first-child, table.license th:first-child {
    text-align: left;
}
table.license th a {
    display: block;
    padding: 16px 10px;
}
div.comparisonbarcontainer {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    position:absolute;
    padding:0;
    margin:0;
}
div.comparisonbarcontainer .bar {
    background-color: #e0e0e0;
    white-space: nowrap;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    height: 1.5em;
}
div.comparisonbarcontainer .colored-bar {
    display: inline-block;
    background-color: #42a5f5;
    width: 100%;
    border-bottom:1px transparent;
    height: 1.5em;
}
div.comparisonbarcontainer .subject {
    position:absolute;
    top: 0.2em;
    float:left;
    left: 50%;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: transparent;
}
div.comparisonbarcontainer .subject:after {
    content: '';
    position: absolute;
    left: -8px;
    top: 8px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: #fff;
}
div.comparisonbarcontainer .subject-label {
    position:absolute;
    top: 0em;
    float:left;
    text-align:right;
}
div.comparisonbarcontainer .avg {
    position:absolute;
    top: 1.8em;
    float:left;
    left: 30%;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: #fff;
}
div.comparisonbarcontainer .avg-label {
    position:absolute;
    top: 3em;
    float:left;
    text-align:right;
}
div.comparisonbarcontainer .min-label {
    position:absolute;
    top: 3em;
    float: left;
    text-align: left;
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
}
div.comparisonbarcontainer .max-label {
    position:absolute;
    top: 3em;
    width: 100%;
    text-align: right;
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
}
/*
 *
 ***** STYLE-6 OVERRIDES ******************************************************
 *
 */

/*
fix style dropdown bug
*/
body.smart-style-6 .dropdown {
    transform: none !important;
    opacity: 1 !important;
    display: inherit !important;
}
/*
maximize content area
*/
body.smart-style-6 #content {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 20px;
}
body.smart-style-6.minified .tenant-info {
    display: none;
}
/* agent profile left panel */
body.smart-style-6 .login-info #autoans,
body.smart-style-7 .login-info #autoans {
    position: absolute;
    right: 0;
    margin-top: 92px;
}
body.smart-style-6.minified .login-info #autoans,
body.smart-style-7.minified .login-info #autoans {
    display: none;
}
.login-info #webrtc-settings {
    position: absolute;
    right: 40px;
    margin-top: 96px;
}
.login-info #webrtc-settings:hover {
    cursor: pointer;
}
body.minified .login-info #webrtc-settings {
    display: none;
}
body.smart-style-6 div.oc5daterangepicker {
    background: #fff;
    cursor: pointer;
    padding: 5px 10px;
    border-bottom:0px solid #ccc;
}
body.smart-style-6 .chat-body {
    background-color: #fff !important;
}
body.smart-style-6 div.oc5daterangepickersnapshop{
    background: #fff;
    cursor: pointer;
    padding: 5px 10px;
    border-bottom: 0px solid #ccc;
    width:auto;
    display: inline;
}
body.smart-style-6 .chat-body li.message .message-text span.username {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
    vertical-align: top;
    line-height: 14px;
    font-size: 14px;
    text-decoration: none!important;
    color: #3276b1;
    cursor: pointer;
}
body.smart-style-6 .table-striped.license tfoot tr {
    background-color: #ccc;
}
body.smart-style-6 div.comparisonbarcontainer .avg-label-text {
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
    color: #388e3c;
    font-weight: bold;
    background-color: #fff;
}
body.smart-style-6 div.comparisonbarcontainer .subject-label-text {
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
    color: red;
    font-weight: bold;
    background-color: #fff;
}
body.smart-style-6 .MessageTypePanel{
    position:absolute;
    bottom:0;
    height:100px;
    width:100%;
    padding:0;
    background-color: #fff !important;
}
body.smart-style-6 ul#sessionVertTabs {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
body.smart-style-6 ul#sessionVertTabs li {
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid lightgray;
    position: relative;
    overflow: hidden;
    border-left: 4px solid transparent !important;
}
body.smart-style-6 ul#sessionVertTabs li:hover {
    background-color: rgba(248,248,248,0.9);
    border-left: 4px solid lightblue !important;
}
body.smart-style-6 ul#sessionVertTabs li.active {
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid lightgray;
    position: relative;
    overflow: hidden;
    background-color: #eee;
    border-left: 4px solid red !important;
}
body.smart-style-6 ul#sessionVertTabs li.active div {
    font-weight: bold;
}
body.smart-style-6 ul#sessionVertTabs li a {
    display: block;
}
body.smart-style-6 .im-avatar-round {
    width: 49px;
    height: 49px;
    border-radius: 50%;
}
/*
 *
 ***** STYLE-7 OVERRIDES ******************************************************
 *
 */

/*
scrollbar
*/
body.smart-style-7 .scrolltop {
    display:none;
    width:100%;
    margin:0 auto;
    position:fixed;
    bottom:20px;
    right:10px;
}
body.smart-style-7 .scroll {
    position:absolute;
    right:20px;
    bottom:20px;
    padding-top:0.8em;
    background:#2196F3;
    background:rgba(33,150,243,0.7);
    text-align: center;
    margin: 0 0 0 0;
    cursor:pointer;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    width:50px;
    height:50px;
    border-radius:50%;
    color:white;
}
body.smart-style-7 .scroll:hover {
    background:rgba(33,150,243,1.0);
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}
body.smart-style-7 .scroll:hover .fa {
    padding-top:-10px;
}
body.smart-style-7 .scroll .fa {
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}
body.smart-style-7 .horizontal-scrollbar::-webkit-scrollbar {
    height:5px;
    width:5px;
    background-color: #000;
}
body.smart-style-7 .horizontal-scrollbar::-webkit-scrollbar-thumb {
    background: #000;
}
body.smart-style-7 .dropdown {
    transform: none !important;
    opacity: 1 !important;
    display: inherit !important;
}
body.smart-style-7 #content {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 20px;
}
body.smart-style-7.minified .tenant-info {
    display: none;
}
/* agent profile left panel */
body.smart-style-7 .profile-message li.message.message-reply {
    background: #424242 !important;
    color: lightgray;
}
body.smart-style-7 li.message.message-reply.image-input{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
body.smart-style-7 .smart-form .select select {
    background-color: #666 !important;
    color: lightgray !important;
    border : 0px;
    border-bottom : 1px dashed lightgray;
}
body.smart-style-7 .image-input-post .div-textarea {
    background-color: #666 !important;
}
body.smart-style-7 .video-post {
    background-color: #424242;
}
body.smart-style-7 .select-item-badge {
    background-color: #b0bec5;
    color: #424242;
}
body.smart-style-7 .select2-choice,
body.smart-style-7 .select2-results,
body.smart-style-7 .select2-search,
body.smart-style-7 .select2-arrow.ui-select-toggle,
body.smart-style-7 .select2-search input {
    color: lightgray;
    background: #666 !important;
}
body.smart-style-7 .select2-container-multi .select2-choices{
    /*float: left;*/
    list-style: none;
    background: #ccc;
}
body.smart-style-7 .select2-container-multi .select2-choices .select2-search-field input{
    border-top: 1px solid #999;
}
body.smart-style-7 .select2-results{
    margin: 0px;
}
body.smart-style-7 .select2-search:before {
    color: #fff !important;
}
body.smart-style-7 .nav.nav-tabs.bordered {
    background: #333 !important;
    border: 0px solid #000 !important;
}
body.smart-style-7 .nav-tabs>li>a {
    color: lightgray;
}
body.smart-style-7 .nav-tabs>li>a:hover,
body.smart-style-7 .nav-tabs>li.active>a{
    color: #333;
}
body.smart-style-7 .image-input-post .div-textarea {
    background-color: #666 !important;
    border:1px solid #000;
}
body.smart-style-7 table[st-table] tbody tr td,
body.smart-style-7 .table-ocod tbody tr td {
    color: lightgray;
}
body.smart-style-7 table.table-striped>tbody>tr:nth-child(2n+1)>td,
body.smart-style-7 .table-striped.table-ocod>tbody>tr:nth-child(2n+1)>td {
    background-color: #777;
}
body.smart-style-7 div.oc5daterangepicker {
    background-color: transparent;
    cursor: pointer;
    padding: 5px 10px;
    border-bottom:0px solid #ccc;
}
body.smart-style-7 div.oc5daterangepickersnapshop,
body.smart-style-7 div.oc5daterangepickersnapshop input{
    background-color: transparent !important;
    cursor: pointer;
    padding: 5px 10px;
    color: lightgray !important;
    width:auto;
    display: inline;
}
body.smart-style-7 div.oc5daterangepicker input {
    background: transparent;
}
body.smart-style-7 .nav-tabs.bordered+.tab-content {
    border: 1px solid #000;
    border-top: none;
}
body.smart-style-7 .image-input .div-textarea {
    display: inline-block;
    margin-left: 40px;
    min-height: 30px;
    width: calc(100% - 40px) !important;
    background-color: #666 !important;
    border: 1px solid #000;
    padding: 5px !important;
}
body.smart-style-7 #daterange,
body.smart-style-7 #daterange input{
    background-color: #424242 !important;
    cursor: pointer;
    padding: 5px 10px;
    color: lightgray !important;
    border-bottom: 1px solid #ccc !important;
}
body.smart-style-7 #daterange{
    border: 0px solid #ccc !important;
}
body.smart-style-7 .calendar-table {
    background-color: #424242 !important;
}

body.smart-style-7 th.month,
body.smart-style-7 .table-condensed > thead > tr > th{
    color: #03a9f4 !important;
}
body.smart-style-7 .table-condensed > tbody > tr > td.weekend.off.available,
body.smart-style-7 .table-condensed > tbody > tr > td.off.available,
body.smart-style-7 .table-condensed > tbody > tr > td.weekend.off.disabled,
body.smart-style-7 .table-condensed > tbody > tr > td.off.disabled{
    background: #666 !important;
    color: lightgray;
}
body.smart-style-7 .table-condensed > tbody > tr > td:hover{
    color: #03a9f4 !important;
}
body.smart-style-7 table.agentWide {
    background-color: #424242;
    border-radius: 5%;
    float: left;
    padding: 10px;
    height: 60px;
    width: 180px;
    color: lightgray;
}

body.smart-style-7 table.agentWide.unreachable{
    background-color: #c3325f;
    border-radius: 5%;
    float: left;
    padding: 10px;
    height: 60px;
    width: 180px;
    color: lightgray;
}

body.smart-style-7 table.agentWide td.description{
    font-size: 11px;
    white-space: nowrap;
    color: lightgray;
}
body.smart-style-7 .table.table-hover .label{
    color: lightgray !important;
}
body.smart-style-7 .table.table-hover div{
    background: transparent !important;
}
body.smart-style-7 .dimmed:after {
    content: " ";
    z-index: 10;
    display: block;
    position: absolute;
    height: 100% !important;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(71, 71, 71, 0.6);
    visibility: visible !important;
}
body.smart-style-7 .modal-footer span{
    color: lightgray;
}
body.smart-style-7 #callDispositionForm{
    background: #666 !important;
}
body.smart-style-7 #callbackForm{
    background: #424242 !important;
    border: 1px solid #000;
}
body.smart-style-7 #callDispositionForm textarea,
body.smart-style-7 #callbackForm textarea{
    background: #666 !important;
    color: lightgray;
    border: 1px dashed lightgray;
}
body.smart-style-7 .select2-results li {
    border-bottom: 1px solid #424242;
}
body.smart-style-7 .smart-form footer .btn-primary {
    float: right;
    height: 31px;
    margin: 10px 0 0 5px;
    padding: 0 22px;
    font: 300 15px/29px "Open Sans", Roboto, "Noto Sans SC", "Noto Sans TC", "Yu Gothic",sans-serif;
    cursor: pointer;
    color: lightgray !important;
}

/*
body.smart-style-7 .select2-drop-active {
    border: 1px solid #000 !important;
    opacity: 1;
    position: absolute;
    top: -234px;
}*/
body.smart-style-7 #ui-datepicker-div{
    border: 1px solid #aaa !important;
    background: #424242 !important;
    color: lightgray !important;
}
body.smart-style-7 .ui-widget-header {
    background: #424242 !important;
    color: lightgray !important;
}
body.smart-style-7 .ui-state-default:hover {
    background: #2196f3 !important;
    color: #fff !important;
}
body.smart-style-7 .ui-datepicker-buttonpane button{
    background: lightgray !important;
    color: #424242 !important;
}
body.smart-style-7 .form-table tbody tr td,
body.smart-style-7 .form-table thead tr th {
    padding-bottom: 10px;
    color: lightgray;
}
body.smart-style-7 textarea.custom-scroll, body.smart-style-7 div.custom-scroll-call-remarks {
    padding-left: 10px !important;
    border: 1px dashed #666 !important;
    background-color: #303030 !important;
    color: lightgray;
}
body.smart-style-7 #oscriptIFrame{
    background: #ccc !important;
    color: #424242;
}
body.smart-style-7 html {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: #ccc;
    position: relative;
}
body.smart-style-7 #dashboardwall {
    min-height: 100px;
    position: relative;
    padding-bottom: 13px;
    background: #212121 !important;
    border: 0px !important;
    color: lightgray;
}
body.smart-style-7 .jarviswidget {
    margin: 0 0 30px;
    position: relative;
    -moz-border-radius: 0;
    -khtml-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    padding: 0;
    zoom: 1;
}
body.smart-style-7 .bgcolor-transparent {
    background-color: transparent !important;
    color: lightgray;
}
body.smart-style-7 a {
    color: lightgray;
}
body.smart-style-7 a:hover {
    color: #2196f3;
}
body.smart-style-7 #ocodgeneratereportcol{
    background: #666 !important;
}
body.smart-style-7 .smart-form{
    background: #666 !important;
    color: lightgray;
}
body.smart-style-7 .semi-bold{
    color: lightgray !important;
}
body.smart-style-7 .smart-form footer .btn {
    float: right;
    height: 31px;
    margin: 10px 0 0 5px;
    padding: 0 22px;
    font: 300 15px/29px "Open Sans", Roboto, "Noto Sans SC", "Noto Sans TC", "Yu Gothic", sans-serif;
    cursor: pointer;
    background: transparent;

}
body.smart-style-7 .smart-form footer .btn:hover,
body.smart-style-7 .bgcolor-transparent:hover{
    color: #03a9f4;
    font-weight: bold;
}
body.smart-style-7 .chat-body li.message .message-text span.username {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
    vertical-align: top;
    line-height: 14px;
    font-size: 14px;
    text-decoration: none!important;
    color: lightgray;
    cursor: pointer;
}
body.smart-style-7 .fa.fa-question-circle{
    color: lightgray !important;
}
body.smart-style-7 .article-post {
    display: block;
    position: relative;
    border:1px solid #666;
    border-bottom:2px solid #666;
    height:158px;
    margin: auto;
    background-color: #666;
}
body.smart-style-7 .item {
    height: 100%;
    background: #424242;
    color: lightgray;
}
body.smart-style-7 .popover {
    background-color: #000;
}
body.smart-style-7 .popover>.arrow:after {
    border-right-color: #000;
}
body.smart-style-7 .popover-content {
    background: #424242 !important;
}
body.smart-style-7 .popover-title {
    background: #000 !important;
    border: #333;
}
body.smart-style-7 .ajax-dropdown:after {
    border-bottom-color: #424242;
}
body.smart-style-7 .ajax-dropdown:before {
    border-bottom-color: #000;
}
body.smart-style-7 #ans4,
body.smart-style-7 #abdn4,
body.smart-style-7 #term4,
body.smart-style-7 #att4,
body.smart-style-7 #Aht4,
body.smart-style-7 #init4,
body.smart-style-7 #succ4,
body.smart-style-7 #outAtt4,
body.smart-style-7 #outAht4/*,
body.smart-style-7 .ng-isolate-scope*/{
    color: lightgray !important;
}
body.smart-style-7 .inbox-menu-lg {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    background: #424242;
}
body.smart-style-7 .inbox-menu-lg li.active a {
    font-weight: 700;
    background: #aaa;
    border-bottom: 1px solid #E7E7E7;
    color: #3276b1;
}
body.smart-style-7 .bgcolor-red-a100 {
    background-color: #EA4032 !important;
    font-size: 1.1em;
    font-weight: bolder;
    color: #000;
}
body.smart-style-7 .bgcolor-red-a100 small {
    color: #000 !important;
}
body.smart-style-7 .MessagingBody{
    height: calc(100vh - 250px);
    position: relative;
    margin-bottom: 0px !important;
    padding: 10px 0 0 0 !important;
    background-color: #424242 !important;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
}
body.smart-style-7 .talktext{
    padding: 1em 1em 1.5em 1em;
    text-align: left;
    line-height: 1.5em;
    color: lightgray;
}
body.smart-style-7 .talktext .timestamp {
    position: absolute;
    font-size: 0.75em;
    color: lightgray;
}
body.smart-style-7 .sys-bubble {
    background-color: #565656;
}
body.smart-style-7 .sys-bubble .talktext {
    padding: 0;
    color: lightgray;
    text-align: center;
    line-height: 1em;
}
body.smart-style-7 .sys-bubble .talktext .timestamp {
    text-transform: none;
    padding-top: 3px;
    right: unset;
    width:100%;
}
body.smart-style-7 .talktext video {
    max-width: 270px;
    max-height: 270px;
}
body.smart-style-7 .talktext .talk-quote {
    background: #eee;
    border-left: 3px solid teal;
    padding: 5px;
    border-radius: 3px;
    margin-bottom: 7px;
}
body.smart-style-7 .talk-in {
    background-color: #333;
}
body.smart-style-7 .talk-in:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: -10px;
    right: auto;
    top: 0px;
    bottom: auto;
    border: 12px solid;
    border-color: #333 transparent transparent transparent;
}
body.smart-style-7 .talk-textarea {
    display: inline-block;
    min-height: 78px;
    max-height: 78px;
    line-height: 1.5em;
    width: calc(100% - 120px) !important;
    background-color: #ddd !important;
    border:1px solid lightgray;
    border-radius: 5px;
    padding: 0.5em;
    margin: 10px 0 0 10px;
    overflow-y: auto;
    margin-left:60px;
    color: #424242 !important;
}
body.smart-style-7 .talk-textarea:focus {
    border:1px solid #66afe9;
    border-radius: 5px;
}
body.smart-style-7 [contenteditable=true]:empty:before {
    content: attr(data-placeholder);
    display: block;
    color: #999;
}
body.smart-style-7 #MessageTypingPanel{
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
    padding: 0;
    background: #424242 !important;
    border-top: 1px solid #000;
}
body.smart-style-7 #divIn,
body.smart-style-7 #divOut{
    background: #666;
}
body.smart-style-7 hr{
    border: 0px;
}
body.smart-style-7 div.comparisonbarcontainer .avg-label-text {
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
    color: #fff;
    font-weight: bold;
    background-color: #424242;
}
body.smart-style-7 div.comparisonbarcontainer .subject-label-text {
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
    color: #fff;
    font-weight: bold;
    background-color: #424242;
}
body.smart-style-7 div.comparisonbarcontainer .subject:after {
    border-top-color: #424242;
}
body.smart-style-7 div.comparisonbarcontainer .avg {
    border-bottom-color: #424242;
}
body.smart-style-7 .smart-form .radio {
    margin-bottom: 4px;
    padding-left: 25px;
    line-height: 25px;
    color: lightgray;
    cursor: pointer;
    font-size: 13px;
}
body.smart-style-7 .login-info #autoans form{
    background: transparent !important;
}
body.smart-style-7.minified .login-info #autoans {
    display: none;
}
body.smart-style-7 #logo-group span#activity {
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    cursor: default!important;
    display: inline-block;
    font-weight: 700;
    height: 24px;
    width: 24px;
    padding: 2px;
    text-align: center;
    text-decoration: none!important;
    -moz-user-select: none;
    -webkit-user-select: none;
    background-color: transparent;
    background-image: -webkit-gradient(linear,left top,left bottom,from(transparent),to(transparent));
    background-image: -webkit-linear-gradient(top,transparent,transparent);
    background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
    background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
    background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
    background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
    border: 0px solid lightgray;
    color: lightgray;
    font-size: 19px;
    margin: 10px 0 0;
    position: relative;
}
/* analytics > callqueue */
body.smart-style-7 .bgcolor-corn {
    background-color: cornsilk !important;
    font-size: 1.1em;
    font-weight: bolder;
    color: #424242 !important;
}
body.smart-style-7 .bgcolor-corn i{
    color: #424242 !important;
}
body.smart-style-7 .bgcolor-red-a100 {
    background-color: #ff8a80 !important;
    font-size: 1.1em;
    font-weight: bolder;
    color: #424242 !important;
}
body.smart-style-7.minified nav>ul>li>a>.menu-item-parent {
    display: none;
    position: absolute;
    top: 0px;
    width: 186px;
    height: 38px;
    line-height: 38px;
    background-color: #424242 !important;
    color: lightgray !important;
    z-index: 3;
    -webkit-box-shadow: 2px 1px 2px 0 rgba(0,0,0,.2);
    -moz-box-shadow: 2px 1px 2px 0 rgba(0,0,0,.2);
    box-shadow: 2px 1px 2px 0 rgba(0,0,0,.2);
    border-left: 1px solid #424242;
    border-top: 1px solid #424242;
    border-bottom: 1px solid #424242;
    padding-left: 12px;
}
.notification-body>li>span {
    background: #ccc;
    color: #424242;
    display: block;
    min-height: 25px;
    overflow: hidden;
    padding: 8px 10px 13px;
    white-space: normal;
}
body.smart-style-7 .smart-form .select i {
    position: absolute;
    top: 10px;
    right: 11px;
    width: 5px;
    height: 11px;
    background: transparent;
    box-shadow: 0 0 0 9px transparent;
}
body.smart-style-7 .MessageTypePanel{
    position:absolute;
    bottom:0;
    height:100px;
    width:100%;
    padding:0;
    background-color: #424242 !important;
}
body.smart-style-7 ul#sessionVertTabs {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
body.smart-style-7 ul#sessionVertTabs li {
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid gray;
    position: relative;
    overflow: hidden;
    border-left: 4px solid transparent !important;
}
body.smart-style-7 ul#sessionVertTabs li:hover {
    background-color: rgba(248,248,248,0.9);
    border-left: 4px solid lightblue !important;
}
body.smart-style-7 ul#sessionVertTabs li .emoji-str {
    color: #0276ab;
}
body.smart-style-7 ul#sessionVertTabs li.active {
    margin: 0;
    padding: 5px;
    border-bottom: 1px solid gray !important;
    position: relative;
    overflow: hidden;
    background-color: #424242;
    border-left: 4px solid red !important;
}
body.smart-style-7 ul#sessionVertTabs li.active div {
    font-weight: bold;
    color: #03a9f4;
}
body.smart-style-7 ul#sessionVertTabs li a {
    display: block;
}
body.smart-style-7 .im-avatar-round {
    width: 49px;
    height: 49px;
    border-radius: 50%;
}


body.smart-style-7 .email-infobox {
    position: relative !important;
    width: 100% !important;
    top: 10px;
    left: 10px;
}

body.smart-style-7 .mail-box-header{
    background-color: #ffffff;
    border: 1px solid #e7eaec;
    border-bottom: 0;
    padding: 30px 20px 20px 20px;
}
body.smart-style-7 a.mailtitlebold{
    padding-left: 10px;
    color: #fff !important;
}

table.table-hover tbody > tr:hover td{
    background-color: transparent !important;
    color: #424242 !important;
}

body.smart-style-7 .efmcontentblue{
    font-weight: bold;
    color: #81d4fa;
}
body.smart-style-7 table tr button:hover{
    color: #424242 !important;
}
body.smart-style-7 table#efmlist tr:hover .efmcontentblue{
    font-weight: bold;
    color: #1a237e;
}
body.smart-style-6 .email-main-header{
    height: 45px;
}

body.smart-style-6 .email-infobox {
    position: relative !important;
    width: 100% !important;
    top: 10px;
    left: 10px;
}

body.smart-style-6 .mail-box-header{
    background-color: #ffffff;
    border: 1px solid #e7eaec;
    border-bottom: 0;
    padding: 30px 20px 20px 20px;
}

body.smart-style-6 .email-main-header{
    height: 45px;
}

table#efmlist tbody tr td, .table-ocod tbody tr td {
    padding-top: 2px !important;
    padding-bottom: 5px !important;
    vertical-align: middle;
}

.ui-splitbar-icon{
    display:none;
}
/* angular-ui-layout overrides */
.animate-row,
.animate-column {
    /*CSS transitions*/
    transition-property: none !important;
    /*CSS transforms*/
    transform: none !important;
    /*CSS animations*/
    animation: none !important;
    /* transition */
    transition: none !important;
}
.ui-layout-column > .ui-splitbar {
    background: transparent !important;
}

h4.panel-title{
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
    font-weight: 400;
    font-size: 13px;
}

a.mailtitlebold{
    padding-left:10px !important;
    color:#4C4C4C!important;
}

body.smart-style-6 .efmcontentblue{
    font-weight: bold;
    color: #0048AB;
}

body.smart-style-7 .smart-form .select{
    position: relative;
    display: block;
    font-weight: 400;
}
body.smart-style-7 .emoji-str {
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
    color: #03a9f4;
}

.MessagingHeader{
    position:relative;
    height:60px;
    line-height:normal;
    padding:5px;
    background-color:#eee;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}
body.smart-style-7 .MessagingHeader{
    position:relative;
    height:60px;
    line-height:normal;
    padding:5px;
    background-color:#424242 !important;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom: 1px solid #000;
}
body.smart-style-7 .tab-content{
    background: #666;
}
body.smart-style-7 a:focus,
body.smart-style-7 a:hover {
    color: #03a9f4;
    text-decoration: none;
}

.bold-text {
    font-weight: bold;
}
body.smart-style-7 .help-block {
    color: #F44336;
    margin-left: 0.5em;
}
body.smart-style-6 .small-logo{
    background: url("../img/logo.png") no-repeat center center;
    height:50px;
    width:auto;
    max-width:240px;
}

body.smart-style-7 .small-logo{
    background: url("../img/logo-blue.png") no-repeat center center;
    height:50px;
    width:auto;
    max-width:240px;
}

.dtmfpad-btn {
    width: calc( 100% / 3 );
    border-right: 1px solid lightblue;
    border-bottom: 1px solid lightblue;
}
.dtmfpad-btn:first-child {
    border-left: 1px solid lightblue;
}
.dtmfpad-digit {
    display: block;
    font-weight:bold;
    font-size:1.5em;
}
.dtmfpad-text {
    display: block;
    font-size: 0.7em;
    color: lightslategray;
}

body.smart-style-7 .btn:focus{
    color: #fff;
}

@media (min-width: 1500px) {
    .modal-xl {
        width: 1400px;
    }
}
@media (min-width: 992px) and (max-width: 1500px) {
    .modal-xl {
        width: 900px;
    }
}

body.smart-style-7 a.selectable-text.invisible-space.copyable-text,
body.smart-style-7 .talktext span a{
    color: #2196f3 !important;
}

body.smart-style-6 .table.table-hover div.ajax-dropdown.qm-question-type {
    padding:10px;
    margin-top: 10px;
    top:inherit;
    left:inherit;
    width:150px;
    height:auto;
    word-break:break-all;
    word-wrap:break-word;
    background-color: #fff !important;
}
body.smart-style-7 .table.table-hover div.ajax-dropdown.qm-question-type {
    padding:10px;
    margin-top: 10px;
    top:inherit;
    left:inherit;
    width:150px;
    height:auto;
    word-break:break-all;
    word-wrap:break-word;
    background-color: #000 !important;
}
body.smart-style-7 #efmlist tr.panel:hover .panel-body tr td a{
    color: #424242 !important;
}
body.smart-style-6 .ajax-notificatons{
    max-height:415px;
    border:0;
}
body.smart-style-6 .msgQList{
    background:#fff !important;
}
body.smart-style-6 #msgQDetails{
    padding:10px;
    margin-left:28px;
    background:#fff !important;
}
body.smart-style-7 .ajax-notificatons{
    max-height:415px;
    border:0;
}
body.smart-style-7 .msgQList{
    background:#666 !important;
    color: lightgrey !important;
    border-top:0px;
    border-bottom:0px;
}
body.smart-style-7 .msgQList li:hover{
    background:#777 !important;
}
body.smart-style-7 #msgQDetails{
    padding:10px;
    margin-left:28px;
    background:#666 !important;
}
body.smart-style-6 #callQDetails{
    padding:10px;
}
body.smart-style-7 #callQDetails{
    padding:10px;
}
body.smart-style-7 .notification-body>li {
    border-bottom: 1px solid #444;
    position: relative;
}
body.smart-style-7 .talk-out .talktext {
    color:#424242 !important;
}
body.smart-style-7 .talk-out .talktext .timestamp {
    position: absolute;
    font-size: 0.75em;
    color: #717073;
}/*removed right:10px;*/
body.smart-style-7 .talk-in .talktext .timestamp {
    right: unset;
    min-width: 150px;
}
.talk-out-pending {
    background-color: #fff59d;
    margin-left: auto;
}
.talk-out-pending-with-avatar {
    margin-right: 50px;
}
.talk-out-pending:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -10px;
    top: 0px;
    bottom: auto;
    border: 12px solid;
    border-color: #fff59d transparent transparent #fff59d;
}
body.smart-style-7 .talk-out-pending .talktext {
    color:#424242 !important;
}
body.smart-style-7 .talk-out-pending {
    background-color: #fff59d;
    margin-left: auto;
}
.talk-out-error {
    background-color: #ea9999;
    margin-left: auto;
}
.talk-out-error-with-avatar {
    margin-right: 50px;
}
.talk-out-error:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -10px;
    top: 0px;
    bottom: auto;
    border: 12px solid;
    border-color: #ea9999 transparent transparent #ea9999;
}
body.smart-style-7 .talk-out-error .talktext {
    color:#424242 !important;
}
body.smart-style-7 .talk-out-error {
    background-color: #ea9999;
    margin-left: auto;
}
.btn-hover:hover {
    cursor: pointer;
    color: #d9534f;
}
.list-group.for-autocomplete {
    position: absolute;
    z-index: 9999;
    width: 100%;
}
body.smart-style-6 .list-group.for-autocomplete .list-group-item {
    padding: 5px;
    border-width: 0 1px 1px 1px;
    cursor: pointer;
}
body.smart-style-6 .list-group.for-autocomplete .list-group-item:hover {
    background-color: #edecec;
    cursor: pointer;
}
body.smart-style-6 .list-group .list-group-item.selected-user {
    background-color: #e8f0fe !important;
    color: #1a73e8 !important;

}
body.smart-style-7 .list-group.for-autocomplete .list-group-item {
    padding: 5px;
    border-color: #5D98CC;
    border-width: 0 1px 1px 1px;
    cursor: pointer;
    background-color: #666;
    color: lightgray;
}
body.smart-style-7 .list-group.for-autocomplete .list-group-item:hover {
    background-color: #3276b1;
    cursor: pointer;
    color: lightgray;
}
body.smart-style-7 .list-group .list-group-item.selected-user {
    background-color: #3276b1 !important;
    cursor: pointer;
    color: #fff !important;
}
.videocam {
    position: relative;
    display: inline-block;
}
.videocam video {
    width: 64px;
    height: 36px;
    vertical-align: middle;
    background-color: black;
    cursor: pointer;
    border: 0;
}
.videocam.video-off:before {
    font-family: 'FontAwesomeLatest';
    font-weight: 900;
    content: '\f4e2';
    color: white;
    position: absolute;
    background: rgba(0, 0, 0, 1);
    border: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
div#videopanel {
    display: inline-block;
    margin: 0;
    padding: 3px;
    background-color: #555;
}
div#videopanel.popup {
    position: fixed;
    z-index: 1050;
    left: 50px;
    top: 50px;
    background-color: #555;
    padding: 0;
    cursor: pointer;
    box-shadow: 5px 5px 8px #888;
}
div#videopanel.popup .videocam {
    display: block;
    margin-bottom: 5px;
}
div#videopanel.popup .videocam video {
    width: 256px;
    height: 144px;
}
div#videopanel.popup .videocam.videocam-max video {
    width: 640px;
    height: 360px;
}
div#videopanel.popup .videocam .video-label {
    position: absolute;
    bottom: 0em;
    left: 3px;
    background-color: rgba(0,0,0,0.65);
    color: white;
    padding:0 5px;
}
div#videopanel.popup .videocam .video-photo {
    width: 50px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    border: 1px solid black;
}
video.videofs {
    position: fixed;
    left: 0;
    top: 49px;
    width: 100% !important;
    height: calc(100% - 49px) !important;
    background-color: black;
}
.video-fullscreen-label {
    bottom: calc(49px + 2em);
    left: 50%;
    text-align: center;
    position: fixed;
    color: white;
    background-color: black;
    padding:0 5px;
}
.smart-form .select i {
    display: none;
}
.smart-form .select select {
    -webkit-appearance: menulist-button;
    width: fit-content;
}

input[type=number] {
    min-width: 5em;
}
.smart-form .checkbox.disabled i {
    background-color: #BDBDBD;
}

.angular-ui-tree-handle {
    background: #f8faff;
    border: 0px solid #dae2ea;
    color: #7c9eb2;
    padding: 0 10px;
}

.angular-ui-tree-handle:hover {
    color: #438eb9;
    background: #f4f6f7;
    border-color: #dce2e8;
}

.angular-ui-tree-placeholder {
    background: #f0f9ff;
    border: 2px dashed #bed2db;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

tr.angular-ui-tree-empty {
    height:100px
}

/* --- Tree --- */
.tree-node {
    border: 1px solid #dae2ea;
    background: #f8faff;
    color: #7c9eb2;
}

.nodrop {
    background-color: #f2dede;
}

.tree-node-content {
    margin: 10px;
}
.tree-handle {
    padding: 10px;
    background: #428bca;
    color: #FFF;
    margin-right: 10px;
}
.tree-node-text {
    color: #333;
}
.angular-ui-tree-handle:hover {
}

.angular-ui-tree-placeholder {
    background: #f0f9ff;
    border: 2px dashed #bed2db;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
span.spanfont{
    color:black;
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
    font-size: 0.9em;
    margin-left:20px;
}
mark.active {
    border: 1px solid tomato;
}
@media (max-width:991px) {
    .hangup-dd-left{
        left: auto !important
    }
}
.fa-stack-1x25 {
    font-size: 1.25em !important;
}
.fa-stack-1x5 {
    font-size: 1.5em !important;
}
.ui-select-search-hidden {
    display: none;
}
input[type=text].tree-node-text {
    background-color: transparent;
    border:0px;
}
input[type=text].tree-node-text:focus {
    background-color: cornsilk;
    border:1px solid red;
}
.smart-form .checkbox.tristate input:indeterminate:hover+i:after,
.smart-form .checkbox.tristate input:indeterminate+i:after {
    content:'\f068';
    opacity: 1;
}
.smart-form .checkbox.tristate input:checked:hover+i:after,
.smart-form .checkbox.tristate input:checked+i:after {
    content:'\f00c';
    opacity: 1;
}
.smart-form .checkbox.tristate input:hover+i:after,
.smart-form .checkbox.tristate input+i:after {
    content:'';
    opacity: 0;
}
div.note-editor .table-bordered>tbody>tr>td,
div.note-editor .table-bordered>tbody>tr>th,
div.note-editor .table-bordered>tfoot>tr>td,
div.note-editor .table-bordered>tfoot>tr>th,
div.note-editor .table-bordered>thead>tr>td,
div.note-editor .table-bordered>thead>tr>th,
div.inbox-message .table-bordered>tbody>tr>td,
div.inbox-message .table-bordered>tbody>tr>th,
div.inbox-message .table-bordered>tfoot>tr>td,
div.inbox-message .table-bordered>tfoot>tr>th,
div.inbox-message .table-bordered>thead>tr>td,
div.inbox-message .table-bordered>thead>tr>th{
    vertical-align: middle !important;
}

div.red-border {
    border: 1px solid red !important;
}

.crm-table {
    width: 100%;
}
.crm-table tbody tr td, .crm-table thead tr th {
    padding-bottom: 0;
    padding-right: 30px;
}
.crm-table tbody tr td {
    vertical-align: top;
    width: 14.3%;
}

.smart-form .crm-table .input input, .crmsocial-table .input input{
    padding-left: 0 !important;
    /*border: none;*/
    background-color: transparent;
    font-weight: bold;
}
.smart-form .crm-table .textarea textarea {
    font-weight: bold;
}

.smart-form .crm-table .input input::placeholder, .crmsocial-table .input input::placeholder {
    font-weight: normal;
    font-size: 12px;
}

.messaging-template-layout {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: left;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 5px;
}

.messaging-template-layout.messaging-template-carousel .msgtemplate_container:first-child {
    /*margin-left: 30% !important;*/
}

.messaging-template-layout * {
    /*padding: 5px;*/
    cursor: pointer;
}
.msgtemplate_header,
.msgtemplate_body,
.msgtemplate_footer {
    overflow-x: hidden;
}
::-webkit-scrollbar {
    height: 8px;
    overflow: visible;
    width: 8px;
}

.crmsocial-table {
    width: 100%;
}

.crmsocial-table tbody tr td, .crmsocial-table thead tr th {
    padding-bottom: 0;
    padding-right: 10px;
    padding-left: 10px;
    vertical-align: top;
    width: 50%;
}

.crmStatusOpen {
    background-color: rgb(187 247 208);
    color: rgb(22 101 52);
}

.crmStatusClosed {
    background-color: rgb(199 210 254);
    color:rgb(55 48 163);
}

.crmStatusOverdue {
    background-color: rgb(254 202 202);
    color: rgb(153 27 27);
}

.crmStatusReopened {
    background-color: rgb(255 214 138);
    color: rgb(174 56 31);
}

body.smart-style-6 .smart-form .crm-search {
    background-color: #fff;
}

body.smart-style-7 .smart-form .crm-search {
    background-color: transparent;
}

.msgtemplate_container {
    max-width: 240px;
    width: 240px;
    border: 1px solid gray;
    border-radius: 7px;
    background-color: #ffffff;
    display: block;
    margin-top: 20px;
    min-height: 40px;
}

.msgtemplate_container .btn-1-col {
    columns:1 auto;
    column-gap:0;
}

.msgtemplate_container .btn-2-col {
    columns:2 auto;
    column-gap:0;
}

.msgtemplate_container .btn-quickreplies {
    text-align: left;
    padding: 10px 20px 0 20px;
}

.msgtemplate_container .msgtemplate_image {
    border-radius: 5px 5px 0 0;
    padding: 0;
    margin: 0;
    max-height: 240px;
    overflow:hidden;
}

.msgtemplate_container .msgtemplate_header {
    text-align: left;
    padding: 10px 20px 0 20px;
    font-weight: bold;
    font-size: 1.2em;
}

.msgtemplate_container .msgtemplate_body {
    text-align: left;
    padding: 10px 20px;
    max-height: 300px;
}

.msgtemplate_container .msgtemplate_footer {
    text-align: left;
    padding:0 20px 10px 20px;
}

.msgtemplate_container,
.msgtemplate_container .msgtemplate_buttons_container {
    color: #000 !important;
}

.msgtemplate_container .msgtemplate_buttons_container {
    border-right: 1px solid gray !important;
}

.msgtemplate_container .msgtemplate_buttons_container:last-child {
    border-right: 0px !important;
}

.msgtemplate_container .btn-1-col .msgtemplate_buttons_container {
    border-right: 0px !important;
}

.border-color-red {
    border-color: red !important;
}

.history-tl-container{
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
    margin:auto;
    display:block;
    position:relative;
}
.history-tl-container ul.tl{
    margin:20px 0;
    padding:0;
    display:inline-block;

}
.history-tl-container ul.tl li{
    list-style: none;
    margin:auto;
    margin-left:100px;
    min-height: 2.5em;
    border-left:1px dashed #86D6FF;
    padding:0 0 0px 30px;
    position:relative;
}
.history-tl-container ul.tl li.tl-item::before {
    font-family: "FontAwesomeLatest";
    font-weight: bold;
    display: block;
    position: absolute;
    text-align: center;
    top: calc(50% - 1em);
    left: -14px;
    border-radius: 50%;
    font-size: 16px;
    height: 22px;
    width: 22px;
    transition: all 500ms ease-in-out;

    content: '\f111';
    color: slategray;
    background-color: white;
    border: 1px solid slategray;
}
.history-tl-container ul.tl li.tl-item-call::before{
    content: '\f095';
    color: teal;
    background-color: white;
    border: 1px solid white;
}
.history-tl-container ul.tl li.tl-item-email::before{
    content: '\f0e0';
    color: orange;
    background-color: white;
    border: 1px solid white;
}
.history-tl-container ul.tl li.tl-item-message::before{
    content: '\f075';
    color: #00A4EF;
    background-color: white;
    border: 1px solid white;
}
.history-tl-container ul.tl li.tl-item-message-00::before{
    font-family: "FontAwesomeBrands";
    font-weight: normal;
    content: '\f232';
    color: #25D366; /*fa-whatsapp-color*/
    background-color: white;
    border: 1px solid white;
}
.history-tl-container ul.tl li.tl-item-message-01::before{
    font-family: "FontAwesomeBrands";
    font-weight: normal;
    content: '\f3c0';
    color: #00c300; /*fa-line-color*/
    background-color: white;
    border: 1px solid white;
}
.history-tl-container ul.tl li.tl-item-message-02::before{
    font-family: "FontAwesomeBrands";
    font-weight: normal;
    content: '\f1d7';
    color: #09B83E; /*fa-weixin-color*/
    background-color: white;
    border: 1px solid white;
}
.history-tl-container ul.tl li.tl-item-message-03::before{
    font-family: "FontAwesomeBrands";
    font-weight: normal;
    content: '\f39f';
    color: #0078FF; /*fa-messenger-color*/
    background-color: white;
    border: 1px solid white;
}
.history-tl-container ul.tl li.tl-item-message-04::before{
    font-family: "FontAwesomeBrands";
    font-weight: normal;
    content: '\f2c6';
    color: #6CC1E3; /*fa-telegram-color*/
    background-color: white;
    border: 1px solid white;
}
.history-tl-container ul.tl li.tl-item-message-05::before{
    content: '\f1e0';
    color: #FF4B68; /*fa-botbonnie-color*/
    background-color: white;
    border: 1px solid white;
}
.history-tl-container ul.tl li.tl-item-message-08::before{
    content: '\f7cd';
    color: #00BFFF; /*fa-sms-color*/
    background-color: white;
    border: 1px solid white;
}
.history-tl-container ul.tl li.tl-item-message-12::before{
    font-family: "FontAwesomeBrands";
    font-weight: normal;
    content: '\f16d';
    color: #E1306C; /*fa-instagram-color*/
    background-color: white;
    border: 1px solid white;
}
.history-tl-container ul.tl li.tl-item-message-14::before{
    content: '\f4ad';
    color: #6CC1E3; /*fa-webchat-color*/
    background-color: white;
    border: 1px solid white;
}
ul.tl li .item-title{
}
ul.tl li .item-detail{
    color:rgba(0,0,0,0.5);
    font-size:12px;
}
ul.tl li .timestamp{
    color: #8D8D8D;
    position: absolute;
    width:100px;
    left: -130px;
    text-align: right;
    font-size: 12px;
    top: calc(50% - 1.5em);
}
body.smart-style-7 ul.tl li .timestamp {
    color: white;
}
.scrollableActivity {
    overflow-y: scroll;
    height: 400px;
}
.loginPanel {
    display: inline-block;
    width: 360px;
    max-width: 360px;
    text-align: left;
}
.loginPanelNotice {
    display: inline-block;
    width: 360px;
    max-width: 360px;
    text-align: left;
    border-radius: 7px;
    padding: 20px !important;
    background-color: #a2e0fa;
}
.loginPanelNotice i.fas {
    font-size: 40px;
    position: absolute;
    left: -20px;
    top: 5px;
    color: #ff9d00;
}
.fa-info-circle:before {
    background: antiquewhite;
    border-radius: 50%;
}
#quote {
    font-size:1.5em;
}

.jarviswidget>div .state-chart, .state-chart thead tr, .state-chart>thead>tr>td, .state-chart>tbody>tr>td{
    font-size: 14px;
    padding: 5px 10px !important;
}

.callqueue thead tr{
    font-size: 14px;
}

.callqueue>thead>tr>th, .callqueue>tbody>tr>td {
    padding: 8px 10px !important;
}

#jarviswidget-fullscreen-mode .queue-imicon {
    top: 2.0em !important;
}

#jarviswidget-fullscreen-mode .imicon-below-avatar {
    left: calc(80px - 1em) !important;
    top: 60px;
}

#jarviswidget-fullscreen-mode .queue-campaign {
    padding-left: 15px !important;
}

.button-tagtransaction {
    background-color: #fff;
    border: 1px solid #d5d9d9;
    border-radius: 8px;
    box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
    box-sizing: border-box;
    color: #0f1111;
    cursor: pointer;
    display: inline-block;
    font-family: "Roboto", "Noto Sans SC", "Noto Sans TC", "Noto Color Emoji", sans-serif;
    font-size: 13px;
    line-height: 29px;
    padding: 0 10px 0 11px;
    position: relative;
    text-align: center;
    text-decoration: none;
    -webkit-user-select: none;
    vertical-align: middle;
}

.button-tagtransaction:hover {
    background-color: #f7fafa;
}

.login-info #feature-panic {
    position: absolute;
    right: 60px;
    margin-top: 96px;
}
.login-info #feature-panic:hover {
    cursor: pointer;
}
body.minified .login-info #feature-panic {
    display: none;
}

#recordingTag.select2-container-multi.select2-container-disabled .select2-choices{
    border: 0px;
    background-color: transparent;
}
#emailTag.select2-container-multi.select2-container-disabled .select2-choices{
    border: 0px;
    background-color: transparent;
}

#emailTag.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice{
    padding: 1px 5px !important;
}

.avatar-imtype-icon {
    position: absolute;
    bottom: 0.7em;
    left: calc(60px - 1.2em);
}

#gpt-summarize {
    margin-top: -15px;
    border: 1px solid orange;
    border-radius: 5px;
    min-height: 10em;
    color: #666666;
    background-color: lightyellow;
    padding: 20px 10px 10px 10px;
    white-space: pre-wrap;
}

.btn-opaque-50w {
    opacity: 1 !important;
    width: 50%;
}

body.smart-style-7 .kb-talk-out .talktext {
    color:#424242 !important;
}
body.smart-style-7 .kb-talk-out {
    background-color: #DCF8C6;
    margin-left: auto;
    float: right;
}
body.smart-style-7 .kb-talk-out .talktext .timestamp {
    position: absolute;
    right: 10px;
    font-size: 0.75em;
    color: #424242;
}
.kb-talk-out-avatar {
    position: absolute;
    right: -40px;
    width: 30px !important;
    height: 30px !important;
}
.kb-talk-out {
    background-color: #DCF8C6;
    margin-left: auto;
    float: right;
}
.kb-talk-out-with-avatar {
    margin-right: 50px;
}
.kb-talk-out:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -10px;
    top: 0px;
    bottom: auto;
    border: 12px solid;
    border-color: #DCF8C6 transparent transparent #DCF8C6;
}
.kb-talk-out.talk-bubble-trans {
    width: 125px;
    background-color: transparent;
}
.kb-talk-out.talk-bubble-trans:after {
    border: 0;
}
.kb-ref-superscript {
    background-color: lightblue;
    color: black;
    padding: 0 3px;
    font-weight: bold;
}
.kb-ref-list {
    margin-top: 1em;
    padding-left: 1.5em;
}
.kb-ref-list > p {
    margin: 0 0 0 -1.5em;
    font-weight: bold;
}

table[st-table]#crmlist tbody tr td {
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    vertical-align: middle;
}

div.expanded {
    overflow-y: auto;
    height: auto;
    resize: vertical;
}

div.collapsed {
    overflow: hidden;
    max-height: 30px;
    height: auto;
}

span.sticker-lang {
    position: absolute;
    background-color: darkblue;
    height: 12px;
    color: white;
    font-family: "Roboto";
    font-size:10px;
    font-weight: 900;
    padding: 1px;
}
body.smart-style-6 tr#subticketbg td{
    background-color: gray;
    color: white;
}
body.smart-style-6 p#subtickettext.text-muted, #subticketbg td a{
    color: white;
}
body.smart-style-6 #subticketbg td a:hover{
    color: #03a9f4;
}

.callback-header h2 .ticket-id-color {
    color: black;
    /* Add more styles as needed */
}

.ticket-product-badge {
    background-color: dimgray;
    color: white;
    padding: 2px 10px;
    border-radius: 3px;
}

.ticket-language-badge {
    background-color: violet;
    color: white;
    padding: 2px 10px;
    border-radius: 3px;
}

.fa-pdf-color {
    color: #b30b00;
}
.fa-csv-color,
.fa-xls-color {
    color: #117e44;
}
.fa-txt-color,
.fa-doc-color {
    color: #1d61c1;
}
/* summer note */
.dropdown-fontname {
    font-size: 1.2em;
}
.sticker-error {
    border: 1px dashed;
    padding: 5px;
    white-space: nowrap;
    text-align: center;
}
.sticker-error img {
    width: 80% !important;
}
.src-error {
    padding: 5px;
    white-space: nowrap;
    text-align: center;
}
.src-error img {
    border: 1px dashed;
    max-width: 100px !important;
    margin-top: 0.5em;
}
/* Radio Input Styles */
.radio-group {
    border: solid 1px darkgray;
    display: inline-block;
    border-radius: 30px;
    overflow: hidden;
    background: #F5F5F5;
}

.radio-group input[type="radio"] {
    position: absolute;
    visibility: hidden;
    display: none;
}

/* Label Styles */
.radio-group label {
    color: #696969;
    display: inline-block;
    cursor: pointer;
    padding: 1px 15px;
}

/* Checked Radio Label Styles */
.radio-group input[type="radio"]:checked + label {
    color: white;
    background: black;
    font-weight: bold;
    border: solid #F5F5F5;
    border-radius: 30px;
}

.ticket-progress {
    margin-bottom: 2px !important;
}

.talktext span .quickbutton {
    padding: 0 0.5em;
    border-radius: 1em;
    margin: 0.2em;
    border: 1px solid;
    display: inline-block;
    cursor: pointer;
}
.talktext span .quickbutton.fullwidth {
    display: block;
    padding: 0.5em;
    margin: 0.5em 0;
    background-color: transparent !important;
    border-color: gray !important;
    text-align: center;
}
.talktext span > p {
    white-space: pre-line;
}
/*
.talktext span .quickbutton:nth-child(5n-1) {
    background-color: #E1BEE7 !important;
    border-color: #BA68C8 !important;
}
.talktext span .quickbutton:nth-child(5n-2) {
    background-color: #BBDEFB !important;
    border-color: #64B5F6 !important;
}
.talktext span .quickbutton:nth-child(5n-3) {
    background-color: #B2DFDB !important;
    border-color: #4DB6AC !important;
}
.talktext span .quickbutton:nth-child(5n-4) {
    background-color: #F0F4C3 !important;
    border-color: #DCE775 !important;
}
.talktext span .quickbutton:nth-child(5n-5) {
    background-color: #FFE0B2 !important;
    border-color: #FFB74D !important;
}
*/

.crmclickable{
    cursor: pointer;
    border-style: none !important;
    border-top: 1px solid #ddd !important;
}

#gpt-summarize .mark, #gpt-summarize mark {
    background-color: #FFFFFF !important;
}

.customerDup th, .customerDup td {
    padding-left: 5px !important;
}

table.customerDup{
    width: 100% !important;
}

div.externalCrmSectionBox{
    margin-bottom: 5px;
    border: solid 1px #CCC !important;
}
div.externalCrmInnerSectionTitle{
    padding-top: 10px;
    margin-top: 10px;
    font-weight: bold;
    color: #3276b1;
    border-top: solid 2px #CCC !important;
}

/* collapsed navigation menu handling */
body:not(.minified) .display-minified {
    display: none;
}
body:not(.minified) .display-not-minified {
    display: inline-block;
}
body.minified .display-minified {
    display: inline-block;
}
body.minified .display-not-minified {
    display: none;
}
body.smart-style-6.minified aside > nav > ul > li > ul,
body.smart-style-7.minified aside > nav > ul > li > ul {
    top: 45px;
}
body.smart-style-6.minified aside > nav > ul > li > a,
body.smart-style-7.minified aside > nav > ul > li > a {
    padding: 1.5em 10px;
}
body.smart-style-6.minified aside > nav > ul > li > a > span.badge,
body.smart-style-7.minified aside > nav > ul > li > a > span.badge {
    position: relative;
    top: 0.5em;
    display: inline;
}
body.smart-style-6 aside > nav > ul > li.active>a:before,
body.smart-style-7 aside > nav > ul > li.active>a:before {
    top: 0.5em;
}
/* buttons in nav */
aside > nav > ul > li > ul > li > div.nav-buttons {
    height: 25px;
    padding: 7px;
    padding-left: 42px;
}
.minified aside > nav > ul > li > ul > li > div.nav-buttons {
    padding-left: 14px;
}
/* submenu panel */
.minified aside > nav > ul > li:hover > a > .menu-item-parent {
    display: none !important;
}
.minified aside > nav > ul > li[data-menu-collapse]:hover > a > .menu-item-parent {
    display: block !important;
    top: 47px !important;
    position: fixed;
    box-shadow: none;
    border: 0;
    z-index: 1000;
    padding-top: 9px;
    padding-bottom: 9px;
    width: 208px;
}
.minified aside > nav > ul > li:hover > ul {
    position: fixed;
    top: 0px !important;
    height: 100%;
    padding-top: 110px !important;
    background: white !important;
    box-shadow: 1px 0px rgba(0,0,0,.2);
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid rgb(237, 236, 236) !important;
    z-index: 900;
    width: 220px;
}
body.smart-style-7.minified aside > nav > ul > li:hover > ul {
    background-color: #000 !important;
    border-left: 1px solid #000 !important;
}
/* submenu panel PINNED */
.minified.submenu-pin aside > nav > ul > li[data-menu-collapse].active > a > .menu-item-parent {
    display: block !important;
    top: 47px !important;
    position: fixed;
    box-shadow: none;
    border: 0;
    z-index: 800;
    padding-top: 9px;
    padding-bottom: 9px;
    width: 208px;
}
.minified.submenu-pin aside > nav > ul > li[data-menu-collapse].active > ul {
    display: block !important;
    position: fixed;
    top: 0px !important;
    height: 100%;
    padding-top: 110px !important;
    background: white !important;
    box-shadow: 1px 0px rgba(0,0,0,.2);
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 1px solid rgb(237, 236, 236) !important;
    z-index: 700;
    width: 220px;
}
body.smart-style-7.minified.submenu-pin aside > nav > ul > li:hover > ul {
    background-color: #000 !important;
    border-left: 1px solid #000 !important;
}
/* pin */
.nav-pin {
    display: none;
}
.minified aside > nav .nav-pin {
    /*display: inline;*/
    float: right;
    margin-right: 15px;
}
.minified.submenu-pin aside > nav .nav-pin {
    color: red;
}
.minified.submenu-pin #main {
    margin-left: 265px;
}
.minified nav > ul.pagination > li > a > i {
    display: inline;
}

.btn-translate {
    height: 32px;
    display: inline-block;
    text-align: center;
    top: 1px;
    position: relative;
}

/* ticket styles */
.ticket-activity-list {
    width: 100%;
}
.ticket-activity-list li {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}
.ticket-activity-list li .ticket-activity-btngroup {
    display: none;
}
.ticket-activity-list li:hover .ticket-activity-btngroup {
    display: inline-block
}
.ticket-activity-list li:nth-child(2n+1) {
    background-color: #f6f6f6;
}
body.smart-style-7 .ticket-activity-list li:nth-child(2n+1) {
    background-color: #777;
}
.ticket-activity-list li .chat-body {
    width: calc(100% - 1em);
}
.ticket-activity-btngroup {
    position: absolute;
    right: 0;
    top: 0;
    background-color: lightgray;
}
body.smart-style-7 .ticket-activity-btngroup {
    background-color: #424242;
}
.ticket-activity-btngroup button {
    border: 0;
    background-color: transparent;
}
.ticket-activity-subject {
    font-weight: bold;
    color: #2196F3 !important;
}
body.smart-style-7 .ticket-activity-subject {
    font-weight: bold;
    color: white !important;
}

/* loading icon between routes */
.preloader-icon {
    margin: 0 auto;
    width: 200px;
    padding-top: calc(50vh - 1em);
    text-align: center;
}
body.smart-style-7 .preloader-icon {
    color: #777;
}
.hide-content {
    visibility: hidden;
}
.show-content {
    visibility: visible;
}

/* overrides for table row hover */
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td,
.table-striped.table-hover > tbody > tr:hover,
.table-striped.table-hover > tbody > tr:hover > td {
    background-color: #ecf3f8 !important;
    cursor: pointer;
}
body.smart-style-7 .table-hover > tbody > tr:hover,
body.smart-style-7 .table-hover > tbody > tr:hover > td,
body.smart-style-7 .table-striped.table-hover > tbody > tr:hover,
body.smart-style-7 .table-striped.table-hover > tbody > tr:hover > td,
body.smart-style-7 .table.table-hover > tbody > tr:hover .label,
body.smart-style-7 .table.table-hover > tbody > tr:hover i,
body.smart-style-7 .table.table-hover > tbody > tr:hover .input input {
    color: #333 !important;
    cursor: pointer;
}
body.smart-style-7 .table-striped.table-hover > tbody > tr:hover button.bgcolor-transparent {
    background-color: transparent !important;
    color: #424242;
}
body.smart-style-7 .btn-danger:hover {
    color: white !important;
}

/* crm */
.crm-table tbody > tr > td > div {
    padding: 3px;
}
.crm-field-title {
    font-weight: normal;
}
.padding-top-1em {
    padding-top: 1em !important;
}

textarea.resize-vertical {
    resize: vertical !important;
}

/* toggle button override */
.smart-form .toggle:hover i {
    border: 0px;
}
/* switch background */
.smart-form .toggle {
    padding-right: 31px !important;
}
.smart-form .toggle i {
    border: 0;
    top: 2px !important;
    width: 30px !important;
    height: 18px !important;
    background-color: rgb(209 213 219) !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
}
/* switch text - discard */
.smart-form .toggle i:after,
.smart-form .toggle input:checked+i:after {
    content: '';
}
/* switch slider button */
.smart-form .toggle i:before {
    right: 14px;
    height: 14px;
    width: 14px;
    top: 2px;
    background-color: white !important;
}
body.smart-style-7 .smart-form .toggle i:before {
    background-color: gray !important;
}
.smart-form .toggle input:checked+i{
    background-color: rgb(74 222 128) !important;
}
.smart-form .toggle input:checked+i:before {
    right: 2px;
    background-color: white !important;
}
body.smart-style-7 .smart-form .toggle input:checked+i:before {
    background-color: gray !important;
}

.ai-usage tbody tr:first-child {
    background-color: cornsilk ;
}

body.smart-style-7 .table.table-striped.callqueue.ai-usage > tbody > tr:first-child > th {
    background-color: cornsilk;
    color: #333;
}

.tagged-customer {
    border: 1px dashed;
    border-radius: 2em;
    padding: 0 0.5em;
    line-height: 2em;
    cursor: pointer;
}

.photo-collage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Two columns */
    grid-auto-rows: 1fr; /* Make rows proportional */
    gap: 10px; /* Space between items */
    width: 80%; /* Adjust as needed */
}

.photo-collage-grid video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the media fits nicely */
    border-radius: 5px; /* Optional: Adds rounded corners */
}

/* Fullscreen adaptation */
.photo-collage-grid video:fullscreen {
    width: auto; /* Use natural size in fullscreen */
    height: auto; /* Use natural size in fullscreen */
    object-fit: contain; /* Show the full video without cropping */
}

.ticket-photo-collage {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(150px, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
    cursor: pointer;
    width: 70%; /* Let the container take full width */
    height: auto; /* Allow height to adjust automatically */
}

.ticket-photo-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the media fits nicely */
}

.ticket-photo-collage div.morephotos {
    position: relative;
    width: 100%; /* Adjust width to match grid size */
    height: 100%; /* Adjust height to match grid size */
}

.ticket-photo-collage div.morephotos div.moreoverlay {
    z-index: 5;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: table;
    top: 0px;
}

.ticket-photo-collage div.morephotos div.moreoverlay span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 2em;
    font-weight: bold;
}

.ticket-photo-collage div.morephotos img {
    border: 1px solid lightgray !important;
    object-fit: cover;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

div#emailReplyTranslatePanel > fieldset {
    padding: 5px 10px 0px !important;
}

form#emailReplyForm > fieldset {
    padding: 14px 14px 5px !important;
}

/* Fully Green (No Overdue Tickets) */
.green-aging {
    background: #43A047 !important;
}

/* Fully Red (All Overdue Tickets) */
.red-aging {
    background: red !important;
}

/* Mixed (Overdue + Non-Overdue) */
.mixed-aging {
    background: linear-gradient(to right, red var(--overdue-percentage), #43A047 var(--non-overdue-percentage)) !important;
}

.orange-slaPerformance {
    background: #ffc40d !important;
}

table#wrapup-history thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.wrapup-diff {
    color: red;
    font-weight: bold;
}

ul.nav-tabs.bordered {
    display: flex;
    flex-flow: wrap;
}

.ticketFilterModal .modal-dialog, .customerlistModal .modal-dialog {
    max-height: 90vh; /* or adjust as needed */
    display: flex;
    flex-direction: column;
}

.ticketFilterModal .modal-content, .customerlistModal .modal-content {
    flex: 1 1 auto;
    overflow-y: auto;
}

.ticketSearchAnalyticsModal .modal-content {
    max-height: calc(100vh - 60px);  /* leave room for modal margins */
    overflow-y: auto;                 /* <-- the scrollbar you want */
    overflow-x: hidden;
}

.ticketSearchAnalyticsModal .ui-select-container.open .ui-select-dropdown {
    position: static !important;  /* was absolute */
    width: 100%;
}

.ticketSearchAnalyticsModal .ui-select-container.open .ui-select-choices,
.ticketSearchAnalyticsModal .ui-select-container.open .ui-select-choices-content {
    overflow: auto;
}

/*.oc-hover-card{width:420px;max-width:calc(100vw - 24px);background:#fff;border:1px solid #E5E7EB;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:12px 14px;animation:ocFade .12s ease-out;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.oc-hover-card__header{margin-bottom:8px}
.oc-hover-card__title{font-weight:600;font-size:14px;margin-bottom:4px}
.oc-hover-card__meta{font-size:12px;color:#374151;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.oc-hover-card__body .label{font-size:11px;color:#6B7280;margin-top:8px}
.oc-hover-card__body .text{font-size:13px;color:#111827;line-height:1.35}
.oc-hover-card__loading,.oc-hover-card__error{font-size:12px;color:#6B7280;padding:6px 0}
.badge{padding:2px 6px;border-radius:6px;background:#F3F4F6;font-weight:600}
.badge.p-High{background:#FEE2E2;color:#991B1B}.badge.p-Medium{background:#FEF3C7;color:#92400E}.badge.p-Low{background:#ECFDF5;color:#065F46}
.dot{width:4px;height:4px;background:#9CA3AF;border-radius:50%;display:inline-block}
@keyframes ocFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}*/

.osm-map-view {
    min-height: 180px;
    height: 180px;
    width: 100%;
}

/*---------- Overwrite Bootstrap 5 stylings ---------------------*/
body.smart-style-6 .dropdown-menu,
body.smart-style-7 .dropdown-menu {
    opacity: unset;
}
.nav-item:has(a.active) {
    -webkit-box-shadow: 0 2px 0 #E91E63;
    -moz-box-shadow: 0 2px 0 #E91E63;
    box-shadow: 0 2px 0 #E91E63;
    z-index: 10;
    border-top-width: 0 !important;
    margin-top: 1px !important;
    font-weight: 700;
    border: 1px solid #ddd;
    border-bottom: 0;
}
.nav-link {
    padding: 8px !important;
    border: 0 !important;
    cursor: pointer;
}
.nav-link:hover {
    border-radius: 0;
}
.nav-link.active {
    border-radius: 0;
    margin: 0;
}
.popover.fade {
    opacity: unset;
}
.popover-header {
    font-size: 1.1em;
    margin: 0;
}
.row:has(article) {
    display: block !important;
}
.row section.pull-right {
    float: unset;
    display: flex;
    justify-content: right;
}
.widget-toolbar-right {
    display: inline-block;
    padding: 5px;
    float: right;
}
.widget-toolbar-right > * {
    float: right;
}
.modal-header {
    display: inline-block;
    width: 100%;
}
.smart-accordion-default .panel-default>.panel-heading {
    cursor: pointer;
}
.smart-form .row {
    display: block;
}
.smart-form .note-btn {
    padding: 5px 10px !important;
}
.profile-pic {
    text-align: unset;
}
.btn-group.no-border .btn {
    border: 0;
}
.show {
    opacity: 1 !important;
}
/* remove dropdown default caret - phone controls */
.btn-phone-control.dropdown-toggle-split::after {
    display: none;
}
/* remove dropdown default caret - summernote lite */
.note-btn.dropdown-toggle::after {
    display: none;
}
/* remove dropdown default caret - messaging */
.btn-messaging.dropdown-toggle-split::after {
    display: none;
}

/* summernote editor background */
body.smart-style-6 .inbox-message {
    background-color: white;
}
body.smart-style-6 .note-editor .note-editable,
body.smart-style-6 .note-editor .note-editable:focus {
    background-color: white;
}
body.smart-style-7 .wrapup-diff {
    font-weight: bold;
    color: #ea9999
}
/*---------- END of Overwrite Bootstrap 5 stylings --------------*/