/*!
 * Volare Collector Custom CSS V1.0
 * Last Updated: 9 Oct 2018
 * Copyright 2011-2018 Stampede Solution Sdn Bhd
 * Please make sure all customized CSS for Volare Collector are populated under this file. Do not change other CSS file to avoid any other conflict.
 * If you want to overwrite certain Bootstrap CSS class please put the style here and DO NOT OVERWRITE BOOTSTRAP FILES.
 */

/* ---------- Overwrite Bootstrap Starts ---------- */
body {
    font-size: 14px;
    overflow: hidden;
}

a {
    color: #E67E22;
}

a:hover {
    color: #D35400;
}

p {
    margin-bottom: 0.5rem;
}

h5 {
    font-size: 1rem;
}

.pre-scrollable {
    overflow-y: auto;
    height: auto;
    min-height: 0;
}

@media (min-width: 1199.98px) {
    .navbar-brand {
        background: url('../volare_api.php?action=images/volare_collectorv2.png');
        background-size: cover;
        width: 15rem;
        height: 2.5rem;
        position: relative;
    }
}

@media (max-width: 1199.97px) {
    .navbar-brand {
        background: url('../volare_api.php?action=images/volare_collectorv2_sm.png');
        background-size: cover;
        width: 2.8rem;
        height: 2.5rem;
        position: relative;
    }
}

.container-fluid {
    animation: fadeIn 2s;
    -webkit-animation: fadeIn 2s;
}

.table th {
    vertical-align: middle;
}

.table td {
    vertical-align: middle;
}

.tooltip {
    font-size: 0.8rem;
}

.sticky-top {
    z-index: 1;
}

.btn {
    font-size: 0.9rem;
}

.btn:hover {
    box-shadow: 5px 5px 5px -2px rgba(0,0,0,0.3);
}

.btn-primary {
    color: #FFFFFF;
    background-color: #E67E22;
    border-color: #D35400;
}

.btn-primary:hover {
    color: #FFFFFF;
    background-color: #E67E22;
    border-color: #D35400;
}

.btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #A0A0A0;
    background-color: #CCC;
    border-color: #CCC;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #FFFFFF;
    background-color: #E67E22;
    border-color: #D35400;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-primary {
    color: #E67E22;
    background-color: transparent;
    background-image: none;
    border-color: #E67E22;
}

.btn-outline-primary:hover {
    color: #FFFFFF;
    background-color: #F0932B;
    border-color: #E67E22;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: #A0A0A0;
    background-color: #CCC;
    border-color: #CCC;
}

.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #FFFFFF;
    background-color: #F0932B;
    border-color: #CA6E17;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-secondary {
    color: #FFF;
    background-color: #3498DB;
    border-color: #2977BE;
}

.btn-secondary:hover {
    color: #FFF;
    background-color: #2977BE;
    border-color: #2977BE;
}

.btn-secondary:focus, .btn-secondary.focus {
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
    color: #A0A0A0;
    background-color: #CCC;
    border-color: #CCC;
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
    color: #FFF;
    background-color: #3498DB;
    border-color: #2977BE;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-danger.disabled, .btn-danger:disabled {
    color: #A0A0A0;
    background-color: #CCC;
    border-color: #CCC;
}

.btn-light {
    color: #212529;
    background-color: #FFF;
    border-color: #D7D7D7;
}

.btn-light:hover {
    background-color: #F2F2F2;
    border-color: #D7D7D7;
}

.nav-item:hover {
    background: #F2F2F2;
    border-radius: 3px;
}

.dropdown-menu {
    font-size: 0.9rem;
    box-shadow: -2px 10px 14px -2px rgba(0,0,0,0.3);
    animation: fadeIn 0.5s;
    -webkit-animation: fadeIn 0.5s;
}

.dropdown-item:hover, .dropdown-item:focus {
    color: #16181b;
    text-decoration: none;
    background-color: #E2E2E2;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #E67E22;
    color: #FFF;
}

.dropdown-item a.active, .dropdown-item:active {
    background-color: #E67E22;
    color: #FFF;
}
.multiselect-container>li>a>label {
    padding: 0.3rem 0.8rem;
}

@media screen and (min-width: 768px) {
        .modal-dialog {
          max-width: 550px;
        }

        .modal-listen_recording {
          max-width: 700px;
        }
}

@media screen and (min-width: 1200px) {
        .modal-dialog {
          max-width: 600px;
        }
        .modal-listen_recording {
          max-width: 750px;
        }
}


.modal-header {
    padding: 0.5rem 0.9rem;
}

.modal-body {
    padding: 0.5rem 1rem;
}

.modal-content {
    box-shadow: -2px 10px 14px -2px rgba(0,0,0,0.3);
}

.form-control {
    height: 2rem;
    font-size: 0.9rem;
}

.form-group {
    margin-bottom: 0.5rem;
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: inherit;
}

.card-body {
    padding: 0.7rem;
}

.bs-actionsbox .btn-group button {
    font-size: 0.65rem;
}

.bootstrap-select .dropdown-menu li a span.check-mark {
    color: #E67E22;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background: #E67E22;
}

a.nav-link {
    color: #666;
}

a.nav-link:hover {
    color: #E67E22;
}

.FollowUpModal .nav-link, #ManualFollowUpModal .nav-link, #DialerModal .nav-link {
    padding: .3rem 0.5rem;
    font-size: 0.8rem;
}

/* Bootstrap Toggle fixes for Bootsrtap 4*/
.toggle-off {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.toggle.off {
    border-color: rgba(0, 0, 0, .25);
}

.toggle-handle {
    background-color: white;
    border: thin rgba(0, 0, 0, .25) solid;
}

.btn-xs .toggle-handle {
    margin-top: -0.3rem;
}

.toggle-off.btn-xs, .toggle-on.btn-xs {
    font-size: 0.7rem;
    margin-top: -0.25rem;
    margin-left: 0.1rem;
}
/* Custom Alerts Style Using Bootstrap-Notify */
[data-notify="title"] {
    font-size: 1rem;
    font-weight: 500;
}

[data-notify="container"] {
    box-shadow: -2px 10px 14px -2px rgba(0,0,0,0.3);
}

[data-notify="progressbar"] {
    margin-bottom: 0px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 5px;
}

/* ---------- Overwrite Bootstrap Ends---------- */

/* ---------- Overwrite Devextreme Starts ---------- */
.dx-datagrid-header-panel {
    padding: 0;
}
.dx-toolbar .dx-toolbar-items-container {
    height: 2.5rem;
}
.dx-datagrid-group-panel .dx-group-panel-message {
    padding: 0.5rem 0;
}


/*.ss-main .ss-multi-selected.ss-disabled {
    background-color: transparent;
    border: 0;
    cursor: text;
}*/

.dx-tag-content,.dx-tag-content::after {
    background: #E67E22 !important;
    color:white !important;
    display: flex;
    user-select: none;
    align-items: center;
    font-size: 12px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
    padding: 4px 18px 4px 5px;
    margin: 3px 3px 3px 0;
    border-radius: 4px;
    animation-name: scaleIn;
    animation-duration: .2s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

.dx-tag-remove-button {
    width: 18px !important;
    right:0px;
    border-radius: 0px;
    font-size: 12px !important;
    font: 12px/1 DXIcons !important;
}

.dx-tag {
    margin:0px;
    padding:0px;
}
.dx-tag-remove-button::before{
    background-color: rgba(0,0,0,0);
    color:white;
}

.dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content {
    padding: 6px 10px;
}

.dx-list-item-content::before, .dx-list-item-content::after, .dx-list-item-content {
    font-size: 14px;
}
.dx-editor-cell .dx-texteditor .dx-texteditor-input {
                height: 27px;
}
.dx-datagrid .dx-menu .dx-menu-item .dx-menu-item-content,
.dx-datagrid-container .dx-menu .dx-menu-item .dx-menu-item-content {
                padding: 0px 0px;
                height: 27px;
}
 
.dx-datagrid .dx-editor-with-menu,
.dx-datagrid-container .dx-editor-with-menu {
                height: 27px;
}
 
.dx-datagrid-filter-row .dx-editor-cell .dx-editor-with-menu .dx-texteditor-input,
.dx-datagrid-filter-row .dx-editor-cell .dx-editor-with-menu .dx-placeholder:before {
                padding-left: 10px;
}
 
.dx-datagrid .dx-menu .dx-menu-item .dx-menu-item-content .dx-icon,
.dx-datagrid-container .dx-menu .dx-menu-item .dx-menu-item-content .dx-icon {
                font-size: 20px;
                margin: 0px 0px;
}

.dx-row.dx-data-row.dx-row-lines.dx-selection{
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

/* ---------- Overwrite Devextreme Ends ---------- */

/* ---------- Overwrite SlimSelect Starts ---------- */


/* ---------- Overwrite SlimSelect Ends ---------- */

.ss-main .ss-multi-selected.ss-disabled {
    background-color: transparent;
    border: 0;
    cursor: text;
}

.ss-main .ss-multi-selected .ss-values .ss-value {
    background: #E67E22;
}

.ss-main .ss-disabled .ss-values .ss-value .ss-value-delete {
    display: none;
}

.ss-main .ss-disabled .ss-add {
    display: none;
}

/* ---------- Volare General Class Starts ---------- */

footer {
    bottom: 0;
    width: 100%;
    position: absolute;
    height: 2rem;
    background-color: #F5F5F5;
    border-top: 1px solid #E5E5E5;
}

footer p {
    color: #6c757d;
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
}

.btn-new {
    color: #666;
    background-color: #FFF;
    border-color: #D7D7D7;
    padding: 0.5rem 0.3rem;
    font-size: 0.6rem;
    line-height: 1.2;
}

.btn-new:hover {
    color: #FFF;
    background-color: #E67E22;
}

.btn-new:focus, .btn-new.focus {
    outline: none;
}

.btn-new.disabled, .btn-new:disabled {
    color: #A0A0A0;
    background-color: #CCC;
    border-color: #CCC;
}

.btn-new:not(:disabled):not(.disabled):active, .btn-new:not(:disabled):not(.disabled).active,
.show > .btn-new.dropdown-toggle {
    color: #FFF;
    background-color: #E67E22;
}

.btn-contactable {
    color: #666;
    background-color: #FFF;
    border-color: #D7D7D7;
    padding: 0.5rem 0.3rem;
    font-size: 0.6rem;
    line-height: 1.2;
}

.btn-contactable:hover {
    color: #FFF;
    background-color: #009900;
}

.btn-contactable:focus, .btn-contactable.focus {
    outline: none;
}

.btn-contactable.disabled, .btn-contactable:disabled {
    color: #A0A0A0;
    background-color: #CCC;
    border-color: #CCC;
}

.btn-contactable:not(:disabled):not(.disabled):active, .btn-contactable:not(:disabled):not(.disabled).active,
.show > .btn-contactable.dropdown-toggle {
    color: #FFF;
    background-color: #009900;
}

.btn-do-not-call {
    color: #666;
    background-color: #FFF;
    border-color: #D7D7D7;
    padding: 0.5rem 0.3rem;
    font-size: 0.6rem;
    line-height: 1.2;
}

.btn-do-not-call:hover {
    color: #FFF;
    background-color: #C0392B;
}

.btn-do-not-call:focus, .btn-do-not-call.focus {
    outline: none;
}

.btn-do-not-call.disabled, .btn-do-not-call:disabled {
    color: #A0A0A0;
    background-color: #CCC;
    border-color: #CCC;
}

.btn-do-not-call:not(:disabled):not(.disabled):active, .btn-do-not-call:not(:disabled):not(.disabled).active,
.show > .btn-do-not-call.dropdown-toggle {
    color: #FFF;
    background-color: #C0392B;
}

.btn-unknown {
    color: #666;
    background-color: #FFF;
    border-color: #D7D7D7;
    padding: 0.5rem 0.3rem;
    font-size: 0.6rem;
    line-height: 1.2;
}

.btn-unknown:hover {
    color: #FFF;
    background-color: #2980B9;
}

.btn-unknown:focus, .btn-unknown.focus {
    outline: none;
}

.btn-unknown.disabled, .btn-unknown:disabled {
    color: #A0A0A0;
    background-color: #CCC;
    border-color: #CCC;
}

.btn-unknown:not(:disabled):not(.disabled):active, .btn-unknown:not(:disabled):not(.disabled).active,
.show > .btn-unknown.dropdown-toggle {
    color: #FFF;
    background-color: #2980B9;
}

.text-grey {
    color: #666;
}

.text-grey-light {
    color: #999;
} 

.text-green {
    color: #009900;
}

.text-yellow-dark {
    color: #FAB704;
}

.text-orange {
    color: #E67E22;
}

.text-red {
    color: #C0392B;
}

.text-blue {
    color: #2980B9;
}

.text-blue-light {
    color: #66CCFF;
}

.text-purple {
    color: #6666CC;
}

.text-maroon-dark {
    color: #CA2C68;
}

.text-md {
    font-size: 0.825rem;
}

.text-sm {
    font-size: 0.65rem;
}

.link {
    color: #FF8800;
    font-size: 0.7rem;
}

.bg-blue {
    background: #3498DB;
    color: #FFF;
}

.bg-blue-mid {
    background: #2980B9;
    color: #FFF;
}

.bg-blue-dark {
    background: #226897;
    color: #FFF;
}

.bg-blue-navy {
    background: #1B5276;
    color: #FFF;
}

.badge-grey {
    background: #CCC;
    border-radius: 0.8rem;
    -moz-border-radius: 0.8rem;
    -webkit-border-radius: 0.8rem;
    color: #FFF;
    display: inline-block;
    vertical-align: top;
    line-height: 1rem;
    margin-right: 15px;
    text-align: center;
    width: 1rem;
    font-size: 80%;
}

.badge-maroon {
    color: #FFF;
    background-color: #CA2C68;
}

.badge-yellow-light {
    color: #212529;
    background-color: #FFFFCC;
    border: 1px solid #F4F400;
}

.badge-orange {
    color: #FFF;
    background-color: #E67E22;
}

.badge-orange-light {
    color: #212529;
    background-color: #FDE0C0;
    border: 1px solid #FBBA73;
}

.badge-orange-bright {
    color: #212529;
    background-color: #FFCC00;
    border: 1px solid #FF9900;
}

.badge-pink {
    color: #212529;
    background-color: #FFD7D7;
    border: 1px solid #FFB3B3;
}

.badge-pink-baby {
    color: #212529;
    background-color: #FFF4FF;
    border: 1px solid #FFCCCC;
}

.badge-fuchsia {
    color: #212529;
    background-color: #FFCCFF;
    border: 1px solid #FF99CC;
}

.badge-green {
    color: #FFF;
    background-color: #009900;
}

.badge-green-light {
    color: #212529;
    background-color: #E1FFD7;
    border: 1px solid #A9FF88;
}

.badge-murky-green {
    color: #212529;
    background-color: #EEE9BF;
    border: 1px solid #CDC9A5;
}
.badge-blue-light{
    color: #212529;
    background-color: #D9ECFF;
    border: 1px solid #9FCFFF;
}

.badge-sky {
    color: #212529;
    background-color: #DFFCFF;
    border: 1px solid #9DF5FF;
}

.badge-grey-light {
    color: #212529;
    background-color: #E4E4E4;
    border: 1px solid #AEAEAE;
}

.badge-grey-dark {
    color: #212529;
    background-color: #BCBCBC;
    border: 1px solid #949494;
}

.badge-turqoise {
    color: #212529;
    background-color: #66CCCC;
    border: 1px solid #6699CC;
}

.badge-violet {
    color: #212529;
    background-color: #EED2EE;
    border: 1px solid #CDB5CD;
}

.badge-purple-light {
    color: #212529;
    background-color: #CCCCFF;
    border: 1px solid #CC99FF;
}

.badge-purple-dark {
    color: #212529;
    background-color: #CC99FF;
    border: 1px solid #CC6699;
}

.badge-red {
    color: #212529;
    background-color: #FF6347;
    border: 1px solid #FF6347;
}

.badge-white {
    color: #212529;
    background-color: #FFFFFF;
    border: 1px solid #D7D7D7;
}

.big-number {
    font-size: 1.25rem;
    font-weight: 500;
    margin-right: 0.5rem;
}

.animation-none, #FollowUpModal .modal-header h5.animation-none {
    animation: none;
    -webkit-animation: none;
}

.table-sm-scrollable {
  max-height: none;
  overflow: auto;
}

/* RPC Icons & RPC Label */

.none {
    float: right;
    color: #999;
    vertical-align: top;
}

.none:before{
    content: '';
    /*background:url('../images/dmc-01.png');*/
    background-size:cover;
    position:absolute;
    width:16px;
    height:16px;
    margin-left: -1.2rem; 
}


.debtor {
    float: right;
    color: #999;
    vertical-align: top;
}

/*.debtor:before{
    content: '';
    background:url('../images/dmc-01.png');
    background-size:cover;
    position:absolute;
    width:16px;
    height:16px;
    margin-left: -1.2rem; 
}

*/
.debtor:before{
    content: '';
    background:url('../images/dmc-01.png');
    background-size:cover;
    position:absolute;
    /*display: block;*/
    width:16px;
    height:16px;
    margin-left: -1.2rem;
} 


.related-party {
    float: right;
    color: #999;
    vertical-align: top;
}

.related-party:before{
    content: '';
    background:url('../images/dmc-03.png');
    background-size:cover;
    position:absolute;
    width:16px;
    height:16px;
    margin-left: -1.2rem;  
}

.unknown-party {
    float: right;
    color: #999;
    vertical-align: top;
}

/*.unknown-party:before{
    content: '';
    background:url('../images/dmc-02.png');
    background-size:cover;
    position:absolute;
    width:16px;
    height:16px;
    margin-left: -1.2rem;  
}*/

.unknown-party:before{
    content: '';
    background:url('../images/dmc-02.png');
    background-size:cover;
    position:absolute;
    /*display: block;*/
    width:16px;
    height:16px;
    margin-left: -1.2rem;
}


.not-related-party {
    float: right;
    color: #999;
    vertical-align: top;
}

.not-related-party:before{
    content: '';
    background:url('../images/dmc-04.png');
    background-size:cover;
    position:absolute;
    width:16px;
    height:16px;
    margin-left: -1.2rem;  
}

.border-right-grey {
    border-right: 1px solid #D7D7D7;
}

.border-bottom-grey {
    border-bottom: 1px solid #D7D7D7;
}

/* Hide Some Modal Body Scroll Bar & Allow To Interact With Background */
.modal-open .FollowUpModal, .modal-open #ManualFollowUpModal, .modal-open .IncomingCallModal {
    overflow-y: hidden;
}

.FollowUpModal, #ManualFollowUpModal, .IncomingCallModal {
    pointer-events: none;
}

