.refresh-button {
    position: relative;
    top: 5px;
}

.refresh-button i {
    font-size: 20px;
    cursor: pointer;
}

#online-status-toggle {
    margin-right: 1em;
    cursor: pointer;
    margin-bottom: 0;
    margin-left: 0.5em;
}

#online-status-toggle i {
    padding-right: 0.5em;
}

#online-status-toggle .status-online {
    color: green;
}

#online-status-toggle .status-offline {
    color: red;
}

#optionstemp {
    font-family: monospace;
}

div#online-status-toggle {
    margin-right: 15px;
    cursor: pointer;
}

div#online-status-toggle i {
    margin-right: 5px;
}

.fa-circle.status-offline::before {
    color: red !important;
}

.fa-circle.status-online::before {
    color: green;
}
.chat-conversation__receiver .chat-conversation__bubble {
    background-color: #ff6a10 !important;
}

.chat-conversation__receiver .chat-conversation__bubble:before {
    border-color: transparent #ff6a10 transparent transparent !important;
}

.chat-container.chat {
    max-width: 1220px;
    margin: 0 auto;
}

.chat__person-box-talking-to {
    font-size: 14px;
    max-width: 96%;
    text-transform: capitalize;
}

.chat__person-box-name {
    font-weight: 800;
}

#enabled-notifications-denied .notification-error {
    color: red;
    padding-right: 0.5em;
}

div#enabled-notifications-denied {
    margin-right: 15px;
}

#enabled-notifications-toggle .notification-bell {
    color: #d4af37;
    padding-right: 0.5em;
}

div#enabled-notifications-toggle {
    margin-right: 15px;
    cursor: pointer;
}

.chat__person-box.chat__person-box-orphaned {
    opacity: 25%;
}

.form-control-label {
    text-align: right;
    padding-right: 25px;
    flex: 0 0 33.333333%;
}

#translation-settings-page .form-control-label {
    text-align: right;
    padding-right: 25px;
    flex: 0 0 33.333333%;
}

#translation-settings-page .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

#translation-settings-page .form-control {
    padding: .375rem .4375rem;
}

#translation-settings-page .form-text {
    color: #6c868e;
    font-size: .75rem;
}

#translation-settings-page .page-seperator-header {
    padding: 0.45rem 0;
}

#operatingtimes-page .form-control.time-selection {
    max-width: 6em;
    min-width: 6em;
}
  
#operatingtimes-page .span-label-isopen-today {
    padding-right: 0.5em;
}
  
#operatingtimes-page .form-control-label {
    text-align: right;
    padding-right: 25px;
    flex: 0 0 33.333333%;
}

#operatingtimes-page .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

#operatingtimes-page .form-control {
    padding: .375rem .4375rem;
}

#operatingtimes-page .form-text {
    color: #6c868e;
    font-size: .75rem;
}

#operatingtimes-page .page-seperator-header {
    padding: 0.45rem 0;
}

span.chat-name-header {
    font-size: 0.675rem;
    font-weight: 800;
    opacity: 0.8;
}

.chat__area-media-btn.mr-2.isRecording {
    background-color: red;
    color: white;
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 1);
    animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
    0% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }
    
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
    }
    
    100% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

input.chat-input-text.recordingBar {
    background: #ffabab;
}

.pin-conv-icon {
    min-height: 20px;
    margin-left: auto;
    min-width: 15px;
    margin-right: 8px;
}

.pin-conv-icon i {
    display: none;
    font-size: 18px;
    opacity: 0.5;
}

.chat__person-box:hover .pin-conv-icon i {
    display: inline-block;
}

ul.nav-tabs {
    display: flex;
}

ul.nav-tabs li {
    flex: 25%;
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    border-bottom-color: #fff;
}

ul.nav-tabs .nav-link.active {
    border-color: rgb(235, 235, 235);
    border-top: 3px solid green;
    border-bottom-color: #fff;
}

ul.nav-tabs .nav-link.active:focus {
    border-color: rgb(235, 235, 235);
    border-top: 3px solid green;
    border-bottom-color: #fff;
}

.tab-content .tab-pane {
    padding: 0;
}

.tab-content {
    border-left: initial;
    border-right: initial;
    border-bottom: none;
    border-top-color: rgb(235, 235, 235);
}

.chat__person-box-msg-time {
    text-align: right;
}

.chat__people-wrapper-button .icon-speech {
    color: black;
    margin-right: 0.5em;
}

i.nav-icon.icon-speech {
    background: green;
    padding: 10px;
    border-radius: 50%;
    color: #fff;
}

div#chatPeopleBody div.tabs ul li a.tab-external {
    background: #ff6a10;
    color: #fff;
}

div#chatPeopleBody div.tabs ul li a.tab-pinned {
    background: #530b80;
    color: #fff;
}

div#chatPeopleBody div.tabs ul li a.tab-internal {
    background: green;
    color: #fff;
}

div#chatPeopleBody div.tabs ul li a.tab-groups {
    background: #20a8d8;
    color: #fff;
}

#chatPeopleBody .nav-tabs .nav-link {
    opacity: 0.5;
}

#chatPeopleBody .nav-tabs .nav-link.active {
    opacity: 1;
}