/* Modal Images */
.sms-img {
    background: url('../images/sms.png');
    background-size: cover;
    width: 128px;
    height: 128px;
    position:relative; 
    float: left;
    vertical-align: middle;
}

.letter-img {
    background: url('../images/letter.png');
    background-size: cover;
    width: 50px;
    height: 50px;
    position:relative; 
    float: left;
    vertical-align: middle;
}

.email-img {
    background: url('../images/mail.png');
    background-size: cover;
    width: 50px;
    height: 50px;
    position:relative; 
    float: left;
    vertical-align: middle;
}

.legal-img {
    background: url('../images/courthouse.png');
    background-size: cover;
    width: 100px;
    height: 100px;
    position:relative; 
    float: left;
    vertical-align: middle;
}

.note-img {
    background: url('../images/post-it.png');
    background-size: cover;
    width: 128px;
    height: 128px;
    position:relative; 
    float: left;
    vertical-align: middle;
}

.attach-img {
    background: url('../images/attach.png');
    background-size: cover;
    width: 128px;
    height: 128px;
    position:relative; 
    vertical-align: middle;
    margin: auto;
}

.internal-img {
    background: url('../images/internal.png');
    background-size: cover;
    width: 128px;
    height: 128px;
    position:relative; 
    vertical-align: middle;
    margin: auto;
}

.no-phone-book-img {
    background: url('../images/phone-book.png');
    background-size: cover;
    width: 128px;
    height: 128px;
    position:relative; 
    vertical-align: middle;
    margin: auto;
}

.request-fv-img {
    background: url('../images/roadie-logo.png');
    background-size: cover;
    width: 127px;
    height: 121px;
    position:relative; 
    vertical-align: middle;
    margin: auto;
}

.no-call-log-img {
    background: url('../images/phone-book.png');
    background-size: cover;
    width: 128px;
    height: 128px;
    position:relative; 
    vertical-align: middle;
    margin: auto;
}

.reception-img {
    background: url('../images/reception.png');
    background-size: cover;
    width: 128px;
    height: 128px;
    position:relative; 
    vertical-align: middle;
    margin: auto;
}

.debtor-not-found-img {
    background: url('../images/debtor-not-found.png');
    background-size: cover;
    width: 179px;
    height: 165px;
    position:relative; 
    vertical-align: middle;
    margin: auto;
}

.outgoing-setting-img {
    background: url('../images/call-setting.png');
    background-size: cover;
    width: 50px;
    height: 50px;
    position:relative; 
    float: left;
    vertical-align: middle;
}

.intercom-img {
    background: url('../images/intercom.png');
    background-size: cover;
    width: 50px;
    height: 50px;
    position:relative; 
    float: left;
    vertical-align: middle;
}

.line-clamp-1 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: fit-content;
    min-width: 50%;
    max-width: 100%;
}

/* Animations */
.flash {
    animation: flash 2s infinite;
    -webkit-animation: flash 2s infinite;
}


/* ---------- Volare General Class Ends ---------- */


/* ---------- Volare Icons Starts -------------*/

.ptp-icon {
    background: url('../images/ptp.png');
    background-size: cover;
    position: relative;
    width: 27px;
    height: 27px;
    float: left;
    vertical-align: middle;
}

.broken-promise-icon {
    background: url('../images/broken-promise.png');
    background-size: cover;
    position: relative;
    width: 27px;
    height: 27px;
    float: left;
    vertical-align: middle;
}

.last-payment-icon {
    background: url('../images/last-payment.png');
    background-size: cover;
    position: relative;
    width: 28px;
    height: 28px;
    float: left;
    vertical-align: middle;
}

.last-called-icon {
    background: url('../images/last-called.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 28px;
    height: 28px;
    float: left;
    vertical-align: middle;
}

.next-call-icon {
    background: url('../images/next-call.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 28px;
    height: 28px;
    float: left;
    vertical-align: middle;
}

.cash {
    background: url('../images/cash.png');
    background-size: cover;
    position: relative;
    width: 24px;
    height: 24px;
    margin-top: 0.3rem;
    margin-right: 0.5rem;
    float: left;
    vertical-align: middle;
}

.cheque {
    background: url('../images/cheque.png');
    background-size: cover;
    position: relative;
    width: 24px;
    height: 24px;
    margin-top: 0.3rem;
    margin-right: 0.5rem;
    float: left;
    vertical-align: middle;
}

.payment-full {
    background: url('../images/full-payment.png');
    background-size: cover;
    position: relative;
    width: 24px;
    height: 24px;
    margin-top: 0.2rem;
    margin-right: 0.5rem;
    float: left;
    vertical-align: middle;
}

.payment-partial {
    background: url('../images/partial-payment.png');
    background-size: cover;
    position: relative;
    width: 24px;
    height: 24px;
    margin-top: 0.2rem;
    margin-right: 0.5rem;
    float: left;
    vertical-align: middle;
}

.preferred-sms {
    background: url('../images/sms.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 21px;
    height: 21px;
    float: left;
    vertical-align: middle;
}

.do-not-sms {
    background: url('../images/no-sms.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 21px;
    height: 21px;
    float: left;
    vertical-align: middle;
}

.guarantor-numv2 {
    background: url('../images/guarantor.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 16px;
    height: 16px;
    float: left;
    vertical-align: middle;
}

.letter-address {
    background: url('../images/envelop.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 21px;
    height: 21px;
    float: left;
    vertical-align: middle;
}

.original-address {
    background: url('../images/original-add.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 21px;
    height: 21px;
    float: left;
    vertical-align: middle;
}

.fv-done-address {
    background: url('../images/roadie-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 21px;
    height: 21px;
    float: left;
    vertical-align: middle;
}

.outgoing-call {
    background: url('../images/call-type-outgoing.png');
    background-size: cover;
    position: relative;
    width: 16px;
    height: 16px;
    float: left;
    margin-left: 0.9rem;
}

.incoming-call {
    background: url('../images/call-type-incoming.png');
    background-size: cover;
    position: relative;
    width: 16px;
    height: 16px;
    float: left;
    margin-left: 0.9rem;
}

.missed-call {
    background: url('../images/call-type-missed.png');
    background-size: cover;
    position: relative;
    width: 16px;
    height: 16px;
    float: left;
    margin-left: 0.9rem;
}

.missed-call-big {
    background: url('../images/call-type-missed.png');
    background-size: cover;
    position: relative;
    width: 24px;
    height: 24px;
    float: left;
}

.extension-call {
    background: url('../images/call-type-extension.png');
    background-size: cover;
    position: relative;
    width: 16px;
    height: 16px;
    float: left;
    margin-left: 0.9rem;
}

.islamic {
    background: url('../images/islamic-acc.png');
    background-size: cover;
    position: relative;
    width: 24px;
    height: 24px;
    margin-top: 0.1rem;
    margin-right: 0.5rem;
    float: left;
    vertical-align: middle;
}

.multiple-cards {
    background: url('../images/credit-card.png');
    background-size: cover;
    position: relative;
    width: 24px;
    height: 24px;
    margin-top: 0.1rem;
    margin-right: 0.5rem;
    float: left;
    vertical-align: middle;
}
/* ---------- Volare Icons Ends -------------*/

/* ---------- Header & Top Navigation Starts ---------- */
.header-bg {
    max-height: 3.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
} 

.next-call {
    color: #009900;
    animation: flash 2s infinite;   
    -webkit-animation: flash 2s infinite;
}

.next-call:disabled {
    animation: none;
    -webkit-animation: none;
    color: #999;
}

#predictive-play-pause {
    color: #F0932B;
}
#predictive-play-pause:hover {
    color: #FFBE76;
}

.campaign-dropdown {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10vw !important;
    color: gray;
    border: 1px solid #D7D7D7;
    border-radius: 0;
}

.campaign-dropdown a:focus, a:hover{
    text-decoration: none;
    border: none;
}

.language-selector .dropdown-toggle::after {
    display: none;
}

.language-selector .dropdown-menu > li a {
    padding: 0.3rem 1rem;
}

.language-selector .dropdown-menu .dropdown-item span {
    padding-left: 1rem;
}

.language-selector.open > .dropdown-toggle {
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.language-selector.open > .dropdown-toggle {
    background: #f5f5f6;
}

.language-selector img {
    width: 16px;
}
/* ---------- Header & Top Navigation Ends ---------- */

/* ---------- Call List Starts ---------- */
#gridContainer {
   height: calc(100vh - 11rem);
}

#callList-filter .dropdown-item {
    font-size: 0.75rem;
    padding: 0.5rem 0.3rem;
}

.collection-progress {
    position: relative;
    border: 2px solid #38a4eb;
    border-radius: 3px;
    font-size: 0.7rem;
    background: linear-gradient(180deg, rgba(235, 235, 235, 1) 0%, rgba(235, 235, 235, 1) 0%, rgba(245, 245, 245, 1) 100%, rgba(245, 245, 245, 1) 100%);
    height: 24px;
    width: 15rem;
}

.collection-progress .progress-bar {
    background-color: rgb(186, 225, 240) !important;
    font-size: 9px !important;
    line-height: 10px !important;
}

.collection-progress .collection-amount {
    position: absolute;
    margin-top: 2px;
    margin-left: 5px;
}

.collection-progress .total-assigned {
    position: absolute;
    right: 8px;
    margin-top: 2px;
    margin-right: 5px;
}

.collection-progress .progress-target {
    position: absolute;
    min-width: 10px;
    height: 35px;
    border-right: 2.5px dotted #FD6382;
    margin-top: -5px;
}

/* ---------- Call List Ends---------- */

/* ---------- All Activities Starts ---------- */
/* Toggle Activities Panel */
#allActivities {
    background: #E4E4E4;
    border-left: 1px solid #D7D7D7;
    bottom: 0;
    left: 100%;
    overflow-y: hidden;
    position: fixed;
    top: 3.5rem;
    width: 35%;
    animation: fadeIn 1s;
    -webkit-animation: fadeIn 1s;
}

#allActivities .card {
    animation: bounceInUp 1s;
    animation-delay: 1s;
    -webkit-animation: bounceInUp 1s;
}

.allActivities-trigger {
    cursor: pointer;
    display: inline-block;
    font-size: 1.5rem;
    float:right;
    color: #999999;
}
body.show-sidebar .allActivities-trigger {
    margin-right: 5px;
}

body.show-sidebar #allActivities {
    left: 65%;
}
#wrapper {
    margin-right: 0;
    min-height: 1000px;
    width: 100%;
    overflow: hidden;   
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
        -ms-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;
}
body.show-sidebar #wrapper {
    margin-right: 35%;
    width: 65%;
}

@media (max-width: 1199.97px) {
    .allActivities-trigger {
        font-size: 19px;
        margin: 5px 5px 0 20px;
    }
    #allActivities {
        width: 600px;
        height: 100vh;
    }
    body.show-sidebar {
        min-width: 1280px;
        overflow-x: auto;
    }
    
    body.show-sidebar #allActivities {
        left: 600px;
    }
    body.show-sidebar #wrapper {
        margin-right: 600px;
        width: 600px;
    }   
}

@media (min-width: 1199.98px) {
    #allActivities {
        width: 35%;
        height: 100vh;
    }
    body.show-sidebar #allActivities {
        left: 65%;
    }
    body.show-sidebar #wrapper {
        margin-right: 35%;
        width: 65%;
    }   
}

/* Best Time To Call & Debtor / Customer Tagging */

.allActivities-top {
    background: #FFF;
    padding: 0.3rem;
}

.allActivities-top .title {
    float: left;
    color: #999;
    vertical-align: middle;
    font-size: 80%;
}

.best-call-time-icon {
    background: url('../images/call-time.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 16px;
    height: 16px;
    float: left;
    vertical-align: middle;
}

.allActivities-top .badge-grey {
    background: #CCC;
    border-radius: 0.8rem;
    -moz-border-radius: 0.8rem;
    -webkit-border-radius: 0.8rem;
    color: #FFF;
    display: inline-block;
    vertical-align: top;
    line-height: 1rem;
    margin-right: 15px;
    text-align: center;
    width: 1rem;
    font-size: 80%;
}

/*.best-call-time {
    background: #FFF;
    padding: 0.3rem;
}

.best-call-time .title {
    float: left;
    color: #999;
    vertical-align: middle;
    margin-left: 1.2rem;
    font-size: 80%;
}

.best-call-time .title:before{
    content: '';
    background:url('../images/call-time.png');
    background-size:cover;
    position:absolute;
    width:16px;
    height:16px; 
    margin-left: -1.2rem;
    margin-top: 0.1rem;
}

.best-call-time .badge-grey {
    background: #CCC;
    border-radius: 0.8rem;
    -moz-border-radius: 0.8rem;
    -webkit-border-radius: 0.8rem;
    color: #FFF;
    display: inline-block;
    vertical-align: top;
    line-height: 1rem;
    margin-right: 15px;
    text-align: center;
    width: 1rem;
    font-size: 80%;
}*/

/* Activities Action Buttons */
#allActivities .dropdown-menu {
    min-width: max-content;
    margin-top: -0.1rem;
}
#allActivities .dropdown-item {
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
}