span.phonepad-tag-object {
    padding: 0.25em 0.5em;
    border-radius: 5px;
    margin-right: 5px;
    font-size: 9pt;
}

span.cl-status {
    padding: 0.25em 0.5em;
    border-radius: 5px;
    margin-right: 5px;
    font-size: 9pt;
    min-width: 72px;
}

span.cl-status.broadcast {
    background-color:#530b80;
    color:white;
    display: block;
    text-align: center;
}

span.cl-status.broadcast-read {
    background-color:#530b8080;
    color:white;
    display: block;
    text-align: center;
}

span.cl-status.unread {
    background-color:#ff6a10;
    color:white;
    display: block;
    text-align: center;
}

span.cl-status.unread.reply {
    background-color:#f2d600;
    color:black;
    display: block;
    text-align: center;
}

span.cl-status.seen {
    background-color:#ff6a1080;
    color:white;
    display: block;
    text-align: center;
}

span.cl-status.complete {
    background-color:#01B887;
    color:white;
    display: block;
    text-align: center;
}

span.cl-status.archived {
    background-color:#2C3E50;
    color:white;
    display: block;
    text-align: center;
}

.phonepad-header-row {
    margin-bottom: 1em;
}

.cl-see-more a.dropdown-item {
    text-align: center;
    padding: 10px 10px !important;
}

.cl-see-more-message {
    color: gray;
}

.cl-status-box {
    display: inline-block;
}

.cl-data-box {
    display: inline-block;
    min-width: 200px;
    max-width: 200px;
}

.cl-notification-user {
    font-size: 8pt;
    font-weight: 800;
    color: gray;
}

.cl-notification-message {
    font-size: 10pt;
}

.cl-status-box .cl-status {
    display: table;
    margin: 0 10px 0 auto;
}

.cl-notification-time {
    display: inline-block;
    font-size: 9pt;
    color: gray;
}

.call-indicator-icon {
    font-size: 12pt;
    display: inline-block;
}

.broadcast-notification-counter {
    display: inline-block;
    font-size: 11pt;
    font-weight: 800;
}

.broadcast-indicator-icon {
    font-size: 12pt;
    display: inline-block;
}

.call-notification-counter {
    display: inline-block;
    font-size: 11pt;
    font-weight: 800;
}

#broadcast-dropdown.has-notify button {
    background: #530b80 !important;
    border-color: #530b80 !important;
    color: white !important;
    animation: pulse-notify 2s infinite;
}

#notification-dropdown.has-notify button {
    background: #ff6a10 !important;
    border-color: #ff6a10 !important;
    color: white !important;
    animation: pulse-broadcast 2s infinite;
}

@keyframes pulse-notify {
    0% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(83, 11, 128, 0.7);
    }
    
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(83, 11, 128, 0);
    }
    
    100% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(83, 11, 128, 0);
    }
}

@keyframes pulse-broadcast {
    0% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(255, 106, 16, 0.7);
    }
    
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(255, 106, 16, 0);
    }
    
    100% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(255, 106, 16, 0);
    }
}

.display-cl-left {
    display: inline-block;
}

.display-cl-data-box {
    display: inline-block;
}

.display-cl-left span span.cl-status {
    display: table;
    margin: 0 10px 0 auto;
}

.display-cl-data-name {
    font-size: 10pt;
    font-weight: 800;
    color: gray;
}

.display-cl-data-subject {
    font-size: 14pt;
}

.display-cl-time-box {
    float: right;
    padding-top: 16px;
}

.display-cl-time {
    font-size: 10pt;
    color: gray;
}

.display-cl-tag-data-box {
    padding-bottom: 20px;
}

.display-cl-message-data-box {
    overflow: auto;
    min-height: 15em;
}

.display-cl-quickreply label {
    margin-right: 1em;
}

.display-cl-quickreply input {
    margin-right: 0.5em;
}

.display-cl-actions {
    margin-left: auto;
}

.card-footer {
    padding: 12px;
}

#display-cl-reply-card .display-cl-message-data-box {
    overflow: auto;
    min-height: initial;
}

.display-cl-message-data-box.is_reply {
    overflow: auto;
    min-height: initial;
}

.display-cl-replies {
    padding: 25px;
    padding-bottom: 0;
}

.display-cl-contact-details {
    display: inline-block;
    margin-right: 1em;
}

span.display-cl-contact-detail {
    clear: left;
    float: left;
    margin-bottom: 0.25em;
}

span.display-cl-contact-detail i {
    margin-right: 1em;
    width: 12px;
}

.chat__person-box .pin-conv-icon .fa-flag::before {
    content: "";
    background-image: url('http://zoomedia.co.za/gho-pin.png');
    height: 20px;
    width: 20px;
    display: block;
    position: absolute;
    bottom: 15px;
    right: 40px;
    background-size: cover;
    opacity: 1;
}

.chat__person-box .pin-conv-icon .fa-flag-o::before {
    content: "";
    background-image: url('http://zoomedia.co.za/gho-pin-no.png');
    height: 20px;
    width: 20px;
    display: block;
    position: absolute;
    bottom: 15px;
    right: 20px;
    background-size: cover;
    opacity: 1;
}