.contact-num-item {
    float: left;
    width: 110px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-name-truncate {
    color: #999;
    text-align: left;
    /*max-width: 150px;*/
    max-width: 150px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-type-truncate {
    color: #999;
    text-decoration:none;
    text-align: right;
    font-size: 0.8rem;
    vertical-align: top;
}

.btn-activity-filter {
    border-radius: 0;
    background-color: #FFF;
    border-color: #D7D7D7;
    font-size: 0.65rem;
}
/* Activities Cards Starts */
.allActivities-list {
    height: calc(100vh - 13.6rem);
    padding-bottom: 20px;
    overflow-y: auto;
}

.allActivities-list .toptitle {
    text-align: center;
    color: #999;
    font-size: 0.725rem;
}

#allActivities h5 {
    background: #3498DB;
    padding: 0.4rem;
    color: white;
    display: flex;
    margin-bottom: 0;
}

.allActivities-list .card-group .card-label {
    margin-top: 0.2rem;
    margin-bottom: 0.3rem;
    font-size: 0.825rem;
    font-weight: normal;
}

.allActivities-list .ptp-amt {
    background: #E67E22;
    color: #FFF;
    border-radius: 0.8rem;
    margin: 0 auto;
    text-align: center;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

.allActivities-list .claim-paid-amt {
    background: #26A65B;
    color: #FFF;
    border-radius: 0.8rem;
    margin: 0 auto;
    text-align: center;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

.allActivities-list .col-request {
    background: #666;
    color: #FFF;
    border-radius: 0.8rem;
    margin: 0 auto;
    text-align: center;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

.allActivities-list .s-status {
    background: #C0392B;
    color: #FFF;
    border-radius: 0.8rem;
    margin: 0 auto;
    text-align: center;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

.allActivities-list .a-status {
    background: #2980B9;
    color: #FFF;
    border-radius: 0.8rem;
    margin: 0 auto;
    text-align: center;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

.allActivities-list .stage-status {
    background: #E05D84;
    color: #FFF;
    border-radius: 0.8rem;
    margin: 0 auto;
    text-align: center;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}
.allActivities-list .card .card-header {
    padding: 0.4rem 0.8rem;
    color: #FFF;
    background: grey;
}

/* Card Header Colors & Footer */
.allActivities-list .card .field-visit {
    background: #000;
    color: #FAB704;
}

.allActivities-list .card .follow-up {
    background: #E67E22;
    color: #FFFFFF;
}

.allActivities-list .card .internal-remark {
    background: #AEAEAE;
    color: #FFFFFF;
}

.allActivities-list .card .sms {
    background: #F39C12;
    color: #FFFFFF;
}

.allActivities-list .card .legal {
    background: #CA2C68;
    color: #FFFFFF;
}

.allActivities-list .card .payment {
    background: #3498DB;
    color: #FFFFFF;
}

.allActivities-list .card .letter-email {
    background: #6666CC;
    color: #FFFFFF;
}

.allActivities-list .card .work-collection {
    background: #b25604;
    color: #FFFFFF;
}

.allActivities-list .card .permanent-message {
    background: #0f2989;
    color: #FFFFFF;
}

.allActivities-list .card .electronic-diary {
    background: #36b7a6;
    color: #FFFFFF;
}

.allActivities-list .card .escalation {
    background: #aaaaaa;
    color: #FFFFFF;
}


.allActivities-list .card .card-footer {
    font-size: 0.875rem;
    padding: 0.4rem 0.8rem;
}

/* Card Contents */
.allActivities-list .card .timestamp {
    float: right;
    font-size: 0.8rem;
    padding-top: 0.1rem;
}

.allActivities-list .card .card-body {
    padding: 0.8rem;
}

.allActivities-list .card .card-group .card-body {
    padding: 0.5rem;
}

.allActivities-list .card .card-title {
    font-size: 0.9rem;
    padding-top: 0.2rem;
}

.allActivities-list .card .fv-card-address {
    background: #F2F2F2;
    padding: 0.5rem;
    border-radius: 0.2rem;
    font-size: 0.825rem;
}

.card-deck {
    margin-left: 0;
    margin-right: 0;
}

.card-deck .card {
    margin-left: 0;
    margin-right: 0;
}

.allActivities-list .card .card-text {
    /*display: -webkit-box;*/
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    -webkit-transition: max-width linear .5s;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow:hidden;
}

.allActivities-list .card .card-text:hover {
    overflow: visible; 
    white-space: pre-line;
    height:auto;
    display: block;
} 

.main_card_letter_download_attachment{
    align-self: center;
}

/* All Activities Card Type Icons*/
.incoming:before{
    content: '';
    background:url('../images/white-incoming-call.png');
    background-size:cover;
    position:absolute;
    width:24px;
    height:24px; 
    margin-left: -2rem;
}

.outgoing:before{
    content: '';
    background:url('../images/white-outgoing-call.png');
    background-size:cover;
    position:absolute;
    width:24px;
    height:24px; 
    margin-left: -2rem;
}

.predictive:before{
    content: '';
    background:url('../images/white-predictive.png');
    background-size:cover;
    position:absolute;
    width:24px;
    height:24px; 
    margin-left: -2rem;
}

/* All Activities Card RPC Icons*/
.rpc {
    color: #999;
    text-decoration:none;
    text-align: right;
    float: right;
    font-size: 0.8rem;
}

.rpc span {
    vertical-align: middle;
}

.rpc .debtor {
    float: none;
}

.rpc .debtor:after{
    content: '';
    background:url('../images/dmc-01.png');
    background-size:cover;
    position:absolute;
    width:20px;
    height:20px;
    margin-left: 0.3rem;
}

.rpc .debtor:before {
    display: none;
}

.rpc .related-party {
    float: none;
}

.rpc .related-party:after{
    content: '';
    background:url('../images/dmc-03.png');
    background-size:cover;
    position:absolute;
    width:20px;
    height:20px;
    margin-left: 0.3rem;
}

.rpc .related-party:before {
    display: none;
}

.rpc .not-related-party {
    float: none;
}

.rpc .not-related-party:after{
    content: '';
    background:url('../images/dmc-04.png');
    background-size:cover;
    position:absolute;
    width:20px;
    height:20px;
    margin-left: 0.3rem;
}

.rpc .not-related-party:before {
    display: none;
}

.rpc .unknown-party {
    float: none;
}

.rpc .unknown-party:after{
    content: '';
    background:url('../images/dmc-02.png');
    background-size:cover;
    position:absolute;
    width:20px;
    height:20px;
    margin-left: 0.3rem;
}

.rpc .unknown-party:before {
    display: none;
}

.rpc .btn {
    font-size: 0.8rem;
    margin-left: 1.5rem;
    padding: 0rem 0.5rem;
    border: none;
    color: #3498DB;
    background: #FFF;
}

.rpc .btn:hover {
    border: 1px solid #3498DB;
}

.rpc .dropdown-menu {
    min-width: 0;
}

.rpc .dropdown-item {
    font-size: 0.8rem;
    color: #3498DB;
}

.cash {
    background:url('../images/cash.png');
    background-size:cover;
    position:relative;
    width:24px;
    height:24px; 
    margin-top: 0.3rem;
    margin-right: 0.5rem;
    float: left;
    vertical-align: middle;
}

.cheque {
    background:url('../images/cheque.png');
    background-size:cover;
    position:relative;
    width:24px;
    height:24px; 
    margin-top: 0.3rem;
    margin-right: 0.5rem;
    float: left;
    vertical-align: middle;
}

.payment-full {
    background:url('../images/full-payment.png');
    background-size:cover;
    position:relative;
    width:24px;
    height:24px; 
    margin-top: 0.2rem;
    margin-right: 0.5rem;
    float: left;
    vertical-align: middle;
}

.payment-partial {
    background:url('../images/partial-payment.png');
    background-size:cover;
    position:relative;
    width:24px;
    height:24px; 
    margin-top: 0.2rem;
    margin-right: 0.5rem;
    float: left;
    vertical-align: middle;
}
/* ---------- All Activities Ends ---------- */

/* ---------- Follow Up Modal Starts ---------- */
.hideMe {
    display: none !important;
}

.min {
    width: 350px;
    overflow: hidden !important;
    padding: 0px !important;
    margin: 0px;
    float: left;
    position: static !important;
}

.min .modal-dialog, .min .modal-content {
    height: 100%;
    width: 100%;
    margin: 0px !important;
    padding: 0px !important;
}

.min .modal-header {
    height: 100%;
    width: 100%;
    margin: 0px !important;
    padding: 0.4rem 0.5rem !important;
}

.display-none { display: none; }

button .fa {
    font-size: 16px;
    margin-left: 10px;
}

.modal-header button:focus { 
    outline: none; 
}

.modal-header .minimize {
    padding: 0rem 0.5rem;
    margin: 0.4rem 0.5rem;
    font-size: 1rem;
}

.modal-header .close {
    padding: 0rem 0;
    margin: 0.4rem 0;
    font-size: 1rem;
}

.modal-header .hangup {
    background: #C0392B;
    color: #FFF;
    padding: 0.3rem 0.4rem;
    border-radius: 50px;
    border: none;
}

.modal-sub-footer {
    padding: 0.4rem 1.1rem 0rem 1.1rem;
}

.min-height-50 {
    min-height: 50px;
}

.max-height-50 {
    max-height: 50px;
}

.height-100percent {
    height: 100%;
}

/* Recording Status */
.not-recording {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: inline-block;
    vertical-align: text-bottom;
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

.recording {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 1px solid #66CC00;
    display: inline-block;
    vertical-align: text-bottom;
    background: #66FF33; /* Old browsers */
    background: -moz-linear-gradient(top, #66FF33 0%, #669966 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #66FF33 0%,#669966 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #66FF33 0%,#669966 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66FF33', endColorstr='#669966',GradientType=0 ); /* IE6-9 */
}

.error-recording {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: 1px solid #FF0033;
    display: inline-block;
    vertical-align: text-bottom;
    background: #FF5375; /* Old browsers */
    background: -moz-linear-gradient(top, #FF5375 0%, #CC3300 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #FF5375 0%,#CC3300 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #FF5375 0%,#CC3300 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF5375', endColorstr='#CC3300',GradientType=0 ); /* IE6-9 */
}

/* RPC Progress Arrow Steps UI */
.arrow-steps {
    margin-right: 1rem;
}
.arrow-steps .step {
    font-size: 0.825rem;
    text-align: center;
    color: #999;
    cursor: default;
    margin: 0 0.2rem;
    padding: 0.17rem;
    float: left;
    position: relative;
    background-color: #E5E5E5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
  transition: background-color 0.2s ease;
}

.arrow-steps .step:after,
.arrow-steps .step:before {
    content: " ";
    position: absolute;
    top: 0;
    right: -17px;
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 17px solid #E5E5E5;    
    z-index: 2;
  transition: border-color 0.2s ease;
}

.arrow-steps .step:before {
    right: auto;
    left: 0;
    border-left: 17px solid #fff;   
    z-index: 0;
}

.arrow-steps .step:first-child:before {
    border: none;
}

.arrow-steps .step:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.arrow-steps .step span {
    position: relative;
}

.arrow-steps .step span:before {
    opacity: 0;
    position: absolute;
    top: -2px;
    left: -20px;
}

.arrow-steps .step.done span:before {
    opacity: 1;
    -webkit-transition: opacity 0.3s ease 0.5s;
    -moz-transition: opacity 0.3s ease 0.5s;
    -ms-transition: opacity 0.3s ease 0.5s;
    transition: opacity 0.3s ease 0.5s;
}

.arrow-steps .step.current {
    color: #fff;
    background-color: #3498DB;
}

.arrow-steps .step.current:after {
    border-left: 17px solid #3498DB;    
}

.arrow-steps .step:hover, .arrow-steps .dialpad:hover  {
    color: #3498DB;
}

.arrow-steps .dialpad {
    margin-top: 0.2rem;
    color: #999;
}

.arrow-steps .dialpad.current {
    color: #3498DB;
}

/* Follow Up RPC Define Size */
.size-32 {
    float: left;
    color: #212529;
    vertical-align: middle;
    font-size: 1rem;
    margin-left: 2rem;
}

.size-32:before{
    width:32px;
    height:32px;
    margin-left: -2.3rem;  
}

/* Follow Up Content */
.rpc-step1 .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

.rpc-step1 input[type="radio"] {
    margin-right: 0.5rem;
}

.rpc-step2 .modal-body, .rpc-step2a .modal-body {
    max-height: 60vh;
    overflow-y: auto;
}

.rpc-step2a input[type="radio"] {
    margin-right: 0.5rem;
}

.rpc-step3 .modal-body {
    max-height: 65vh;
    overflow-y: auto;
}

.FollowUpModal .modal-header {
    background: #26A65B;
    color: #FFF;
}

.FollowUpModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
    
}

.FollowUpModal .blink {
    animation: flash 2s infinite;   
    -webkit-animation: flash 2s infinite;
}

#FollowUp-tabContent .col-form-label-sm {
    padding-top: 0;
    padding-bottom: 0;
}

#FollowUp-tabContent .label {
    margin-bottom: 0.2rem;
}

a.remark-template {
    font-size: 0.7rem;
    float: right;
    line-height: 1.5rem;
}

a.remark-template:after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

#FollowUp-tabContent a.dropdown-item {
    white-space: normal;
}

#CallScript .card-header {
    padding: 0.5rem;
    background: #f8f9fa;
    font-weight: 500;
    border-bottom: none;
}

#CallScript .card-body {
    padding: 0.5rem;
    background: #f8f9fa;
}

 #call-script-search {
     margin:0;
     margin-top: 5px;
     padding: 0;
}
 
#call-script-search .search-query {
    padding: 0.3rem;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    border: 1px solid #d7d7d7;
}
 
#call-script-search button {
    border: 0;
    background: none;
    padding: 0 0.2rem;
    margin-top: -0.2rem;
    position: relative;
    left: -28px;
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
 
.search-query:focus + button {
    z-index: 3; 
}   

.search-query:focus{
    width: 400px;
    outline: none;
} 

.summary-modal-details {
    font-size: 0.8rem;
}

.call-script-scroll {
    max-height: 25vh;
    overflow-y: auto;
    max-width: 100%;
    word-wrap: break-word;
}

/* Minized RPC & Manual Follow Up Style */
.min .fa { font-size: 14px; }

.min .menuTab { display: none; }

.min-follow-up {
    height: 2.5rem;
    bottom: 1px;
    right: 1px;
    position: fixed;
    right: 1px;
    z-index: 9999;
}

.minimize {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.minimize:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.minimize:not(:disabled):not(.disabled):hover, .minimize:not(:disabled):not(.disabled):focus {
    color: #000;
    text-decoration: none;
    opacity: .75;
}

button.minimize {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
}
/* ---------- Follow Up Modal Ends ---------- */

/* ------- Incoming Call Modal Starts ------- */
.IncomingCallModal .modal-header {
    background: #26A65B;
    color: #FFF;
    position: sticky;
    top: 0;
    z-index: 1051;
}

.IncomingCallModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
}

.IncomingCallModal .blink {
    animation: flash 2s infinite;   
    -webkit-animation: flash 2s infinite;
}

.IncomingCallModal .form-control, #AddAttachmentModal .form-control {
    height: calc(2.25rem + 2px);
}

.not-your-debtor-legend {
    height: 14px;
    width: 18px;
    border-radius: 2px;
    border: none;
    display: inline-block;
    vertical-align: text-top;
    background: #f5c6cb;
}
/* ------ Manual Follow Up Modal Starts ----- */
#ManualFollowUpModal .modal-header {
    background: #26A65B;
    color: #FFF;
}

#ManualFollowUpModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
}

#manual-follow-up-step .modal-body {
    max-height: 75vh;
    overflow-y: auto;
}

#ManualFollowUp-tabContent .col-form-label-sm {
    padding-top: 0;
    padding-bottom: 0;
}

#ManualFollowUp-tabContent .label {
    margin-bottom: 0.2rem;
}

#ManualFollowUp-tabContent a.dropdown-item {
    white-space: normal;
}

.text-debtor-indicator {
    color: #e67e22;
}
/* ------ Manual Follow Up Modal Ends----- */

/* ------------- SMS Modal Starts ------------*/
#SMSModal .modal-header {
    background: #E67E22;
    color: #FFF;
}

#SMSModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
}
/* -------------- SMS Modal Ends -------------*/

/* ------- Internal Remark Modal Starts ------*/
#InternalRemarkModal .modal-header {
    background: #AEAEAE;
    color: #FFF;
}

#InternalRemarkModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
}
/* ------- Internal Remark Modal Ends ------*/

/* ------- Letter & Email Modal Starts ------*/
#LetterEmailModal .modal-header {
    background: #6666CC;
    color: #FFF;
}

#LetterEmailModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
}
/* ------- Letter & Email Modal Ends ------*/

/* ------- Legal Modal Starts ------*/
#LegalModal .modal-header {
    background: #CA2C68;
    color: #FFF;
}

#LegalModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
}
/* ------- Legal Modal Ends ------*/

/* ------- CQM Modal Starts ------*/
#CQMModal .modal-header {
    background: #359811;
    color: #FFF;
}

#CQMModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
}
/* ------- CQM Modal Ends ------*/

/* ------- Escalation Request Modal Starts ------*/
#EscalationRequestModal .modal-header {
    background: #aeaeae;
    color: #FFF;
}

#EscalationRequestModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
}
/* ------- CQM Modal Ends ------*/

/* - Dialpad Modal & Dialpad in Follow Up Starts -*/
.dial-pad {
    list-style-type: none;
    margin-left: -2.5rem;
}

.dial-pad-reset {
    position: absolute;
    top: 0.7rem;
    right: 0;
    background: transparent;
    border: 0;
    margin-right: 1.1rem;
    color: #999;
}

.dial-pad-reset:hover {
    color: #666;
    outline: none;
}

.dial-pad-reset:focus {
    outline: none;
}
.dial-pad-button {
    width: 55px;
    float: left;
    margin: 0.2rem 0.2rem;
}

.dial-pad-button .num {
    border: 1px solid #9e9e9e;
    -webkit-border-radius: 999px;
    border-radius: 999px;
    -moz-border-radius: 999px;
    height: 55px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
}

.dial-pad-button .num:hover {
    background-color: #9e9e9e;
    color: #fff;
    transition-property: background-color .2s linear 0s;
    -moz-transition: background-color .2s linear 0s;
    -webkit-transition: background-color .2s linear 0s;
    -o-transition: background-color .2s linear 0s;
}

.dial-pad-button .txt {
    font-size: 1rem;
    text-align: center;
    margin-top: 15px;
    line-height: 0.6rem;
    color: #333;
}

.dial-pad-button .small {
    font-size: 0.6rem;
    margin: 0;
    line-height: 1.5rem;
}
/* - Dialpad Modal & Dialpad in Follow Up Ends -*/

/* ----------- Dialer Modal Starts ----------- */
#DialerModal .modal-header {
    background: #336699;
    color: #FFF;
}

#DialerModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
}

.outgoing-call {
    background:url('../images/call-type-outgoing.png');
    background-size:cover;
    position:relative;
    width:16px;
    height:16px; 
    float: left;
    margin-left: 0.2rem;
}

.incoming-call {
    background:url('../images/call-type-incoming.png');
    background-size:cover;
    position:relative;
    width:16px;
    height:16px; 
    float: left;
    margin-left: 0.2rem;
}

.missed-call {
    background:url('../images/call-type-missed.png');
    background-size:cover;
    position:relative;
    width:16px;
    height:16px;  
    float: left;
    margin-left: 0.2rem;
}

.extension-call {
    background:url('../images/call-type-extension.png');
    background-size:cover;
    position:relative;
    width:16px;
    height:16px; 
    float: left;
    margin-left: 0.2rem;
}


/* ----------- Dialer Modal Ends ----------- */

/* ----------- Note Modal Starts ----------- */
#NoteModal .modal-header {
    background: #FFCC66;
    color: #212529;
}

#NoteModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
}

#NoteModal .modal-content {
    background: #FFFFCC;
}

#NoteModal textarea {
    border: 0;
    background: transparent;
}
/* ----------- Note Modal Ends ----------- */

/* ----------- Logout Reason Modal Starts ----------- */
#NoteModal .modal-header {
    background: #FFCC66;
    color: #212529;
}

#NoteModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
}

#NoteModal .modal-content {
    background: #FFFFCC;
}

#NoteModal textarea {
    border: 0;
    background: transparent;
}
/* ----------- Logout Reason Modal Ends ----------- */

/* ------- Request FV Modal Starts ------- */
#RequestFVModal .modal-header {
    background: #343a40;
    color: #FAB704;
}

#RequestFVModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
}

/* ------- Request FV Modal Ends ------- */

/* ------- Intercom Alert Starts ------- */
.intercom-hangup {
    margin-right: 5rem;
}

.notify-absolute-right {
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 1033;
}
/* ------- Intercom Alert Ends ------- */


/* ----------- Note Modal Ends ----------- */


/* ---------- Debtor's Page Starts ---------- */

.nav-debtor .nav-item {
    background: #FAFAFA;
    border: 1px solid #F2F2F2;
}

.nav-debtor .nav-item .active {
    background: #E67E22;
    color: #FFFFFF;
}

.nav-debtor .nav-link {
    /*height: 1.7rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    margin-right: 0.3rem;
    margin-left: 0.3rem;
    text-align: center;*/

    padding: 0.1rem;
    font-size: 0.7rem;
    text-align: center;
}

.close-debtor {
    font-size: 1.2rem;
    margin-left: 0.5rem;
}
 
.close-debtor span:hover {
    color: #dc3545;
}


.DebtorDetailsSubNav .nav-debtor .nav-link,
.GeneralInformationSubNav .nav-debtor .nav-link,
.ODAccountSummarySubNav .nav-debtor .nav-link,
.HPCollateralSubNav .nav-debtor .nav-link,
.historySubNav .nav-debtor .nav-link,
.appxASubNav .nav-debtor .nav-link
{
    font-size: 0.7rem;
}

.DebtorDetailsSubNav .nav-debtor .nav-link:hover,  
.DebtorDetailsSubNav .nav-pills .nav-link.active, 
.DebtorDetailsSubNav .nav-pills .show>.nav-link,
.GeneralInformationSubNav .nav-debtor .nav-link:hover,  
.GeneralInformationSubNav .nav-pills .nav-link.active, 
.GeneralInformationSubNav .nav-pills .show>.nav-link,
.ODAccountSummarySubNav .nav-debtor .nav-link:hover,  
.ODAccountSummarySubNav .nav-pills .nav-link.active, 
.ODAccountSummarySubNav .nav-pills .show>.nav-link,
.HPCollateralSubNav .nav-debtor .nav-link:hover,  
.HPCollateralSubNav .nav-pills .nav-link.active, 
.HPCollateralSubNav .nav-pills .show>.nav-link,
.historySubNav .nav-debtor .nav-link:hover,  
.historySubNav .nav-pills .nav-link.active, 
.historySubNav .nav-pills .show>.nav-link,
.appxASubNav .nav-debtor .nav-link:hover,  
.appxASubNav .nav-pills .nav-link.active, 
.appxASubNav .nav-pills .show>.nav-link
{
    color: #FFF;
    background-color: #3498DB;
}


.DebtorDetailsSubNav,
.GeneralInformationSubNav,
.ODAccountSummarySubNav,
.HPCollateralSubNav,
.historySubNav,
.appxASubNav
 {
    background: #F2F2F2;
    border-bottom: 1px solid rgba(0,0,0,.125);
    margin-top: -0.7rem;
    padding: 0.5rem;
    margin-left: -0.7rem;
    margin-right: -0.7rem;
    margin-bottom: 1rem;
}


.debtorDetails, .caseDetails, .clientDetails, .originalFinance, .productsDetails, .bookDetails, .additionalDetails {
    position: inherit;
}

.debtor-container {
    width: 100%;
    border: none;
    height: 100vh;
    overflow: hidden;
}

.details-container {
    position: relative;
    height: calc(100vh - 15rem);
    /*height: calc(100vh - 23rem);*/
    margin-top: .5rem;
    overflow-y: auto;
}

.details-container_cc,.details-container_loan {
    height: calc(100vh - 23rem) !important;
}

.islamic {
    background:url('../images/islamic-acc.png');
    position:relative;
    width:24px;
    height:24px; 
    margin-top: 0.1rem;
    margin-right: 0.5rem;
    float: left;
    vertical-align: middle;
}

.multiple-cards {
    background:url('../images/credit-card.png');
    background-size:cover;
    position:relative;
    width:24px;
    height:24px; 
    margin-top: 0.1rem;
    margin-right: 0.5rem;
    float: left;
    vertical-align: middle;
}

/* Debtor Taggin Dropdown */
.debtor-tag-none {
    float: left;
    vertical-align: top;
    margin-left: 1.5rem;
}

.debtor-tag-none:before{
    content: '';
    background:url('../images/none.png');
    background-size:cover;
    position:absolute;
    width:24px;
    height:24px;
    margin-left: -2rem; 
}

.debtor-tag-rip {
    float: left;
    vertical-align: top;
    margin-left: 1.5rem;
}

.debtor-tag-rip:before{
    content: '';
    background:url('../images/rip.png');
    background-size:cover;
    position:absolute;
    width:24px;
    height:24px;
    margin-left: -2rem; 
}

.debtor-tag-bankrupt {
    float: left;
    vertical-align: top;
    margin-left: 1.5rem;
}

.debtor-tag-bankrupt:before{
    content: '';
    background:url('../images/bankrupt.png');
    background-size:cover;
    position:absolute;
    width:24px;
    height:24px;
    margin-left: -2rem; 
}

.debtor-tag-fraud {
    float: left;
    vertical-align: top;
    margin-left: 1.5rem;
}

.debtor-tag-fraud:before{
    content: '';
    background:url('../images/fraud.png');
    background-size:cover;
    position:absolute;
    width:24px;
    height:24px;
    margin-left: -2rem; 
}

/* Debtor Blue Box Summary */
.summary-ptp {
    background: url(../images/summary-ptp.png) no-repeat 10px 10px;
    position: relative;
    float: right;
    text-align: right;
    border-right: 1px solid #5CB1DB;
    padding-top: 0.2rem;
}

.summary-last-payment {
    background: url(../images/summary-payment.png) no-repeat 10px 10px;
    position: relative;
    float: right;
    text-align: right;
    border-right: 1px solid #5CB1DB;
    padding-top: 0.2rem;
}

.summary-last-call {
    background: url(../images/summary-lastcall.png) no-repeat 10px 10px;
    position: relative;
    float: right;
    text-align: right;
    border-right: 1px solid #5CB1DB;
    padding-top: 0.2rem;
}

.summary-next-call {
    background: url(../images/summary-nextcall.png) no-repeat 10px 10px;
    position: relative;
    float: right;
    text-align: right;
    padding-top: 0.2rem;
}

.details-container .card-header {
    background-color: transparent;
    padding: 0.5rem 0.6rem;
    color: #E67E22;
}

.details-container  .col-form-label {
    font-size: 0.825rem;
}

.details-container .form-control:disabled, .form-control[readonly] {
    background-color: #F9F9F9;
    opacity: 1;
    border: none;
    font-size: 0.825rem;
}

.details-container .form-row:hover {
    background: #F2F2F2;
}

#outstanding-content .form-row {
    border-bottom: 1px dotted #D7D7D7;
}

#finance .nav-link {
    padding: .3rem 0.5rem;
    font-size: 0.8rem;
}

.grey-sub-header {
    color: #666;
    border-bottom: 2px double #D7D7D7;
    padding-bottom: 0.3rem;
}

.details-title-orange {
    border-bottom: 1px solid;
    color: #E67E22;
    padding-bottom: 0.3rem;
    text-transform: uppercase;
}

.details-title-maroon-dark {
    border-bottom: 1px solid;
    color: #CA2C68;
    padding-bottom: 0.3rem;
    text-transform: uppercase;
}

.details-title-light {
    border-bottom: 1px solid;
    color: #AEAEAE;
    padding-bottom: 0.3rem;
    text-transform: uppercase;
}

.occupation-edit-btn {
    position: absolute;
    right: 1.3rem;
    top: 0.8rem;
}

.occupation-action-btn {
    position: absolute;
    right: 1.3rem;
    top: 0.55rem;
}

.email-edit-btn {
    position: absolute;
    right: 1.3rem;
    top: 0.8rem;
}

.email-action-btn {
    position: absolute;
    right: 1.3rem;
    top: 0.55rem;
}

/* Currently Not In Use 

.details-title-blue {
    border-bottom: 1px solid;
    color: #2980B9;
    padding-bottom: 0.3rem;
    text-transform: uppercase;
}


.details-title-dark {
    border-bottom: 1px solid;
    color: #808080;
    padding-bottom: 0.3rem;
    text-transform: uppercase;
}

.details-title-lime {
    border-bottom: 1px solid;
    color: #99CC00;
    padding-bottom: 0.3rem;
    text-transform: uppercase;
}

.details-title-green {
    border-bottom: 1px solid;
    color: #009900;
    padding-bottom: 0.3rem;
    text-transform: uppercase;
}

.details-title-turqoise {
    border-bottom: 1px solid;
    color: #00B9B9;
    padding-bottom: 0.3rem;
    text-transform: uppercase;
}
*/

.vehicle {
    background:url('../images/car.png');
    background-size:cover;
    position:relative;
    width:30px;
    height:30px; 
    margin-top: 0.1rem;
    margin-right: 0.5rem;
    margin-left: 1.5rem;
    float: left;
    vertical-align: middle;
}

.loan {
    background:url('../images/loan.png');
    background-size:cover;
    position:relative;
    width:30px;
    height:30px; 
    margin-top: 0.1rem;
    margin-right: 0.5rem;
    margin-left: 1.5rem;
    float: left;
    vertical-align: middle;
}

.credit-card {
    background:url('../images/cc.png');
    background-size:cover;
    position:relative;
    width:30px;
    height:30px; 
    margin-top: 0.1rem;
    margin-right: 0.5rem;
    margin-left: 1.5rem;
    float: left;
    vertical-align: middle;
}

.misc {
    background:url('../images/other-product.png');
    background-size:cover;
    position:relative;
    width:30px;
    height:30px; 
    margin-top: 0.1rem;
    margin-right: 0.5rem;
    margin-left: 1.5rem;
    float: left;
    vertical-align: middle;
}

.contact-style .nav-pills .nav-link {
    margin-top: 0.1rem;
    height: 2.5rem;
    color: #E67E22;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.contact-style  .nav-pills .nav-link:hover {
    background: #F2F2F2;
}

.contact-style .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background: #F2F2F2;
    color: #212529;
}

.contactable {
    width: 2.3rem;
    height: 2.5rem;
    background: #009900;
    color: #FFF;
    float: left;
    margin-top: -0.5rem;
    margin-left: -1rem;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    padding: 0.6rem 0.7rem;
}

.do-not-call {
    width: 2.3rem;
    height: 2.5rem;
    background: #C0392B;
    color: #FFF;
    float: left;
    margin-top: -0.5rem;
    margin-left: -1rem;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    padding: 0.6rem 0.7rem;
}