.chat__person-box-name .fa-flag::before {
    content: "";
    background-image: url('http://zoomedia.co.za/gho-pin.png');
    height: 15px;
    width: 15px;
    display:inline-block;
    position: relative;
    background-size: cover;
    opacity: 1;
    margin-left: 5px;
}

.btn.btn-success.btn-add i {
    pointer-events: none;
}

span.tab-message-counter {
    background: white;
    font-weight: 800;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    text-align: center;
    margin-left: auto;
}

span.tab-message-counter.external {
    color: #ff6a10;
}

span.tab-message-counter.internal {
    color: green;
}

span.tab-message-counter.groups {
    color: #20a8d8;
}

span.tab-message-counter.pinned {
    color: #530b80;
}

.toasted {
    border-radius: 5px !important;
}

.toasted.note-toast {
    background: #3F51B5D0 !important;
    color: white !important;
}

.toasted.message-toast {
    background: #f1f1f1 !important;
    border: 1px solid #ff6a10;
    color: #ff6a10 !important;
}

.toasted.message-toast.initial {
    background: #ff6a10 !important;
    color: white !important;
}

.toasted.message-toast .action.ripple {
    color: #ff6a10 !important;
    font-weight: 800;
}

.toasted.message-toast.initial .action.ripple {
    color: white !important;
    font-weight: 800;
}

.toasted.broadcast-toast {
    background: #530b80 !important;
    color: white;
}

.toasted.broadcast-toast .action.ripple {
    color: white;
    font-weight: 800;
}


.toasted.cl-toast {
    background: #ff6a10 !important;
    color: white;
}

.toasted.cl-toast-urgent {
    background: #E74C3C !important;
    color: white;
}

.toasted.cl-reply-toast {
    background: #f2d600 !important;
    color: black !important;
}

.toasted.cl-toast .action.ripple {
    color: white;
    font-weight: 800;
}

.toasted.cl-toast-urgent .action.ripple {
    color: white;
    font-weight: 800;
}

.navbar-brand-logoonly {
    display: none;
}

.toasted.cl-reply-toast .action.ripple {
    color: black;
    font-weight: 800;
}

button.d-md-down-none.navbar-toggler::after {content: "menu";padding-right: 5px;text-transform: capitalize;position: relative;top: 2px;color: #fff;}

button.d-md-down-none.navbar-toggler {
    background-color: green;
    border: 1px solid #014601;
}

.app-header .navbar-toggler-icon::before {content: "\f0c9";font-family: 'FontAwesome';color: #fff;font-size: 21px;position: relative;top: 1px;}

.app-header .navbar-toggler-icon {
    background: transparent !important;
}

#broadcasts-table_wrapper {
    overflow-y: auto;
}

#phonepads-table_wrapper {
    overflow-y: auto;
}

#user-table_wrapper {
    overflow-y: auto;
}

#usergroup-table_wrapper {
    overflow-y: auto;
}

#contacts-table_wrapper {
    overflow-y: auto;
}

/*  FIX THE NASTY ICON ALIGNMENT
*/
.mr-3.align-middle {
    min-width: 20px;
    text-align: center;
}

.dropdown-toggle:after {
    margin-left: 0.75em;
}

.bulk-action-box {
    margin-bottom: 1em;
    float: right;
}

a.nav-link.header-title {
    background: #00000050;
}

a.nav-link.sub-menu {
    padding: 0.25rem 1rem;
    background: #FFFFFF30;
}

div.ck.ck-reset.ck-editor.ck-rounded-corners {
    width: calc(100% - 2em);
}

.btn-newpad {
    background: #ff6a10;
    border-color: #ff6a10;
}

.btn-newpad:hover {
    background: #b34400;
    border-color: #b34400;
}

.btn-broadcast {
    background: #530b80;
    border-color: #530b80;
}

.btn-broadcast:hover {
    background: #2e0646;
    border-color: #2e0646;
}

.btn-archive {
    background: #2C3E50;
    border-color: #2C3E50;
}

.btn-archive:hover {
    background: #1b2631;
    border-color: #1b2631;
}

div#phonepads-table_wrapper::-webkit-scrollbar {
    height: 16px;
}

div#phonepads-table_wrapper::-webkit-scrollbar-track-piece {
    background-color: #ff6a100D;
    border-radius: 3px;
}

div#phonepads-table_wrapper::-webkit-scrollbar-thumb {
    background-color: #ff6a10;
    border-radius: 3px;
}

div#broadcasts-table_wrapper::-webkit-scrollbar {
    height: 16px;
}

div#broadcasts-table_wrapper::-webkit-scrollbar-thumb {
    background-color: #530b80;
    border-radius: 3px;
}

div#broadcasts-table_wrapper::-webkit-scrollbar-track-piece {
    background-color: #530b800D;
    border-radius: 3px;
}

div#user-table_wrapper::-webkit-scrollbar {
    height: 16px;
}

div#user-table_wrapper::-webkit-scrollbar-track-piece {
    background-color: #3498D80D;
    border-radius: 3px;
}