.unidentified {
    width: 2.3rem;
    height: 2.5rem;
    background: #2980B9;
    color: #FFF;
    float: left;
    margin-top: -0.5rem;
    margin-left: -1rem;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    padding: 0.6rem 0.7rem;
}

.deleted {
    width: 2.3rem;
    height: 2.5rem;
    background: #FF0000;
    color: #FFF;
    float: left;
    margin-top: -0.5rem;
    margin-left: -1rem;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    padding: 0.6rem 0.7rem;
}

.new {
    width: 2.3rem;
    height: 2.5rem;
    background: #E67E22;
    color: #FFF;
    float: left;
    margin-top: -0.5rem;
    margin-left: -1rem;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    padding: 0.6rem 0.7rem;
}

.normal-num {
    float: left;
    vertical-align: top;
    font-size: 0.825rem;
    margin-left: 0.3rem;
    margin-top: -0.3rem;
    font-weight: 400;
    max-width: 59%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guarantor-num {
    float: left;
    vertical-align: top;
    font-size: 0.825rem;
    margin-left: 1.6rem;
    margin-top: -0.3rem;
    font-weight: 400;
    max-width: 59%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guarantor-num:before{
    content: '';
    background:url('../images/guarantor.png');
    background-size:cover;
    position:absolute;
    width:16px;
    height:16px;
    margin-left: -1.2rem; 
    margin-top: 0.1rem;
}

.num-name {
    font-size: 0.6rem;
    margin-top: -0.4rem;
    margin-left: 0.3rem;
    float: left;
    color: #666;
    text-align: left;
    max-width: 60%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.size-24:before {
    width: 24px;
    height: 24px;
    margin-left: -0.9rem;
    margin-top: -1.3rem;
}

.contact-details-body {
    background: #f2f2f2;
    margin-left: -0.95rem;
    margin-top: 0.1rem;
}

.title-action-btns {
    float: right;
    margin-top: -0.5rem;
}

.title-action-btns .btn {
    padding: 0.1rem 0.5rem;
}

.address-indicators,
.contact-indicators {
    position: relative;
    float: right;
    margin-top: -1.5rem;
    margin-right: -0.8rem;
}

.address-indicators img {
    width: 21px;
    height: 21px;
}

.contacts-indicators::after { 
    margin-right: -0.5rem;
    margin-left: 1rem;
    width: 24px;
    height: 24px;
    margin-top: -1.4rem;
}

.contacts-indicators::before {
    margin-right: 2rem;
    background: url(../images/original-phone.svg) !important;
}

.no-party {
    float: right;
    color: #999;
    vertical-align: top;
}

.no-party:before{
    content: '';
    position:absolute;
    width:24px;
    height:24px;
}

.debtor.contacts-indicators::after {
    content: '';
    background: url('../images/dmc-01.png');
    background-size:cover;
    display: block;
}

.unknown-party.contacts-indicators::after {
    content: '';
    background: url('../images/dmc-02.png');
    background-size:cover;
    display: block;
}

.related-party.contacts-indicators::after {
    content: '';
    background: url('../images/dmc-03.png');
    background-size:cover;
    display: block;
}

.not-related-party.contacts-indicators::after {
    content: '';
    background: url('../images/dmc-04.png');
    background-size:cover;
    display: block;
}

.inst-no-payment-legend {
    height: 14px;
    width: 18px;
    border-radius: 2px;
    border: none;
    display: inline-block;
    vertical-align: text-top;
    background: #f5c6cb;
}

.inst-payment-legend {
    height: 14px;
    width: 18px;
    border-radius: 2px;
    border: none;
    display: inline-block;
    vertical-align: text-top;
    background: #c3e6cb;
}

.activitylog-followuphistory-datagrid {
    max-height: 210px;
}

.activitylog-paymenthistory-datagrid {
    max-height: 210px;
}

/* ---------- Debtor's Page Ends ---------- */

/* ----- Login Screen Starts ----- */
.epic-login {
    width: 100wh;
    height: 100vh;
    background:url('../images/volare-bg.png') repeat;
}

.login-form img {
    width: 95%;
    animation: fadeIn 1s;
}

.main-div {
    background: rgba(255,255,255,0.9) none repeat scroll 0 0;
    border-radius: 5px;
    box-shadow: 1px 1px 60px 20px rgba(241, 196, 15,0.9);
    margin: auto;
    max-width: 38%;
    padding: 50px 70px 70px 71px;
    position: absolute;
    top: 15%;
    right: 0;
    left: 0;
    animation: fadeIn 1s;
}

.login-form .form-control {
    background: transparent;
    font-size: 1rem;
    height: 50px;
    line-height: 50px;
    border: 0;
}

.login-form .input-group {
    background: rgba(255,255,255,0.2);
    border: 1px solid transparent;
    border-radius: 3px;
    animation: fadeIn 2s;
    border-image: linear-gradient(-45deg, #23D5AB, #23A6D5, #EE7752, #F1C40F, #FEE140);
    border-image-slice: 1;
}

.login-form .input-group-text {
    background:  transparent;
    border: 0;
    color: rgba(0,0,0,0.6);
}

.login-form input:focus {
    outline: 0;
    box-shadow: none;
}

.login-form  .btn.btn-primary {
    color: #ffffff;
    font-size: 1rem;
    height: 3.5rem;
    line-height: 3.5rem;
    padding: 0;
    animation: fadeIn 1s;
}

.login-form .btn.btn-primary.reset {
    background: #ff9900 none repeat scroll 0 0;
}

.login-form .btn.btn-light {
    height: 3.5rem;
}

.login-form small {
    line-height: 0.1rem;
}

/* ----- Login Screen Ends ----- */
/* -- Field Visit Photo & Recording Modal Starts -- */
#fvPhotoModal.modal, #fvRecordingModal.modal {
    background: rgba(0, 0, 0, .7);
}

#fvPhotoModal .modal-dialog, #fvRecordingModal .modal-dialog {
    max-width: 100%;
}

#fvPhotoModal .modal-content, #fvRecordingModal .modal-content {
    background: none;
    box-shadow: none;
    border: none;
    width: 100%;
}

#fvPhotoModal button:focus {
    outline: none;
}
#fvPhotoCarousel .carousel-item img {
    max-width: 50vw;
}

#fvPhotoCarousel .carousel-indicators {
    overflow-x: auto;
    overflow-y: hidden; 
    display: block;
    position: static;
    text-align: left;
    white-space: nowrap;
    width: 70%;
    margin-top: 1rem;
}

#fvPhotoCarousel .carousel-indicators li {
    background-color: transparent;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline-block;
    height: auto;
    margin: 0 !important;
    width: auto;
}

#fvPhotoCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5;
    width: 6vw;
    height: 6vw;
    margin: 0 0.1rem;
}

#fvPhotoCarousel .carousel-indicators li.active img {
    opacity: 1;
}

#fvPhotoCarousel .carousel-indicators li:hover img {
    opacity: 0.75;
}

#fvPhotoCarousel .carousel-caption {
    position: relative;
    float: left;
}

#fvRecordingModal ul {
    width: 70%;
    margin: auto;
}

#fvRecordingModal li {
    color: #FFF;
    background: none;
    text-transform: uppercase;
    align-items: center;
}

/* -- Field Visit Photo & Recording Modal Ends -- */

/* jin siang css from here */
.dx-datagrid-rowsview .dx-selection.dx-row > td, .dx-datagrid-rowsview .dx-selection.dx-row:hover > td {
    color: white !important;
    background-color: #ff8f00 !important; 
}

.main-nofitication .dropdown-toggle::after {
    display: none;
}

.main-nofitication .dropdown-menu > li a {
    padding: 0.3rem 1rem;
}

.main-nofitication .dropdown-menu .dropdown-item span {
    padding-left: 1rem;
}

.main-nofitication.open > .dropdown-toggle {
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.main-nofitication.open > .dropdown-toggle {
    background: #f5f5f6;
}

.main-nofitication img {
    width: 16px;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.map-debtor-notify-absolute-bottom-right {
    position: absolute;
    right: 10px;
    bottom: 20px;
    z-index: 1033;
}

.general-th-center th{
    text-align: center;
}
/*
.dialer_setting_call_log_div {
    height: auto;
}*/

.text-wrap{
    word-wrap: break-word;
}

.absolute-bottom-right {
    bottom: 0;
    position: absolute;
    z-index: 9999;
}

.debtor_sidebar_customer_tagging_tagbox {
    border-radius: 4px;
    /*height: 30px;*/
    padding:0px;
    padding-left: 3px;

    border: 1px solid rgb(220,221,226);
}

.debtor_sidebar_customer_tagging_tagbox .dx-placeholder,
.debtor_sidebar_customer_tagging_tagbox::before,
.debtor_sidebar_customer_tagging_tagbox::after {
    padding-left:5px;
    color: #dedede;
    line-height: 1em;
    font-size:14px;
    border-bottom: none !important;
}

.main_next_call {
    cursor: pointer;
}

.debtor_sidebar_all_activities .dx-datagrid {  
  background-color:transparent;  
}

.debtor_sidebar_all_activities .dx-row,
.debtor_sidebar_all_activities .dx-row tr,
.debtor_sidebar_all_activities .dx-row td {  
  padding:0 !important;
  margin:0 !important;
  line-height: 1.5;
}

.debtor_sidebar_card_wrapper::before,
.debtor_sidebar_card_wrapper::after,
.debtor_sidebar_card_wrapper tr::before,
.debtor_sidebar_card_wrapper tr::after,
.debtor_sidebar_card_wrapper td::before,
.debtor_sidebar_card_wrapper td::after{  
  width:100%;
  height:100%;
  padding:0 !important;
  margin:0 !important;
  line-height: 1.5;
}

.cqm_button{
    content: '';
    background:url('../images/cqm_unchecked.png');
    background-size:cover;
    width:42px;
    height:42px;
    /*margin-left: -1.2rem; */
}

.cqm_button.cqm_checked,.cqm_box:hover .cqm_button{
    content: '';
    background:url('../images/cqm_checked.png');
    background-size:cover;
    width:42px;
    height:42px;
    /*margin-left: -1.2rem; */
}

.cqm_container{
    background-color: #d7d7d7;
}

.cqm_box{
    min-width: 150px;
    background-color: white;
    margin:1px;
    cursor: pointer;
}
.cqm_box .cqm_box_content{
    margin:0 auto;
}

.debtor_debtail_main_info h5{
    font-size:0.8rem !important;
}

.debtor_detail_contact_fieldset_sms_div .toggle{
    margin-top:5px;
    margin-right:10px;
}

.collector-icon {
    background: url('../images/setting_menu_icon/collector.png') no-repeat;
    background-size: 40px;
    line-height: 42px;
    background-position-x: 1.2rem;
    background-position-y: center;
    padding-left: 5rem;
    cursor: pointer;
}

.admin-icon {
    background: url('../images/setting_menu_icon/admin-menu.png') no-repeat;
    background-size: 40px;
    line-height: 42px;
    background-position-x: 1.2rem;
    background-position-y: center;
    padding-left: 5rem;
    cursor: pointer;
}

.settings-icon {
    background: url('../images/setting_menu_icon/settings.png') no-repeat;
    background-size: 40px;
    line-height: 42px;
    background-position-x: 1.2rem;
    background-position-y: center;
    padding-left: 5rem;
    cursor: pointer;
}

.roadie-icon {
    background: url('../images/setting_menu_icon/roadie.png') no-repeat;
    background-size: 40px;
    line-height: 42px;
    background-position-x: 1.2rem;
    background-position-y: center;
    padding-left: 5rem;
    cursor: pointer;
}

.agentx-icon {
    background: url('../images/setting_menu_icon/agentx.png') no-repeat;
    background-size: 40px;
    line-height: 42px;
    background-position-x: 1.2rem;
    background-position-y: center;
    padding-left: 5rem;
    cursor: pointer;
}

#volare_collector_brand_name{
    cursor: pointer;
}

.cursor_pointer {
   cursor: pointer;
}

table.dxtable {
    max-width: none !important;
    width: 100%;
}

table.dxtable .dx-datagrid-rowsview {
    max-height: 200px !important;
}

.table-sm-scrollable {
    max-height: none !important;
}


/* -- Volume Slider Starts -- */

.volume-ctrl .btn.active {                
    display: none;      
}

.volume-ctrl .btn span:nth-of-type(1)  {             
    display: none;
}
.volume-ctrl .btn span:last-child  {             
    display: block;     
}

.volume-ctrl .btn.active  span:nth-of-type(1)  {             
    display: block;     
}
.volume-ctrl .btn.active span:last-child  {              
    display: none;          
}

.volume-ctrl .slider{
    border-width: 1px;
    border-style: solid;
    border-color: #333 #333 #777 #333;
    border-radius: 25px;
    width: 90%;
    position: absolute;
    height: 13px;
    background-color: #8e8d8d;
    background: url('../images/volume-slider/bg-track.png') repeat top left;
    box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5), 
                      0 1px 0 0px rgba(250, 250, 250, .5);
}

.volume-ctrl .radio-hidden {
    width: 45px;
    position: relative;
}

.volume-ctrl .radio-hidden .btn-block {
    margin-top: 0;
}

.volume-ctrl .radio-hidden input[type="radio"]:checked, .volume-ctrl .radio-hidden input[type=checkbox], .radio-hidden input[type=radio]{
    visibility:hidden;
    margin-left: -1rem;
}

.volume-ctrl .volume {
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url('../images/volume-slider/volume.png') no-repeat 0 -50px;
    margin-top: 0.2rem;
}
.volume-ctrl .ui-slider-handle, .volume-ctrl  .ui-state-default, .volume-ctrl .ui-widget-content .volume-ctrl .ui-state-default, .volume-ctrl .ui-widget-header .ui-state-default, .volume-ctrl  .ui-button, .volume-ctrl .ui-button.ui-state-disabled:hover, .volume-ctrl .ui-button.ui-state-disabled:active {
    position: absolute;
    z-index: 2;
    width: 25px;
    height: 25px;
    cursor: pointer;
    background: url('../images/volume-slider/handle.png') no-repeat 50% 50%;
    font-weight: bold;
    color: #1C94C4;
    outline: none;
    top: -7px;
    margin-left: -12px;
    border: 0;
}
.volume-ctrl .ui-slider-range {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #eaeaea 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3EFFD8), color-stop(100%,#22ACFF)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* IE10+ */
    background: linear-gradient(top,  #ffffff 0%,#eaeaea 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
    position: absolute;
    border: 0;
    top: 0;
    height: 100%;
    border-radius: 25px;
}

.uppercase {
    text-transform: uppercase;
}

.uppercase::placeholder
{
   text-transform: none;
}

.scrollable-menu {
    height: auto;
    /*max-height: 200px;*/
    max-height: calc(100vh - 11rem);
    overflow-x: hidden;
}

.scrollable-menu-incoming-call {
    max-height: calc(100vh - 20rem) !important;
}

/* -- Volume Slider Ends -- */

.debtor_detail_contact_list {
    max-height:500px;
    overflow-y:auto;
    flex-wrap:nowrap;
}

.debtor_detail_address_list {
    max-height:500px;
    overflow-y:auto;
    flex-wrap:nowrap;
}

/* ---------------- Notification & Escalation CSS Begin -------------- */
.main_notification_data {
    max-height: 20rem;
    /*overflow: auto;*/
}

.notification-bell a span.badge {
    display:flex;
    position: absolute;
    right:1px;
    top:2px;
    font-weight: lighter;
    font-size:x-small;
}

#notification-dropdown-menu {
    width:30rem;
}

.escalation-time , .escalation-lbl {
    color : #888282;
    font-size: 0.9rem;
}

.main_notification_data_item span.escalation-lbl {
    max-width: 16rem;
    text-overflow: ellipsis;
    overflow: hidden;
}

.notification-bell .svg-inline--fa {
    position: relative;
}

.notification-bell a span.badge {
    display: flex;
    position: absolute;
    right: 1px;
    top: 2px;
    font-weight: lighter;
}

.notification-bell .dropdown-toggle::after{
    display:none
}

.empty-notification {
    text-transform : capitalize;
    text-align: center;
    color: #8a8686;
}

.notification-item {
    cursor: pointer;
    white-space:normal;
}

.notification-bell .notification-item {
    border-bottom : 1px solid lightgray ;
}

.notification-bell .notification-item svg {
    top: 0.1rem;
    margin-right: 0.5rem;
    float : left;
}

.notification-bell .dropdown-divider {
    margin: 0;
}

#notification-list .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color: #c7c5c5;
    color: #000;
}

.text-bulkemail {
    color: #5b4cab;
}

.text-bulksms {
    color: #e67e22;
}
/* ---------------- Notification & Escalation CSS End -------------- */


@media (min-width: 768px) {
    .navbar-expand-md .navbar-nav .nav-link.lang_promise_to_pay_titleonly,.navbar-expand-md .navbar-nav .nav-link.lang_next_call_titleonly {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
} 


.badge-in-view {
    font-weight:400;
    font-size:x-small;
    position: relative;
    bottom: 0.5rem;
}

.badge-pill-label.active {
    color:#000 !important;
}

.badge-pill-label{
    font-size:initial;
}


.unread_msg_row {
    font-weight: 700 !important ;
    background-color : #eef4f8 !important;
}

.btn-outline-danger.bg-white:hover {
    color:white !important;
    background-color : #dc3545 !important;
}

.btn-outline-primary.bg-white:hover {
    color:white !important;
    background-color :#007bff !important;
}

.btn-outline-success.bg-white:hover {
    color:white !important;
    background-color : #28a745 !important;
}
/*
#composeMessageModal small {
    color : lightgray !important;
}
*/
/*#composeMessageModal .modal-dialog,
#previewMessageModal .modal-dialog{
    max-width: 60rem !important;
}*/

#previewMessageModal .card-body{
    background-color: rgba(0,0,0,.03) !important;
}

.light-gray {
    background-color: #f2f2f2;
}

.main_internal_message_icon {
    font-size : initial;
 }

 /* ------- Internal Message Modal Starts ------*/
#composeMessageModal .modal-header {
    background: #E67E22;
    color: #FFF;
}

#composeMessageModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
}

#previewMessageModal .modal-header {
    background: #E67E22;
    color: #FFF;
}

#previewMessageModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
}
/* ------- Internal Message Modal Ends ------*/


.rebate_calculator_form_section > div.form-group:nth-child(odd) {
    padding-right:1rem !important;
}

#atp_calculator_modal .card_sub_collapse {
    border-bottom : 1px solid #3498DB !important;
    color : #3498DB !important;
}

.team_info_modal .modal-dialog {
    max-width: calc(100vw - 10rem) !important;
}

.team_info_modal .modal-header {
    background-color:#13a1b5 !important;
}

.main_notification_data_item span.escalation-lbl {
    max-width: 16rem;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sms_payment_label {
    padding-left: 15px;
}

.sms_payment_fpx_logo {
    position: relative;
    top: -6px;
    left: -6px;
}

/* Added for support big template */

.letter_modal_reminder_letter_print_preview {
    max-height: calc(100vh - 30rem);
    overflow: auto;
}

.letter_modal_reminder_letter_print_preview table {
    border: 1px solid #dee2e6;
    width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
}

.letter_modal_reminder_letter_print_preview table td,
.letter_modal_reminder_letter_print_preview table th{
    border: 1px solid #dee2e6;
    padding: .75rem;
}

#LetterEmailModal .modal-dialog {
    max-width: calc(100vw - 30rem) !important;
}

@media (min-width: 1360px) {
    #LetterEmailModal .modal-dialog {
        max-width: calc(100vw - 40rem) !important;
    }

    .letter_modal_reminder_letter_print_preview {
        max-height: calc(100vh - 27rem);
    }
}

@media (min-width: 1600px) {
    #LetterEmailModal .modal-dialog {
        max-width: calc(100vw - 60rem) !important;
    }
}

@media (min-width: 1920px) {
    #LetterEmailModal .modal-dialog {
        max-width: calc(100vw - 75rem) !important;
    }
}

.all_activity_button_navigation {
    margin-left:auto !important;
    min-width: 3.6rem;
    align-self: center;
}

.main_sms_preview {
    white-space: pre-wrap;
}

.call_target_tooltip_container {
    background-color: white !important;
    opacity: 1 !important;
    border: 1px solid lightgrey;
    border-radius: 0.3rem;
    /*top: 7.3rem !important;*/
    /*left: 1rem !important;*/
    padding:0 !important;
}

.call_target_tooltip{
    max-width: 21rem !important;
    color: #000 !important;
    background-color: #fff !important;
    padding:0 !important;

}

.callTargetDetails{
    text-align : left;
}

.callTargetDetails > div {
    border-right: 1px solid #dee2e6!important;
    /*margin-left: 0.5rem;*/
    margin-left: 1rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    padding-right: 1rem;
}

.main_card_letter_download_attachment{
    align-self: center;
}

.swal2-actions {
    z-index: 0 !important;
}

.btn-outline-blue {
    color: #007bff !important;
    background-color: transparent;
    background-image: none;
    border-color: #007bff !important;
}