div#user-table_wrapper::-webkit-scrollbar-thumb {
    background-color: #3498D8;
    border-radius: 3px;
}

div#usergroup-table_wrapper::-webkit-scrollbar {
    height: 16px;
}

div#usergroup-table_wrapper::-webkit-scrollbar-track-piece {
    background-color: #530b800D;
    border-radius: 3px;
}

div#usergroup-table_wrapper::-webkit-scrollbar-thumb {
    background-color: #530b80;
    border-radius: 3px;
}

div#contacts-table_wrapper::-webkit-scrollbar {
    height: 16px;
}

div#contacts-table_wrapper::-webkit-scrollbar-track-piece {
    background-color: #4dbd740D;
    border-radius: 3px;
}

div#contacts-table_wrapper::-webkit-scrollbar-thumb {
    background-color: #4dbd74;
    border-radius: 3px;
}

.sidebar-minimized .nav .nav-link.sub-menu {
    padding: 5px 0 5px 15px;
    background: #2f353a !important;
}

.sidebar-minimized .sidebar .nav-item:hover>.nav-link:hover {
    color: #ff6a10;
}

.sidebar .nav-link.active .fa, .sidebar .nav-link.active i {
    color: #ff6a10 !important;
}

.sidebar-minimized .sidebar .nav-item:hover>.nav-link {
    background: #3a4248;
}

.sidebar .nav-link.active {
    color: #fff;
    background: #3a4248 !important;
}

.sidebar-minimized a.navbar-brand-logoonly {
    display: block;
}

.sidebar-minimized a.navbar-brand {
    display: none;
}

.sidebar-minimized a.navbar-brand-logoonly img {
    width: 50px;
}

header button.d-md-down-none.navbar-toggler {
    display: none;
}

#notification-config-table.table td {
    padding: 0.75rem;
    vertical-align: middle;
    border-top: 1px solid #c8ced3;
}

#notification-config-table.table th {
    text-align: center;
}

#notification-config-table.table tr td:nth-child(2) {
    text-align: center;
}

#notification-config-table.table tr td:nth-child(3) {
    text-align: center;
}

#notification-config-table.table tr td:nth-child(4) {
    text-align: center;
}

#notification-config-table.table tr td:nth-child(5) {
    text-align: center;
}

nav.sidebar-nav .admin-configuration a.nav-link {
    background: #3a4248;
    border-bottom: 1px solid #2c3135;
}

nav.sidebar-nav .admin-configuration a.nav-link:hover {
    background: #3a4248;
    color: #ff6a10;
}

.sidebar-minimized .sidebar .nav-item:hover>.nav-link {
    border-bottom: 1px solid #2c3135;
}

.chat-profile__group_member img {
    border-radius: 50%;
    width: 32px;
    margin-right: 1em;
}

.chat-profile__member_container {
    padding: 0.25em 1em;
}

.chat-profile__members {
    overflow-x: auto;
    height: 300px;
}

div#message-dropdown button {
    width: 40px;
    height: 38px;
}

div#message-dropdown button.has-notify {
    background: #E74C3C !important;
    border-color: #E74C3C !important;
    color: white !important;

    box-shadow: 0 0 0 0 #E74C3C;
    animation: pulse-red 2s infinite;
}

.admin-impersonate-user.pull-right {
    margin-right: 0.5em;
}

#activity-page .mt-70 {
    margin-top: 70px
}

#activity-page .mb-70 {
    margin-bottom: 70px
}

#activity-page .card {
    box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
    border-width: 0;
    transition: all .2s
}

#activity-page .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(26, 54, 126, 0.125);
    border-radius: .25rem
}

#activity-page .card-body {
    flex: 1 1 auto;
    padding: 1.25rem
}

#activity-page .vertical-timeline {
    width: 100%;
    position: relative;
    padding: 1.5rem 0 1rem
}

#activity-page .vertical-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 143px;
    height: 100%;
    width: 4px;
    background: #e9ecef;
    border-radius: .25rem
}

.vertical-timeline-element {
    position: relative;
    margin: 0 0 1rem
}

#activity-page .badge {
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#activity-page .badge-warning {
    color: #212529;
    background-color: #ffc107;
}

#activity-page .badge-danger {
    color: #fff;
    background-color: #f86c6b;
}

#activity-page .badge-primary {
    color: #fff;
    background-color: #20a8d8;
}

#activity-page .badge-success {
    color: #fff;
    background-color: #4dbd74;
}

#activity-page .badge-phonepad {
    color: #fff;
    background-color: #ff6a10;
}

#activity-page .badge-broadcast {
    color: #fff;
    background-color: #530b80;
}

#activity-page .badge-auth {
    color: #fff;
    background-color: #20a8d8;
}

#activity-page .badge-chat {
    color: #fff;
    background-color: #ffc107;
}

#activity-page .badge-switchboard {
    color: #fff;
    background-color: #ffc107;
}

#activity-page .badge-user {
    color: #fff;
    background-color: #4dbd74;
}

#activity-page .badge-cron {
    color: #fff;
    background-color: #000000;
}

#activity-page .vertical-timeline--animate .vertical-timeline-element-icon.bounce-in {
    visibility: visible;
    animation: cd-bounce-1 .8s
}