.btn-outline-blue:hover {
    color: #FFFFFF !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

/* call scrub */
.contacts-phone-status-active {
    background: url('../images/phone-status-active.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 30px;
    height: 21px;
    float: left;
    vertical-align: middle;
}
.contacts-phone-blue {
    background:url('../images/phone-blue.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 25px;
    height: 21px;
    float: left;
    vertical-align: middle;
}
.contacts-debtor {
    background:url('../images/dmc-01.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 21px;
    height: 21px;
    float: left;
    vertical-align: middle;
}
.contacts-not-related-party {
    background:url('../images/dmc-04.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 21px;
    height: 21px;
    float: left;
    vertical-align: middle;
}
.contacts-phone-status-inactive {
    background: url('../images/phone-status-inactive.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 35px;
    height: 21px;
    float: left;
    vertical-align: middle;
}
.contacts-related-party {
    background: url('../images/dmc-03.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 21px;
    height: 21px;
    float: left;
    vertical-align: middle;
}
.contacts-unknown-party {
    background: url('../images/dmc-02.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    width: 21px;
    height: 21px;
    float: left;
    vertical-align: middle;
}


.btn-check-scrub {
    color: #fff;
    background: #E67E22;
    align-self: center;
    height: fit-content;
}

.last-check-scrub {
    float: right;
    font-size: 9px;
    margin-top: 6px;
}

.last-check-txt {
    color: grey;
    font-size: 9px;
}

/* bulletin board */

.news_update_container {
    display: flex;
}

.news_update_btn_wrapper {
    background-color: #f2f2f2;
    z-index: 1;
    padding-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.news_update_btn {
    width: 116px;
    height: 28px;
    padding: 2px 8px 2px 8px;
    border-radius: 10px;
    background-color: #fdd422;
    box-sizing: border-box;
    /*font-family: 'Roboto-Regular', 'Roboto', sans-serif;*/
    color: #363636;
    text-align: center;
    line-height: normal;
    font-size: 13px;
    border-style: none;
    cursor:pointer;
}

.news_update_btn::after {
    border:0;
}

.news_update_track_wrapper {
    justify-content: space-around;
    width: 100%!important;
}

.news_update_track {
    background-color: #f2f2f2;
    height: 28px;
    padding: 0.2rem 0 0.2rem 0.5rem;
    position: relative;
    overflow-x: hidden;
    display: flex;
    justify-content: space-around;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.news_update_content {
    position: absolute;
    font-size: 13px;
    overflow: hidden;
    width: 100%;
}

.news_update_content > div {
    display: table-row;
    white-space: nowrap;
    padding-left: 100%; 
    animation: news_update_marquee 60s linear infinite; /* Time must be adjusted based on total width of scrolled elements*/
}

.news_update_content > div a {
    padding-left: 450px;
    display: table-cell; 
    color:#000;
}

.news_update_track :hover {
    animation-play-state: paused;
}

.news-update-item {
    border-left: 4px solid #fdd422;
    padding-left: 0.5rem !important;
}

.news_update_btn_wrapper .dropdown .dropdown-menu {
    width: max-content;
    max-width:30rem;
    max-height:20rem;
    overflow-x:hidden;
}

.news_update_btn_wrapper .dropdown .dropdown-menu::-webkit-scrollbar {
    background-color: #fff;
    width: 12px; 
}

.news_update_btn_wrapper .dropdown .dropdown-menu::-webkit-scrollbar-button {
    display: none; 
}

.news_update_btn_wrapper .dropdown .dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 16px;
    border: 4px solid #fff;
}

.news_update_btn_wrapper .dropdown .dropdown-menu::-webkit-scrollbar-track {
    background-color: #fff;
}

.news_update_btn_wrapper .dropdown .dropdown-item {
    border-bottom: 1px solid lightgray;
    padding: 0.5rem;
    white-space: inherit !important;
    font-size:13px;
}

@keyframes news_update_marquee {
    0% {
        transform: translateX(0vw);
    }

    100% {
        transform: translateX(-50vw);
    }
}

.main_campaign_list_items.dropdown-menu  {
    max-height: 20rem;
    overflow-x: hidden;
}

.main_campaign_list_items::-webkit-scrollbar {
    background-color: #fff;
    width: 12px;
}

.main_campaign_list_items::-webkit-scrollbar-button {
    display: none;
}

.main_campaign_list_items::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 16px;
    border: 4px solid #fff;
}

.offer_letter_view_btn {
    border: 0;
    background: transparent;
}

.offer_letter_generation_preview_section {
    border: 1px solid #dee2e6;
    padding: 1.5rem;
    /*color : #3085d6;*/
    /*color : #d33;*/
}

.generate_offer_letter_confirm_yes_btn {
/*    background-color: ;*/
}

#offer_letter_remark_input {
    background-image: none !important;
}

.ol_send_container{
    text-align-last: right;
}

.fixed_swal_btn_width {
    width: 120px;
}

.accepted_tag_btn{
    font-size: 10px;
}

.debtor_detail_bimb {
    height: calc(100vh - 15rem) !important;
}

.debtor_detail_bicbs, .debtor_detail_bicc{
    height: calc(100vh - 23rem) !important;
}

div.whatsapp-notification-item-wrapper {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------- Whatsapp Section Starts ------------*/

#WhatsappModal .modal-header {
    background: #1bd641;
    color: #FFF;
}

#WhatsappModal .modal-header h5 {
    font-size: 0.9rem;
    line-height: 1.8rem;
}

.chat-section{
    height:20rem;
    border: 1px solid #d7d7d7;
    margin-bottom: 0.6rem;
    background-color: #f3efe9;
    overflow-y: scroll;
}

.chat-section::-webkit-scrollbar {
    background-color: #fff;
    width: 12px;
}

.chat-section::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 16px;
    border: 4px solid #f3efe9;
}

.chat-section::-webkit-scrollbar-track {
    background-color: #f3efe9;
}

.chat-window-section .chat-section {
    border-bottom: 0;
    margin-bottom: 0;
}

.chat-window-section .chat-action-section {
    background-color: #f3efe9;
    border: 1px solid #d7d7d7;
    border-top: 0;
}

.whatsapp-chat-input{
    border: 1px solid #d7d7d7;
    border-radius: 0.2rem;
    height: 38px;
    background-color: #f8f9fa;
    padding:0.5rem;
}

.whatsapp-chat-send-btn{
    background-color: #1bd641;
    border:none;
    border-radius: 0.2rem;
    width: 39px;
}

.whatsapp-identity-section{
    background-color: #f8f9fa;
    padding: 0.5rem;
    border: 1px solid #d7d7d7; 
    border-bottom:0;
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
}

.message-recipient{
    display: flex;
}

.message-sender{
    display: flex;
    justify-content: flex-end;
}

.message-recipient + .message-recipient .chat-message,
.message-sender + .message-sender .chat-message {
    margin-top:0;
}
.chat-message {
    max-width: 70%;
    min-width: 15%;
    border-radius: 0.2rem;
    padding: 0.2rem 0.5rem;
    margin: 0.5rem;
    box-shadow: 0px 1px 1px 0px rgb(215 215 215 / 35%);
}

.fromThem{
    background-color: #fff;
}

.myMessage {
    float: right;
    background-color: #d9fdd4;
}

.chat-timestamp{
    justify-content: flex-end;
    display:flex;
    color: #6c757d!important;
    font-size: 11px;
}

.no-message-wrapper {
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    padding: 4rem;
}

select.whatsapp-number-select{
    border:none; 
    background: transparent;
}

.whatsapp-notification-item {
    white-space: nowrap !important;
}

/* -------------- Whatsapp Section Ends -------------*/

/* Two Factor Authentication Starts */
.two-factor-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
}

.two-factor-wrapper > .key {
    padding-left: 10px;
}

.two-factor-wrapper > .key > p {
    margin-bottom: 0;
}

.qr-code {
    width: 6.2vw;
    min-width: 85px;
    min-height: 85px;
}

.qr-code svg {
    width: 100%;
    height: auto;
}

/*a:hover {
    text-decoration: underline;
}*/

.otp-error-message {
    font-size: 10.4px;
    color: #dc3545;
    margin-bottom: 1rem;
}

/* Two Factor Authentication Ends */

/* Unique Watermark Starts */

.top-watermark {
    margin-right: 1rem;
    /*top: 91%;*/
    top:87%;
    left:64%;
    position: absolute;
}

.top-watermark_bimb {
    margin-right: 1rem;
    top: 55%;
    left: 3%;
    position: relative;
    z-index: 1;
}

.header-watermark {
    top: 36%;
    right: 39%;
    position: fixed;
    z-index: 2;
}

.header-watermark-dca {
    top: 23%;
    right: 39%;
    position: fixed;
    z-index: 2;
}

.activity-watermark {
    position: fixed;
    top: 8%;
    left: 65%;
    z-index: 2;
}

.bottom-watermark {
    position: fixed;
    bottom: 5%;
    left: 2%;
    z-index: 2;
}

.unique-watermark {
    color: #00000040;
    font-size: 1rem;
    font-weight: 700;
    user-select:none;
    pointer-events:none;
}
/* Unique Watermark Ends */

/* -------------- IVR Section Starts -------------*/

#request-callback {
    max-height: calc(100vh - 29rem);
}

#request-callback-content{
    margin-bottom: 1rem;
}

#request-callback .dx-datagrid-rowsview .dx-row,
#request_callback_result_datagrid .dx-datagrid-rowsview .dx-row{
    height:40px !important;
}

#request-callback .dx-row.dx-header-row {
    background-color: rgba(0,0,0,.075) !important;
    color : #000 !important;
    height:40px !important;
}

#request-callback .dx-datagrid-rowsview .dx-row:hover, .dx-datagrid-rowsview .dx-row:focus {
    background: #f29d11 !important;
}

#request-callback-tab .badge-danger {
    position: relative;
    bottom: 3px;
}

#request_call_back_search_input {
    height:2.2rem;
}

.pink_indicator {
    background-color: #f0b0b7;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    float: left;
}

#request_callback_result_datagrid .dx-row.dx-header-row{
    color : #000 !important;
    height:40px !important;
}

#request_callback_result_datagrid .dx-datagrid-rowsview .is_different_collector.dx-data-row.dx-row-lines {
    background-color: #f0b0b7 !important;
}

.request-callback-call {
    background: url('../images/request_callback.png');
    background-size: cover;
    position: relative;
    width: 16px;
    height: 16px;
    float: left;
    margin-left: 0.9rem;
}

.request-callback-attended {
    background: url('../images/request_callback_attended.png');
    background-size: cover;
    position: relative;
    width: 16px;
    height: 16px;
    float: left;
    margin-left: 0.9rem;
}

/* -------------- IVR Section Ends -------------*/

/* -------------- BSI Section Starts -------------*/
.badge-volare-blue {
    background-color: #3498db;
    color :#fff;
}

.details-container_bsi {
    height: calc(100vh - 25rem);
}

.real_time_balance_action_label {
    text-transform: none;
    font-size: 15px;
}

.real_time_balance_reload_btn{
    border-style: none;
    background: transparent;
    
}

.debtor_detail_last_updated_label {
    font-size: 12px;
}

.debtor_detail_real_time_balance_reload {
    background:transparent;
    border : none;
}

/* -------------- BSI Section Ends -------------*/

/* MOA Template Start */
.modal-moa {
    max-width: 85rem !important;
}

.details-title-blue {
    border-bottom: 1px solid;
    color: #2980B9;
    padding-bottom: 0.3rem;
    text-transform: uppercase;
}
/* MOA Template End */

.debtor_detail_negotiated_fees_edit {
    position: absolute;
    right: 1.3rem;
    top: auto;
    bottom: 4rem;
}

.debtor_detail_negotiated_fees_operation{
    position: absolute;
    right: 1.3rem;
    bottom: 3.9rem;
}

.debtor_detail_negotiated_penalty_edit {
    position: absolute;
    right: 1.3rem;
    top: auto;
    bottom: 1.3rem;
}

.debtor_detail_negotiated_penalty_operation{
    position: absolute;
    right: 1.3rem;
    top: 32.9rem;
}

.debtor_detail_negotiated_fees,
.debtor_detail_negotiated_penalty {
    padding-right: 3.5rem !important;
}

.setExpiryDateContainerSpacer {
    height: 16px;
}

.setExpiryDateContainer {
    text-align: right;
    padding-right: 79px;
    height: 25px;
}

.setExpiryDateContainer > a {
    color: #399ADC;
}

.custom-tooltip-template {
    padding: 0.4rem 0;
    right: 18px;
}

.custom-tooltip-template > .arrow {
    right: 105px;
    top: 0;
}

.custom-tooltip-template .arrow::before {
    bottom: 0;
    border-width: 0 0.4rem 0.4rem;
    border-bottom-color: #000;
}

.badge_lawn-green {
    background-color : #B1EF53;
    color: #212529;
    border: 1px solid #A9FF88;
}

.atp_unsecured_atp_template_email_validity {
    font-size:10px;
}

.internal-escalation-ref-number {
    background: none;
    /*color: #66CCFF;*/
    color: #3498DB;
    /*font-weight: 600;*/
    font-size: 0.8rem;
    border: none;
    padding: 0;
    letter-spacing: 1px;
}

.close-filtered-escalation-list {
    margin-top: -2px;
    font-size: 1rem;
}

/* COLLECTIUS SECTION START */
.details-container-collectius {
    height: calc(100vh - 22rem);
    overflow-x:hidden;
}

.btn-installment-calculator-type {
    color: #666;
    background-color: #FFF;
    border-color: #D7D7D7;
    padding: 0.5rem 0.3rem;
    font-size: 0.6rem;
    line-height: 1.2;
}

.btn-installment-calculator-type:hover {
    color: #FFF;
    background-color: #E67E22;
}

.btn-installment-calculator-type.disabled:hover {
    box-shadow: none;
}

.btn-installment-calculator-type:focus, .btn-installment-calculator-type.focus {
    outline: none;
}

.btn-installment-calculator-type.disabled, .btn-installment-calculator-type:disabled {
    color: #A0A0A0;
    background-color: #CCC;
    border-color: #CCC;
}

.btn-installment-calculator-type:not(:disabled):not(.disabled):active, .btn-installment-calculator-type:not(:disabled):not(.disabled).active,
.show > .btn-installment-calculator-type.dropdown-toggle {
    color: #FFF;
    background-color: #E67E22;
}
/* COLLECTIUS SECTION END */

/* PAYDOWN SECTION START */
.totalPaidBreakdownModal {
    font-size : 13.2px !important;
}

.totalPaidBreakdownModal input {
    height : 25px !important;
    text-align: right;
}

.totalPaidBreakdownModal .modal-dialog {
    max-width: 55rem !important;
}

.visibility-none {
    visibility: hidden;
}

#totalBreakdownInputStructure {
    border-collapse: separate; 
    border-spacing: 6px 0;
}
/* PAYDOWN SECTION END */

.legal-card-details {
    font-size:13px;
}

.legal-card-table {
    border : 1px solid lightgrey;
}

.connection-info {
    margin-left: 10px;
}

.connection-status {
    font-weight: bold;
    margin: 0;
}

.debtor-name {
    font-size: 0.9em;
    color: #fcfcfc;
}

.contact-description {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #F8FFF1;
    border: 1px solid #ddd;
}

.contact-description span {
    font-size: 12px;
    color: #434343;
    font-family: 'Arial Bold', 'Arial', sans-serif;
    font-weight: 700;
    font-style: normal;
}

.contact-description em {
    font-style: italic;
    color: #434343;
    font-size: 12px;
    font-family: 'Arial Italic', 'Arial', sans-serif;
    font-weight: 400;
}

@media (max-width: 1536px) {
    .details-container-collectius {
     height: calc(100vh - 25rem);
    }
 }

@media (max-width: 1280px) {
    .details-container-collectius {
     height: calc(100vh - 27rem);
    }
 }
@media (max-width: 1024px) {
    .details-container-collectius {
     height: calc(100vh - 33rem);
    }
 }

 /* followup voicebot */

.allActivities-list .voice-bot-status {
    background: #9ACD32;
    color: #FFF;
    border-radius: 0.8rem;
    margin: 0 auto;
    text-align: center;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
}

.allActivities-list .card .vbot-already-called {
    background: #306272;
    color: #FFFFFF;
}

.vbot:before {
    content: '';
    background: url('../images/vbot_already_called.png');
    background-size: cover;
    position: absolute;
    width: 24px;
    height: 24px;
    margin-left: -2rem;
}

.incoming_call_table {
    max-height: 500px;
    overflow-y: auto;
}

.IncomingCallModal .modal-incoming-content {
    max-width: 90vw;
    max-height: calc(90vh - 60px); 
    overflow-y: auto;
}

.bg-grey {
    background : grey;
}

.debtor_detail_bmmb{
    height: calc(100vh - 26rem) !important;
}

#totalPaidBreakdownModal {
    border-collapse: separate; 
    border-spacing: 6px 0;
}