#activity-page .vertical-timeline-element-icon {
    position: absolute;
    top: 0;
    left: 136px
}

#activity-page .vertical-timeline-element-icon .badge-dot-xl {
    box-shadow: 0 0 0 5px #fff
}

#activity-page .badge-dot-xl {
    width: 18px;
    height: 18px;
    position: relative
}

/* #activity-page .badge:empty {
    display: none
} */

#activity-page .badge-dot-xl::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: .25rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -5px 0 0 -5px;
    background: #fff
}

#activity-page .vertical-timeline-element-content {
    position: relative;
    margin-left: 168px;
    font-size: .8rem
}

#activity-page .vertical-timeline-element-content .timeline-title {
    font-size: .8rem;
    text-transform: uppercase;
    margin: 0 0 .5rem;
    padding: 2px 0 0;
    font-weight: bold
}

#activity-page .vertical-timeline-element-content .vertical-timeline-element-date {
    display: block;
    position: absolute;
    left: -160px;
    top: 0;
    padding-right: 10px;
    text-align: right;
    color: #adb5bd;
    font-size: .7619rem;
    white-space: nowrap;
    width: 125px;
}

#activity-page .vertical-timeline-element-content:after {
    content: "";
    display: table;
    clear: both
}

#activity-page .timeline-empty {
    font-size: 17px;
    text-align: center;
}

#activity-page .timeline-empty .fa {
    color: #f5981c;
}

.page-to-top-floater {
    position: fixed;
    display: block;
    width: 48px;
    height: 48px;
    background: #ff6a10;
    text-align: center;
    line-height: 48px;
    color: white;
    border-radius: 50%;
    font-size: 15pt;
    right: 30px;
    bottom: 75px;
    box-shadow: 0 0 5px 0px #606060;
    cursor: pointer;
    z-index: 20000;
}

.chat__person-box.chat-internal {
    background: #e7fcef;
}

.chat__person-box.chat-internal.chat__person-box--active {
    background: #D3FFE5;
}

.chat__person-box.chat-internal:before {
    background-color: green;
}

.chat__person-box.chat-external {
    background: #f8ede5;
}

.chat__person-box.chat-external.chat__person-box--active {
    background: #fdeadc;
}

.chat__person-box.chat-external:before {
    background-color: #ff6a10;
}

.chat__person-box.chat-group {
    background: #f4fcff;
}

.chat__person-box.chat-group.chat__person-box--active {
    background: #e1f7ff;
}

.chat__person-box.chat-group:before {
    background-color: #20a8d8;
}

.row.bulksms-row {
    margin-left: 15px !important;
    margin-right: 15px !important;
}

#contacts-table td {
    white-space: break-spaces !important;
}

#phonepads-table td {
    white-space: break-spaces !important;
}

#broadcasts-table td {
    white-space: break-spaces !important;
}

span.more-numbers {
    float: right;
    width: 24px;
    height: 24px;
    background: green;
    color: white;
    text-align: center;
    line-height: 24px;
    border-radius: 50%;
    cursor: pointer;
}

span.more-numbers i {
    pointer-events: none;
}

a.nav-link.sub-menu .mr-3 {
    margin-right: 30px !important;
}

.multiselect__content-wrapper {
    width: initial !important;
    min-width: 300px;
}

.chat-conversation__bubble-text .word-break {
    font-size: 12pt;
}

.ui-autocomplete {
    z-index: 100000 !important;
}

body.app .page-container {
    padding: 5px;
    padding-top: 42px;
}

.app-header .dropdown-item {
    width: auto !important;
    min-width: auto !important;
}

.b-nav-dropdown.show a.dropdown-item:hover {
    background: #ff6a10;
    color: #fff;
    border-radius: 0;
}

.b-nav-dropdown.show a.dropdown-item:hover i {
    color: #fff;
}

.b-nav-dropdown.show .dropdown-header {
    background: #20a8d8;
    color: #fff;
    text-transform: uppercase;
    border: 0;
}

.app.sidebar-minimized .sidebar .nav-item .nav-link:hover {
    background: #20a8d8;
    color: #fff;
}

.app.sidebar-minimized .sidebar .nav-item .nav-link.sub-menu:hover {
    background: #20a8d8 !important;
}

.app.sidebar-minimized .sidebar .nav-item .nav-link.active:hover {
    background: #20a8d8 !important;
}

.chat__person-box-avtar img {
    border-radius: 5%;
}

.img-avatar, .avatar > img, .img-circle { 
    border-radius: 5%;
}

.chat__person-box-status {
    border-radius: 20%;
}

.user-avatar-img {
    border-radius: 5%;
}

.chat-container.chat {
    max-width: initial;
}

.chat-conversation__avatar {
    border-radius: 5%;
}

.chat__area-header-avatar {
    border-radius: 5%;
}

.version-colour-box {
    width: 10px;
    height: 47px;
    position: fixed;
    right: 1px;
}

.chat-conversation__sender .chat-container__read-status--read {
    color: #ff6a10;
}

.clear-search-button {
    cursor: pointer;
}

.clear-search-button:hover {
    color: #E74C3C;
}

body.app .chat__inner {
    height: calc(100vh - 152px) !important;
}

.body-application {
    width: 100%;
    max-height: calc(100vh - 73px);
}

/*
    TABS
*/

.tab-body-header {
    position: fixed;
    margin-left: 200px;
    background: #c8ced3;
    width: calc(100% - 200px);
    height: 36px;
    z-index: 1;
    white-space: nowrap;
}

div.btn.btn-application-tab {
    font-size: 12px;
    border: 1px solid white;
    text-align: left;
    min-width: 80px;
    margin-top: 2px;
    margin-left: 3px;
    cursor: pointer;
}

div.btn.btn-application-tab.new-tab {
    min-width: initial;
    background: white;
}

div.btn.btn-application-tab.new-tab .close-tab-button {
    margin-left: initial;
}

div.btn.btn-application-tab .close-tab-button:hover {
    color: #E74C3C;
}

div.btn.btn-application-tab.conversations {
    background: #f2d600;
    color: black;
}

div.btn.btn-application-tab.conversations.has-notify {
    box-shadow: 0 0 0 0 rgba(242, 214, 0, 1);
    animation: pulse-red 2s infinite;
}

div.btn.btn-application-tab.clinbox, div.btn.btn-application-tab.clsent, div.btn.btn-application-tab.clarchived {
    background: #ff6a10;
    color: white;
}

div.btn.btn-application-tab.clinbox.has-notify, div.btn.btn-application-tab.clsent.has-notify, div.btn.btn-application-tab.clarchived.has-notify {
    box-shadow: 0 0 0 0 rgba(255, 106, 16, 1);
    animation: pulse-orange 2s infinite;
}

div.btn.btn-application-tab.brinbox, div.btn.btn-application-tab.brsent, div.btn.btn-application-tab.brarchived {
    background: #530b80;
    color: white;
}

div.btn.btn-application-tab.brinbox.has-notify, div.btn.btn-application-tab.brsent.has-notify, div.btn.btn-application-tab.brarchived.has-notify {
    box-shadow: 0 0 0 0 rgba(83, 11, 128, 1);
    animation: pulse-purple 2s infinite;
}

div.btn.btn-application-tab.users, div.btn.btn-application-tab.usergroups {
    background: #20a8d8;
    color: white;
}

div.btn.btn-application-tab.notes {
    background: black;
    color: white;
}

div.btn.btn-application-tab.users.has-notify, div.btn.btn-application-tab.usergroups.has-notify {
    box-shadow: 0 0 0 0 rgba(32, 168, 216, 1);
    animation: pulse-blue 2s infinite;
}

div.btn.btn-application-tab.contacts {
    background: #4dbd74;
    color: white;
}

div.btn.btn-application-tab.contacts.has-notify {
    box-shadow: 0 0 0 0 rgba(77, 189, 116, 1);
    animation: pulse-green 2s infinite;
}

div.btn.btn-application-tab {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.4);
}

div.btn.btn-application-tab.selected {
    box-shadow: initial;
}

/*
    TAB OVERFLOW
*/

#tab-overflow-dropdown .tab-item {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.4);
}

#tab-overflow-dropdown .tab-item.selected {
    box-shadow: initial;
}

#tab-overflow-dropdown .tab-item.conversations {
    background: #f2d600;
    color: black;
}

#tab-overflow-dropdown .tab-item.conversations.has-notify {
    box-shadow: 0 0 0 0 rgba(242, 214, 0, 1);
    animation: pulse-yellow 2s infinite;
}

#tab-overflow-dropdown .tab-item.clinbox, #tab-overflow-dropdown .tab-item.clsent, #tab-overflow-dropdown .tab-item.clarchived {
    background: #ff6a10;
    color: white;
}

#tab-overflow-dropdown .tab-itemclinbox.has-notify, #tab-overflow-dropdown .tab-item.clsent.has-notify, #tab-overflow-dropdown .tab-item.clarchived.has-notify {
    box-shadow: 0 0 0 0 rgba(255, 106, 16, 1);
    animation: pulse-orange 2s infinite;
}

#tab-overflow-dropdown .tab-item.brinbox, #tab-overflow-dropdown .tab-item.brsent, #tab-overflow-dropdown .tab-item.brarchived {
    background: #530b80;
    color: white;
}

#tab-overflow-dropdown .tab-item.brinbox.has-notify, #tab-overflow-dropdown .tab-item.brsent.has-notify, #tab-overflow-dropdown .tab-item.brarchived.has-notify {
    box-shadow: 0 0 0 0 rgba(83, 11, 128, 1);
    animation: pulse-purple 2s infinite;
}

#tab-overflow-dropdown .tab-item.users, #tab-overflow-dropdown .tab-item.usergroups {
    background: #20a8d8;
    color: white;
}

#tab-overflow-dropdown .tab-item.users.has-notify, #tab-overflow-dropdown .tab-item.usergroups.has-notify {
    box-shadow: 0 0 0 0 rgba(32, 168, 216, 1);
    animation: pulse-blue 2s infinite;
}

#tab-overflow-dropdown .tab-item.contacts {
    background: #4dbd74;
    color: white;
}

#tab-overflow-dropdown .tab-item.contacts.has-notify {
    box-shadow: 0 0 0 0 rgba(77, 189, 116, 1);
    animation: pulse-green 2s infinite;
}

.close-tab-button {
    display: inline-block;
    margin-left: 0.5em;
    cursor: pointer;
}

.close-tab-button-overflow {
    position: absolute;
    right: -5px;
    top: 10px;
    cursor: pointer;
}

.close-tab-button-overflow:hover {
    color: #E74C3C;
}

html {
    overflow: hidden !important;
}

.sidebar-minimized .tab-body-header {
    margin-left: 50px;
    width: calc(100% - 50px);
}

#notification-dropdown .dropdown-item {
    padding: initial;
}

#broadcast-dropdown .dropdown-item {
    padding: initial;
}

.dev-environment {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    font-weight: 800;
    color: white;
    z-index: 200;
    background: red;
    line-height: 14px;
    padding: 5px;
    opacity: 75%;
    border-radius: 5px;
}

div#tab-overflow-dropdown {
    position: absolute;
    z-index: 200;
    right: 0;
}

div#tab-overflow-dropdown button {
    border-radius: initial;
}

#tab-overflow-dropdown .dropdown-item {
    padding: initial;
}

#tab-overflow-dropdown .dropdown-item div.tab-item {
    padding: 3px 6px;
}

#tab-overflow-dropdown ul {
    overflow-y: scroll;
    max-height: calc(100vh - 200px);
}

a#overlayUserId {
    position: absolute;
    left: calc(100vw - 32px);
    top: 32px;
    background: #530b80;
    color: white;
    width: 30px;
    height: 20px;
    text-align: center;
    border-radius: 10px;
    z-index: 5;
    border: 2px white solid;
    line-height: 16px;
    font-size: 12px;
    vertical-align: middle;
}

#notepad-page div.ck.ck-reset.ck-editor.ck-rounded-corners {
    width: 100%;
}

#notepad-page .ck-content {
    height: calc(100vh - 290px);
    min-height: 0;
}

:root {
    --borderWidth: 3px;
    --height: 14px;
    --width: 6px;
    --borderColor: #e4e5e6;
}

.check {
    display: inline-block;
    transform: rotate(45deg);
    height: var(--height);
    width: var(--width);
    border-bottom: var(--borderWidth) solid var(--borderColor);
    border-right: var(--borderWidth) solid var(--borderColor);
}

.check.left-closer {
    position: relative;
    left: -5px;
}

@keyframes pulse-yellow {
    0% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(242, 214, 0, 0.7);
    }
    
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(242, 214, 0, 0);
    }
    
    100% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(242, 214, 0, 0);
    }
}

@keyframes pulse-orange {
    0% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(255, 106, 16, 0.7);
    }
    
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(255, 106, 16, 0);
    }
    
    100% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(255, 106, 16, 0);
    }
}

@keyframes pulse-purple {
    0% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(83, 11, 128, 0.7);
    }
    
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(83, 11, 128, 0);
    }
    
    100% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(83, 11, 128, 0);
    }
}

@keyframes pulse-green {
    0% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(77, 189, 116, 0.7);
    }
    
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(77, 189, 116, 0);
    }
    
    100% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(77, 189, 116, 0);
    }
}

@keyframes pulse-blue {
    0% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(32, 168, 216, 0.7);
    }
    
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(32, 168, 216, 0);
    }
    
    100% {
      transform: scale(0.90);
      box-shadow: 0 0 0 0 rgba(32, 168, 216, 0);
    }
}

/*************************** MOBILE CHANGES ***************************/
/***** 800px wide *****/

@media screen and (max-width: 990px) and (min-width: 400px) {

button.d-lg-none.navbar-toggler {
    height: 55px;
    width: 50px;
    background-color: #ff761a !important;
    border-radius: 0;
}

.sidebar-minimized .tab-body-header {
    margin-left: 0px !important;
    width: 100%;
    background: #f1f1f1;
}

.chat__search-wrapper {
    padding: 0 5px 5px 5px;
}

.chat__search-wrapper .chat__search {
    padding: 10px;
    border-radius: 2px;
}

.chat__search-wrapper .chat__search:focus {
}

body.app .page-container {
    padding: 36px 0 0 0;
}

body.app .page-container .chat__inner {
    height: calc(100vh - 140px) !important;
}

#chatPeopleBody .chat__person-box {
    padding: 10px 5px;
}

#chatPeopleBody .chat__person-box-msg-time > div {
    color: #333;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

div#chatPeopleBody::-webkit-scrollbar {
    width: 4px;
}

.chat__inner .chat__people-wrapper {
    max-width: 300px;
}

.refresh-button {
    display: none;
}

i.nav-icon.icon-speech {
    margin-right: -10px;
    border-radius: 5%;
}

.chat__area-wrapper .chat-conversation__bubble {
    padding: 0 12px 10px 12px;
}

.chat__area-wrapper .chat__area-header {
    padding: 10px;
    max-height: 75px;
    height: 100%;
}

.chat__people-body .chat__person-box-detail {
    padding-left: 10px !important;
}

.chat__area-wrapper .chat__area-header {
    padding: 10px;
    max-height: 75px;
    height: 100%;
}

.chat__people-body .chat__person-box-detail {
    padding-left: 10px !important;
}

.chat__area-wrapper .chat-conversation__receiver .chat-conversation__avatar {
    display: none;
}

.chat__area-wrapper .chat-conversation__sender .chat-conversation__avatar {
    display: none;
}

.chat-conversation__bubble img:hover {
    background-color: #000;
    opacity: 0.8;
    border: 1px solid #20a8d8;
    cursor: zoom-in;
}

.chat__area-wrapper .chat__area-text {
    height: auto;
    padding: 10px 20px;
}

.chat__inner .chat__people-body {
    height: calc(100% - 110px);
}

.app-body .sidebar {
    width: 240px;
}

.app-body .sidebar .nav {
    width: 240px;
}

.sidebar .nav-link {
    width: 100%;
}

.app-body .sidebar .sidebar-nav {
    width: 100%;
}

html:not([dir=rtl]) 
.sidebar {
    margin-left: -240px;
}

.chat__area-wrapper .chat-conversation {
    overflow-x: hidden;
}

.chat__area-wrapper .chat-conversation {
    height: calc(100% - 135px);
}

.chat__area-wrapper .chat-conversation::-webkit-scrollbar {
    width: 5px;
}

.chat__area-wrapper .chat-conversation::-webkit-scrollbar-thumb {
    background: #20a8d8;
}

table.dataTable tbody th, table.dataTable tbody td {
    padding: 0 5px;
}

input.form-control.cl-bulk-actions {
    margin: 5px;
    width: 15px;
}

.card .card-header {
    padding: 10px;
}

.card .card-body {
    padding: 10px;
    height: calc(100vh - 200px);
    overflow-y: auto;
}

table.dataTable {
    width: 99% !important;
}

span.cl-status {
    width: 100%;
    margin-right: 0;
    height: 100%;
    padding: 8px 0;
    border-radius: 3px;
}

table.dataTable {
    overflow-x: visible !important;
}


}

@media screen and (max-width: 600px) and (min-width: 400px) {

.chat__area-wrapper .chat-conversation {
    height: calc(100% - 135px);
}

.chat__area-wrapper .chat-conversation::-webkit-scrollbar {
    width: 5px;
}

.chat__area-wrapper .chat-conversation::-webkit-scrollbar-thumb {
    background: #20a8d8;
}



    }


@media screen and (max-width: 425px) and (min-width: 150px) {
    .sidebar-minimized a.navbar-brand-logoonly {
 display: none;
}

label.tg-online-label {
    display: none;
}

footer.app-footer {
    display: none;
}

.app-header .nav-item .nav-link > span {
    display: none;
}
.chat__people-wrapper--responsive {
    transform: translateX(-250px);
}
.emoji-mart-bar {
    display: none;
}
}


@media screen and (max-width: 400px) and (min-width: 150px) {
    .chat__people-wrapper--responsive {
    transform: translateX(-290px);
}
    button.d-lg-none.navbar-toggler {
    width: 50px;
    height: 55px;
    background-color: #ff6a10;
    border-radius: 0;
}

.sidebar-minimized .tab-body-header {
    margin-left: 0;
}

div#tab-overflow-dropdown {
    right: -50px;
}

a#overlayUserId {
    display: none;
}

header div#notifcation-messages {
    padding: 0 !important;
}

.refresh-button {
    display: none;
}

i.nav-icon.icon-speech {
    border-radius: 0;
    margin: 0;
}

.chat__people-wrapper-header {
    padding: 15px 5px;
}

.chat__area-text {
    padding: 5px 5px;
    height: 50px;
    margin-left: -50px;
    z-index: 9;
    display: inline-flex;
    width: calc(100% - -50px) !important;
}

.emoji-trigger i.fa-smile-o {
    position: relative;
    left: 10px;
}

.emoji-trigger {
    position: absolute;
    padding-top: 5px;
    cursor: pointer;
    font-size: 20px;
    left: 4px;
    height: 40px;
    width: 40px;
    background: #ebebeb;
    border-radius: 50%;
    top: 5px;
}

.w-100.flex-1.chat__area-form {
    padding: 0 0 0 22px;
}

.chat__area-media-btn, .chat__area-record-btn {
    background: transparent;
    border-radius: 0;
    width: 20px;
    min-width: 30px;
}

body.app input.chat-input-text {
    padding-right: 0;
    width: calc(100% - 0px) !important;
}

.chat__area-btn-group {
    max-width: 115px;
}
.emoji-mart-bar {
    display: none;
}
.chat-conversation {
    padding: 5px;
    overflow-x: hidden;
    height: calc(100% - 135px);
}

.chat-conversation::-webkit-scrollbar {
    width: 3px;
}

.chat-conversation::-webkit-scrollbar-thumb {
    background: #20a8d8;
}

div#chatPeopleBody::-webkit-scrollbar {
    width: 2px;
}

div#chatPeopleBody::-webkit-scrollbar-thumb {
    background: #ff6a10;
}
.chat__people-wrapper--responsive .chat__people-body {
    height: calc(100% - 130px);
}
}