@import url("../fonts/font.css");
@import url("overwrite-bootstrap.css");
@import url("../fonts/main-icon-1/veery-font-1.css");
@import url("../fonts/main-icon-2/veery-font-2.css");
@import url("../fonts/main-icon-3/veery-font-3.css");
@import url("../fonts/veery-font/veery-phone-icon-1.css");
@import url("../fonts/main-icon-4/main-icon-4.css");
@import url("../fonts/themify/themify-icons.css");

body {
    background: #F2F4F8;
    color:#333333;
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

.introLoader,
.introLoading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 9999;
}

.introLoading {
    background-color: rgba(23, 55, 60, 1);
}

.gifLoaderInner {
    position: relative;
    z-index: 1500;
    text-align: center;
    font-size: 25px;
    color: #fff;
    margin-top: 22%;
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

/* #CONSOLE CSS */

.version-beta {
    position: absolute;
    top: 15px;
    left: 151px;
    font-size: 10px;
    color: #ffffff !important;
}

.console-profile-img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    margin-top: 9px;
}

.console-profile-img > img {
    width: 35px;
    height: 35px;
}

.console-profile-header {
    text-align: right;
    padding-top: 4px;
}

.console-profile-header > .login-name {
    color: #ffffff !important;

}

.console-profile-header > .time {
    color: #14d0a0 !important;
    font-size: 12px;
    margin-top: -4px;
}

.user-state {
    position: absolute;
    top: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    right: -2px;

    border: 2px solid #ffffff;
}

.task-state {
    position: absolute;
    top: 0px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    right: 8px;
    border: 2px solid #ffffff;
    font-size: 8px;
    line-height: 2.3;
}

.task-state.task-none {
    background: #e4e4e4;
}

.task-state.task-incoming {
    background: #EE437E !important;
}

.task-state.reg-status-done {
    background: #74BEFB;
}

.console-main-search {
    margin-left: 45px;
}

.main-search-txt {
    border: 1px solid #8298ae;
    min-width: 300px;
}

.console-drop-menu::before {
    content: "";
    display: block;
    position: absolute;
    top: -9px;
    margin: auto 0px;
    text-align: center;
    left: 122px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 14px solid white;
}

.console-drop-menu.add-new-page::before {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    margin: auto 0px;
    text-align: center;
    left: 20px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 22px solid white;
}

.console-drop-menu > li > a.drop-header {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 12px;
    padding-top: 4px;
    padding-left: 22px;
    display: inline-block;
    text-transform: uppercase;
}

.drop-active-icon {
    width: 10px;
    height: 10px;
    /*border: 2px solid #fff;*/
    /*border-radius: 100%;*/
    float: right;
    /*background: #F7F7F7;*/
    margin-right: 10px;
    margin-top: 4px;
}

.drop-active-icon > i.deactivate {
    color: #f0f0f0;
}

.drop-active-icon > i.active {
    color: #FFAA00;
}

.active-font {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    color: #FFAA00 !important;
}

.top-drop-text {
    color: #cccccc !important;
}

.drop-active-icon {
    font-size: 10px;
}

.console-drop-menu > li > a {
    font-size: 15px;
    padding: 6px 0px 4px 14px;
}

.main-search-txt:focus {
    border-color: #36ba45;
}

.menuitem {
    padding-left: 10px;
    padding-right: 10px;
    color: #dedede;
}

.menuitem-with-icon {
    padding-left: 9px;
    padding-right: 43px;
}

.menuitem-with-icon > a > i {
    display: inline-block;
    text-align: right;
    position: absolute;
    right: 0;
    padding-right: 20px;
    color: #14d0a0;
}

.main-search-input .dropdown-menu {
    left: 0!important;
    width: 100%!important;
}

.dropdown-menu > li > a.drop-header:focus,
.dropdown-menu > li > a.drop-header:hover {
    background-color: transparent !important;
}

.console-menu-icon {
    margin-top: 0px;
    width: 60px;
    height: 30px;
    padding-top: 9px;
    text-align: center;
}

.console-menu-icon + .console-menu-icon {
    border-right: 1px solid #B3B3B3;
    margin-left: 0;
    margin-right: 0;
}

.console-menu-icon > i {
    font-size: 20px;
    cursor: pointer;
    color: #B3B3B3;
}

.console-menu-icon > i:hover,
.console-menu-icon > i.active-this,
.console-menu-icon > i:active,
.console-menu-icon > i:focus {
    color: #EE437E;
}

.console-left-icon {
    display: inline-block;
}

/* #Console notification */
.console-notification-header {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #36ba45;
    color: #ffffff;
    top: -4px;
    right: -4px;
    text-align: center;
    font-size: 6px;
    padding-top: 5px;
    z-index: 10;
}

.console-drop-menu.notification-menu,
.console-drop-menu.notification-menu-left {
    min-width: 300px;
    min-height: 355px;
    padding-bottom: 0;
}

.notification-widget {
    min-width: 300px;
    min-height: 355px;
    padding-bottom: 0;
}

.console-drop-menu > li.notification-header > span.drop-sub-header {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 10px;
    padding-top: 4px;
    display: inline-block;
    text-align: right;
    float: right;
    color: #682F8E !important;
    padding-right: 13px;
    text-transform: uppercase;
}

.console-drop-menu.notification-menu::before {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    margin: auto 0px;
    text-align: center;
    left: 260px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 22px solid white;
}

.notification-widget::before {
    right: 10px;
    left: inherit;
}

.console-drop-menu.notification-menu-left::before {
    content: "";
    display: block;
    position: absolute;
    top: -10px;
    margin: auto 0px;
    text-align: center;
    left: 10px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 22px solid white;
}

.console-notofication-wrapper {
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin-top: -14px;
    /*padding: 0px 5px 5px 0px;*/

}

.console-notofication-wrapper > .notification-status {
    text-align: center;
    margin-top: 75px;
    font-size: 16px;
    color: #e8eae8;
}

.console-notofication-wrapper > .notification-status > i {
    font-size: 50px;
    color: #e8eae8;
}

.notification-list {
    display: block;
    width: 100%;
    min-height: 47px;
    background: #fff;
    margin-top: 5px;
    cursor: pointer;
    padding: 5px 5px 5px 13px;
    border-bottom:1px solid #eeeeee;
}

.notification-icon,
.ticket-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
    padding-top: 12px;
}

.notification-icon.user-list,
.ticket-icon.user-list {
    padding-top: 0px;
}

.notification-icon.user-list > img,
.ticket-icon.user-list > img {
    width: 55px;
    height: auto;
}

.notification-icon > i {
    font-size: 23px;
}

.notification-text {
    color: #808080 !important;
    padding: 8px 2px 0px 4px;
    font-size: 14px;
}

.notification-sender {
    color: #040506 !important;
    padding: 5px 2px 0px 4px;
    font-size: 15px;
    font-weight: bold;
}

.bold {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
}

.notification-time {
    text-align: left;
    font-size: 14px;
    display: inline-block;
    text-transform: capitalize;
    color: #333 !important;
    font-weight: 700;
    margin-top: 6px;
}

.notification-time.link {
    text-align: right;
    font-size: 10px;
    cursor: pointer;
    float: right;
    color: #14d0a0;
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
}

.notification-time.group {
    padding-left: 5px;
    color: #45bf55;
}

.notification-time.link:hover {
    color: #36BA45;
}

.txt-notification-search {
    height: 27px;
    width: 117px;
    border: 1px solid #8298ae;
}

.send-notification-wrapper {
    background: rgba(255, 255, 255, 0.95);
    width: 315px;
    height: 100%;
    position: fixed;
    top: 0;
    border-radius: 0px;
}

.send-notification-wrapper > .wrap {
    padding: 100px 20px 10px 10px;
    margin-top: 180px;
}

/*console phone wrapper */
.console-phone-wrapper {
    position: fixed;
    width: 250px;
    height: 250px;
    background: transparent;
    right: 10px;
    top: 20%;
    border-radius: 20px 7px;
    overflow: hidden;
    z-index: 2000;
}

.income-call-wrapper {
    width: 250px;
    height: 250px;
    position: fixed;
    border-radius: 20px 7px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0d1c33+0,2b4d52+99 */
    background: #0d1c33; /* Old browsers */
    background: -moz-linear-gradient(top, #0d1c33 0%, #2b4d52 50%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #0d1c33 0%, #2b4d52 50%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #0d1c33 0%, #2b4d52 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d1c33', endColorstr='#2b4d52', GradientType=0); /* IE6-9 */
}

.-ringing {
    animation: _ringing 600ms infinite;
    animation-fill-mode: forward;
    animation-direction: normal;
    animation-timing-function: linear;
}

@keyframes _ringing {
    0% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(6px, 0px);
        transform: rotateZ(2deg);
    }
    20% {
        transform: translate(-6px, 0px);
        transform: rotateZ(-2deg);
    }
    30% {
        transform: translate(3px, 0px);
        transform: rotateZ(1deg);
    }
    40% {
        transform: translate(-3px, 0px);
        transform: rotateZ(-1deg);
    }
    50% {
        transform: translate(2px, 0px);
        transform: rotateZ(1deg);
    }
    60% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

.income-call-details {
    text-align: center;
    width: 250px;
    height: 350px;
}

.income-call-details > .user-details {
    color: #fff;
    margin-top: 40px;
    text-align: center;
}

.income-call-details > .company-details {
    text-align: left;
    padding-top: 15px;
    padding-left: 30px;
    color: #ffffff;
}

.income-call-details > .user-details > h4 {
    margin-bottom: 0px;
    width: 100%;
    font-size: 20px;
    padding-left: 15px;
}

.income-call-details > .user-details > small {
    color: #36ba45;
    padding-left: 15px;
}

.anz-btn,
.hangout-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    padding-top: 13px;
    cursor: pointer;
}

/* the 'wave', same shape and size as its parent */
.sonar-wave-green {
    position: absolute;
    top: 12px;
    left: 53px;
    width: 35px;
    height: 35px;
    border-radius: 9999px;
    background-color: #08a91c;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

/*
  Animate!
  NOTE: add browser prefixes where needed.
*/
.sonar-wave-green {
    animation: sonarWave 2s linear infinite;
}

@keyframes sonar-wave-green {
    from {
        opacity: 1;
    }
    to {
        transform: scale(3);
        opacity: 0;
    }
}

@-webkit-keyframes chgop {
    0% {
        opacity: 1.0
    }
    100% {
        opacity: 0.6
    }
}

.hangout-btn {
    padding-top: 8px;
}

.anz-btn > i {
    font-size: 30px;
    color: #36ba45;
}

.hangout-btn > i {
    font-size: 40px;
    color: #d90000;
}

.incoming-action-wrapper {
    margin-top: 15px;
}

.anz-btn {
    background: rgb(23, 55, 60);
}

.hangout-btn {
    background: rgba(249, 63, 106, 0.2);
}

.income-call-details > .user-wrapper {
    height: 100px;
    width: 100px;
    background: rgba(20, 208, 160, 0.2);
    text-align: center;
    position: absolute;
    margin: 0 auto;
    border-radius: 50%;
    left: 81px;
    top: 40px;
    overflow: hidden;
    padding-top: 13px;
}

.income-call-details > .user-wrapper > img {
    border-radius: 50%;
    border: 5px solid rgba(20, 208, 160, 1);
}

.call-operation-wrapper {
    width: 230px;
    height: 46px;
    /* position: fixed; */
    bottom: 100px;
    right: 50px;
    background: rgb(255, 255, 255);
    z-index: 2000;
    border-radius: 0px;
    /* overflow: hidden; */
    box-shadow: -1px 3px 23px 0px rgba(0, 0, 0, 0.1);
    transition: all 80ms;
    padding: 5px 0px 5px 10px;
    margin-top: -23px;
}

.phone-bg-btn {
    width: 45px;
    height: 45px;
    background: #f7f5f5;
    border-radius: 50%;
    margin: 7px 4px 0px 9px;
    background: radial-gradient(circle at 50% 10%, #f5f5f5, #f9f9f9);
    box-shadow: 0 0.22em 0.27em -0.18em rgba(0, 0, 0, 0.45), inset 0 0.15em 0.2em -0.15em rgba(255, 255, 255, 0.8);
    text-align: center;
    padding-top: 13px;
    cursor: pointer;
    display: inline-block;
}

.more-btn-wrapper {
    margin-top: 15px;
}

.phone-sm-btn {
    /*width: 23%;*/
    width: 18%;
    height: 35px;
    border-radius: 12px;
    text-align: center;
    padding-top: 5px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: all 80ms;
    outline: none !important;
    font-size: 22px;
}

.phone-sm-btn.p-close-btn {
    color: #d90000;
}

.phone-sm-btn.p-anz-btn {
    color: #36ba45;
}

/*.phone-sm-btn.p-anz-btn:hover {*/
/*background: #168039;*/
/*color: #ffffff;*/
/*}*/

/*.phone-sm-btn.p-close-btn:hover {*/
/*background: #d34836;*/
/*color: #ffffff;*/
/*}*/

.phone-sm-bn-p8 {
    /*padding-top: 0px;*/
}

.phone-sm-btn.answer > i {
    color: #36ba45;
}

.phone-sm-btn.call-ended > i {
    color: #c31b1b;
}

.phone-sm-btn.call-hold > i {
    color: #c31b1b;
    background: rgba(255,97,221,0.33);
}

.phone-sm-btn:hover {
    /*background: radial-gradient(circle at 50% 5%, #ffffff, #c5c5c5);*/
    background: #f7f5f5;
    color: #EE437E;
}

.phone-bg-btn:hover {
    background: radial-gradient(circle at 50% 5%, #ffffff, #c5c5c5);
}

.phone-sm-btn.close:hover {
    background: radial-gradient(circle at 50% 5%, #c31b1b, #ff0000);
}

.phone-button-wrapper > .phone-btn {
    display: inline-block;
    background: #f7f5f5;
    border-radius: 63%;
    width: 30px;
    height: 30px;
    overflow: hidden;
    text-align: center;
    padding-top: 5px;
    cursor: pointer;
}

.phone-button-wrapper > .phone-btn > i {
    font-size: 16px;
    padding: 5px;
    color: #17373c;
}

.show-1-btn {
    width: 62px;
    border-radius: 46px;
    height: 38px;
    background: #ffffff;
    margin-left: 67px;
}

/*console phone new ui update */
.n-incoming-call-wrp {
    width: 300px;
    position: fixed;
    right: -310px;
    bottom: 150px;
    z-index: 1000;
    background: #223448;
    padding-bottom: 13px;
    height: 200px;
}

.n-incoming-widget {
    width: 300px;
    min-height: 500px;
    position: relative;
    overflow: hidden;
}

.n-incoming-icon {
    width: 70px;
    display: inline-block;
    height: 100px;
    float: left;
    position: relative;
    text-align: center;
    /*background: rgba(150, 150, 150, 0.22);*/
    margin: 0 auto;
}

.n-incoming-text-wrp {
    width: 230px;
    display: inline-block;
    height: 100px;
    float: right;
    position: relative;
    text-align: center;
    /*background: rgba(150, 150, 150, 0.22);*/
    margin: 0 auto;
}

.action-btn-wrp {
    width: 100%;
    min-height: 20px;
    overflow: hidden;
    position: relative;
    text-align: left;
    margin-top: 5px;
    padding-left: 10px;
}

.action-btn-wrp > ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.action-btn-wrp > ul > li {
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
}

.n-notfy-action {
    width: 35px;
    height: 35px;
    border: 1px solid #fff;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    text-align: center;
    padding-top: 5px;
    cursor: pointer;
}

.n-notfy-action > i {
    color: #fff;
    font-size: 18px;
}

.n-incoming-icon > .icon-round-n {
    width: 50px;
    height: 50px;
    overflow: hidden;
    position: relative;
    text-align: center;
    z-index: 0;
    border-radius: 50%;
    background: rgb(13, 130, 61);
    padding-top: 8px;
    margin-left: 20px;
    margin-top: 35px;
}

.n-incoming-icon > .icon-round-n > i {
    color: #223448;
    font-size: 30px;
    padding-top: 20px;
    z-index: 1000;
}

.caller-name,
.call-time,
.button-footer {
    width: 100%;
    display: block;
    text-align: left;
    color: #ffffff;
    padding-left: 15px;
}

.caller-name {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 18px;
    padding-top: 7px;
}

.call-time {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 15px;
    padding-top: 0px;
    letter-spacing: 1px;
}

.call-time-small {
    padding-top: 9px;
}

.button-footer {
    margin-top: 10px;
    margin-bottom: 5px;
}

.button-footer > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.button-footer > ul > li {
    display: inline-block;
}

.btn-end-n,
.btn-anz-n {
    border-radius: 0px;
    font-size: 10px;
}

.btn-end-n {
    background: #fb5f21;
}

.btn-anz-n {
    background: #098a6c;
}

.btn-end-n:hover,
.btn-end-n:focus {
    background: #ff2516;
    color: #fff;
}

.btn-anz-n:hover,
.btn-anz-n:focus {
    background: #0ae5b9;
    color: #fff;
}

.toggle-panel {
    position: absolute;
    right: 15px;
    top: 6px;
    z-index: 100;
}

.toggle-panel > i {
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.toggle-panel > i :hover {
    color: #fff;
    font-size: 20px;
}

/*end*/

/*view ticket*/
.view-ticket-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

.ticket-wrap {
    background: #ffffff;
    height: auto;
    max-height: 800px;
    margin-top: 58px;
    overflow: hidden;
    padding: 10px 25px 20px 25px;
    -webkit-box-shadow: -1px -1px 27px -6px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -1px -1px 27px -6px rgba(0, 0, 0, 0.75);
    box-shadow: -1px -1px 27px -6px rgba(0, 0, 0, 0.75);
}

.ticket-details-wrap {
    min-height: 450px;
}

.model-header {
    min-height: 94px;
    position: relative;
    border-radius: 5px 5px 0 0;
    background-color: #fff;
    -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin: 0 0 20px;
    float:left;
    width:100%;
}

.mode-left-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #f3f1f1;
    border-radius: 50%;
    padding-top: 7px;
}

.mode-left-icon > i {
    color: #EE437E;
    font-size: 25px;
    padding-right: 20px;
    padding-left: 13px;
    overflow: hidden;
    text-align: center;
    overflow: hidden;
}

.ticket-model {
    text-align: center;
}

.ticket-model > i {
    font-size: 30px;
    padding: 0;
    line-height:1.6;
}

.mode-left-icon-ticket > i {
    font-size: 35px;
}

.model-header-text {
    font-size: 18px;
    padding-left: 15px;
    overflow: hidden;
    display: -webkit-box;
    margin: 0 auto;
    line-height: 1;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.model-btn-wrapper > .btn-warp {
    display: inline-block;
}
.model-btn-wrapper.xs-buttons{
    opacity: 0.9;
}
.model-btn-wrapper.xs-buttons > .btn-warp {
    display: block;
    line-height: 0;
    margin-bottom: 1px;
    top: 4px;
    right: 4px;
}

.model-btn-wrapper {
    padding-top: 11px;
    text-align: right;
}

.model-body {
}

.ticket-list-header {
    color: #36ba45;
    margin-top: 20px;
    margin-bottom: 20px;
}

.active-menu-icon {
    color: #ffffff !important;
}

.deactive-menu-icon {
    color: #AF302D !important;
}

.ticket-details {
    background: #ffffff;
    height: auto;
    width: 100%;
    margin-bottom: 10px;
    padding: 7px 5px 5px 5px;
    overflow: hidden;
}

.ticket-list-wrapper {
    overflow: hidden;
}

.display-none {
    display: none !important;
}

.display-block {
    display: block !important;
}

.display-inline {
    display: inline-block !important;
}

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

/*main console tab wrapper */
.ui-tabs-scrollable > .spacer > div:first-child > .tab-content {
    margin-top: -1px;
    border-top: 0px solid #d9dee4;
    /*border-left: 1px solid #d9dee4;*/
    /*border-bottom: 1px solid #d9dee4;*/
}

.console-tab-wrapper {
    /*padding: 110px 36px 60px 76px;*/
    padding: 50px 36px 10px 76px;
}

.tab-content {
    /*background: #fff;*/
    min-height: 100vh;
    height: auto;
    width: 100%;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.ticket-tab-panle > .tab-content {
    min-height: 15vh;
}

/*profile wrapper */
.profile-left-wrapper {
}

.profile-right-wrapper {

}

.profile-right-wrapper > .profile-wrap {
    height: auto;
    width: 100%;
    background-color: #17373c;
    overflow: hidden;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 21px;
    padding-bottom: 30px;
    -webkit-box-shadow: -5px 3px 19px -4px rgba(0, 0, 0, 0.21);
    -moz-box-shadow: -5px 3px 19px -4px rgba(0, 0, 0, 0.21);
    box-shadow: -5px 3px 19px -4px rgba(0, 0, 0, 0.21);
}

.layout-header {
    height: auto;
    border-bottom: 1px solid #d2c242;
    padding: 11px 10px 44px 10px;
}

.layout-header > div > .left-text {
    color: #14d0a0;
    font-size: 19px;
    padding-top: 5px;
}

.layout-header > div > .btn-wrapper {
    color: #14d0a0;
    text-align: right;
    right: 0;
}

.profile-details-img {
    margin-top: 35px;
    margin-bottom: 10px;
    width: 100%;
}

.profile-status {
    width: 100%;
    color: #ffffff;
}

.profile-status > span {
    color: #36BA45;
}

.profile-img-wrapper {
    padding-left: 10px;
}

.online-user {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #36ba45;
    display: inline-block;
    margin-right: 6px;
}

.inline-btn {
    display: inline-block;
}

.profile-body-wrapper {

}

.profile-details-info {
    padding-top: 10px;
}

.header-text-h5 {
    color: #d2c242;
    font-size: 17px;
}

.header2-text-h5 {
    color: #d2c242;
    font-size: 15px;
}

ul.info-list {
    list-style: none;
    padding-left: 0px;
}

ul.info-list > li {
    display: inline-block;
    padding-right: 20px;
}

ul.info-list > li > small {
    color: #8298ae;
}

ul.info-list > li > h5 {
    color: #ffffff;
    margin-top: 2px;
}

/* info list BIG */
ul.info-list-lg {
    list-style: none;
    padding-left: 0px;
}

ul.info-list-lg > li {
    display: inline-block;
    min-width: calc(25% - 3px);
    text-align: left;
}

ul.info-list-lg > li > small {
    color: #333333;
    font-size: 12px;
    font-weight: 700;
}

ul.info-list-lg > li > h5 {
    color: #808080;
    margin-top: 2px;
    text-transform: capitalize;
}

.profile-details-tab {
    position: absolute;
    top: 90%;
    width: 100%;
}

.profile-tab {

}

.profile-tab-wrapper {

}

.profile-tab-wrapper > ul {
    padding-left: 300px;
}

.nav-tabs > li.profile-tab > a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 0px 0px 0 0;
    color: #8298ae;
    font-size: 17px;
}

.nav-tabs > li.profile-tab > a:hover {
    background: transparent;
    border-bottom: 5px solid #14d0a0;
}

.nav-tabs > li.profile-tab.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    cursor: default;
    background-color: transparent !important;
    border-radius: 0;
    color: #000000;
}

.nav > li.profile-tab > a {
    padding: 2px 15px;
}

.profile-tab-wrapper > div.tab-content {
    width: 100%;
    padding: 10px 35px 10px 35px;
    margin-top: 10px;
}

/*engagement timelime scrolly*/
.items-wrap {
    /*position: absolute;*/
    width: 100%;
    height: 300px;
    overflow: scroll;
}

/*time line*/
.timeline {
    list-style: none;
    padding: 20px 20px 20px 20px;
    position: relative;
}

.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 2px;
    background: #E5E7E3;
    left: 50%;
    margin-left: -0.5px;
    border-radius: 14px;
}

.timeline > li {
    margin-bottom: 20px;
    position: relative;
}

.timeline > li:before,
.timeline > li:after {
    content: " ";
    display: table;
}

.timeline > li:after {
    clear: both;
}

.timeline > li:before,
.timeline > li:after {
    content: " ";
    display: table;
}

.timeline > li:after {
    clear: both;
}

.timeline > li > .timeline-panel {
    width: 45%;
    float: left;
    background: #f7f5f5;
    border-radius: 10px;
    padding: 10px 12px 5px 12px;
    position: relative;
    color: #333;

}

.timeline > li > .timeline-panel:before {
    position: absolute;
    top: 26px;
    right: -10px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-left: 15px solid #f7f5f5;
    border-right: 0 solid #f7f5f5;
    border-bottom: 15px solid transparent;
    content: " ";
}

.timeline > li > .timeline-badge {
    color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    text-align: center;
    position: absolute;
    top: 16px;
    left: 50%;
    margin-left: -25px;
    background-color: #17373c;
    z-index: 0;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
}

.timeline > li.timeline-inverted > .timeline-panel {
    float: right;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}

.timelline-wrapper {
    margin-bottom: 200px;
    height: 100%;
    width: 100%;
}

.timeline-badge.primary {
    background-color: #2e6da4 !important;
}

.timeline-badge.success {
    background-color: #3f903f !important;
}

.timeline-badge.warning {
    background-color: #f0ad4e !important;
}

.timeline-badge.danger {
    background-color: #d9534f !important;
}

.timeline-badge.info {
    background-color: #5bc0de !important;
}

.timeline-badge > i {
    font-size: 25px;
    padding-top: 10px;
}

.api-channel > i,
.api-channel {
    color: #0eeaff !important;
}

.twitter-channel > i,
.fa-twitter,
.twitter-channel {
    color: #55acee !important;
}

.call-channel > i,
.call-channel {
    color: #369d3e !important;
}

.email-channel > i,
.fa-envelope-o,
.email-channel {
    color: #2fb81b !important;
}

.fa-skype {
    color: #00AFF0;
}

.sms-channel > i,
.sms-channel {
    color: #f0ad4e !important;
}

.facebook-channel > i,
.fa-facebook,
.facebook-channel {
    color: #3b5998 !important;
}

.voicemail-channel > i,
.voicemail-channel {
    color: #d2c242 !important;
}

.viber-channel > i,
.viber-channel {
    color: #59267c !important;
}

.timeline-title {
    margin-top: 0;
    color: inherit;
}

.timeline-body > p,
.timeline-body > ul {
    margin-bottom: 0;
    color: #8298ae;
    font-size: 12px;
}

.timeline-body > p + p {
    margin-top: 5px;
}

.bottom-line {
    border-bottom: 1px solid #14d0a0;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.copy {
    cursor: pointer;
}

.btn-left-icon {
    color: #14d0a0;
    font-size: 17px;
    cursor: pointer;
}

.btn-left-icon:hover {
    color: #d2c242;
}

.btn-left-icon > i {
    padding-right: 5px;
}

.header-round-icon {
    padding-bottom: 20px;
}

.header-round-icon > .text-header {
    display: inline-block;
    color: #0d1c34;
    padding-left: 10px;
}

.header-round-icon > .icon-left {
    width: 40px;
    height: 40px;
    background: #17373c;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
}

.header-round-icon > .icon-left > i {
    color: #a1d700;
    font-size: 25px;
}

/*engagement wrapper*/
.engagement-wrapper {
    padding: 25px 0px 5px 22px;
}

.IVR-wrapper {
    padding: 0px 19px 5px 0px;
}

.IVR-details-wrap {
    height: auto;
}

.IVR-details-wrap > .ivr-list {
    width: 100%;
    height: auto;
    background: #ffffff;
    -webkit-box-shadow: -7px 3px 27px -14px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -7px 3px 27px -14px rgba(0, 0, 0, 0.75);
    box-shadow: -7px 3px 27px -14px rgba(0, 0, 0, 0.75);
    font-size: 10px;
    padding: 13px 10px 15px 10px;
    margin-bottom: 5px;
}

tr.ivr-tbl:nth-child(even) {
    background-color: #f9f9f9;
}

.ivr-list {
    z-index: 1;
}

.ivr-row > .th {
    font-size: 10px;
}

tr.ivr-tbl {
    z-index: 1;
    cursor: pointer !important;
}

tr.ivr-tbl > td {
    text-align: left;
}

tr.ivr-tbl:hover {
    background-color: #d1d1d1 !important;
}

.new-note-wrapper {
    width: 100%;
    padding-bottom: 45px;
    padding-top: 20px;
}

.new-note-wrapper-icon {
    width: 100%;
    text-align: center;
    cursor: pointer;
}

.note-empty-text-052017 {
    min-height: 30px;
    font-size: 20px;
    letter-spacing: 0.44px;
    padding-bottom: 20px;
    text-align: center;
}

.engagement-note-list {
    width: 100%;
    height: auto;
    overflow: hidden;

}

.engagement-note-list > .note-wrap {
    color: #8298ae;
    font-size: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #d2c242;
    display: block;
    width: 100%;
    padding-top: 13px;
}

.note-wrap > .left-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #8298ae;
    border-radius: 50%;
    text-align: center;
    float: left;
    margin-right: 5px;
    margin-top: -6px;
}

.note-wrap > .left-icon > i {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.9;
}

/*left profile */

.layout-header > div > .left-text.header-small {
    color: #8298ae;
    font-size: 10px;
    padding-top: 12px;
}

/*profile ticker view */
.profile-ticker-wrap {
    min-height: 100px;
    height: auto;
    width: 100%;
    background: #fff;
    -webkit-box-shadow: -7px 3px 27px -14px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -7px 3px 27px -14px rgba(0, 0, 0, 0.75);
    box-shadow: -7px 3px 27px -14px rgba(0, 0, 0, 0.75);
    padding: 10px 10px 6px 0px;
    position: relative;
    margin-top: 7px;
    overflow: hidden;
}

.profile-ticker-wrap > div > div .left-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    float: left;
    margin-right: 15px;
    margin-top: 0px;
}

.profile-ticker-wrap > .right-ticket-details {
    padding: 10px 30px 0px 30px;
}

.ticker-id {
    display: block;
    text-align: left;
    color: #a1d700;
    cursor: pointer;
    font-size: 10px;
}

.ticket-date {
    float: right;
    color: #14d0a0;
}

.ticker-id:hover {
    color: #0d1c33;
}

.ticket-subj {
    padding-top: 10px;
    padding-bottom: 3px;
    text-transform: uppercase;
    color: #8298ae;
    font-size: 12px;
}

.ticket-subj > small {
    padding-left: 10px;
}

.ticket-subj > small.high {
    color: #ff8c00 !important;
}

.ticket-subj > small.normal {
    color: #00cd73 !important;
}

.ticket-subj > small.low {
    color: #8298ae;
!important;
}

.ticket-subj > small.urgent {
    color: #d90000 !important;
}

.urgent-boarder {
    border-top: 3px solid #d90000;
}

.high-boarder {
    border-top: 3px solid #d2c242;
}

.normal-boarder {
    border-top: 3px solid #04756f;
}

.low-boarder {
    border-top: 3px solid #8298ae;
}

.ticket-channel {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: 34px;
    text-align: center;
    padding-top: 14px;
}

.ticket-desc {
    padding-bottom: 5px;
}

.ticket-channel > i {
    font-size: 25px;
    color: #ffffff;
}

.right-ticket-details >
div > div >
.left-avatar > img {
    width: 80px;
    height: 80px;
    object-position: 50% 50%;
}

.object-fit_fill {
    object-fit: fill
}

.object-fit_contain {
    object-fit: contain
}

.object-fit_cover {
    object-fit: cover
}

.object-fit_none {
    object-fit: none
}

.object-fit_scale-down {
    object-fit: scale-down
}

/* add new ticket*/
.fixed-model-opacity {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 208vh;
    z-index: 100;
}

.new-subticket, .u-template-wrp  {
    position: absolute;
    /*bottom: 24%;*/
    top: 110px;
    z-index: 99999;
    max-width: 670px;
}

.new-profile-model {
    height: 111vh;
    z-index: 100;
    -webkit-box-shadow: -2px 0px 4px -3px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -2px 0px 4px -3px rgba(0, 0, 0, 0.75);
    box-shadow: -2px 0px 4px -3px rgba(0, 0, 0, 0.75);
}

.new-profile-boarder {
    border: 1px solid #f7f5f5;
}

.bg-opacity-8 {
    background: rgba(0, 0, 0, 0.8) !important;
}

.model-main-wrapper {
    background: #fff;
    /*height: 720px;*/
    height: 525px;
    /*margin-top: 160px;*/
    /*padding: 10px 25px 20px 25px;*/
    position: relative;
    z-index: 95;
    border-radius: 5px;
    overflow: hidden;
}

.model-main-wrapper .model-header {
    /*margin: -9px -24px 20px;*/
    min-height: 80px;
    /*width: calc(100% + 48px);*/
}

.model-main-wrapper .mode-left-icon {
    float: left;
    margin: 0 -15px;
}

.new-subticket .model-header-text {
    line-height: 2.4;
    margin-left: 35px;
}

.model-header-text {
    line-height: 1.4;
}

.model-footer-wrapper {
    background: #0d1c34;
    width: 100%;
    height: 55px;
    position: absolute;
    left: 0;
    bottom: 0;
    padding-right: 15px;
}

/* #MAIN css */
::-webkit-input-placeholder {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    color: #8298ae;
}

:-moz-placeholder {
    /* Firefox 18- */
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    color: #8298ae;
}

::-moz-placeholder {
    /* Firefox 19+ */
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    color: #8298ae;
}

:-ms-input-placeholder {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    color: #8298ae;
}

.m-left-10 {
    margin-left: 10px;
}

.m-right-10 {
    margin-right: 10px;
}

.p-left-15 {
    padding-left: 15px;
}

.m-left-25 {
    margin-left: 25px;
}

.m-top-6 {
    margin-top: 6px;
}

.p-left-40 {
    padding-left: 40px;
}

.p-left-0 {
    padding-left: 0px !important;
}

.p-right-0 {
    padding-right: 0px !important;
}

/*temp style */
.m-r-35 {
    margin-right: 30px;
}

.m-l-25 {
    margin-left: 25px;
}

#call span {
    display: inline-block;
    -webkit-animation: Rotate 2000ms linear 2000ms 5;
    animation: Rotate 2000ms linear 2000ms 5;
}

/*click numberpad*/
.dialpadbtn:hover {
    text-decoration: none !important;
}

.dialpadbtn:active {
    background: #49a3d3;
    color: #fff;
    font-weight: 500;
    transition: background 0.1s;
    text-decoration: none !important;
}

/*dial pad*/
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: transparent;
    border: 0px solid #e3e3e3;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);
}

.div-keypad {
    left: 0px;
    width: 301px;
    height: 280px;
    /* background: rgba(40, 55, 71, 0.9); */
    margin: 0 auto;
    /* border-radius: 51px; */
    position: absolute;
    top: 100px;
    z-index: 2000;
    background: #17373c;
    display: none;
}

.dialpadbtn {
    display: inline-block;
    width: 55px;
    height: 55px;
    color: #fff;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    line-height: 3;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 17px;
    text-decoration: none !important;

}

.p-top-6 {
    padding-top: 6px;
}

.p-left-0 {
    padding-left: 0 !important;
}

.m-top-10 {
    margin-top: 10px;
}

.m-top-20 {
    margin-top: 20px;
}

.p-top-10 {
    padding-top: 10px;
}

.m-top-0 {
    margin-top: 0px;
}

.p-0 {
    padding: 0px;
}

.p-bottom-15 {
    padding-bottom: 15px;
}

.m-bottom-0 {
    margin-bottom: 0px;
}

/*auto complete drop down style*/
.auto-complete-left-panel {
    float: left;
}

.auto-complete-left-panel img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.auto-complete-right-panel {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    float: left;
    margin-left: 5px;
    margin-top: 7px;
}

.auto-complete-right-panel span:first-child {
    font-size: 16px;
}

.auto-complete-right-panel span:nth-child(2) {
    font-size: 14px;
    color: gray;
}

.auto-complete-right-panel span:last-child {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    display: block;
    font-size: 13px;
    text-transform: capitalize;
    padding-left: 10px;
}

.position-relative {
    position: relative;
}

/*ticket view style */
.ticket-view-wrapper,
.ticket-filter-wrap,
.mail-inbox-wrapper {
    /*padding: 15px;*/
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
}

.mode-left-icon.dark {
    background: #00261c;
}

.dark.ticket-model{
    background: #F2F4F8;
    height: 64px;
    width: 64px;
    border-radius: 100%;
    text-align:center;
}

.float-left {
    float: left;
}

.model-header-text-wrap {
    width: calc(100% - 64px);
}
.model-header-text.small {
    font-size: 12px;
    color: #808080;
    margin-top: 10px;
    width: 100%;
}

.ticket-view-option {
    left: -132px;
    top: 48px;
}

.ticker-details-wrapper {
    width: 100%;
    padding: 15px 0;
}

.ticket-view-option::before {
    top: -20px;
}

.details-wrap {
    width: 100%;
    height: auto;
    background: #ffffff;
    border-radius: 5px;
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    padding: 15px;
    margin-bottom: 20px;
}

.details-wrap .details{
    min-height: 20px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #EEEEEE;
    padding: 0 15px 15px;
    margin: 0 -15px 20px;
}

.details-wrap .details h5 {
    margin:0;
    font-weight: 700;
}

.small-details {
    height: 22px;
    text-align: center;
}

.status-open {
    border-bottom: 4px solid #d2c242;
}

.people-view > .people-view-img {
    float: left;
    margin-right: 10px;
}

.people-view > .people-view-img > img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin: 10px 0 0 10px;
}

.people-view-img > i {
    position: absolute;
    top: 20px;
    right: 15px;
    /*color: #fff;*/
}

.people-view-details {
    padding-left: 10px;
    background-color: #F2F4F8;
    border-radius: 5px;
    padding: 10px;
}

.people-view {
    margin-bottom: 15px;
    position: relative;
}

.ticket-dec-wrapper {
    width: 100%;
    height: auto;
    background: #ffffff;
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-dec-wrapper .details {
    min-height: 20px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #EEEEEE;
    padding: 0 15px 15px;
    margin: 0 -15px 20px;
}

.ticket-dec-wrapper .details h5 {
    margin:0;
    font-weight: 700;
}

.ticket-dec-wrapper .ticket-attachment {
    margin: 10px;
    width: calc(50% - 40px);
    background-color: #F2F4F8;
    border-radius: 5px;
}

.ticket-dec-wrapper .ticket-attachment .details h5 {
    padding:15px;
}

.font-size-15 {
    font-size: 15px;
}

.dropdown-area {
    width: 100%;
    height: 100px;
    background: #faf9f9;
    text-align: center;
    padding-top: 28px;
    font-size: 16px;
    color: #8298ae;
}

.dropdown-area > i {
    font-size: 24px;
    margin-right: 10px;
}

.ticket-upload-view {
    margin-top: 20px;
}

.upload-area {
    width: 100%;
    height: 150px;
    background: rgba(247, 245, 245, 0.29);
    overflow: hidden;
    position: relative;
    text-align: center;
    color: #8298ae;
    padding-top: 50px;
    border-radius: 2px;
    border: 3px dotted #f7f5f5;
    margin-bottom: 10px;
    font-size: 25px;
    font-weight: 100;
    font-family: "AvenirNextLTPro-UltLtCn", Courier, monospace;
}

.ticker-subticket-wrapper {
    width: 100%;
    height: auto;
    background: #ffffff;
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
}

.ticker-subticket-wrapper .details {
    min-height: 20px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #EEEEEE;
    padding: 0 15px 15px;
    margin: 0 -15px 20px;
}

.ticker-subticket-wrapper .details h5 {
    margin:0;
    font-weight: 700;
}

.ticker-subticket-wrapper .details h5.ticket-subticket-title {
    margin-top: 14px;
    font-weight: 700;
}

.ticker-subticket-wrapper .details .btn-circle {
    margin: 0px 0 -10px;
}

.collaborators-wrapper {
    width: 100%;
    height: auto;
    background: #ffffff;
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
}

.collaborators-wrapper .form-control {
    margin-bottom:10px;
}

.collaborators-wrapper .form-control .btn-ticket-time-edit:hover {
    color:#fff;
    background: #000;
}

.time-wrapper h6 {
    margin-top:4px;
}

.assign-me {
    font-weight: 700;
}

.collaborators-wrapper .details {
    min-height: 20px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #EEEEEE;
    padding: 0 15px 15px;
    margin: 0 -15px 20px;
}

.collaborators-wrapper  .details h5 {
    margin: 0;
    font-weight: 700;
}

.ticket-main-wrap {
    margin-top: 25px;
    padding-left: 18px;
}

.ticket-comments .nav-tabs  {
    padding: 0;
}

.ticket-comments .uib-tab.active {
    border-bottom: 3px solid rgb(238, 67, 126);
}

.ticket-comments .uib-tab.active a{
    color: rgb(238, 67, 126)!important;
}

.sub-task {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #f7f5f5;
    padding: 0px 5px 35px 5px;
    margin-bottom: 15px;
    margin-top: 10px;
}

.sub-description {
    padding-bottom: 5px;
    padding-top: 5px;
}

.sub-description > small {
    color: #14d0a0;
    cursor: pointer;
}

.sub-description > small.ref {
    cursor: pointer;
}

.color-cyan500 {
    color: #14d0a0 !important;
}

.color-green500 {
    color: #36ba45 !important;
}

.color-green {
    color: #36ba45;
}

.color-grey500 {
    color: #8298ae !important;
}

.right-icon > i {
    font-size: 18px;
    color: #14d0a0;
    cursor: pointer;
}

.tab-wrap {
    margin-top: 25px;
}

.ticket-tab-panle > ul {
    border-bottom: 1px solid #ddd;
}

.ticket-comment-wrapper {
    padding: 15px;
    min-height: 85px;
    height: auto;
    background: #F2F4F8;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 5px;
}

.comment-author {
    color: #EE437E !important;
    font-weight: 700;
}

.comment-add-wrapper span{
    height: auto;
    background: #EE437E;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    border-radius: 5px;
    float: right;
    cursor: pointer;
    z-index: 120;
    margin-bottom:20px;
}

.comment-add-wrapper:hover {
    background-color: #000000;
    color: #ffffff;
}

.comment-add-wrapper {
    text-align: center;
}

.comment-add-wrapper {
    margin-top: 15px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
}

.comment-add-wrapper > span {
    font-size: 14px;
}


.commenter-img > img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
}

/*.commenter-img {*/
/*margin-top: 10px;*/
/*margin-bottom: 8px;*/
/*}

.divider-gray {
    border-bottom: 1px solid #f7f5f5;
    height: 1px;
    width: 100%;
    padding-top: 5px;
}

.link-btn > i {
    cursor: pointer;
}

.link-btn > i:hover {
    color: #04756f;
}

/*side panel */
/* The side navigation menu */
.sidenav {
    /*height: calc(100% - 91px);*/
    width: 0;
    position: fixed;
    top: 51px;
    right: 0;
    background-color: #ffffff;
    /*overflow-x: hidden;*/
    transition: 0.5s;
    z-index: 9;
    /*-webkit-box-shadow: -4px 3px 40px -11px rgba(0, 0, 0, 0.75);*/
    /*-moz-box-shadow: -4px 3px 40px -11px rgba(0, 0, 0, 0.75);*/
    /*box-shadow: -4px 3px 40px -11px rgba(0, 0, 0, 0.75);*/
    border-left: 1px solid #D9DEE4;
}

.sidenav a:hover, .offcanvas a:focus {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-right: 50px;
}

#main,
#navBar {
    transition: margin-right .5s;
}

#navBar {
    background-color: #ffffff;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.nav-top-bar {
    background: #8298ae;
    width: 100%;
    min-height: 56px;
    top: 0;
    padding: 19px 0px 5px 0px;
    color: #fff;
}

.nav-panel-header {
    font-size: 15px;
}

.nav-search-txt {
    position: fixed;
    top: 66px;
    padding: 0px 25px 20px 60px;
}

.nav-bottom-tool {
    background: #f7f5f5;
    width: 100%;
    /* height: 35px; */
    z-index: 0;
    display: block;
    /*margin-top:-20px;*/
}

.online-user-wrapper {
    margin-top: 0;
    bottom: 0px;
    width: 100%;
}

.nav-search-text {
    width: auto;
    background: #f7f5f5 !important;
    border: 0px !important;
}

.nav-bottom-icon {
    float: right;
    display: inline-block;
    padding-top: 7px;
    padding-left: 7px;
    margin-right: 7px;
}

.nav-bottom-icon > i {
    color: #14d0a0;
    font-size: 18px;
    cursor: pointer;
}

.notification-user {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 50px;
    cursor: pointer;
    -moz-transition: padding-left .2s ease-in;
    -o-transition: padding-left .2s ease-in;
    -webkit-transition: padding-left .2s ease-in;
    transition: padding-left .2s ease-in;
    margin-bottom: 8px;
    padding-top: 7px;
    position: relative;
}

.notification-user.agent {
    background: #204d74;
}

.cht-notify {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    width: 18px;
    height: 18px;
    background: #ec0d0d;
    text-align: center;
    position: absolute;
    border-radius: 50%;
    left: 35px;
    margin-top: -5px;
    font-size: 8px;
    padding-top: 2px;
    color: #fff;
    border: 2px solid #f7f5f5;
    z-index: 1;
}

.notification-user:hover {
    /*padding-left: 3px;*/
    background: #aaa;
    /*background: rgba(0, 0, 0, 0.3);*/
}

.chat-icon {
    display: inline-block;
    padding-right: 8px;
    text-align: center;
    width: 30px;
    height: 30px;
    background: #DCFFDF;
    color: #39B54A;
    border-radius: 50%;
    margin-right: 6px;
    padding-top: 3px;
}

.chat-icon:hover {
    background: #39B54A;
    color: #ffffff;
}

.chat-icon > i {
    font-size: 16px;
    padding: 3px 0 0 7px;
    display: inline-block;
}


.chat-phone-status {
    width: 100%;
    padding-left: 5px;
    display: inline-block;
}

.notification-user > .user-img {
    float: left;
    display: inline-block;
    background: #f7f5f5;
    width: 40px;
    height: 40px;
    padding: 0px -9px 0px -3px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 8px;
    /* margin-bottom: 37px; */
    /* padding-bottom: 14px; */
}

.notification-user >
.notification-details {
    /* float: left; */
    left: 50px;
    /* text-align: right; */
    display: inline-block;
    padding-top: 4px;
    height: 40px;
    padding-right: 10px;
    position: absolute;
    padding-left: 14px;
    width: 100%;
    background: #aaa;
}

.notification-details >
.user-state {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
}

.notification-user > .user-img > img {
    width: 35px;
    height: 35px;
    /* padding: 3px 5px 0px 0px; */
    border-radius: 50%;
    margin-left: 3px;
    margin-top: 2px;
}

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

.full-width {
    width: 100%;
}

.message-close {
    color: #d2c242 !important;
    cursor: pointer;
}

#sendMessage {
    transition-property: top, left,
    border-radius, background-color;
    transition-duration: 2s, 1s, 0.5s, 0.5s;
    transition-delay: 0s, 0.5s, 1s, 1.5s;
}

.message-close:hover {
    color: #36ba45;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}

.console-main-wrapper {
    position: relative;
}

/*ticket filter view*/
.ticket-filter-wrapper {
    background: rgba(255, 255, 255, 1);
    width: 100%;
    min-height: 100vh;
    height: auto;
}

.ticket-filter-left {
    position: fixed;
    left: 0;
    background: #8298ae;
    width: 25%;
    height: 100%;
}

.ticket-filter-body {

}

.ticket-filter-body-filer {
    min-height: 50px;
    overflow: hidden;
    position: relative;
}

.ticket-filter-view > .header {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    min-height: 20px;
    height: auto;
}

.ticket-filter-body > .footer-btn {
    bottom: 0;
    margin-top: 10px;
}

.ticket-filter-body >
.filter-view {
    width: 100%;
    min-height: 40px;
    height: auto;
    background: #F7F5F5;
    padding: 10px;
    cursor: pointer;
    border-radius: 2px;
    margin-bottom: 5px;
}

.filter-view:hover {
}

.refresh {
    cursor: pointer;
}

.ticket-list-view {
    width: 100%;
    min-height: 35px;
    border-bottom: 1px solid #f7f5f5;
    -webkit-box-shadow: 4px 10px 11px -16px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 4px 10px 11px -16px rgba(0, 0, 0, 0.75);
    box-shadow: 4px 10px 11px -16px rgba(0, 0, 0, 0.75);
    padding: 1px 0px 0px 10px;
    margin-top: 10px;
}

.white-bg {
    background: #ffffff !important;
}

.border-top-3 {
    border-top-width: 3px !important;
}

.ticket-details-list {
}

/*Mail inbox */
.mail-option {
    padding: 35px 0px 0px 5px;
    width: 100%;
    min-height: 44px;
    height: auto;
}

.mail-option-header {
    padding: 35px 0px 5px 5px;
    width: 100%;
    min-height: 44px;
    height: auto;
    position: relative;
    overflow: hidden;
}

.mail-option > .header-left {
    font-size: 20px;
    cursor: pointer;
}

.mail-inbox-wrapper > .header-left {

}

.mail-option > .header-count {
    background: #17373c;
    min-height: 30px;
    min-width: 30px;
    border-radius: 50%;
    padding: 5px 7px 5px 7px;
    color: #36ba45;
    text-align: center;
}

.filter-option > .header-count {
    border-radius: 50%;
    padding: 6px 8px 4px 7px;
    color: #fff;
    width: 30px;
    height: 30px;
    text-align: center;
}

.filter-left {
    width: 100%;
}

.filter-option {
    font-size: 16px;
    width: 100%;
    display: block;
    min-height: 45px;
    cursor: pointer;
}

.filter-wrapper {
    margin-top: 50px;
    padding-left: 7px;
    padding-right: 10px;
}

.main-option-wrapper {
    display: block;
    height: auto;
}

.filter-option > .number-count {
    padding-left: 20px;
}

.mail-right-header {
    width: 100%;
    min-height: 30px;
    height: auto;
    border-bottom: 1px solid #f7f5f5;
}

.mail-option {
    padding-bottom: 5px;
}

.mail-btn-wrap {
    display: inline-block;
}

.mail-details-wrapper {
    margin-top: 10px;
    width: 100%;
    min-height: 550px;
    height: auto;
    position: relative;
    overflow: hidden;
}

.mail-details {
    width: 100%;
    min-height: 40px;
    border: 1px solid #f7f5f5;
    cursor: pointer;
    height: auto;
    overflow: hidden;
    position: relative;
    margin-bottom: 5px;
}

.mail-details:hover {
    background: #f3f1f1;
}

.mail-icon {
    color: #36ba45;
    font-size: 18px;
    position: relative;
    display: inline-block;
    border-radius: 50%;
    background: #0d1c34;
    width: 30px;
    height: 30px;
    text-align: center;
    margin-top: 7px;
    padding-top: 3px;
}

.mail-icon-large {
    color: #36ba45;
    font-size: 18px;
    display: inline-block;
    border-radius: 50%;
    background: #0d1c34;
    width: 60px;
    height: 60px;
    text-align: center;
    margin: 0 auto;
    padding-top: 13px;
}

.main-text {
    display: inline-block;
    color: #36ba45;
    font-size: 12px;
    padding-left: 15px;
}

.mail-header {
    font-size: 13px;
    display: inline-block;
    position: relative;
    padding-top: 15px;
    color: #0d1c34;
}

.mail-header > i {
    padding-left: 10px;
    cursor: pointer;
}

.mail-header > i:hover {
    color: #d90000;
}

.email-desc-wrapper {
    min-height: 550px;
    width: 100%;
    background: #f7f5f5;
    position: absolute;
    top: 0px;
    right: -100%;
    padding: 10px;
}

.mail-description {
    padding: 35px;
    margin-top: 5px;
}

.round {
    border-radius: 50%;
    background: #17373c;
    width: 30px;
    height: 30px;
    text-align: center;
    color: #36ba45;
    padding-top: 5px;
    cursor: pointer;
}

.round-img-80 {
    border-radius: 50%;
    width: 80px;
    height: 80px;
}

.round:hover {
    color: #ffffff;
}

.login-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(23, 55, 60, 1);
    background: url(../img/bg/login_bg.jpg);
    background-position: top -585px right;
    z-index: 0;
}

.forget-header {
    width: 100%;
    min-height: 10px;
    overflow: hidden;
    position: relative;
    color: #81c98a;
    margin-bottom: 25px;
    font-size: 30px;
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    text-align: center;
    text-transform: capitalize;
    margin-top: 25px;
}

.forget-pwd-txt {
    width: 100%;
    min-height: 10px;
    overflow: hidden;
    position: relative;
    color: #dcdddc;
    margin-bottom: 20px;
    font-size: 15px;
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
}

/*.login-wrapper::after {*/
/*content: "";*/
/*background: url(../img/bg/january.jpg);*/
/*top: 0;*/
/*left: 0;*/
/*bottom: 0;*/
/*right: 0;*/
/*position: absolute;*/
/*z-index: -1;*/
/*}*/

.login-wrap {
    margin: 0 auto;
}

.login-header {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 60px;
}

.login-header > img {
    width: 200px;
    height: auto;
}

.login-body {
    margin: 0 auto;
    background: #17373c;
    width: 360px;
    min-height: 320px;
    -webkit-box-shadow: -3px 6px 40px -7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -3px 6px 40px -7px rgba(0, 0, 0, 0.3);
    box-shadow: -3px 6px 40px -7px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 60px 25px 21px 25px;
    position: relative;
}

.login-text {
    background: transparent;
    height: 40px;
}

.login-text:focus {
    border-color: #603281;
}

.login-body::before {
    content: "";
    display: block;
    position: absolute;
    top: 300px;
    margin: auto 0px;
    text-align: center;
    left: 33px;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 30px solid #17373c;
}

.forget-pwd {
    color: #436469;
    text-align: right;
    padding-top: 25px;
    font-size: 16px;
    cursor: pointer;
}

.forget-pwd-wrp {
    width: 100%;
    min-height: 20px;
    overflow: hidden;
    position: relative;
    color: #3ecd8e;
    text-align: center;
    padding-top: 10px;
    margin-top: 50px;
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 17px;
}

.round-footer-icon-login {
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background: rgba(62, 205, 142, 0.1);
    padding-top: 6px;
}

.round-footer-icon-login:hover {
    background: rgba(62, 205, 142, 0.5);
}

.forget-pwd-wrp > ul {
    list-style: none;
    display: inline-block;
    padding: 0;
    text-align: center;
    margin: 0 auto;
}

.forget-pwd-wrp > ul > li {
    display: inline-block;
    color: #3ecd8e;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;

}

.forget-pwd-wrp > ul > li > i {
    font-size: 18px;
    color: #3ecd8e;
}

.login-btn {
    color: #d2c242;
    margin-left: 5px;
    margin-top: 31px;
    font-size: 16px;
    cursor: pointer;
    text-align: left;
}

.loading-btn {
    text-align: center;
    color: #d2c242;
    margin-left: -225px;
    margin-top: 25px;
    font-size: 16px;
    text-transform: uppercase;
}

.login-btn:hover,
.forget-pwd:hover {
    color: #36ba45;
}

.disable-btn {
    cursor: not-allowed;
    background: #8298ae !important;
}

.notification-ref {
    text-align: left;
    font-size: 12px;
    display: inline-block;
}

.notification-ref.link {
    text-align: right;
    font-size: 12px;
    cursor: pointer;
    float: right;
    color: #14d0a0;
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
}

.mainScrollerBar {
    width: 100%;
    overflow: hidden;
    overflow-y: auto;
    height: 600px;
}

.comment-wrapper {
    margin-top: 20px;
}

/*Main search bar */
.main-search > div > div.tags {
    border: 0px !important;
    padding: 0px;
}

.main-search > div.host {
    margin: 0px !important;
}

.main-search > div > div.tags > .input {
    border: 1px solid #8298ae;
    min-width: 310px;
    background: transparent;
    height: 34px;
    padding: 6px 12px;
    border-radius: 20px;
}

.main-search-input {
    min-width: 313px;
    height: 36px;
    padding: 6px 12px;
    /*border: none;*/
    /*border-radius: 0;*/
    background-color:#f5f5f5;
    border-radius: 5px;
    margin-top:-7px;
    color: #682F8E;
    line-height: 1.8;
    border: solid 1px #eee;
}

.main-search-input input {
    width: calc(100% - 24px);
    border:none;
    background: transparent;
    margin-left: 6px;
}

.main-search-input input:focus {
    border: none;
    outline: none;
}

.main-search-input input::placeholder {
    color: #682F8E;
    opacity: 1; /* Firefox */
}

.main-search-input input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #682F8E;
}

.main-search-input input::-ms-input-placeholder { /* Microsoft Edge */
    color: #682F8E;
}

.cursor-pointer {
    cursor: pointer;
}

.edit-assignee-wrapper {
    width: 100%;
    height: 55px;
    background: #f7f5f5;
    padding-top: 5px;
}

tags-input .tags .input {
    width: 100%;
    background: transparent;
}

.time-tracker-wrapper {
    width: 210px;
    height: auto;
    background: transparent;
    padding: 7px;
    overflow: hidden;
    margin-top: -3px;
}

.time-tracker-body > div {
    display: inline-block;
    padding-right: 10px;
}

.time-tracker-body > div.play {
    color: #45bf55;
}

.time-tracker-body > div.pause {
    color: #d2c242;
}

.time-tracker-body > div.stop {
    color: #d90000;
}

.time-tracker-body > div.play:hover,
.time-tracker-body > div.pause:hover,
.time-tracker-body > div.ticket-id:hover,
.time-tracker-body > div.stop:hover {
    color: #a1d700;
}

.time-tracker-body > div.ticket-id {
    color: #178a21;
}

.time-counter {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    color: #14d0a0;
}

/*new profile update prefix pfn2- */
.prn2-main-wrapper {
    height: auto;
}

.prn2-header-wrapper {
    min-height: 56px;
    height: auto;
    overflow: hidden;
    border-bottom: 1px solid #d2c242;
    padding: 9px 10px 10px 10px;

}

.prn2-header-wrapper > div > .left-text {
    color: #14d0a0;
    font-size: 19px;
    padding-top: 5px;
}

.prn2-header-wrapper > div > .btn-wrapper {
    color: #14d0a0;
    text-align: right;
    right: 0;
}

.tab-btn {
    background: #1a3d42;
    color: #8298ae;
    text-transform: capitalize;
}

.tab-btn > i {
    font-size: 16px;
}

.tab-btn:hover {
    color: #4f9300;
}

.tab-btn.active {
    color: #4f9300;
    -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .0);
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, .0);
}

.prn2-image-wrapper {
    width: 100%;
    min-height: 230px;
    max-height: 230px;
    height: auto;
    padding: 0px;
    overflow: hidden;
    display: block;
    border-radius: 0px 0px 0px 9px;
    z-index: 1;
}

.prn2-image-wrapper > div > .profile-details-img {
    margin: 0px;
    padding-bottom: 15px;
    overflow: hidden;
    height: 155px;
}

.prn2-image-wrapper > div > .profile-details-img > img {
    height: 155px;
    width: 155px;
    overflow: hidden;
}

.text-uppercase.header-text-h5 {
    font-size: 13px;
}

.prn2.profile-status {
    font-size: 15px;
    padding-left: 8px;
}

.prn2-engagement-summary {
    width: 100%;
    height: 230px;
    /* height: auto; */
    overflow: hidden;
    display: block;
    padding: 14px 10px 10px 15px;
}

.prn2.time-wrapper {
    padding-top: 15px;
    padding-right: 20px;
}

.prn2 > .progress {
    height: 18px;
    background-color: #17373c;
    margin-bottom: 10px;
}

.prn2-body-wrapper {

}

.prn2-recent-activity {
    width: 100%;
    min-height: 60px;
    height: auto;
    padding: 5px 0px 16px 15px;
    background: #f7f5f5;
    margin-bottom: 20px;
}

.recent-activity-wrap {
    min-height: 50px;
    border-right: 2px solid #45bf55;
    margin-bottom: 15px;
}

.border-0 {
    border: 0px;
}

.prn2-contact {
    padding-top: 5px;
}

.prn2 {
    cursor: pointer;
}

/*.prn2:hover {*/
/*width: 100%;*/
/*height: auto;*/
/*background-color: #f7f5f5;*/
/*padding-left: 5px;*/
/*}*/

.prn2-layout-header2 {
    padding: 8px 10px 31px 10px;
}

.prn2-contact-body {
    padding: 20px 10px 10px 18px;
}

.prn2.header-round-icon > .icon-left {
    width: 40px;
    height: 40px;
    background: #f7f5f5;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    z-index: 1;
}

.prn2-contact.text-header {
}

.prn2 > .icon-left > i {
    color: #36ba45;
}

.prn2 > .icon-left {
    color: #36ba45;
    padding-top: 8px;
}

.prn2.header-round-icon {
    padding-bottom: 10px;
}

.prn2-recent-information {
    padding-left: 25px;
    min-height: 195px;
    overflow: hidden;
    height: auto;
}

.prn2-time-line-wrap {
    padding-left: 30px;
    padding-right: 30px;
}

/*multiple profile*/
.prn2-multiple-wrapper {
    margin-top: 25px;

}

.profile-multiple-wrap {
    min-height: 195px;
    border-radius: 5px 5px 0px 0px;
    height: auto;
    overflow: hidden;
    background: #f7f5f5;
    -webkit-box-shadow: -1px 1px 10px -4px rgba(0, 0, 0, 0.53);
    -moz-box-shadow: -1px 1px 10px -4px rgba(0, 0, 0, 0.53);
    box-shadow: -1px 1px 10px -4px rgba(0, 0, 0, 0.53)
}

.profile-multiple-wrap > .profile-img-wrapper {
    text-align: center;
    margin: 0 auto;
    background-color: #f7f5f5;
    padding-bottom: 15px;
}

.profile-multiple-wrap > .profile-img-wrapper > img {
    /* margin: 0px auto; */
    margin-top: 20px;
    margin-bottom: 20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid #36ba96;
    /* padding-top: 10px; */
}

.profile-multiple-wrap > .profile-body {
    text-align: center;
    padding-bottom: 25px;
}

.profile-multiple-wrap > .profile-body > h5 {
    margin-bottom: 2px;
    color: #36ba45;
}

.profile-multiple-wrap > .profile-body > small {
    margin-bottom: 2px;
    color: #d2c242;
}

.profile-body > .btn-profile-view {
    width: 50px;
    height: 25px;
    background-color: #36ba96;
    color: #fff;
    padding-top: 2px;
    border-radius: 25px;
    /* position: absolute; */
    /* top: 90px; */
    /* left: 61px; */
    cursor: pointer;
    margin: 10px auto;
}

.profile-multiple-wrap.create-new {
    background-color: #17373c;
    border-radius: 5px;
    min-height: 260px;
    webkit-box-shadow: -1px 1px 10px -4px rgba(0, 0, 0, 0.53);
    -moz-box-shadow: -1px 1px 10px -4px rgba(0, 0, 0, 0.53);
    box-shadow: -1px 1px 10px -4px rgba(0, 0, 0, 0.53);
}

.profile-multiple-wrap > .pin-dote {
    background: #fff;
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.create-new-pro > i {
    color: #36ba96;
    font-size: 75px;
    cursor: pointer;
    text-align: center;
}

.create-new-pro > i:hover {
    color: #8298ae;
}

.create-new-pro {
    width: 100%;
    text-align: center;
    margin-top: 66px;
}

.profile-multiple-wrap > .pin-dote.left {
    top: 10px;
    left: 25px;
}

.profile-multiple-wrap > .pin-dote.right {
    top: 10px;
    right: 25px;
}

.profile-multiple-wrap > .pin-dote.b-left {
    bottom: 10px;
    left: 25px;
}

.profile-multiple-wrap > .pin-dote.b-right {
    bottom: 10px;
    right: 25px;
}

.profile-body > .btn-profile-view:hover {
    background-color: #f7f5f5;
    color: #36ba96;
}

.prn2-other-wrapper {
    padding-left: 16px;
    padding-right: 20px;
    min-height: 195px;
    overflow: hidden;
    height: auto;
    width: 100%;
}

/*agent settings */
.agent-settings-wrapper {
    width: 100%;
    height: 100%;
    /*position: fixed;*/
    /*background: rgba(0, 0, 0, 0.5);*/
    z-index: 2000;
    top: 0;
}

.settings-wrapper {
    position: relative;
    margin-top: 25px;
    background: #ffffff;
    width: 100%;
    height: auto !important;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    padding: 15px;
    margin-bottom:20px;
}

.header-txt-left {
    font-size: 14px;
}

.ps-header-wpr {
    width: calc(100% + 30px);
    overflow: hidden;
    position: relative;
    border-radius: 5px 5px 0 0;
    -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin: -15px -15px 20px;
}

.header-txt-right {
    color: #14d0a0;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    padding-top: 5px;
}

.ps-body-wrp {
    width: 100%;
    height: 100%;
    margin-top: 45px;
}

.ps-left-menu {
    width: 100%;
    min-height: 400px;
    overflow: hidden;
    border-radius: 5px;
    background-color: #ffffff;
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
}

.ps-image {
    text-align: center;
    padding-bottom: 13px;
    margin: 15px 15px 30px 15px;
    border-bottom: 1px solid #E6E6E6;
}

.ps-image > img {
    border-radius: 50%;
    overflow: hidden;
}

.ps-p-upload {
    color: #ffffff;
    cursor: pointer;
    margin-top: 6px;
    margin-bottom: 3px;
}

.ps-p-upload:hover {
    color: #36ba45;
}

.ps-p-name {
    color: #8298ae;
    min-height: 20px;
}

.header-txt-right:hover {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
}

.ps-menu {
    cursor: pointer;
    background: #ffffff;
    padding: 12px 12px 10px 12px;
    border-bottom: 1px solid #E6E6E6;
}

.s-icon {
    width: 20px;
    height: 20px;
}

.s-icon > i {
    font-size: 20px;
    text-align: center;
}

.s-icon.selected-menu,
.s-text.selected-menu {
    color: #EE437E;
}

.s-icon.selected-menu > i {
    color: #EE437E;
}

.s-text {
    font-size: 14px;
}


.ps-body {

}

.ps-body-wrp .col-lg-8 {
    border-radius: 5px;
    background-color: #ffffff;
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
}

.ps-body-wrp .col-lg-8 .ps-header-wpr {
    margin: 0px -15px 20px;
    width: calc(100% + 30px);
}

.ps-body > .ps-header-wpr {
    width: 100%;
    min-height: 20px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #EEEEEE;
    padding: 15px;
    box-shadow: none;
}

.b-header-txt-left {
    margin: 0 -15px;
}

.edit-body {
    width: calc(100% + 30px);
    overflow: hidden;
    margin: 0 -15px 20px;
}

.radio-inline-wrp {

}

.ps-form-controller {
    background: transparent;
    border: 1px solid #8298ae;
}

input.ps-form-controller[readonly] {
    background: transparent;
}

.cropArea-wp {
    background: transparent;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    height: 350px;
}

.upload-btn-s {
    background: #1a3d42;
    border: 0px;
    color: #fff;
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    min-width: 150px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-transform: uppercase;
}

.upload-btn-s:hover {
    background: #1a3d42;
    color: #14d0a0;

}

.crop-upload-btn {
    width: 100%;
    text-align: center;
    margin: 20px auto;
}

.ps-update-wrapper {
    width: 100%;
    margin-top:26px;
}

.ps-update-wrapper:active {
    opacity: 1 !important;
}

.btn-ps-update {
    text-align: center;
    overflow: hidden;
    position: relative;
    min-width: 120px;

    width: 120px;
    height: auto;
    background: #EE437E;
    color: #fff;
    padding: 5px 5px;
    border-radius: 5px
}

.btn-ps-update:hover {
    background: #000;
    color: #ffffff;
}

.btn-ps-update:active {
    background: #1a3d42;
    text-align: center;
    overflow: hidden;
    position: relative;
    min-width: 120px;
    color: #14d0a0;
}

.btn-ps-update:active,
.btn-ps-update:focus {
    outline: none !important;
    background: #1a3d42 !important;
    color: #14d0a0 !important;
    opacity: 1 !important;
}

.ps-update-wrapper > i {
    color: #36ba45;
    font-size: 20px;
}

.disabled-btn {
    opacity: 0.2 !important;
    cursor: not-allowed !important;
}

.button.disabled {

}

.ps-sub-title {
    padding: 5px 8px;
    background: #F9F3FF;
    font-size: 14px;
    color: #682F8E;
    margin-bottom: 20px;
    float: left;
    width: 100%;
}

/* agent dashboard */
.agent-dashboard-wrapper {
    width: 100%;
    height: 100%;
    /* position: fixed; */
    /*background: rgb(255, 255, 255);*/
    z-index: 2000;
    top: 0;
}

.dashboard-wrapper {
    background: rgb(23, 55, 60);
    width: 100%;
    min-height: 950px;
    border-radius: 0px;
    height: auto;
    /* background: url(../img/bg/bg-dashboard.jpg) no-repeat; */
    /*position: relative;*/
    padding-left: 10px;
    padding-right: 10px;
    /* overflow: hidden; */
    /*webkit-box-shadow: -2px 2px 17px -1px rgba(0, 0, 0, 0.22);*/
    /*-moz-box-shadow: -2px 2px 17px -1px rgba(0, 0, 0, 0.22);*/
    /*box-shadow: -2px 2px 17px -1px rgba(0, 0, 0, 0.22);*/
    overflow: hidden;
}

.dashboard-ref {

}

.btn-dash-ref {
    color: #f7f7f7;
    width: 50px;
    text-align: center;
    height: 50px;
    padding-top: 12px;
    margin-top: -5px;
    border-radius: 50%;
    background: rgb(54, 104, 111);
    cursor: pointer;
    position: absolute;
    top: 245px;
    left: -9px;
    z-index: 100;
}

.btn-dash-ref > i {
    font-size: 23px;
}

.bg-white {
    background: #fff !important;
}

.bg-gray-200 {
    background: #F2F4F8 !important;
}

#dashboard-opacity {
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*background: rgba(13, 28, 51, 0.97);*/
}

.dark-dashboard-header {
    padding-top: 25px;
}

.dark-dashboard-header > .avatar {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    overflow: hidden;
    display: inline-block;
    float: left;
}

.dark-dashboard-header > .header {
    display: inline-block;
    color: #15a9fa;
    padding-top: 10px;
    padding-left: 15px;
}

.dark-dashboard-header > .avatar > img {
    width: 40px;
    height: 40px;
}

.dark-ticker-wrapper {
    height: auto;
    overflow: hidden;
    margin-top: 45px;
}

.dark-chart-wrapper {
    min-height: 300px;
    overflow: hidden;
    height: auto;
    width: 100%;
    padding: 0px 0px 34px 18px;
    margin-top: 0px;
    border-radius: 3px;
    text-align: center;
    /*-webkit-box-shadow: -2px 2px 17px -1px rgba(0, 0, 0, 0.22);*/
    /*-moz-box-shadow: -2px 2px 17px -1px rgba(0, 0, 0, 0.22);*/
    /*box-shadow: -2px 2px 17px -1px rgba(0, 0, 0, 0.22);*/
    /*background: url(../img/bg/chartBg.jpg) no-repeat;*/
    /*position: relative;*/
}

.new-ticket-widget {
    background: #649881 !important;
    border: 2px solid #00cd73 !important;
}

.new-ticket-widget > h1,
.new-ticket-widget > div {
    color: #ffffff !important;;
}

.close-ticket-widget {
    background: #33651e !important;
    border: 2px solid #37a422 !important;
}

.close-ticket-widget > h1,
.close-ticket-widget > div {
    color: #ffffff !important;;
}

.pending-ticket-widget {
    background: #f09766 !important;
    border: 2px solid #e65200 !important;
}

.pending-ticket-widget > h1,
.pending-ticket-widget > div {
    color: #ffffff !important;;
}

.m-top35 {
    margin-top: 75px !important;
}

.dark-chart-bg {
    background-color: rgba(13, 28, 51, 0.98);
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.dark-header {
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 25px;
}

.dark-ticker-wrap {
    width: 100%;
    min-height: 130px;
    height: auto;
    text-align: center;
    margin-bottom: 15px;
    /*-webkit-box-shadow: -2px 2px 17px -1px rgba(0, 0, 0, 0.22);*/
    /*-moz-box-shadow: -2px 2px 17px -1px rgba(0, 0, 0, 0.22);*/
    /*box-shadow: -2px 2px 11px -3px rgba(0, 0, 0, 0.22);*/
    border-radius: 2px;
}

.dark-ticker-wrap {
    background: #36686f;
    border: 2px solid #8298ae;
    border-radius: 2px;
    -webkit-box-shadow: 1px 2px 11px -2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 1px 2px 11px -2px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 5px 11px -8px rgba(0, 0, 0, 0.75);
}

.green-widget {
    background: #91e780;
    border: 1px solid #91e780;
    /*background: rgba(69,191,85,1);*/
    /*background: -moz-linear-gradient(top, rgba(69,191,85,1) 0%, rgba(69,191,85,1) 58%, rgba(150,237,137,1) 100%);*/
    /*background: -webkit-linear-gradient(top, rgba(69,191,85,1) 0%, rgba(69,191,85,1) 58%, rgba(150,237,137,1) 100%);*/
    /*background: -o-linear-gradient(top, rgba(69,191,85,1) 0%, rgba(69,191,85,1) 58%, rgba(150,237,137,1) 100%);*/
    /*background: -ms-linear-gradient(top, rgba(69,191,85,1) 0%, rgba(69,191,85,1) 58%, rgba(150,237,137,1) 100%);*/
    /*background: linear-gradient(to bottom, rgba(69,191,85,1) 0%, rgba(69,191,85,1) 58%, rgba(150,237,137,1) 100%);*/
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45bf55', endColorstr='#96ed89', GradientType=0 );*/
}

.green-widget > h1,
.green-widget > div.title {
    color: #fff !important;
}

.dark-ticker-wrap.new-ticket {
}

.dark-ticker-wrap.close-ticket {
    background: transparent;
}

.dark-ticker-wrap > h1 {
    color: #36ba45;
    font-size: 40px;
}

.dark-ticker-wrap > div.title {
    color: #36ba45;
    font-size: 18px;
}

.dark-ticker-wrap.close-ticket > h1 {
    color: #4f9300;
    font-size: 40px;
}

.dark-ticker-wrap.close-ticket > div.title {
    color: #4f9300;
    font-size: 18px;
}

.dark-chart-wrapper > .ticker-chart {
    width: 100%;
    min-height: 200px;
    height: auto;
}

.dark-call-status-wrap {
    width: 100%;
    min-height: 160px;
    height: auto;
    background: rgb(0, 53, 62);
    border: 1px solid #07555d;
    overflow: hidden;
    position: relative;
    padding: 25px 10px 0px 5px;
}

.dark-call-status-wrap > .dark-footer {
    width: 100%;
    min-height: 60px;
    height: auto;
    position: absolute;
    background: rgb(30, 70, 76);
    left: 0;
    bottom: 0;
}

.dark-call-status-wrap > .header {
    color: #00cd73;
    font-size: 13px;
    text-transform: uppercase;
}

.dark-footer-wrap {
    text-align: center;
}

.dark-footer-wrap > h5 {
    color: #d2c242;
    margin-bottom: 3px;
    font-size: 18px;
    margin-top: 5px;
}

.dark-footer-wrap > .title {
    color: #e65200;
    font-size: 10px;
}

.top-right-wrapper {
    background: #29374e;
    padding-bottom: 79px;
}

.body-left-wrapper {
    background: #0c192d;
    padding-bottom: 142px;
    text-align: center;
}

.dark-pro-chart-wrap {
    width: 100%;
    min-height: 250px;
    height: auto;
    margin-top: 20px;
    text-align: center;
    padding-bottom: 20px;
}

.dark-product-wrapper {
    /*// background: rgb(23, 55, 60);*/
    width: 100%;
    min-height: 100px;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 15px;
    webkit-box-shadow: 1px 2px 16px -8px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 1px 2px 16px -8px rgba(0, 0, 0, 0.22);
    box-shadow: 1px 2px 16px -8px rgba(0, 0, 0, 0.22);
    border-bottom: 1px solid #36ba45;
}

.dark-product-ticker-wrap {
    padding-top: 7px;
    padding-left: 15px;
    /* padding-right: 10px; */
    text-align: center;
    /* min-height: 105px; */
    /* background: #f7f5f5; */
    /* border-left: 1px solid #168039; */
}

.dark-product-ticker-wrap > h1 {
    margin: 0px;
    font-size: 15px;
}

.dark-product-ticker-wrap > h1.Staffed,
.dark-product-ticker-wrap > div.title.Staffed {
    color: #ffa918;
}

.dark-product-ticker-wrap > h1.onCall,
.dark-product-ticker-wrap > div.title.onCall {
    color: #37dba9;
}

.dark-product-ticker-wrap > h1.break-time,
.dark-product-ticker-wrap > div.title.break-time {
    color: #e65200;
}

.dark-status {
    font-size: 20px;
    padding-top: 20px;
    color: #00ff1c;
}

.dark-recent-wrapper {
    margin-top: 30px;
}

.recent-activity {
    width: 100%;
    min-height: 65px;
    overflow: hidden;
    height: auto;
    padding-bottom: 10px;
    background: rgb(30, 70, 76);
    margin-bottom: 5px;
}

.recent-activity-left {
    padding-top: 15px;
    color: #ffa918;
    font-size: 12px;
}

.recent-activity-right {
    padding-top: 13px;
}

.recent-activity-right > .count,
.recent-activity-right > .title {
    color: #00cd73;;
    text-align: right;
}

.recent-activity-right > .count {
    font-size: 14px;
}

.recent-activity-right > .title {
    font-size: 12px;
}

.agent-ticket-chart-wrapper {
    padding-left: 0;
    padding-right: 8px;
}

.btn-tab-close {
    border-radius: 50%;
    background: transparent;
    padding: 3px 5px;
    margin-top: -1px;
    margin-left: 10px;
    font-size: 9px;
}

.btn-tab-close:hover {
    background: #eee;
}

/*overwrite tab panel*/
.ui-tabs-scrollable > .spacer > div:first-child > .nav-tabs > li > a {
    height: 40px !important;
}

.nav > li > a:focus, .nav > li > a:hover {
    text-decoration: none;
    background-color: transparent !important;
}

.nav-tabs > li > a:hover {
    border-color: transparent !important;
}

.scrollable-tab-overwrite {

}

.tab-title {
    font-size: 14px;
    color: #666667;
}

.ui-tabs-scrollable > .nav-button.left-nav-button:before {
    font-family: 'themify';
    content: '\e65e';
    /*color: #0d1c34;*/
}

.ui-tabs-scrollable > .nav-button.right-nav-button:before {
    font-family: 'themify';
    content: '\e65d';
}

.ui-tabs-scrollable > .dropdown > .dropdown-toggle:before {
    font-family: 'main-icon-2';
    content: '\f137';
}

.scrollable-tab-overwrite > ul {
    padding: 0px !important;
}

.ui-tabs-scrollable > .nav-button.left-nav-button {
    left: 0px;
    border-top-left-radius: 4px;
    width: 35px;
}

.ui-tabs-scrollable.show-drop-down > .nav-button.right-nav-button {
    right: 92px;
    border-radius: 0;
    width: 35px;
}

.ui-tabs-scrollable > .nav-button {
    position: absolute;
    width: 25px;
    height: 36px;
    line-height: 36px;
    top: 0;
    color: #428bca;
    cursor: pointer;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 0;
    background-color: rgb(230, 230, 230);
    z-index: 10;
    outline: 0 !important;
}

.ui-tabs-scrollable > .dropdown {
    right: 0px;
}

.ui-tabs-scrollable > .nav-button:hover {
    background-color: #8298ae;
}

.ui-tabs-scrollable > .spacer:not(.hidden-buttons) > div:first-child > .tab-content {
    margin-left: 0px;
    margin-right: 0px;
}

.ui-tabs-scrollable.show-drop-down > .nav-button.right-nav-button {
    right: 27px;
    border-radius: 0;
    width: 35px;
}

.ui-tabs-scrollable > .dropdown > .dropdown-toggle {
    width: 20px;
    height: 32px;
    color: #ee437e;
    text-align: center;
    border: 1px solid #ddd;
    border-left-width: 0;
    padding: 0;
    background-color: rgb(255, 255, 255);
    z-index: 20;
    border-radius: 0 0 3px 3px;
}

.ui-tabs-scrollable.show-drop-down > .spacer:not(.hidden-buttons) {
    margin-right: 0;
}

.ui-tabs-scrollable > .spacer:not(.hidden-buttons) {
    margin-left: 0;
    margin-right: 0;
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    filter: alpha(opacity=1);
    opacity: 0.9;
}

.btn-tab-close:hover {
    color: #d90000;
}

/*video player*/
.videogular-container {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 2000;
    padding-right: 50px;
}

.glyphicon-remove {
    color: #777;
    display: inline-block;
    padding: 3px;
    font-size: 10px;
    position: absolute;
    z-index: 10;
    top: 7px;
    right: -10px;
}

.attachment-img > img {
    width: 100px;
    height: 100px;
}

.model-player-wrapper {
    height: 20px;
    width: 300px;
    margin-top: 20px;
    padding: 10px 25px 20px 25px;
    position: relative;
    border-radius: 45px;

}

.position-center {
    position: center;
}

.player-operation-wrapper {
    width: 260px;
    height: 50px;
    position: fixed;
    bottom: 160px;
    right: 50px;
    background: #ffffff;
    -webkit-box-shadow: -1px 1px 10px -2px rgba(0, 0, 0, 0.53);
    -moz-box-shadow: -1px 1px 10px -2px rgba(0, 0, 0, 0.53);
    box-shadow: -1px 1px 10px -2px rgba(0, 0, 0, 0.53);
    padding: 12px;
    border-radius: 45px;
    z-index: 1500;
}

.player-button-wrapper > .phone-btn {
    display: inline-block;
    background: #f7f5f5;
    border-radius: 63%;
    width: 30px;
    height: 30px;
    overflow: hidden;
    text-align: center;
    padding-top: 5px;
}

.activity-divider {
    height: 1px;
    margin: 9px 0;
    overflow: hidden;
    background-color: #e5e5e5;
}

.ticket-comment-wrapper > .activity-divider {
    height: 1px;
    width: 100%;
    margin: 9px 0;
    overflow: hidden;
    background-color: rgba(223, 255, 252, 0.29);
}

.thumbnail {
    height: 150px;
    overflow: hidden;
}

.thumbnail .image {
    height: 120px;
    overflow: hidden;
}

.view-first img {
    transition: all 0.2s linear;
}

.view-first .mask {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease-in-out;
}

.view-first .tools {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.view-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}

.view-first:hover img {
    transform: scale(1.1);
}

.view-first:hover .mask {
    opacity: 1;
}

.view-first:hover .tools, .view-first:hover p {
    opacity: 1;
    transform: translateY(0px);
}

.view-first:hover p {
    transition-delay: 0.1s;
}

.view {
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
}

.view .mask, .view .content {
    position: absolute;
    width: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
}

.view img {
    display: block;
    position: relative;
}

.view .tools {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.35);
    margin: 43px 0 0 0;
}

.mask.no-caption .tools {
    margin: 90px 0 0 0;
}

.view .tools a {
    display: inline-block;
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    padding: 0 4px;
}

.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center;
}

.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000;
}

/*phone*/
.phone-disconnected .phone-screen{
    background: #f56868!important;
}

.phone-disconnected .phone-button, .phone-disconnected .phone-button:hover{
    color: #aaa!important;
    background: #F9F3FF!important;
    cursor: default!important;
}

.phone-button {
    width: 45px;
    border: 1px solid transparent;
    Outline: none;
    margin-left: 30px;
    margin-bottom: 5px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    font-size: 25px;
    background: #F9F3FF;
    color: #682F8E;
    font-weight: 700;
}

.phone-button:hover {
    background-color: #682F8E;
    border: 1px solid #f0efef;
    /*color: #EE437E;*/
    color: #fff;
}

.phone-dialpad-display {
    position: inherit;
    bottom: 205px;
    right: 102px;
    margin-top: 76px;
    margin-left: -12px;
}

.phone-dialpad {
    width: 193px;
    height: 161px;
    /*margin: 25px auto;*/
    border: 0px solid silver;
    border-radius: 4px;
    padding: 3px;
    text-align: center;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    outline: none;
}

.phone-dialpad-no,
.phone-dialpad-no[disabled], .phone-dialpad-no[readonly] {
    margin-bottom: 0;
    border-radius: 0;
    width: 140px;
    height: 20px;
    text-align: left;
    border: none;
    /*background: transparent;*/
    background: rgba(255, 255, 255, 0.4)!important;
    color: #fff !important;
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    border-radius: 3px;
}

/*new update */

.banner-text-bg {
    background-color: #fff;
    width: 150px;
    height: 150px;
    position: absolute;
    z-index: 1000;
}

.add-cont {
    width: 30px;
    height: 30px;
    background: #36ba45;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    padding-top: 6px;
    text-align: center;
    overflow: hidden;
    margin-top: 20px;
}

.add-cont > i {
    font-size: 18px;
}

.profile-image-crop {
    text-align: center;
    margin: 20px auto;
    position: relative;
    padding-top: 15px;
}

.profile-image-crop > div > img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #f7f5f5;
}

.profile-image-crop > div {
    /*width: 150px;*/
    /*height: 150px;*/
    /*position: relative;*/
    /*overflow: hidden;*/
    /*margin: 0 auto;*/
}

.image-edit {
    text-align: center;
    margin-top: 15px;
}

.image-edit > .btn-edit-img {
    color: #ffffff;
    text-transform: uppercase;
    background-color: rgba(54, 186, 69, 0.6);
    padding: 6px 18px 6px 18px;
    border-radius: 5px;
    font-size: 11px;
    cursor: pointer;
}

.image-edit > .btn-edit-img:hover {
    color: #fff;
    background-color: rgba(54, 186, 69, 1);
}

.cropArea {
    background: transparent;
    overflow: hidden;
    width: 500px;
    height: 350px;
    margin: 0 auto;
}

.cropArea > .ng-isolate-scope > canvas {
    margin: 0px !important;
}

.profile-upload-wrapper {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    position: absolute;
    top: 0;
    z-index: 10;
}

.upload-wrapper {
    width: 100%;
    text-align: center;
    margin: 15px auto;
}

.input-file {
    background: #36ba45;
    border-radius: .5em;
    text-align: center;
    overflow: hidden;
    position: relative;
    width: 270px;
    margin: 10px auto;
    color: #fff;
    padding: 10px 12px 10px 10px;
}

.input-file > input[type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;

}

.edit-t-input-file {
    background: transparent;
    text-align: center;
    overflow: hidden;
    position: relative;
    min-width: 15px;
    font-size: 12px;
    background-color: #FFDEEB;
    color: #EF3F7D;
    padding: 6px 8px;
    border-radius: 12px;
}

.edit-t-input-file:hover {
    background-color: #EF3F7D;
    color: #ffffff;
}

.edit-t-input-file > input[type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;

}

.edit-t-input-file-greeting {
    background: transparent;
    text-align: center;
    overflow: hidden;
    position: relative;
    min-width: 36px;
    color: #fff;
    font-size: 16px;
}

.edit-t-input-file-greeting i {
    display: block;
}

.edit-t-input-file-greeting:hover i {
    background-color: #EF3F7D;
    color: #ffffff;
}

.edit-t-input-file-greeting > input[type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;

}

.input-file input {
    display: block !important;
    width: 157px !important;
    height: 57px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

.input-file [type=file] {
    cursor: pointer;
}

.crop-text {
    text-align: center;
    font-size: 33px;
    margin-top: 100px;
    color: #f7f5f5;
}

.crop-text > i {
    font-size: 66px;
}

.crop-window-close {
    padding-top: 30px;
    float: right;
    width: 100%;
    text-align: right;
}

.crop-window-close > i {
    width: 20px;
    height: 20px;
    background-color: #17373c;
    border-radius: 50%;
    text-align: center;
    padding: 10px;
    cursor: pointer;
}

.crop-window-close > i:hover {
    color: #fff;
}

.done-btn-wrapper {
    text-align: center;
}

/*customer profile tab panel*/
.profile-tab-pills > ul.nav {
    position: absolute;
    top: 12px;
    left: 300px;
}

.profile-tab-pills > ul.nav > li > a {
    padding: 6px 15px;
    color: #8298ae;
}

.profile-tab-pills > ul.nav-pills > li.active > a,
.profile-tab-pills > ul.nav-pills > li.active > a:focus,
.profile-tab-pills > ul.nav-pills > li.active > a:hover {
    color: #4f9300;
    background-color: #1a3d42;
}

.footer-new-profile {
    margin-top: 30px;
}

.model-body.model-body-scroll {
    padding: 9px 0px 10px 0px;
    height: 564px;
    overflow: hidden;
    overflow-y: auto;
}

.progress-bar {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 9px;
}

/*loading option */

.engagement-loading {
    color: #ffffff;
    text-align: center;
    padding-top: 25px;
}

.add-contact-wrapper {
    width: 100%;
    min-height: 159px;
    height: auto;
    background-color: rgba(247, 245, 245, 0.88);
    position: absolute;
    left: 0;
    top: 44px;
    overflow: hidden;
    padding-top: 13px;
    border: 1px solid #d2c242;
    z-index: 1;
}

/*scrollable option*/
.fix-console-tab > .ui-tabs-scrollable > .spacer > div > ul.nav-tabs {
    /*position: fixed;*/
    position: absolute;
    /*top: 52px;*/
    top: -60px;
    /*left: 76px;*/
    /*width: calc(100% - 110px);*/
    width: 100%;
    z-index: 100;
    border-radius: 5px;
    background-color: #f8f8f8;
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}

.fix-console-tab > .ui-tabs-scrollable >
button.btn.nav-button.left-nav-button {
    /*position: fixed;*/
    /*top: 52px;*/
    top: -60px;
    z-index: 101;
    /*left: 59px;*/
    left: -20px;
    height: 40px;
    width: 20px;
    background-color: #FFDEEB;
    color: #EF3F7D;
    border-radius: 3px 0 0 3px;
}

.fix-console-tab > .ui-tabs-scrollable >
button.btn.nav-button.right-nav-button {
    /*position: fixed;*/
    /*top: 52px;*/
    top: -60px;
    z-index: 998;
    /*right: 25px;*/
    right: -20px;
    /*display: block !important;*/
    height: 40px;
    width: 20px;
    background-color: #FFDEEB;
    color: #EF3F7D;
    border-radius: 0 3px 3px 0;
}

.fix-console-tab > .ui-tabs-scrollable >
button.btn.nav-button[disabled]{
    background: #ccc!important;
    color: #aaa!important;
}

.fix-console-tab > .ui-tabs-scrollable >
div.btn-group.dropdown {
    top: -32px;
    z-index: 101;
    right: -20px;
    border-radius: 0 0 3px 3px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.quick-scroller {
    position: fixed;
    width: 50px;
    height: 50px;
    background-color: #EE437E;
    bottom: 5px;
    right: 5px;
    z-index: 2000;
    border-radius: 100%;
    overflow: hidden;
    cursor: pointer;
    font-size: 12px;
    color: #fff;
    text-align: center;
    padding-top: 17px;
}

.note-ivr-wrapper > div > ul.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
    color: #4f9300;
    background-color: #1a3d42;
}

.note-ivr-wrapper > div > ul.nav-pills > li.active > a:hover {
    color: #4f9300;
}

.note-ivr-wrapper > div > ul {
    border-bottom: 1px solid #f7f5f5;
}

.note-ivr-wrapper > div > ul.nav-pills > li > a {
    border-radius: 4px 4px 0px 0px;
}

.note-ivr-wrapper > div > ul.nav > li > a {
    padding: 6px 9px;
}

.nav-tabs > li > a {
    border-radius: 0px !important;
}

.nav > li > a:focus, .nav > li > a:hover {
    background-color: transparent !important;
    border-radius: 0;
    color: #000000;
}

.nav > li > a:focus,
.nav > li > a.none-h:hover {
    background-color: #d3e5f9 !important;
    color: #fff;
}

.data-not-found {
    text-align: center;
    color: #4f9300;
    margin-top: 20px;
}

.fnep-wrapper {
    width: 100%;
    text-align: center;
}

.fnep-wrapper > .lgnew-profile {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ddd;
    overflow: hidden;
}

.model-edit-ticket-wrapper {
    background: #fff;
    height: 500px;
    margin-top: 10px;
    padding: 10px 15px 20px 15px;
    position: relative;
    z-index: 95;
}

.model-edit-ticket-wrapper .model-header {
    width: calc(100% + 30px);
    margin:-10px -15px 20px;
}

.model-edit-ticket-wrapper .mode-left-icon {
    float: left;
}

.model-edit-ticket-wrapper .model-header-text {
    line-height: 2.4;
    margin-left: 35px;
}

.load-more-wrapper {
    width: 100%;
    text-align: center;
    margin-top: 60px;
}

.load-more-wrapper > h5 {
    font-size: 15px;
    color: #14d0a0;
    cursor: pointer;
    background: #17373c;
    width: 150px;
    padding: 10px;
    margin: 0 auto;
}

.load-more-wrapper > h5:hover {
    color: #168039;
}

/*ticket view tab selected */
.selected-this {
    background: #168039;
}

.selected-this.low {
    background: #8298ae !important;
    color: #fff !important;
    border: 1px solid #8298ae !important;
}

.selected-this.normal {
    background: #168039 !important;
    color: #fff !important;
    border: 1px solid #168039 !important;
}

.selected-this.high {
    background: #ff8c00 !important;
    color: #fff !important;
    border: 1px solid #ff8c00 !important;
}

.selected-this.urgent {
    background: #EA3B3B !important;
    color: #fff !important;
    border: 1px solid #EA3B3B !important;
}

.selected-this-btn {
    background: #168039;
    border-color: #168039;
    color: #fff;
}

.bg-checkbox {
    cursor: pointer;
}

.active-test {
    background: #4f9300 !important;
}

.phone-sm-btn > .veery-font-1-microphone {
    /*// color: #d90000;*/
}

.dial-pad-wrapper {
    background-color: rgb(255, 255, 255) !important;
    width: 230px;
    overflow: hidden;
    height: 310px;
    /*box-shadow: -1px 3px 23px 0px rgba(0, 0, 0, 0.1);*/
    /*border: 1px solid #d9dee4;*/
    /*border-radius: 15px 15px 0px 0px;*/
}

.phone-screen {
    width: 232px;
    height: 66px;
    background: linear-gradient(#9a5dc3 35%,#9c64c2 38%,#d5abf1);
    position: absolute;
    overflow: hidden;
    padding-top: 0px;
    -webkit-box-shadow: 0px 1px 3px -2px rgba(0, 0, 0, 0.56);
    -moz-box-shadow: 0px 1px 3px -2px rgba(0, 0, 0, 0.56);
    box-shadow: 0px -2px 10px -1px rgba(0, 0, 0, 0.56);
}

.phone-screen > .no-action {
    font-size: 18px;
    color: #000000;
    padding-left: 13px;
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
}

.phone-screen > .dial-action {
    font-size: 14px;
    color: #ffffff;
    display: inline-block;
    padding-left: 16px;
}

.pin-screen-wrapper {
    cursor: pointer;
    z-index: 1000;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.3);
    overflow: hidden;
    top: 5px;
    border-radius: 100%;
    text-align: center;
    padding-top: 3px;
    right: 5px;
    color: #ffffff;
    font-size: 12px;
}

.phone-t-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    right: 11px;
    z-index: 1;
    top: 5px;
}

.phone-t-menu > li {
    display: inline-block;
}

/*notification loading color */
#notificationAlarm > i.fa.fa-spinner {
    color: #fff !important;
}

.notify-img-small {
    width: 45px;
    height: 38px;
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.noti-detail {
    display: inline-block;
    width: 215px;
}

.noti-detail > h5 {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #8298ae;
}

.noti-detail > h4 {
    margin: 0;
    padding: 0;
    font-size: 10px;
    margin-top: 3px;
    color: #7a7f7d;
}

.noti-detail > div {
    font-size: 10px;
    color: #cbd0ce;
}

.notify-img-small > img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    overflow: hidden;
    position: relative;
    border: 2px solid #fff;
}

.call-duations {
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    display: inline-block;
}

.phone-reconnect-wrapper {
    width: 100%;
    top: 0;
    bottom: 0;
    position: absolute;
    background: #ffffff;
    z-index: 1000;
    padding-top: 100px;
}

.p-reconnect-wrp {
    position: relative;
    text-align: center;
}

.p-reconnect-text{
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 16px;
}

.soft-phone-drag-elem {
    /* cursor: move; */
    /*height: 334px;*/
    width: 230px;
    position: fixed;
    left: 55px;
    z-index: 3000;
    overflow: hidden;
    background: transparent;
    border-radius: 10px;
    -webkit-box-shadow: 0px 2px 11px -4px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 11px -4px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 11px -4px rgba(0, 0, 0, 0.75);
}

.soft-b-67 {
    bottom: 67px;
}

.droppable {
    width: 230px;
    height: 300px;
    height: inherit;
}

.draggableContainer {
    width: 100%;
    height: 90%;
}

/* Prevent scrollbars to appear when waves go out of bound */
.sonar-wrapper {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

/* the 'wave', same shape and size as its parent */
.sonar-wave {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    background-color: #ff8c00;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}

/*
  Animate!
  NOTE: add browser prefixes where needed.
*/
.sonar-wave {
    animation: sonarWave 2s linear infinite;
}

@keyframes sonarWave {
    from {
        opacity: 1;
    }
    to {
        transform: scale(3);
        opacity: 0;
    }
}

.modal-message-wrapper {
    width: 70%;
}

.x_panel_modal {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 17px;
    display: inline-block;
    background: #fff;
    border: 0px solid #E6E9ED;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    opacity: 1;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -ms-transition: all .2s ease;
    transition: all .2s ease;
    border-radius: 7px;
}

.modal-panel {
    height: auto;
    border-left-width: 2pt;
    border-color: lightgrey;
}

.notify-img-modal {
    margin: 0 auto;
    text-align: left;
    position: absolute;
    top: 30px;
    min-height: 50px;
}

.notify-img-modal > img {
    border-radius: 70%;
    width: 100px;
    height: 100px;
    overflow: visible;
    position: relative;
    z-index: 0;
}

.console-notification-modal-wrapper {
    width: 80%;
    height: 100px;
    overflow: hidden;
    padding: 0px 5px 5px 0px;
    margin-left: 25%;
    margin-top: 5%;
    z-index: 0;

}

.modal-message-wrapper {
    width: 70%;
}

.notify-modal-btn-wrap {
    z-index: 1;
    margin-right: 10px;
}

.notification-modal-time {
    font-size: 10px;
    display: inline-block;
    color: #d7d700;
}

.modal-content {
    overflow: hidden;
}

/*My remeider note CSS remnote- */
/*white-space: pre-wrap;*/
/*word-wrap: break-word;*/
.renote-add-wrapper {
    margin: 25px 23px 25px 0px;
    min-height: 50px;
    height: auto;
    overflow: hidden;

}

.renote-add-wrap {
    border-radius: 5px;
    background-color: #fff;
    -webkit-box-shadow: 6px 7px 16px -14px rgba(0, 0, 0, 0.98);
    -moz-box-shadow: 6px 7px 16px -14px rgba(0, 0, 0, 0.98);
    box-shadow: 6px 7px 16px -14px rgba(0, 0, 0, 0.98);
}

.renote-input-box {
    height: 40px;
    border-radius: 5px;
    background: transparent;
}

.renote-add-close {
    position: absolute;
    cursor: pointer;
    padding-top: 4px;
    right: 30px;
    top: 4px;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    overflow: hidden;
    text-align: center;
    color: #EE437E;
    background-color: #FFDEEB;
}

.renote-add-close:hover {
    color: #ffffff;
    background-color: #EE437E;
}

.renote-add-wrap.new-note {
    min-height: 150px;
    padding-top: 20px;
    height: auto;
    overflow: hidden;
}

input[type="textarea"].take-note-text::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #000 !important;
    font-size: 15px;
    font-family: "AvenirNextLTPro-UltLt", Courier, monospace !important;
}

input[type="text"].take-note-title-text::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #000 !important;
    font-family: "AvenirNextLTPro-UltLt", Courier, monospace !important;
    font-weight: bold;
    font-size: 16px;
}

.renote-tet-wrapper {
    padding: 15px;
}

.note-text-area {
    min-height: 50px;
    height: auto;
    overflow: hidden;
    position: relative;
}

.take-note-text {
    color: #000 !important;
    font-size: 15px;
    font-family: "AvenirNextLTPro-UltLt", Courier, monospace;
}

.take-note-title-text {
    color: #000 !important;
    font-family: "AvenirNextLTPro-UltLt", Courier, monospace;
    font-weight: bold;
    font-size: 15px;
}

.note-title {
    font-weight: bold;
    font-size: 24px;
    color: #4D4D4E;
}

.note-desc {
    color: #000 !important;
    font-size: 18px;
    font-family: "AvenirNextLTPro-UltLt", Courier, monospace;
    white-space: pre-line;
    text-align: left;
}

.renote-done {
    font-family: "AvenirNextLTPro-Bold", Courier, monospace;
    text-align: right;
    /* padding-right: 5px; */
    cursor: pointer;
    padding-top: 2px;
}

ul.renote-color-btn {
    margin: 0;
    padding: 0;
}

ul.renote-color-btn > li {
    list-style: none;
    display: inline-block;
    /* margin-top: 10px; */
    margin-bottom: 10px;
    padding-right: 5px;
}

.note-color-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    overflow: hidden;
    text-align: center;
    padding-top: 1px;
}

.note-color-btn.high,
.note-color-wrp.high,
.my-note-wrapper.high {
    background: #FFCDD2;
    color: #fb5f21;
}

/*.my-note-wrapper.high:hover {*/
/*border: 2px solid #f5857e;*/
/*}*/

/*.my-note-wrapper.low:hover {*/
/*border: 2px solid #83c1ff;*/
/*}*/

/*.my-note-wrapper.urgent:hover {*/
/*border: 2px solid #e6d858;*/
/*}*/

/*.my-note-wrapper.normal:hover {*/
/*border: 2px solid #59b78e;*/
/*}*/

/*.my-note-wrapper.default-color:hover {*/
/*border: 2px solid #dfe1e4;*/
/*}*/

.note-color-btn.low,
.note-color-wrp.low,
.my-note-wrapper.low {
    background: #FFE3DC;
    color:#F15A24;
}

.note-color-btn.normal,
.note-color-wrp.normal,
.my-note-wrapper.normal {
    background: #DCFFDF;
    color:#39B54A;
}

.note-color-btn.urgent,
.note-color-wrp.urgent,
.my-note-wrapper.urgent {
    background: #F3E9FF;
    color:#682F8E;
}

.note-color-btn.default-color,
.my-note-wrapper.default-color {
    background: #FFE3DC;
    color:#F15A24;
}

.mynote-wrapper {
    padding: 0px 15px 0px 15px;
    floating: true;
}

.my-note-wrapper {

    min-width: 50px;
    min-height: 100px;
    background: #fff8f8;
    word-wrap: break-word;
    overflow: hidden;
}

.my-note-content {
    padding: 10px 30px 10px 31px;
}

.note-color-btn > i {
    /*color: #fff;*/
}

.note-footer {
    list-style: none;
    /*padding: 0px 0px 0px 30px;*/
    padding: 10px;
    position: absolute;
    /*bottom: 12px;*/

    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
}

.note-footer > li {
    display: inline-block;
}

.note-footer > li > i {
    padding-right: 13px;
    font-size: 16px;
    cursor: pointer;
    outline: none !important;
}

.my-note-remind-me {
    background: rgba(255, 255, 255, 0.95);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.my-note-remind-me > .header {
    padding: 20px 5px 5px 35px;
}

.remind-body {
    text-align: center;
    padding: 10px;
}

.remind-body > .date {
    padding: 2px 10px 10px 10px;
    margin-bottom: 10px;
    z-index: 100;
    height: 60px;
    width: 100%;
}

.remind-body > .date > div > .form-control {
    border: 0px;
    border-bottom: 1px solid #f7f5f5;
    background: transparent;
}

.remind-body > .date > div > span.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
}

.form-horizontal {
    /*width: 500px;*/
}

.datetime-picker-dropdown {

}

.datetime-picker-dropdown > li.date-picker-menu div > table .btn-default {
    border: 0;
}

.datetime-picker-dropdown > li.time-picker-menu div > table {

}

.mynote-check-true {
    position: absolute;
    right: 10px;
    bottom: 10px;
    border-radius: 25px;
    height: 35px;
    width: 35px;
    padding-top: 9px;
    overflow: hidden;
    text-align: center;
}

.mynote-check-true > i {
    color: #000;
}

.spinner-container {
    animation: rotate 2s linear infinite;
    -webkit-animation: rotate 2s linear infinite;
}

.spinner-container .path {
    stroke-dasharray: 1, 150; /* 1%, 101% circumference */
    stroke-dashoffset: 0;
    stroke: rgb(132, 153, 175);
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
    -webkit-animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150; /* 1%, 101% circumference */
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150; /* 70%, 101% circumference */
        stroke-dashoffset: -35; /* 25% circumference */
    }
    100% {
        stroke-dasharray: 90, 150; /* 70%, 101% circumference */
        stroke-dashoffset: -124; /* -99% circumference */
    }
}

@-webkit-keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 150; /* 1%, 101% circumference */
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150; /* 70%, 101% circumference */
        stroke-dashoffset: -35; /* 25% circumference */
    }
    100% {
        stroke-dasharray: 90, 150; /* 70%, 101% circumference */
        stroke-dashoffset: -124; /* -99% circumference */
    }
}

@media screen and (max-width: 600px) {
    body {
        overflow-x: auto;
    }

    .app-wrapper {
        width: 600px;
    }
}

.loading-note {
    text-align: center;
}

.mynote-noti-wrapper {
    width: 400px;
    height: 160px;
    position: absolute;
    top: -180px;
    /*top: 62px;*/
    background: #0d9d95;
    margin: 0 auto;
    left: 38%;
    z-index: 10;
    -webkit-box-shadow: 0px 16px 17px -15px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 16px 17px -15px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 16px 17px -15px rgba(0, 0, 0, 0.75);
    border-radius: 2px;
    overflow: hidden;
    text-align: center;
}

.mynote-noti-wrapper > .body {
    text-align: center;
    color: #ffffff;
    font-size: 18px;
}

.mynote-noti-wrapper > .body > .header {
    text-align: center;
    color: #ffeb3b;
    font-size: 18px;
    margin-top: 10px;
    text-transform: lowercase;
}

.mynote-noti-wrapper > .body > .note-notification-icon {
    margin-bottom: 0px;
    margin-top: 0px;
    font-size: 30px;
    color: #ffffff;
}

.mynote-noti-wrapper > .body > h5 {
    font-size: 20px;
    margin: 0;
}

.mynote-noti-wrapper > .body > .note-close {
    position: absolute;
    top: 12px;
    right: 14px;
    color: #ffffff;
    font-size: 10px;
    cursor: pointer;
}

.mynote-remind-me-modal {
    position: absolute;
    background: rgba(0, 0, 0, 0.83);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;

}

.moment-picker .moment-picker-contents {
    cursor: pointer;
    font-size: 25px;
    font-family: "AvenirNextLTPro-UltLt", Courier, monospace;
}

.mynote-remind-me-modal.low {
    background: rgba(173, 214, 255, 0.7);
}

.mynote-remind-me-modal.normal {
    background: rgba(105, 216, 167, 0.7);
}

.mynote-remind-me-modal.high {
    background: rgba(255, 143, 135, 0.7);
}

.mynote-remind-me-modal.urgent {
    background: rgba(255, 235, 59, 0.7);

}

.gridster-loaded .gridster-item {
    background-color: #ffffff;
    -webkit-box-shadow: 6px 7px 16px -14px rgba(0, 0, 0, 0.98);
    -moz-box-shadow: 6px 7px 16px -14px rgba(0, 0, 0, 0.98);
    box-shadow: 6px 7px 16px -14px rgba(0, 0, 0, 0.98);
    border-radius: 5px;
}

.gridster-loaded .gridster-item:hover {
    -webkit-box-shadow: 0px 3px 17px -4px rgba(0, 0, 0, 0);
    -moz-box-shadow: 0px 3px 17px -4px rgba(0, 0, 0, 0);
    box-shadow: 0px 3px 17px -4px rgba(0, 0, 0, 0);
}

.mynote-reminder-body {
    background: #fff;
    height: 200px;
    margin-top: 50px;
    padding: 10px 25px 20px 25px;
    position: relative;
    z-index: 95;

}

.model-reminder-header {
    font-family: "AvenirNextLTPro-UltLt", Courier, monospace;
    font-weight: bold;
    font-size: 22px;
    text-transform: uppercase;
}

.reminder-footer {
    text-align: center;
}

.reminder-footer > span {
    padding: 10px 15px 10px 15px;
    cursor: pointer;
}

.reminder-footer > span.low {
    background: rgba(173, 214, 255, 1);
}

.reminder-footer > span.normal {
    background: rgba(105, 216, 167, 1);
}

.reminder-footer > span.high {
    background: rgba(255, 143, 135, 1);
}

.reminder-footer > span.urgent {
    background: rgba(255, 235, 59, 1);
}

.my-note-remind-me.loading {
    text-align: center;
    font-size: 25px;
    padding-top: 62px;
}

.my-note-remind-me.loading.low {
    color: rgba(173, 214, 255, 1);
}

.my-note-remind-me.loading.high {
    color: rgba(255, 143, 135, 1);
}

.my-note-remind-me.loading.urgent {
    color: rgba(255, 235, 59, 1);
}

.my-note-remind-me.loading.normal {
    color: rgba(105, 216, 167, 1);
}

.my-note-emety {
    text-align: center;
    font-weight: bold;
    font-size: 28px;
    text-transform: capitalize;
    margin-top: 50px;
    color: #36ba45;

}

/*notification description*/
.view-notification-d-wrapper {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.notification-details-wrapper {
    width: 100%;
    height: 150px;
    background: transparent;
}

.notice-details-wrapper {
    width: 100%;
    height: 250px;
    background: transparent;
}

.notif-image {
    text-align: left;
    padding-top: 26px;
}

.notif-image > img {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
    border: 3px solid #45bf55;
}

.notif-details-wrapper {
    width: 100%;
    min-height: 140px;
    height: auto;
    border-radius: 7px;
    /*overflow: hidden;*/
    position: relative;
    background: #ffffff;
    margin-top: 20px;
    padding: 15px 10px 10px 15px;
}

.notif-details-wrapper::before {
    content: "";
    position: absolute;
    left: -19px;
    top: 34px;
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-right: 22px solid #ffffff;
    border-bottom: 13px solid transparent;
    z-index: 1000;
}

.notif-details-wrapper > div > .header {
    font-weight: bold;
    font-size: 14px;
}

.noti-details-footer > ul {
    list-style: none;
    width: 100%;
    margin-top: 15px;
}

.noti-details-footer > ul > li {
    display: inline-block;
    padding-right: 15px;
    color: #45bf55;
    text-transform: uppercase;
    cursor: pointer;
}

.noti-details-footer > ul > li :hover {
    color: #008148;
}

.noti-details-footer {
    text-align: right;
    padding-right: 10px;
}

/*end*/

.notify-img-large {
    margin: 63px auto;
    text-align: center;
    position: absolute;
    top: 70px;
    width: 100%;
    min-height: 150px;
}

.notify-img-large > img {
    border-radius: 70%;
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 0;
    overflow: hidden;

}

/*birthday / anniversary popup - highlighted alert centered in the viewport, click anywhere in the window to dismiss*/
.engagement-notify-wrapper-052017 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.engagement-notify-card-052017 {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 52px 60px;
    margin: 10px;
    max-width: 620px;
    border-radius: 20px;
    font-family: inherit;
    font-weight: 700;
    color: #ffffff;
    animation: engagementNotifyPop 0.35s ease-out, engagementNotifyGlow 1.8s ease-in-out infinite 0.35s;
}

/* soft decorative circles for depth, in the brand palette */
.engagement-notify-card-052017::before,
.engagement-notify-card-052017::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    pointer-events: none;
}

.engagement-notify-card-052017::before {
    width: 180px;
    height: 180px;
    top: -70px;
    right: -60px;
}

.engagement-notify-card-052017::after {
    width: 130px;
    height: 130px;
    bottom: -55px;
    left: -45px;
}

.engagement-notify-icon-row-052017 {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}

.engagement-notify-icon-badge-052017 {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.engagement-notify-msg-052017 {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.4;
}

.engagement-notify-greeting-052017 {
    font-size: 26px;
    font-weight: 700;
}

@keyframes engagementNotifyPop {
    from {
        transform: scale(0.85);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes engagementNotifyGlow {
    0%, 100% {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(238, 67, 126, 0.5);
    }
    50% {
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 0 14px rgba(238, 67, 126, 0);
    }
}

.engagement-notify-card-052017.birthday {
    background: linear-gradient(135deg, #6a2c8f, #ee437e);
}

.engagement-notify-card-052017.anniversary {
    background: linear-gradient(135deg, #4b2a86, #ee437e);
}

/* both occasions fall on the same day - a distinct three-stop gradient for the combined card */
.engagement-notify-card-052017.birthday.anniversary {
    background: linear-gradient(135deg, #4b2a86, #8b2f8e, #ee437e);
}

.engagement-notify-card-052017 > i.fa {
    font-size: 26px;
}

.engagement-notify-icon-052017 {
    font-size: 34px;
    animation: engagementNotifyIconBounce 0.9s ease-in-out infinite;
}

@keyframes engagementNotifyIconBounce {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-6px) rotate(-8deg);
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    75% {
        transform: translateY(-3px) rotate(8deg);
    }
}

/*confirm box*/
.confirm-box-wrapper {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2000;
}

.confirm-body {
    position: relative;
    background: #ffffff;
    height: 250px;
    overflow: hidden;
}

.confirm-body > h5 {
    font-family: "AvenirNextLTPro-UltLt", Courier, monospace;
    text-align: center;
    font-size: 25px;
    padding-top: 35px;
}

.select-option-wrapper {
    padding-left: 68px;
    padding-top: 8px;
}

.select-option-wrapper > ul {
    list-style: none;
}

.select-option-wrapper > ul > li {
    text-align: left;
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
}

.checkbox > label {
    font-family: 'AvenirNextLTPro-Regular', sans-serif !important;
    font-size: 10px;
    color: #b5b8b5 !important;
}

.confirm-btn-wrapper {
    text-align: center;
    font-size: 17px;
    padding-top: 40px;
}

.confirm-btn-wrapper > div {
    display: inline-block;
    cursor: pointer;
}

.confirm-btn-wrapper > .ok-btn {
    font-family: "AvenirNextLTPro-Cn", Courier, monospace;
    color: #45bf55;
    padding-right: 18px;
}

.confirm-btn-wrapper > .cancel-btn {
    font-family: "AvenirNextLTPro-Cn", Courier, monospace;
    color: #d90000;
}

/*lock screen */
.lock-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #F9FBFE;
    z-index: 3200;
    /*-webkit-filter: blur(5px);*/
    /*-moz-filter: blur(5px);*/
    /*-o-filter: blur(5px);*/
    /*-ms-filter: blur(5px);*/
    /*filter: blur(2px);*/
}

.overflow-hidden {
    overflow: hidden !important;
}

.blur-bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-filter: blur(25px);
    -moz-filter: blur(25px);
    -o-filter: blur(25px);
    -ms-filter: blur(25px);
    filter: blur(25px);
}

.blur-bg-img > img {
    width: 100%;
}

.lock-body {
    position: relative;
    /*width: 250px;*/
    /*height: auto;*/
    overflow: hidden;
    text-align: center;
    margin: 30% 0;
    /*background-color: #fff;*/
    padding: 15px;
    color: #fff;
}

.lock-body > h1 {
    font-family: 'AvenirNextLTPro-UltLt', sans-serif;
    color: #168039;
    letter-spacing: 4px;
    font-size: 45px;
}

.lock-time-wrapper {
    font-family: 'AvenirNextLTPro-UltLt', sans-serif;
    color: #fff;
    letter-spacing: 4px;
    font-size: 35px;
}

.console-profile-img.lg {
    width: 75px;
    height: 124px;
    /* border-radius: 50%; */
    overflow: hidden;
    display: inline-block;
    padding-top: 15px;
}

.console-profile-img.lg > img {
    width: 120px;
    height: 120px;
    /*-webkit-filter: blur(5px);*/
    /*-moz-filter: blur(5px);*/
    /*-o-filter: blur(5px);*/
    /*-ms-filter: blur(5px);*/
    /*filter: blur(2px);*/
}

.lock-pwd {
    margin-top: 8%;
    font-family: 'AvenirNextLTPro-Cn', sans-serif;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
}


.lock-text, .lock-text[disabled], .lock-text[readonly] {
    background: transparent;
    border: 0px;
    border-bottom: 1px solid #fff;
    margin: 0 auto;
    width: 297px;
    text-align: center;
    margin-bottom: 25px;
    color: #156e38 !important;
    font-size: 20px;
}

.lock-text:hover {
    border-bottom: 1px solid #156e38;
}

.lock-pwd > div > i {
    margin-top: 20px;
}

.coffee-cup {
    margin: 0 auto;
    text-align: center;
}

@keyframes wave {
    0% {
        opacity: 0;
        transform: translateY(15px)
    }
    50% {
        opacity: 1;
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        transform: translateY(-15px)
    }
}

.loader ul {
    margin: 0 0 10px 0;
    padding: 0;
    list-style: none;
    width: 60px;
    text-align: center;
    animation: wave 2.5s infinite linear;
    animation-fill-mode: forwards;
}

.loader li {
    display: inline-block;
    background: #FAF1D9;
    height: 30px;
    width: 9px;
    border-radius: 0 100%;
    transform: rotate(12deg);
}

.cup {
    background: #164148;
    width: 60px;
    height: 54px;
    border-radius: 0 0 50% 50%;
    position: relative;
}

.cup:before {
    content: "";
    position: absolute;
    width: 66px;
    height: 20px;
    border-radius: 50%;
    background: inherit;
    left: -3px;
    top: -10px;
}

.cup:after {
    content: "";
    position: absolute;
    width: 56px;
    height: 12px;
    border-radius: 50%;
    background: #17373c;
    left: 2px;
    top: -6px;
}

.loader span {
    background: #164148;
    width: 13px;
    height: 20px;
    position: absolute;
    right: -13px;
    top: 10px;
    border-radius: 0 50% 50% 0;
}

.loader span:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    background: #17373c;
    width: 10px;
    height: 12px;
    border-radius: 0 50% 50% 0;
}

.loader span:after {
    content: "";
    position: absolute;
    top: 40px;
    left: -50px;
    background: #164148;
    width: 40px;
    height: 8px;
    border-radius: 50%;
}

.menu-data-notfund {
    text-align: center;
    font-size: 15px;
    color: #36ba45;
    padding-top: 5px;

}

.menu-data-notfund > span {
    border: 1px solid #33651e;
    padding: 2px 10px 2px 10px;
    border-radius: 5px;
    background: #33651e;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    line-height: 3;
}

.loading-duration {
    color: #ff8c00 !important;
}

/*new lock screen UI update */
.lock-screen-wrp {
    margin: 10em auto;
    width: 100%;
    height: 398px;
    background: #fff;
    overflow: hidden;
    position: relative;
    -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 15px;
}

.lock-agent-round-1 {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    text-align: center;
    border-radius: 100%;
    padding-top: 10px;
}

.lock-agent-round-1.time-exceed {
    background-color: rgba(216, 97, 97, 0.44);
    box-shadow: 0 0px 9px 0 rgba(216, 97, 97, 0.47);
}

.lock-agent-round-1.time-exceed > .lock-avatar > img {
    border: 6px solid rgba(216, 97, 97, 0.60);
}

.lock-avatar {
    width: 90px;
    height: 90px;
    position: relative;
    margin: 0 auto;
}

.lock-avatar > img {
    border-radius: 100%;
    border: 6px solid #F2F4F8;
}

.lck-screen-des {
    padding-top: 25px;
}

.lck-screen-des > .lck-agent-name {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    text-align: center;
    font-size: 20px;
}

.lck-screen-des.time-exceed > .lck-agent-name,
.lck-screen-des.time-exceed > .break-type {
    color: rgba(216, 97, 97, 1);
}

.lck-screen-des > .break-type {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    text-align: center;
    font-size: 22px;
    text-transform: lowercase;
    letter-spacing: 1.3px;
    color: #6c6d6c;
}

.lck-screen-des > .break-type-exceed {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    text-align: center;
    font-size: 20px;
    text-transform: capitalize;
    letter-spacing: 1.3px;
    color: rgba(216, 97, 97, 1);
    padding-top: 5px;
}

.screen-unlock-wrapper {
/width: 80%;
    margin: 30px auto;
}

.lock-screen {
    position: absolute;
    opacity: 0.6;
}

.btn-unlock {
    /*width: 90px;*/
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    text-align: center;
    height: 45px;
    background: #EE437E;
    color: #fff;
    border-radius: 5px;
    outline: 0 !important;
    /* text-align: center; */
    margin: 0 auto;
    padding-top: 10px;
    letter-spacing: 0.9px;
    font-size: 12px;
}

.btn-unlock:hover,
.btn-unlock:focus {
    color: #fff;
    background: #000000;
}

/*confirmation box*/

.box-confirmation-wrapper {
    position: absolute;
    z-index: 990;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.93);
}

.box-confirmation-wrapper .conf-layout {
    font-family: 'AvenirNextLTPro-Cn', sans-serif;
    background: transparent;
    width: 100%;
    min-height: 150px;
    margin-top: 0px;
    text-align: center;
    font-size: 25px;
    padding: 38px 5px 10px 5px;
    overflow: hidden;
}

.cnf-btn-wrapper {
    margin-top: 10px;
}

.cnf-btn-wrapper > ul {
    list-style: none;
    padding: 0;
}

.cnf-btn-wrapper > ul > li {
    display: inline-block;
    font-size: 22px;
    text-transform: lowercase;
    font-family: 'AvenirNextLTPro-Cn', sans-serif;
    cursor: pointer;
}

.cnf-btn-wrapper > ul > li.ok {
    color: #d90000;
    padding-left: 8px;
}

.cnf-btn-wrapper > ul > li.cancel {
    color: #168039;
    padding-right: 15px;
    border-right: 1px solid #168039;
    line-height: 1;
}

.user-state.offline {
    background: #e4e4e4;
}

.conversation-wrapper {
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #fff;
}

.conversation-wrapper.client {
    background: #d6d5d0;
}

.conversation-wrapper.agent {
    background: #ebe5d5;
}

.conversation-wrapper.group {
    background: #f0f0f0;
}

.conversation-wrapper.agent,
.conversation-wrapper.group {

}

.conversation-wrapper.client {
    padding-top: 7px;
    padding-bottom: 6px;
    margin-top: 7px;
}

.conversation-wrapper > .title {
    font-family: 'AvenirNextLTPro-Bold;', sans-serif;
    text-transform: uppercase;
    font-size: 12px;
    padding-left: 10px;
    color: #bbbaba;
    border-bottom: 1px solid #d9dee4;
    margin-bottom: 5px;
    padding-bottom: 9px;
}

.phone-ivr-display {
    position: inherit;
    bottom: 205px;
    right: 102px;
    margin-top: 82px;
    margin-left: 18px;
    text-align: center;
}

.phone-ivr {
    width: 193px;
    height: 161px;
    /*margin: 25px auto;*/
    border: 1px solid silver;
    border-radius: 4px;
    padding: 3px;
    text-align: center;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    outline: none;
}

.account-verify {
    color: #d90000;
    font-size: 22px;
}

.account-verified {
    color: #36ba45;
    font-size: 22px;
}

/*veery chat console */
.chat-user-status {

}

.chat-user-status > .status {
    width: 8px;
    height: 8px;
    position: relative;
    border-radius: 50%;
    border: 1px solid #f7f7f7;
    display: inline-block;
}

.chat-user-status > .status-call {
    padding-left: 5px;
    display: inline-block;
}

.chat-user-status > .status-name {
    display: inline-block;
    font-family: 'AvenirNextLTPro-Bold;', sans-serif
}

.call-status-available {
    color: #82C566;
}

.call-status-offline {
    color: #9f9f9f;
}

.call-status-busy {
    color: #EA3B3B;
}

.chat-user-status > .status-name.online {
    background: transparent;
    color: #82C566;
}

.chat-user-status > .status-name.offline {
    background: transparent;
    color: #9f9f9f;
}

.agent-name {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 14px;
    padding-top: 2px;
    padding-left: 6px;
    position: relative;
    float: left;
    color: #7a7f7d;
    width: calc(100% - 50px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*chat tab styke */
.chat-wrp {
    position: fixed;
    bottom: 0;
    height: 380px;
    width: 260px;
    overflow: hidden;
    background: #f7f7f7;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    z-index: 1000;
    /* border: 1px solid #0d1c34; */
}

.ch-footer {
    position: absolute;
    width: 100%;
    height: 36px;
    bottom: 0px;
}

.cht-header {
    position: absolute;
    width: 100%;
    height: 36px;
    top: 0px;
    padding: 5px;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .20);
    padding-left: 9px;
}

.cht-header.online {
    background: #36ba45 ;
    color: #ffffff;
}

.cht-header.online.client.viber {
    background: -webkit-linear-gradient(45deg, #6142c3 0%, #7b6bde 50%);
!important: ;
}
.cht-header.online.client.viber {
    background: -webkit-linear-gradient(45deg, #6142c3 0%, #7b6bde 50%);
!important: ;
}

.cht-header.online.client {
    background: #232323;
    color: #ffffff;
}

.cht-header.offline {
    background: #d6d5d0;
    color: #000;
}

.cht-header.rec-new-msg-blink {
    animation-duration: 1200ms;
    animation-name: blink;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    -webkit-animation: blink 1200ms infinite;
}

.cht-header > .c-opt {
    width: auto;
    overflow: hidden;
    padding-top: 0px;
}

.cht-header > .c-opt > .cht-b-name {
    display: inline-block;
    float: left;
    margin-top: -1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
}

.c-last-seen {
    width: 260px;
    margin-top: -10px;

}

.c-last-seen > small {
    font-size: 8px;
    padding-left: 1px;
}

.c-time-ago {
    display: block;
    float: left;
}

.c-time-ago > small {

    font-size: 8px;
}

.cht-header > .c-opt > .cht-close {
    display: inline-block;
    float: right;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 4px;
    font-size: 10px;
    cursor: pointer;
}

.snd-msg-wrp {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 4px 14px 4px 19px;
    position: relative;
    width: 100%;
}

.chat-body {
    position: relative;
    /*height: 305px;*/
    width: 260px;
    margin-top: 50px;
    overflow: hidden;
    display: table-cell;
    vertical-align: bottom;
    padding: 10px 10px 10px 10px;
}

.snd-msg {
    display: table-cell;
    vertical-align: bottom;
    color: #000;
    position: relative;
    text-align: right;
    min-height: 20px;
    padding-right: 15px;
    padding-left: 15px;
    float: right;
    margin-top: 5px;
}

.rec-msg {
    vertical-align: bottom;
    text-align: left;
    bottom: 0px;
    color: #000;
    position: relative;
    width: auto;
    min-height: 20px;
    padding-right: 15px;
    padding-left: 15px;
    float: left;
}

.snd-msg > small, .rec-msg > small {
    font-size: 10px;
    color: #dadada;
}

.snd-msg > .msg-t, .rec-msg > .msg-t {
    margin: 0px;
    min-width: 8px;
    overflow: hidden;
    padding: 3px 5px 3px 5px;
    font-size: 12px;
    margin-bottom: 6px;
    border-radius: 12px;
}

.chat-type {
    display: block;
    position: relative;
    font-size: 10px;
    color: #272727;
    letter-spacing: 0.57px;
    text-align: center;
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-bottom: 6px;
    margin-left: 30px;
    margin-right: 30px;

}

.chat-type.left {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-style: italic;
}

.chat-type.join {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    border-bottom: 1px solid #516D8F;
}

.chat-type.left:before,
.chat-type.left:after {
    /*content: "";*/
    /*height: 1px;*/
    /*position: absolute;*/
    /*top: 6px;*/
    /*width: 13%;*/
}

.chat-type.left:before {
    background: #516D8F;
    left: 40px;
}

.chat-type.left:after {
    background: #516D8F;
    right: 40px;
}

.rec-msg > .msg-t {
    background: #7b6ce147 !important;
    color: #000000 !important;
    border: 1px solid #d9dee4;
    margin-left: 5px;
}

.snd-msg > .msg-t {
    background: #f1efef;
    color: #000000;
    border: 1px solid #d9dee4;
    margin-left: 5px;
    max-width: 217px;
    overflow: hidden;
    word-wrap: break-word;
}

.rec-img {
    display: inline-block;
    float: left;
    margin-right: 5px;
}

.send-img {
    display: inline-block;
    float: right;
}

.rec-img > img,
.send-img > img {
    border: 1px solid #d9dee4;
    border-radius: 50%;
}

/*typeing */
.type-wrp {
    width: 54px;
    height: 25px;
    margin-left: 5px;
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.type-wrp > .rec-img {
    float: left;
    display: inline-block;
}

.type-wrp > .ty-ani-body {
    display: inline-block;
}

.option-c-wrp {
    display: inline-block;
    float: right;
    display: inline-block;
    float: right;
    padding-right: 9px;
}

.opt-c-row-wp {
    padding-top: 3px;
    display: inline-block;
    padding-right: 6px;
    cursor: pointer;
}

.opt-c-row-wp.client {
    color: #ababab;
}

.opt-c-row-wp.client:hover {
    color: #969696;
}

.option-c-wrp > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.option-c-wrp > ul > li > i {
    font-size: 15px;
    /*color: #d9dee4;*/
    color: #757776;
}

.option-c-wrp > ul > li > i.deactivate {
    color: #bdbab9 !important;
}

.typing {
    position: absolute;
    display: inline-block;
    height: 5px;
    width: 5px;
    background-color: #c7c7c7;
    border-radius: 50%;
    animation: wave 1.5s infinite ease-in-out;
    top: 0px;
    margin-top: 11px;
    margin-left: 28px;
}

.typing:first-child {
    left: 0;
}

.typing:nth-child(2) {
    left: 10px;
    animation-delay: 0.10s;
}

.typing:last-child {
    left: 20px;
    animation-delay: 0.20s;
}

@keyframes wave {
    0%, 50% {
        top: 0;
    }

    25% {
        top: -10px;
    }
}

.chat-op {
    width: auto;
    height: auto;
    overflow: hidden;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 3px;
}

.chat-txt {
    background: transparent !important;
    border: 0px !important;
    height: 32px !important;
    margin-top: 2px;
}

.chat-txt::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #dadada !important;
}

.chat-txt::-moz-placeholder {
    /* Firefox 19+ */
    color: #8298ae !important;
}

.chat-txt:-ms-input-placeholder {
    /* IE 10+ */
    color: #8298ae !important;
}

.chat-txt:-moz-placeholder {
    /* Firefox 18- */
    color: #8298ae !important;
}

.cht-b-w {
    margin-top: 37px;
    height: 285px;
    overflow: hidden;
    overflow-y: auto;
    position: relative;
    width: auto;
    border-bottom: 1px solid #D9DEE4;

}

.ch-d-load {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 156px;
}

.ch-d-load > i {
    font-size: 20px;
    color: #e2e5ea;
}

.msg-status {
    position: absolute;
    top: 6px;
    right: 11px
}

.msg-status > i {
    font-size: 8px;
}

.msg-status > i.fa-check {
    font-size: 8px;
}

.msg-status > i.fa-check-circle {
    font-size: 8px;
}

.rec-msg > .msg-t {
    background: #f1efef;
    color: #000000;
    border: 1px solid #d9dee4;
    margin-left: 5px;
    max-width: 217px;
    overflow: hidden;
    word-wrap: break-word;
    padding: 5px 5px;
}

.snd-msg > .msg-t.pending {
    background: #f1efef;
    color: #000000;
    border: 1px solid #d9dee4;
    margin-left: 5px;
}

.snd-msg > .msg-t.delivered {
    background: #8298ae47;
    color: #000000;
    border: 1px solid #d9dee4;
    margin-left: 0px;
}

.snd-msg > .msg-t.seen {
    background: #ffffff;
    color: #000;
    border: 1px solid #eaeaea;
}

.msg-send-time {
    font-size: 10px;
    color: black;
}

.chat-start-point {
    padding-top: 10px;
    padding-bottom: 10px;
}

@keyframes blink {
    0% {
        background: #36ba45;
    }
    49% {
        background: #2b6557;
    }
    50% {
        background: #33906a;
    }
    100% {
        background: #36ba45;
    }
}

.jk-rating-stars-container .button .material-icons {
    font-size: 20px !important;
}

.enable-btn {
    background: #1a3d42;
    text-align: center;
    overflow: hidden;
    position: relative;
    min-width: 120px;
    color: #14d0a0;
}

/*chat tags wrapper */
.chat-tag-wrapper {
    width: 248px;
    height: 160px;
    background: #ffffff;
    position: absolute;
    left: 6px;
    border: 1px solid #e1e1e1;
    border-bottom: 0px;
    z-index: 10;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 10px;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.16);
}

/*.tag-list {*/
/*height: 100px;*/
/*}*/

.tag-list > li {
    display: inline-block;
}

.tag-list-wrp {
    height: 94px;
    margin-bottom: 8px;
    overflow: hidden;
}

.chat-tag {
    border: 1px solid #e1e1e1;
    padding: 4px;
    border-radius: 10px;
    font-size: 11px;
    margin-bottom: 6px;
    margin-right: 3px;
}

.txt-tag-input {
    border: 0px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.16);
    box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.16);
}

.txt-tag-input:hover,
.txt-tag-input:active,
.txt-tag-input:focus {
    border: 0px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.16) !important;
    -moz-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.16) !important;
    box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.16) !important;
}

/*password-leg-wrapper*/
.password-leg-wrapper {
    min-width: 230px;
    min-height: 115px;
    position: absolute;
    top: 205px;
    left: 10px;
    background: #080808;
    padding: 15px 23px 13px 20px;
    z-index: 100;
    border-radius: 10px;
    overflow: visible;
}

.login-lg-wrapper {
    min-width: 230px;
    min-height: 115px;
    position: absolute;
    top: 170px;
    left: 10px;
    background: #fff;
    padding: 15px 23px 13px 20px;
    z-index: 100;
    border-radius: 10px;
    overflow: visible;
    /* Rectangle 3: */
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.11);
}

.password-leg-wrapper > ul > li {
    list-style: none;
    text-align: left;
    padding: 0 0 4px 0;
}

.password-leg-wrapper > ul > li > i {
    padding-right: 5px;
}

.password-leg-wrapper > ul {
    margin: 0;
    padding: 0;
}

/*client chat */
.client-acpt {
    position: relative;
    /* width: 261px; */
    height: 344px;
    /* top: 36px; */
    background: rgba(241, 239, 239, 1);
    z-index: 1;
    text-align: center;
}

.ne-image-wrapper {
    height: 115px;
    overflow: hidden;
    position: relative;
    margin-bottom: 6px;
    border: 2px solid #eaeaea;
    padding: -1px;
    /* border-radius: 5px; */
    /* margin-right: 23px; */
}

.ne-video-player {
    height: 150px;
    overflow: hidden;
    border: 2px solid #eaeaea;
    margin-bottom: 6px;
}

.html5-video-player {
    width: 200px;
}

.ne-video-player > iframe {
    width: 204px;
    height: 150px;
    overflow: hidden;
    position: relative;
}

.ne-embed > div {
    height: 150px;
    overflow: hidden;
}

.ne-image-wrapper > img {
    width: 199px;
    height: auto;
}

/*right side nav panel */
.r-nav-wrapper {
    position: fixed;
    width: 50px;
    height: 150px;
    right: 0;
}

.cht-b-w > .cht-img-grp {
    width: 260px;
    height: 50px;
    overflow: hidden;
    position: absolute;
}

.cht-img-grp {
    margin-top: 80px;
}

.cht-img-grp > .g-rec-img,
.cht-img-grp > .g-sed-img {
    display: inline-block;
    margin-right: -10px;
}

.cht-img-grp > .g-rec-img {
    margin-right: -5px;
}

.cht-img-grp > .g-sed-img {
    margin-left: -5px;
}

.g-rec-img > img,
.g-sed-img > img {
    border-radius: 50%;
}

.client-acpt-txt > .ignore,
.client-acpt-txt > .accept {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}

.client-acpt-txt > .ignore {
    color: #d90000;
    padding-right: 15px;
}

.client-acpt-txt > .accept {
    color: #36ba45;
}

.client-acpt > .cht-body {
    display: block;
    color: #ccc;
    margin-top: 10px;
    text-transform: uppercase;
}

.client-acpt-txt {
    margin-top: 50px;
}

/* menu right */
.r-menu-wrapper {
    width: 40px;
    height: 100%;
    position: fixed;
    float: right;
    top: 0;
    right: 0;
    background: #fff;
    border-left: 1px solid #D9DEE4;
    z-index: 1;
    overflow: hidden;
    margin-top: 58px;
}

.r-menu-item {
    position: absolute;
    display: block;
    bottom: 58px;
    width: 100%;
}

.r-menu-item > .m-item {
    font-size: 19px;
    text-align: center;
    background: #f7f7f7;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #D9DEE4;
    cursor: pointer;
}

.r-menu-item > .m-item:hover {
    background: #fff;
}

.cm-noti-income {
    width: 18px;
    height: 18px;
    background: #ec0d0d;
    text-align: center;
    position: absolute;
    border-radius: 50%;
    left: 1px;
    margin-top: -16px;
    font-size: 8px;
    padding-top: 2px;
    color: #fff;
    border: 2px solid #f7f5f5;
}

.offline-c-u {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    text-align: center;
    font-size: 15px;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #ebe5d5;
}

/*user notification message wrapper */
.u-notification-wrp {
    position: absolute;
    width: 100%;
    height: 300px;
    bottom: -400px;
    right: 0;
    z-index: 100;
    -webkit-box-shadow: -3px 1px 12px -5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -3px 1px 12px -5px rgba(0, 0, 0, 0.75);
    box-shadow: -3px 1px 12px -5px rgba(0, 0, 0, 0.75);
    overflow: hidden;
    /*background: #f7f7f7;*/
    background: #fff;
    border-radius: 5px;
    padding:15px;
}

.u-notice-wrp {
    position: absolute;
    width: 100%;
    height: 275px;
    bottom: -245px;
    right: 0;
    z-index: 100;
    -webkit-box-shadow: -3px 1px 12px -5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -3px 1px 12px -5px rgba(0, 0, 0, 0.75);
    box-shadow: -3px 1px 12px -5px rgba(0, 0, 0, 0.75);
    overflow: hidden;
    /*background: #f7f7f7;*/
    background: #fff;
}

.u-noti-h {
    width: 100%;
    margin-top: 9px;
    min-height: 45px;
    overflow: hidden;
    position: relative;
    top: 0;
    padding-left: 13px;
}

.u-noti-h > .user-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    float: left;
}

.user-img > img {
    width: 100%;
}

.u-noti-h > .agent-name {
    display: inline-block;
}

.u-noti-h > .ticket-id {
    display: inline-block;
    text-align: right;
    /* width: 100%; */
    float: right;
    padding-right: 19px;
    padding-top: 6px;
    text-decoration: underline;
    cursor: pointer;
    font-size: 11px;
}

.u-noti-h > .ticket-id:hover {
    color: #36ba45;
}

.u-noti-footer {
    bottom: 0;
    width: 100%;
    display: block;
    min-height: 40px;
    overflow: hidden;
    /*background: #f7f7f7;*/
    background: #fff;
    padding-top: 5px;
}

.u-body {
    width: 100%;
    min-height: 98px;
    overflow: hidden;
}

.u-body.notification-v {
    min-height: 155px;
    overflow: hidden;
    overflow-x: auto;
}

.u-noti-h.b-bottom {
    border-bottom: 1px solid #eeeeee;
    padding: 15px;
    margin: -15px -15px 10px;
    width: calc(100% + 30px);
}

.btn-min-w {
    min-width: 114px;
}

.btn-sm-noti {
    padding: 3px 10px;
    font-size: 11px
}

.btn-tran-bg {
    background: transparent;
}

.profileCropArea {
    background: #E4E4E4;
    overflow: hidden;
    width: 300px;
    height: 300px;
}

/*phone book */
.phone-book-wrp {
    width: 100%;
    height: 265px;
    background: #fff;
    z-index: 2000;
    position: absolute;
    top: 0;
    left: -235px;
}

.contact-search {
    padding: 8px;
    /*-webkit-box-shadow: 0px 1px 3px -2px rgba(0, 0, 0, 0.56);*/
    /*-moz-box-shadow: 0px 1px 3px -2px rgba(0, 0, 0, 0.56);*/
    /*box-shadow: 0px 1px 3px -2px rgba(0, 0, 0, 0.56);*/
    position: relative;
}

.contact-search > input, .contact-search > select {
    border-radius: 5px;
    height: 35px;
    /*background-color:#f5f5f5;*/
    color: #682F8E;
    border: solid 1px #eee;
    padding-left: 25px;
    width: 100%;
}

.contact-search > i.fa-search {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 13px;
    font-size: 12px;
    opacity: 0.3;
    left: 14px;
    z-index: 10;
}

.contact-search > .form-control:focus {
    border-color: #f4f2f2;
    outline: 0;
    -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .00), 0 0 0px rgba(102, 175, 233, .0) !important;
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075), 0 0 0px rgba(102, 175, 233, .0) !important;
}

.contact-info-wr .panel {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.contact-info-wr .panel.panel-open {
    background: #F2F4F8;
    border: solid 1px #eee;
}
.contact-info-wr .panel-group .panel + .panel {
    margin-top: 7px;
}
.contact-info-wr .panel,
.contact-info-wr .panel .panel-heading{
    border: none!important;
}

.contact-info-wr .panel .panel-heading{
    padding: 0;
    background: #fff;
}

.contact-info-wr .panel .panel-heading:hover{
    background: #F2F4F8;
}

.contact-info-wr .panel .panel-heading .panel-title > a {
    width: 100%;
    display: inline-block;
    padding: 7px;
    text-decoration: none;
}

.contact-info-wr .panel .panel-heading .panel-title > a i.glyphicon {
    font-size: 12px;
    color: #888;
}

.contact-info-wr .panel .panel-body {
    padding: 7px;
}

.contact-info-wr .more-ticket-wrapper-052017 {
    padding-top: 10px;
}

.contact-nf-wrp {
    width: 100%;
    min-height: 170px;
    height: 100%;
    position: relative;
    overflow: hidden;
    text-align: center;
    margin-top: 45px;
}

.contact-nf-wrp > i {
    font-size: 72px;
    color: #e6e6e6;
}

.contact-nf-wrp > h5 {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 20px;
    text-transform: lowercase;
    color: #e6e6e6;
}

.contact-info-wr {
    background: #fff;
    height: 225px;
    overflow: hidden;
    position: relative;
    padding: 0 7px 7px 7px;
}

.c-info-details {
    background: #fff;
    width: 100%;
    height: 50px;
    overflow: hidden;
    position: relative;
    padding: 8px 5px 5px 10px;
    -webkit-box-shadow: 0px 1px 10px -5px rgba(0, 0, 0, 0.56);
    -moz-box-shadow: 0px 1px 10px -5px rgba(0, 0, 0, 0.56);
    box-shadow: 0px 1px 10px -5px rgba(0, 0, 0, 0.56);
}

.c-info-details:hover {
    background: #f7f5f5;
}

.c-img {
    display: inline-block;
    float: left;
}

.c-details-date {
    width: 160px;
    display: inline-block;
    height: 80px;
    margin-left: 10px;
    margin-top: -14px;
    cursor: pointer;
}

.c-details {
    width: 160px;
    display: inline-block;
    height: 40px;
    margin-left: 10px;
    margin-top: 0px;
    cursor: pointer;
}

.c-details > .c-name {
    width: 100%;
    height: 20px;
    display: block;
    overflow: hidden;
    font-size: 12px;
}

.c-details > .c-no {
    font-size: 11px;
    color: #aaa;
}

.c-img > img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.c-icon-wrp {
    padding-left: 16px;
}

.c-time {
    position: absolute;
    top: 7px;
    right: 15px;
    font-size: 8px;
    color: #c5c5c5;
}

.MissCall {
    color: #ec0d0d !important;;
}

.outboundCall,
.Answer,
.Reject {
    color: #7d7979 !important;
}

.glyphicon.fa.fa-star {
    /*color: #f0ea13 !important;*/
    color: #ee437e  !important;
    font-size: 25px;
}

.glyphicon.fa.fa-star-o {
    /*color: #f0ea13 !important;*/
    color: #f798b9  !important;
    font-size: 25px;
}

.phone-book-tab > ul {
    border-bottom: 0px solid #ddd;
}

.phone-book-tab > .tab-content {
    min-height: 187px;
    max-height: 250px;
}

.phone-book-tab > ul > li {
    margin-bottom: 0px;
    background: #f5f5f5;
    text-align: center;
}

.phone-book-tab > ul {
    padding: 0;
}

.phone-book-tab .c-info-details .c-details {
    width: 140px;
}

.phone-book-tab > ul > li > a {
    padding: 6px 6px;
    color: #c1c1c1;
}

.phone-book-tab > ul > li.active,
.phone-book-tab > ul > li.active:hover {
    background: #fff;
}

.phone-book-tab > ul > li.active > a,
.phone-book-tab > ul > li.active > a:focus,
.phone-book-tab > ul > li.active > a:hover {

    cursor: default;
    background-color: #fff;
    border: 0px solid #ddd;
    /*border-bottom: 2px solid #36ba45;*/
    /*border-bottom: 2px solid #ee437e;*/
    color: #ee437e !important;
}

.phone-book-tab > ul > li > a {
    color: #888 !important;
}

.phone-book-tab > ul > li > a:focus,
.phone-book-tab > ul > li > a:hover {
    background-color: transparent !important;
    color: #ee437e !important;
}

/*green Dashboard */
.d-green-wrapper {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    background: #f7f7f7 !important;
}

.d-green-card {
    width: 100%;
    min-height: 350px;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    background: #fff;
    margin-bottom: 10px;
    -webkit-box-shadow: 0px 0px 29px -16px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 29px -16px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 29px -16px rgba(0, 0, 0, 0.75);
}

.sm-card {
    min-height: 100px;
}

.d-left-panel {
    width: 100%;
    overflow: hidden;
    min-height: 250px;
    position: relative;
    margin-top: 15px;
}

.d-center-panel {
    width: 100%;
    overflow: hidden;
    min-height: 250px;
    position: relative;
    margin-top: 15px;
}

.d-right-panel {
    width: 100%;
    overflow: hidden;
    min-height: 250px;
    position: relative;
    margin-top: -1px;
}

.d-card-bgw-trns {
    background: rgba(255, 255, 255, 0.7);
}

.d-card-budder-600 {
    background: #223448;
}

.d-green-card > .c-header {
    font-family: 'AvenirNextLTPro-Demi', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    width: 100%;
    height: 25px;
    color: #223448;
    padding: 15px;
    padding-bottom: 31px;

}

.c-header-inside-row {
    font-family: 'AvenirNextLTPro-Demi', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    width: 100%;
    height: 25px;
    color: #223448;
    padding: 15px;
    padding-bottom: 31px;
}

.c-header.c-text-center {
    text-align: center;
    padding-top: 35px;
    padding-bottom: 21px;
}

.d-green-card > .c-body {
    width: 100%;
    overflow: hidden;
    min-height: 250px;
    position: relative;
}

.d-green-card > .c-footer {
    width: 100%;
    overflow: hidden;
    min-height: 100px;
    position: relative;
    margin-top: 15px;
    padding-bottom: 35px;
}

.productivity-c {
    text-align: center;
}

.productivity-c > canvas {
    display: inline !important;
}

.card-text-num-w {
    width: 100%;
    min-height: 25px;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.card-text-num-w > .lg-text,
.card-text-num-w > .sm-text {
    width: 100%;
    display: block;
    min-height: 25px;
    overflow: hidden;
    position: relative;
}

.div-line-hor {
    /*line-height: 5px;*/
    border: 1px solid #ebdfc7;
    height: 51px;
    position: absolute;
    left: 49%;
    top: 17px;
}

.card-text-num-w > .lg-text {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 25px;
}

.card-text-num-w > .sm-text {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 11px;
}

.c-text-yellow {
    color: #efc94c;
}

.c-text-green-200 {
    color: rgba(0, 205, 115, 1);
}

.d1-create-ticket {
    color: rgba(14, 23, 86, 1);
}

.d1-in-progress-ticket {
    color: #8dd538;
}

.d1-close-ticket {
    color: rgba(0, 205, 115, 1);
}

.c-green-300 {
    color: #8dd538;
}

.text-gray {
    color: #d4d2d5;
}

.text-black {
    color: #000000;
}

.c-text-green {
    color: #098a6c;
}

.welcome-message-c {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 30px;
    color: #e7855e;
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    position: relative;
    padding: 13px 10px 10px 10px;
    z-index: 100;
}

.c-time-icon {
    position: absolute;
    top: 21px;
    right: 16px;
}

.c-time-icon > i {
    font-size: 60px;
    color: rgb(235, 223, 199);
}

.card-wrapper {
    width: 100%;
    min-height: 72px;
    overflow: hidden;
    position: relative;
}

.d-left-img {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50%;
    text-align: center;
    margin-top: 20px;
}

.d-left-img > img {
    width: 60px;
    height: 60px;
}

.d-img-text-left {
    text-align: right;
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 22px;
    color: #e7855e;
    padding-top: 15px;
    padding-right: 10px;
}

.line-right-0 {
    border: 1px solid #ebdfc7;
    height: 71px;
    position: absolute;
    right: 12px;
    top: 17px;
}

.left-d-icon {
    position: absolute;
    top: 25px;
    left: 7%;
}

.left-d-icon > i {
    font-size: 25px;
}

.staffed-time {
    color: #223448;
}

.on-call-time {
    color: #0d823d;
}

.break-time {
    color: #e7855e;
}

.text-full-w-d-c {
    /*width: 100%;*/
    min-height: 26px;
    overflow: hidden;
    position: relative;
    margin-left: 29%;
    z-index: 20;
    padding-top: 20px;

}

.text-full-w-d-c > .time-bg {
    width: 100%;
    min-height: 15px;
    overflow: hidden;
    position: relative;
    display: block;
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 15px;
    text-align: left;
}

.text-full-w-d-c > .time-desc-sm {
    width: 100%;
    min-height: 15px;
    overflow: hidden;
    position: relative;
    display: block;
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 14px;
    text-align: left;
}

.n-board-wrp {
    position: relative;
    width: 100%;
    min-height: 319px;
    border-radius: 5px;
    background: #fff;
    padding: 0px;
}

.notice-b-m-outer {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 319px;
    overflow: hidden;
    padding: 10px 15px;
    cursor: pointer;
}

.notice-b-m-wrp {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 319px;
    overflow: hidden;
    padding: 10px 15px;
}

.notice-header {
    font-family: 'AvenirNextLTPro-UltLt', sans-serif;
    font-size: 20px;
    text-transform: uppercase;
}

.notice-img-wrp {
    width: 100%;
    height: 136px;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
}

.notice-des-wrp {
    font-family: 'AvenirNextLTPro-UltLt', sans-serif;
    width: 100%;
    min-height: 30px;
    overflow: hidden;
    position: relative;
    padding-top: 10px;
    font-size: 17px;
    font-size: 3vw;
    margin-bottom: 10px;
}

.notice-footer {
    width: 100%;
    min-height: 30px;
    overflow: hidden;
    position: relative;
}

.notice-footer > ul {
    margin: 0;
    padding: 0;
}

.round-footer-icon {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    /*background: rgba(239, 201, 76, 0.51);*/
    /* padding: 5px; */
    /*overflow: hidden;*/
    position: relative;
    padding-top: 4px;
    display: inline-block;
}

.round-footer-icon > i {
    color: rgb(9, 138, 108);
    font-size: 13px;
    padding-left: 1px;
}

.round-btn {
    min-width: 20px;
    min-height: 20px;
    padding: 5px 15px 3px 15px;
    overflow: hidden;
    position: relative;
    background: rgb(231, 133, 94);
    color: #fff;
    border-radius: 25px;
    font-size: 10px;
    cursor: pointer;
}

.round-icon-w-text {
    font-family: ' AvenirNextLTPro-Bold', sans-serif;
    display: inline-block;
    font-size: 10px;
    position: relative;
    /*color: #098a6c;*/
}

.notice-footer > ul > li {
    display: inline-block;
    min-width: 20px;
    min-height: 10px;
    overflow: hidden;
    position: relative;
    padding: 0;
    margin: auto;
}

.notice-img-wrp > img {
    position: absolute;
}

.left-img-b {
    width: 100%;
    /* height: 250px; */
    overflow: hidden;
    min-height: 130px;
    margin-top: 16px;
    background: #ffffff;
    -webkit-box-shadow: 1px 3px 19px -4px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 1px 3px 19px -4px rgba(0, 0, 0, 0.75);
    box-shadow: 1px 3px 19px -9px rgba(0, 0, 0, 0.75);
    padding: 5px;
    position: absolute;
    top: 10px;
    left: 15px;
    /*-ms-transform: rotate(14deg); !* IE 9 *!*/
    /*-webkit-transform: rotate(14deg); !* Safari *!*/
    /*transform: rotate(14deg);*/
}

.left-img-b > img {
    width: 100%;
    height: 100%;

}

.owl-theme .owl-nav [class*=owl-] {
    color: #ebdfc7;
    font-size: 20px;
    margin: 5px;
    padding: 4px 7px;
    background: transparent;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: transparent;
    color: #81c98a;
    text-decoration: none;
}

/*.owl-theme .owl-nav {*/
/*top: 30%;*/
/*position: absolute;*/
/*}*/

.owl-prev {
    position: absolute;
    bottom: 40px;
    right: 48px;
}

.owl-next {
    position: absolute;
    bottom: 40px;
    right: 20px;
}

.d-new-note {
    width: 100%;
    min-height: 116px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
    padding: 15px;
}

.lg-header-only {
    font-family: 'AvenirNextLTPro-Regular ', sans-serif;
    font-size: 30px;
    padding-top: 36px;
    text-align: center;
    color: #e7855e;
}

.btn-create-note {
    background: rgba(231, 133, 94, 0.21);
    border: 0px;
    color: #e7855e;
}

.lg-btn-wrp-n {
    padding-top: 40px;
}

.d-new-note > .renote-add-wrapper {
    margin: 0px;
    padding: 4px 17px 0px 4px;
    background: rgba(247, 245, 245, 0);
    -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0);
    -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0);
}

.panel-activity {
    width: 100%;
    min-height: 350px;
    max-height: 350px;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    background: #fff;
    margin-bottom: 10px;
}

.panel-activity > .c-header,
.rating-main-wrp > .c-header,
.queue-m-wrp > .c-header,
.remark-m-wrp > .c-header,
.c-header-note,
.left-text-w > .c-header {
    font-family: 'AvenirNextLTPro-Demi', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    width: 100%;
    color: #223448;
    text-align: left;
    padding: 15px;
    /*border-bottom: 1px solid #bbd2b6;*/
    max-height: 50px;
    margin-bottom: 0px;
    /*-webkit-box-shadow: 6px 7px 25px -16px rgba(0,0,0,0.75);*/
    /*-moz-box-shadow: 6px 7px 25px -16px rgba(0,0,0,0.75);*/
    /*box-shadow: 6px 7px 25px -16px rgba(0,0,0,0.75);*/
}

.c-header > .header-count {
    font-family: 'AvenirNextLTPro-Regular ', sans-serif;
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    font-size: 20px;
    height: 50px;
    background: rgba(9, 138, 108, 0.57);
    color: #098a6c;
    text-align: center;
    padding-top: 12px;
}

.active-row-wrp {
    min-height: 65px;
    padding-top: 5px;
    width: 100%;
    overflow: hidden;
    position: relative;
    /*background: rgba(129, 184, 127, 0.23);*/
}

.active-d-wrp {
    min-height: 70px;
    /*max-height: 80px;*/
    overflow: hidden;
    position: relative;
    padding: 2px 5px 5px 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.active-note {
    width: 100%;
    min-height: 25px;
    position: relative;
    overflow: hidden;
    font-size: 13px;
    color: #8298ae;
    margin-bottom: 2px;
    padding-bottom: 10px;
}

.active-btn-wrp {
    /* width: 100%; */
    min-height: 20px;
    overflow: hidden;
    position: relative;
    /*padding: 10px;*/
    border-bottom: 1px solid #f7f7f7;
    padding-bottom: 10px;

}

.active-btn-wrp > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.active-btn-wrp > ul > li {
    display: inline-block;
    margin-right: 5px;
}

.none-click-btn {
    font-family: 'AvenirNextLTPro-Regular ', sans-serif;
    font-size: 11px;
    min-width: 20px;
    height: 21px;
    overflow: hidden;
    text-align: center;
    padding: 4px 4px 5px 5px;
    position: relative
}

.days {
    background: rgb(247, 247, 247);
    color: #000;
    border-radius: 25px;
}

.ticket-tag {
    background: rgba(9, 138, 108, 0.2);
    color: #098a6c;
    border-radius: 25px;
    cursor: pointer;
}

.closed-tag {
    background: rgba(231, 133, 94, 0.2);
    color: #e7855e;
    border-radius: 25px;
}

.w-data-empty {
    position: absolute;
    background: #fff;
    top: 120px;
    width: 100%;
    height: 350px;
    font-family: 'AvenirNextLTPro-Regular ', sans-serif;
    font-size: 18px;
    text-align: center;
    z-index: 100;
    color: #e2efe2;
}

.active-p-body {
    width: 100%;
    height: 285px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}

.rating-p-body {
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}

.owl-dots {
    display: none;
}

/* dashboard gree ticket chart */
.t-l-text-wrp {
    width: 100%;
    /* padding-bottom: 120px; */
    min-height: 384px;
    overflow: hidden;
    /* margin-top: 15px; */
    border-left: 1px solid #f7f7f7;
    /* margin-top: 50px; */
    /* margin-bottom: 50px; */
    margin-left: 40px;
    background: #f7f7f7;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-top: 5%;

}

.g-ticket-chart-wrp {
    width: 250px;
    height: 150px;
    overflow: hidden;
    position: relative;

}

.ticket-l-widget {
    width: 100%;
    min-height: 80px;
    overflow: hidden;
    /*position: relative;*/
    padding-left: 15px;
    /* text-align: center; */
    /* background: #ebdfc7; */
    margin-bottom: 15px;
    /* border: 1px solid #f7f7f7; */
    padding-bottom: 19px;
    padding-top: 15px;
    /* -webkit-box-shadow: 1px 3px 23px -7px rgba(0, 0, 0, 0.75); */
    -moz-box-shadow: 1px 3px 23px -7px rgba(0, 0, 0, 0.75);
    /* box-shadow: -1px 5px 18px -13px rgba(0, 0, 0, 0.75); */

}

.t-big-text {
    display: block;
    width: 100%;
    height: 26px;
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 40px;
    margin-bottom: 25px;
}

.t-small-text {
    font-size: 13px;
}

/*my  note */
.d-my-note-m-wrp {
    width: 100%;
}

.note-color-wrp {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-block;
    overflow: hidden;
    text-align: center;

}

.d-my-note-row {
    min-height: 50px;
    overflow: hidden;
    position: relative;
    display: block;
    padding: 10px 5px 5px 5px;
    margin-left: 10px;
    margin-right: 10px;
    border-bottom: 1px solid #f7f7f7;
}

/* queue widget */
.queue-m-wrp {
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    background: transparent;
    margin-bottom: 10px;
}

.queue-header-wrp {
    width: 100%;
    min-height: 20px;
    overflow: hidden;
    position: relative;
    display: block;
    margin-bottom: 5px;
}

.queue-row {
    min-height: 50px;
    background: #fff;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    padding-top: 17px;
}

.qu-title,
.qu-header-w {
    width: 100%;
    display: block;

}

.qu-header-w {
    font-size: 16px;
}

.qu-title {
    font-size: 12px;
    color: #989797;
}

.queue-name-wrp {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.qu-time-wrp {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    color: #098a6c;
}

/* Remark option */
.remark-m-wrp {
    width: 100%;
    min-height: 100px;
    max-height: 350px;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    background: transparent;
    margin-bottom: 10px;
}

.remark-row {
    min-height: 70px;
    background: #fff;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    padding-bottom: 9px;
}

.remark-img {
    width: 50px;
    height: 50px;
    overflow: hidden;
    position: relative;
    margin-top: 11px;
}

.remark-img > img {
    border-radius: 50%;
}

.remark-header {
    width: 100%;
    /* height: 30px; */
    overflow: hidden;
    text-align: left;
    padding-top: 11px;
    font-size: 12px;
}

.remark-header-sub {
    width: 100%;
    overflow: hidden;
    text-align: left;
    padding-top: 0px;
    font-size: 10px;
}

.remark-p {
    font-size: 10px;
}

/*my rating profile */
.rating-main-wrp {
    width: 100%;
    min-height: 100px;
    max-height: 350px;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    background: transparent;
    margin-bottom: 10px;
}

.rating-m-row {
    min-height: 60px;
    background: #fff;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.rating-m-g-wrp {
    width: 100%;
    min-height: 30px;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
}

.rating-stat-wrp {
    width: 100%;
    min-height: 30px;
    overflow: hidden;
    position: relative;
    padding-top: 9px;
}

.rating-header {
    font-size: 16px;
    color: #989797;
    text-transform: capitalize;
}

.on.ti-star {
    font-size: 13px;
    color: #e7855e;
}

.off.ti-star {
    font-size: 13px;
    color: #e1e2e1;

}

.rating-value-wrp {
    idth: 100%;
    font-size: 17px;
    text-align: right;
    margin-top: 20px;
    padding: 2px;
    color: #efc94c;
}

/* my note new layout */
.my-note-header {
    width: 100%;
    min-height: 50px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    margin-bottom: 5px;

}

.note-h-wrp {
    font-size: 18px;
    text-align: center;
    padding-top: 13px;
    color: #7d849a;
}

.note-add-new {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    overflow: hidden;
    text-align: center;
    background: #7d849a;
    cursor: pointer;
    padding-top: 8px;
    margin-top: 5px;
}

.note-add-new:hover,
.note-add-new:focus {
    background: rgba(239, 201, 76, 1);
    color: #fff;
}

.note-add-new > i {
    font-size: 25px;
    color: #fff;
}

.note-add-new > i:hover,
.note-add-new > i:focus {
    color: #fff;
}

.note-de-wrp {
    width: 100%;
    min-height: 65px;
    overflow: hidden;
    position: relative;
    background: #fff;
    border-radius: 2px;
    margin-bottom: 1px;
}

.note-date-wrp {
    width: 100%;
    /*min-height: 70px;*/
    /*overflow: hidden;*/
    /*position: relative;*/
    background: #fff;
    /* border-radius: 5px; */
    margin-top: 13px;
    margin-bottom: 10px;
    /* -webkit-box-shadow: 0px 0px 17px -12px rgba(0,0,0,0.75); */
    -moz-box-shadow: 0px 0px 17px -12px rgba(0, 0, 0, 0.75);
    /* box-shadow: 0px 0px 17px -12spx rgba(0,0,0,0.75); */
    /*border-right: 1px solid #e3e8ea;*/
}

.note-d-h-1,
.note-d-h-2,
.note-d-h-3 {
    width: 100%;
    display: block;
    text-align: center;
    text-transform: uppercase !important;
}

.note-d-h-1 {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 15px;
    color: #7d849a;
    margin-top: 13px;
}

.note-d-h-2 {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 16px;
    color: #7d849a;
}

.note-d-h-3 {
    font-size: 12px;
    color: #bbbbbb;
}

.note-body-wrp {
    width: 100%;
    min-height: 25px;
    overflow: hidden;
    position: relative;
    margin-top: 8px;
}

.d-note-footer {
    width: 100%;
    /* min-height: 20px; */
    overflow: hidden;
    position: relative;
    /* margin-bottom: 10px; */
    padding-top: 25px;
}

.d-note-footer > ul {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

.d-note-footer > ul > li {
    display: inline-block;
}

.ticket-type {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-top: 3px;
    border: 2px solid #e3e8ea;

}

.ticket-type.high {
    background: #fb5f21;
}

.ticket-type.low {
    background: #ffa918;
}

.ticket-type.urgent {
    background: #4383c4;
}

.ticket-type.normal {
    background: #37dba9;
}

.ticket-type-1 {
    font-size: 10px;
    text-transform: uppercase;
    color: #e3e8ea;
    display: inline-block;
    padding-left: 5px;
}

.d-note-title {
    color: #8298ae !important;
    font-family: "AvenirNextLTPro-UltLt", Courier, monospace;
    font-weight: bold;
    font-size: 17px;
    text-transform: capitalize;
}

.active-text {
    text-decoration: line-through;
}

.note-body-wrp > .note-body {
    font-size: 13px;
    padding-bottom: 8px;
    overflow-wrap: normal;
    overflow-wrap: break-word;
}

.d-done,
.d-delete {
    width: 100%;
    padding-left: 0px;
    padding-right: 10px;
    cursor: pointer;
    font-size: 9px;
}

.d-done:hover,
.d-delete:hover {
    color: #bbbbbb;
}

.d-done > i {
    color: rgba(130, 130, 130, 0.39);
    font-size: 15px;
    padding-right: 5px;
}

.d-done {
    color: rgba(130, 130, 130, 0.39);

}

.d-delete {
    color: #e7855e;
}

.d-delete > i {
    color: #e7855e;
    font-size: 15px;
    padding-right: 5px;
}

.note-date-wrp.active {
    border-right: 1px solid #e3e8ea;
}

.note-date-wrp.active > .note-d-h-1,
.note-date-wrp.active > .note-d-h-2,
.note-date-wrp.active > .note-d-h-3 {
    color: #81b87f;

}

.d-done.active {
    color: #81b87f;
}

.d-done.active > i {
    color: #81b87f;
}

.note-de-wrp.note-e {

}

.note-de-wrp.note-e > i {
    text-align: center;
    width: 100%;
    padding-top: 25px;
    font-size: 68px;
    color: #f6f6f6;
}

.create-note-wrp {
    width: 100%;
    height: 228px;
    overflow: hidden;
    position: relative;
    background: #fff;
    border-radius: 0px;
    margin-bottom: 10px;

}

.renote-footer {
    padding-top: 15px;
}

.create_due-at-wrp {
    width: 100%;
    text-align: center;
    /*padding-top: 1px;*/
    display: block;

}

.icon-round {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(125, 132, 154, 0.38);
    /*overflow: hidden;*/
    position: relative;
    text-align: center;
    padding-top: 9px;
    margin: 0 auto
}

.icon-round.active {
    background: rgba(129, 184, 127, 0.27);
}

.icon-round.active > i {
    color: #81b87f;
}

.icon-round > i {
    font-size: 17px;
    cursor: pointer;
    color: #7d849a;

}

.icon-round > i:hover {
    color: #000;
}

.cre-due-text {
    width: 100%;
    display: block;
    color: #bbbbbb;
    /*padding-top: 5px;*/
    font-size: 12px;
}

.du-date-wrp {
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.91);
    position: absolute;
    z-index: 100;
    text-align: center;
    margin: 0 auto;
}

.date-time-wrp {
    width: 300px;
    height: 120px;
    margin: 0 auto;
    left: 40%;
    background: #fff;
    position: absolute;
    top: 14%;
    z-index: 2000;
    border-radius: 5px;
    padding: 10px 20px;
    -webkit-box-shadow: 0px 1px 16px -4px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 1px 16px -4px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 1px 16px -4px rgba(0, 0, 0, 0.75);
}

.note-due-header {
    font-family: 'AvenirNextLTPro-Demi', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    color: #223448;
    width: 100%;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 5px;
}

.d-main-wrp-note {
    width: 100%;
    min-height: 250px;
    overflow: hidden;
    position: relative;
}

.date-note-btn-wrp {
    width: 100%;
    margin-top: 10px;

}

.date-note-btn-wrp > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}

.date-note-btn-wrp > ul > li {
    display: inline-block;
    padding-right: 10px;
    cursor: pointer;
    font-size: 13px;
}

.d-note-priority {
    position: absolute;
    top: 23px;
    left: 29px;
    z-index: 0;
}

.d-refresh-btn {
    width: 120px;
    height: auto;
    background: #EE437E;
    font-family: 'AvenirNextLTPro-Demi', sans-serif;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    /*border-radius: 5px;*/
    margin-bottom: 10px;
    float: right;
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 10px;
    z-index: 120;
    border-radius: 5px;
}

.d-refresh-btn:hover {
    color: #ffffff;
    background-color: #000000;
}

/* new login */
.login-main-wrp {
    width: 100%;
    height: 100%;
    overflow: scroll;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    /*opacity: 0.85;*/
    /*background-image: linear-gradient(-180deg, #E7855E 0%, #223448 100%);*/

}

.login-wrp {
    width: 100%;
    /*height: 398px;*/
    background: #fff;
    overflow: hidden;
    position: relative;
    margin-top: 20px;
    -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    /*padding: 15px;*/
}

.login-left-i-wrp {
    width: 100%;
    /*height: 490px;*/
    overflow: hidden;
    background-color: rgba(23, 55, 60, 1);
    /*background: url(../img/bg/bg_900x500.jpg) no-repeat;*/
    background-position: -10px -10px;
    /*border-radius: 5px;*/
}

.login-new-bg {
    /* left copy: */
    position: absolute;
    width: 100%;
    height: 141%;
    /*opacity: 0.85;*/
    background-image: linear-gradient(-180deg, #603281 0%, #812C87 100%);
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}

.login-left-i-wrp {
    /*margin: 0 0 0 15px;*/
}

.login-new-body {
    width: 100%;
    /*min-height: 490px;*/
    overflow: hidden;
    position: relative;
    z-index: 1000;

}

.login-new-logo {
    width: 100%;
    min-height: 60px;
    overflow: hidden;
    position: relative;
    margin: 20px auto;
    margin-bottom: 0px;
    text-align: center;
}

.login-new-logo > img {
    width: 155px;
    height: auto;
    /*padding-left: 58px;*/
    /*padding-bottom: 10px;*/
    /* logo_130x130yellow: */
    /*box-shadow: 0 7px 22px 0 rgba(0,0,0,0.50);*/
}

.login-new-header {
    /* Welcome: */
    font-family: 'Avenir-Heavy', sans-serif;
    font-size: 26px;
    color: #FFFFFF;
    letter-spacing: -0.13px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.50);
    text-align: center;
    margin: 70px 0 30px 0;
}

.login-new-hedaer-1 {
    /* Communication and Co: */
    font-family: 'AvenirNext-Medium', sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    letter-spacing: -0.11px;
    text-align: center;
}

.login-new-hedaer-2 {
    /* A Voice, Video, Mess: */
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 12px;
    color: #000;
    letter-spacing: -0.11px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.50);
    text-align: left;
    margin-top: 10px;
}

.login-des-list {
    width: 100%;
    min-height: 100px;

}

.login-des-list > ul {
    padding-left: 138px;
}

.login-des-list > ul > li {
    color: #fff;
    font-size: 13px;
}

.social-links {
    width: 100%;
    text-align: center;
    margin: 20px 0;
}

.social-links > ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.social-links > ul > li {
    list-style: none;
    display: inline-block;
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, 0.37);
    border-radius: 50%;
    overflow: hidden;
    margin-left: 5px;
    margin-right: 5px;
}

.social-links > ul > li:hover {
    background-color: #ffffff;
}

.social-links > ul > li > a > i {
    color: #EE407D !important;
    font-size: 17px;
    padding-top: 9px;
}

.copy-write,
.version {
    color: #fff;
    text-align: center;
}

.login-new-hl-wrp {
    display: inline-block;
}

.login-new-right-wrp {
    width: 100%;
}

.login-new-hl-wrp {
    /* Login: */
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 18px;
    letter-spacing: -0.15px;
    padding-right: 10px;
    text-align: left;
}

.login-new-hl-wrp.selected {
    color: #EE437E;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #EEEEEE;
    padding: 0 15px 15px;
    margin: 0 -15px 0px;
    width: calc(100% + 30px);
}

.login-new-hl-wrp.select {
    color: #F1F1F1;
}

.login-new-frm {
    width: 100%;
    margin-top: 20px;
}

.btn-n-sign {
    background-color: #EE437E;
    border-radius: 5px;
    font-size: 14px;
    color: #ffffff;
    letter-spacing: 0.66px;
    text-transform: capitalize;
}

.btn-n-sign:hover {
    background-color: #000000;
    color: #ffffff;
}

.login-txt {
    /* right: */
    background: #FFFFFF;
    border-radius: 5px;
    height: 35px;
}

.login-n-footer {
    margin-top: 25px;
}

.login-n-forget-pwd {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 15px;
    color: #c2c2cb;
    letter-spacing: -0.15px;
    display: inline-block;
    float: right;
    padding-top: 5px;
    padding-bottom: 5px;
}

.login-right-footer {
    /* Froget Password: */
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 13px;
    color: #7c7c7c;
    letter-spacing: -0.15px;
    width: 100%;
    text-align: center;
    margin-top: 20px;

}

.login-n-forget-pwd > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
    margin-top: -5px;
}

.login-n-forget-pwd > ul > li {
    display: inline-block;
    cursor: pointer;
    font-size: 16px;
    overflow: hidden;
}

.login-n-forget-pwd.b-l {
    border-right: 1px solid #81b87f;
    padding-right: 10px;
    margin-right: 10px;
}

.del-all-btn {
    margin: auto;
    width: 60%;
    padding: 10px;
    text-align: center;
    font-family: 'AvenirNextLTPro-Demi', sans-serif;
    color: #898ea4;
    width: inherit;
}

#delBtn:hover {
    color: #000000;
}

#delBtn:active {
    color: #000000;
    background-color: #c7cce3;
}

/*new call notification UI update */
.c-panel-wrapper-1652017 {
    background: #223448;
    border-radius: 1px;
    width: 440px;
    height: 200px;
    overflow: hidden;
    position: fixed;
    bottom: 0px;
    right: -500px;
    /*right: 0;*/
    z-index: 3000;
    -webkit-box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.3);
    padding: 0px 10px 0px 10px;
}

.c-panel-wrapper-1652017 > section {
    display: inline-block;
}

.c-panel-wrapper-1652017 >
.c-panel-main-1652017 {
    width: auto;
    height: 145px;
    overflow: hidden;
    position: relative;
    padding: 30px 10px 10px 32px;
    z-index: 4000;
}

.c-panel-wrapper-1652017 > .c-right-1652017 {
    width: auto;
    height: 145px;
    overflow: hidden;
    position: relative;
    padding: 15px 10px 10px 32px;
}

.c-left-icon-1652017 {
    width: 95px;
    height: 95px;
    overflow: hidden;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    float: left;
    text-align: center;
}

.c-right-1652017 {

}

.c-panel-calling-1652017 {
    /* Oval 4: */
    /*background: #e7f7d6;*/
    /*border: 9px solid rgba(143, 213, 56, 0.13);*/
    background: rgba(231, 247, 214, 0.37);
    padding: 5px 5px 5px 4px;
}

.c-panel-anz-1652017 {
    /* Oval 4: */
    background: rgba(247, 162, 162, 0.37);
    padding: 2px 5px 5px 2px;
    /*border: 14px solid rgba(233, 59, 59, 0.20);*/
}

.c-display-name-1652017 {
    font-family: "AvenirNextLTPro-Regular", Courier, monospace;
    color: #bdbdbc;
    letter-spacing: 0.52px;
    display: block;
    text-align: left;
    width: auto;
    height: 25px;
}

.c-display-name-1652017.name,
.c-display-name-1652017.skill {
    font-size: 13px;
}

.c-display-name-1652017.name {
    font-family: "AvenirNextLTPro-Bold", Courier, monospace;
    font-size: 15px;
    color: #8a8e86;

}

.c-display-name-1652017.calling {
    color: #B8E986;
    font-size: 13px;
}

.c-panel-mainbtn-1652017 {
    width: auto;
    height: 30px;
    margin-top: 0px;
    overflow: hidden;
    display: block;
}

.c-panel-mainbtn-1652017 >
.c-panel-btn-wrp-1652017 {
    display: inline-block;
    /*width: 40%;*/
}

.btn-cn-1652017 {
    font-family: "AvenirNextLTPro-Bold", Courier, monospace;
    font-size: 10px;
    background: transparent;
    border-radius: 5px;
    opacity: 0.8;
    overflow: hidden;
    margin-right: 5px;
    letter-spacing: 0.66px;
    outline: 0 !important;
}

.btn-anz-1652017 {
    width: 100px;
    height: 26px;
    color: #8FD539;
    border: 1px solid #8FD539;
}

.btn-end-call-1652017 {
    width: 100px;
    height: 26px;
    border: 1px solid #EA3B3B;
    color: #EA3B3B;
}

.btn-300-yellow-1652017 {
    width: 100px;
    height: 26px;
    border: 1px solid #FCCF8B;
    color: #FCCF8B;
}

.btn-cn-1652017:focus,
.btn-cn-1652017:active,
.btn-cn-1652017:hover {
    background: #fff;
}

.c-footer-1652017 {
    width: 100%;
    height: 45px;
    background: #223448;
    border-top: 1px solid #ebdfc7;
    overflow: hidden;
    position: relative;
    display: block;
}

.c-footer-1652017 > ul {
    margin: 0;
    padding: 0;
    text-align: center;
}

.c-footer-1652017 > ul > li {
    display: inline-block;
}

.c-footer-icon-1652017 {
    cursor: pointer;
}

.c-transfer-1652017 {
    background: #ffffff;
    position: absolute;
    bottom: -500px;
    left: 0px;
    width: 100%;
    height: 101px;
    overflow: hidden;
    z-index: 3500;
    padding-top: 37px;
    text-align: center;
}

.c-transfer-text-1652017,
.c-transfer-btn-1652017 {
    display: inline-block;
}

.c-transfer-text-1652017 {
    width: 50%;
}

.form-control.txt-transfer {
    height: 35px;
    /*background: #f5f6f7;*/
    border-radius: 5px;
    border: 0px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

.close-transfer-view {
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 15px;
    color: #223448;
}

.close-transfer-view:hover,
.close-transfer-view:focus,
.close-transfer-view:active {
    color: #d90000;
}

.c-panel-hide-1652017 {
    position: absolute;
    bottom: 10px;
    left: 15px;
    color: #fff;
    cursor: pointer;
    z-index: 4010;
    font-size: 13px;
}

.c-panel-hide-1652017 > i {
    color: #8FD539;
    font-size: 22px;
}

.c-panel-show-1652017 {
    position: absolute;
    bottom: 15px;
    right: -0px;
    color: #fff;
    cursor: pointer;
    z-index: 4010;
    font-size: 13px;
    background: #223448;
    width: 40px;
    height: 40px;
    text-align: center;
    padding-top: 9px;
}

.c-panel-close-1652017 {
    position: absolute;
    bottom: 163px;
    right: 0px;
    color: #ff0e0b;
    cursor: pointer;
    z-index: 4010;
    font-size: 13px;
    background: #223448;
    width: 40px;
    height: 40px;
    text-align: center;
    padding-top: 9px;
}

.c-panel-close-1652017 > i {
    color: #ff0e0b;
    font-size: 18px;
}

.c-panel-show-1652017 > i {
    color: #8FD539;
    font-size: 22px;

}

/*agent dialer wrapper */
.agent-d-wrapper-0522017 {
    width: 500px;
    height: 300px;
    overflow: hidden;
    background: #d6d2d2;
    position: fixed;
    right: 0px;
    bottom: 50px;
    z-index: 2000;
    -webkit-box-shadow: -1px -2px 32px -4px rgba(0, 0, 0, 0.39);
    -moz-box-shadow: -1px -2px 32px -4px rgba(0, 0, 0, 0.39);
    box-shadow: -1px -2px 32px -4px rgba(0, 0, 0, 0.39);
}

.assignee-icon {
    width: 30px;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;

}

.scrollable-dropdown-menu .dropdown-menu {
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
}

.scrollable-dropdown-menu > ul > li {

}

.c-ticket-main-wrapper {
    min-height: 620px;
    overflow: hidden;
    overflow-y: auto;
}

.c-ticket-footer-wrp {
    margin-top: 0px;
    padding: 15px;
    border-top: 1px solid #eae6e6;
}

/******* new UI version update 052017
   - user profile
   - engagement
   - time line
   - other
   - 05/20/2017
   -- engagement user profile
 *********************************************/

.user-p-m-wrapper-052017 {
    width: auto;
    min-height: 600px;
    overflow: hidden;
    position: relative;
    margin: 0 -15px;
}

.user-p-left-052017 {
    width: 100%;
    min-height: 1090px;
    background: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 17px 0 rgba(170, 170, 170, 0.18);
    border-radius: 5px;
    margin-top: 10px;
}

.user-p-right-052017 {
    width: 100%;
    min-height: 1090px;
    background: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 17px 0 rgba(170, 170, 170, 0.18);
    border-radius: 5px;
    margin-top: 10px;
}

.user-p-left-052017 > .user-p-left-h-052017 {
    width: 100%;
    min-height: 20px;
    overflow: hidden;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    color: #495869;
    letter-spacing: 0.57px;
    position: relative;
    border-bottom: 1px solid #EEEEEE;
    padding: 15px;
    margin-bottom: 20px;
}

.user-p-left-052017 > .user-p-left-h-052017.profile-h-default {
    background: rgba(179, 179, 179, 0.07);
}

.user-p-left-h-052017 > .user-p-h-s-052017 {

}

.user-p-left-h-052017 > .user-p-h-s-052017 > ul {
    margin: 0;
    padding: 0;
}

.user-p-left-h-052017 > .user-p-h-s-052017 > ul > li {
    display: inline-block;
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    color: #233549;
    letter-spacing: 0.66px;
}

.user-p-left-h-052017 > .user-p-h-s-052017 > ul > li:first-child {
    width:calc(100% - 108px);
}

.btn-create-052017 {
    background-color: #FFDEEB;
    border-radius: 5px;
    opacity: 0.8;
    font-size: 10px;
    color: #EE437E;
    letter-spacing: 0.66px;
    height: 27px;
    text-transform: capitalize;
}

.default-btn {
    background: #F0F0F0 !important;
    color: #F0F0F0 !important;
    border-color: #F0F0F0 !important;
}

.default-timeline-hedaer {
    background: #e5e7e3 !important;
    color: #e5e7e3 !important;
    width: 115px !important;
    height: 20px !important;
    margin-top: 5px !important;
    margin-left: 5px !important;
    overflow: hidden !important;
    border-radius: 2px !important;
}

.btn-save-052017 {
    background: #EE437E;
    color: #fff;
    border-radius: 5px;
    opacity: 1;
    letter-spacing: 0.66px;
    font-size: 14px;
}

.btn-save-052017 > i {
    font-size: 15px;
    padding-right: 5px;
}

.btn.btn-create-052017:hover,
.btn.btn-create-052017:focus,
.btn.btn-create-052017:active,
.btn.btn-save-052017:hover,
.btn.btn-save-052017:focus,
.btn.btn-save-052017:active {
    background: #000000;
    color: #ffffff;
    outline: none !important;
}

.profile-id-052017 {
    padding-top: 7px;
}

.profile-id-052017.profile-default {
    background: #F0F0F0 !important;
    color: #F0F0F0 !important;
    border-radius: 10px;
}

.user-p-d-052017 {
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    position: relative;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
}

.user-p-image-052017 {
    width: 80px;
    height: 80px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.50);
    background: #f6f6f6;
    margin: 0 auto;
}

.avatar-e-wrapper {
    position: absolute;
    width: 25px;
    height: 25px;
    overflow: hidden;
    border-radius: 50%;
    background: #8fd539;
    text-align: center;
    cursor: pointer;
    top: 52px;
    left: 28px;
    padding-top: 7px;
}

.avatar-e-wrapper > i {
    color: #223448;
    font-size: 12px;
}

.avatar-e-wrapper > i:hover {
    color: #fff;
}

.user-p-image-052017.default-img {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0);
}

.default-img {
    background: #f3f3f3 !important;
    border: 0 !important;
}

.user-p-d-text-052017 {
    width: 100%;
    min-height: 50px;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    padding: 15px;
}

.user-p-d-text-052017 > ul {
    margin: 0;
    padding: 0;
    text-align: center;
}

.user-p-d-text-052017 > ul > li {
    display: block;
}

.user-p-d-text-052017 > ul > li.tags {
    /* VIP: */
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 13px;
    color: #E6794F;
    letter-spacing: 0.57px;
    margin-top: 5px;
    margin-bottom: 6px;
}

.tags.tags-default {
    background: #f5f5f5 !important;
    color: #f5f5f5 !important;
    width: 50px;
    margin: 0 auto;
}

.user-p-d-text-052017 > ul > li.full-name {
    /* Mr.Anthony Alexander: */
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 15px;
    color: #233549;
    letter-spacing: 0.47px;
    border-bottom: 1px solid #E6E6E6;
    margin-bottom: 10px;
    padding:10px
}

.default-full-name {
    background: #f5f5f5 !important;
    color: #f5f5f5 !important;
    width: 150px !important;
    margin: 0 auto !important;
    height: 15px !important;
    border-radius: 10px;
}

.user-p-d-text-052017 > ul > li.l-update,
.user-p-d-text-052017 > ul > li.p-no {
    /* Last update : 01/03/: */
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 13px;
    color: #5a5a5a;
    letter-spacing: 0.57px;
    padding:10px;
}

.user-p-d-text-052017 > ul > li.l-update{
    border-bottom: 1px solid #E6E6E6;
    margin-bottom: 10px;
}

.btn-search-052017 {
    /* Rectangle 3: */
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    background: #FFFFFF;
    border: 1px solid #8FD539;
    border-radius: 5px;
    /* Shape: */
    /* SEARCH: */
    opacity: 0.8;
    font-size: 10px;
    color: #8FD539;
    letter-spacing: 0.8px;
    height: 27px;
}

.btn-search-052017 > i {
    padding-right: 5px;
}

.user-p-r-a-052017 {
    width: auto;
    min-height: 210px;
    overflow: hidden;
    position: relative;
    /*opacity: 0.5;*/
    margin: 0;
    padding: 0;
}

.header-052017 {
    width: 100%;
    min-height: 20px;
    overflow: hidden;
    text-align: left;
    font-size: 14px;
    letter-spacing: 0.57px;
    position: relative;
    border-bottom: 1px solid #EEEEEE;
    padding: 15px;
    margin-bottom:20px;
    text-transform: capitalize;
    color: #4D4D4E;
    text-transform: capitalize;
    font-weight: 700;

}

.user-p-tl-wrapper-052017 {

}

.user-p-timeline-052017 {
    list-style: none;
    padding: 0px 0 20px;
    position: relative;
}

.default-timeline {

}

.user-p-timeline-052017:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 4px;
    margin-left: -1.5px;
    /* Rectangle 4: */
    background: #E5E7E3;
    border-radius: 8px;
}

.agent-activity-t-line:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 4px;
    margin-left: -1.5px;
    background: #E5E7E3;
    border-radius: 8px;
}

.disable-timeline-agent-activity:before {
    display: none !important;
}

.default-timeline.user-p-timeline-052017:before {
    /* Rectangle 4: */
    background: #f3f3f3;
}

.user-p-timeline-052017.left:before {
    left: 25px;
    width: 1px;
}

.user-p-timeline-052017 > li {
    margin-bottom: 10px;
    position: relative;
}

.user-p-timeline-052017 > li.agent-activity {
    margin-bottom: 0px !important;
}

.user-p-timeline-052017 > li:before,
.user-p-timeline-052017 > li:after {
    content: " ";
    display: table;
}

.user-p-timeline-052017 > li:after {
    clear: both;
}

.user-p-timeline-052017 > li >
.r-timeline-052017-badge {
    background: #fff;
    color: #fff;
    width: 36px;
    height: 36px;
    overflow: hidden;
    position: absolute;
    top: 25px;
    left:6px;
    z-index: 0;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border: 2px solid rgba(120, 161, 208, 0.25);
}

.user-p-timeline-052017 > li >
.r-timeline-052017-badge.r-timeline-052017-badge-activity {
    background: #fff;
    color: #fff;
    width: 10px;
    height: 10px;
    overflow: hidden;
    position: absolute;
    top: 20px;
    z-index: 0;
    left: 20px;

    border: 5px solid rgb(118, 191, 251);
}

.r-timeline-052017-badge > img {
    display: block;
    margin: auto;
    width:100%
}

.r-timeline-052017-badge.left {
    left: 10px;
}

.user-p-timeline-052017 > li >
.user-p-r-timeline-panel-052017 {
    width: auto;
    border-radius: 10px;
    padding: 10px 12px 5px 12px;
    position: relative;
    color: #333;
    margin-left: 45px;
}

.default-timeline-panel {
    background: #f3f3f3 !important;
    color: #f3f3f3 !important;
    border-radius: 5px;
}

.default-value {
    background: #f6f6f6 !important;
    color: #f6f6f6 !important;
    border-radius: 10px;
}

.user-p-r-timeline-panel-052017 >
.left-t-l-wrapper-052017 {
    width: 100%;
    min-height: 50px;
    overflow: hidden;
    position: relative;
    background: #F2F4F8;
    color: #272727;
    padding: 10px;
    border-radius: 5px;

}

.user-p-r-timeline-panel-052017 >
.left-t-l-wrapper-052017.height0 {
    min-height: 40px !important;
    height: 0px !important;;
}

.height0:nth-child(odd) {
    background: #fafcfe !important;
}

.user-p-r-timeline-panel-052017 > .left-t-l-wrapper-052017:before {
    position: absolute;
    top: 26px;
    right: -10px;
    display: inline-block;
    /*border-top: 15px solid transparent;*/
    /*border-left: 15px solid #f7f5f5;*/
    /*border-right: 0 solid #f7f5f5;*/
    /*border-bottom: 15px solid transparent;*/
    content: " ";
}

.left-t-l-wrapper-052017 >
.small-t-l-header-052017 {

}

.user-p-r-timeline-panel-052017.agent-panel {
    padding-bottom: 0px !important;
    padding: 0 !important;
    border-bottom: 1px solid #e5e7e0;
}

.agent-activity-t-l-panel {
    padding: 0 !important;
    border-bottom: 1px solid #fafcfe;
}

.left-t-l-wrapper-052017 >
.small-t-l-header-052017 > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.left-t-l-wrapper-052017 >
.small-t-l-header-052017 > ul > li {
    display: inline-block;
    font-family: 'AvenirNext-Bold', sans-serif;
    font-size: 12px;
    color: #272727;
    letter-spacing: 0.49px;
    text-transform: uppercase;
}

.small-t-l-body-052017 {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 12px;
    color: #272727;
    letter-spacing: 0.66px;
    width: 100%;
    min-height: 20px;
    overflow: hidden;
    position: relative;
    padding-top: 5px;
    padding-bottom: 8px;
}

.small-t-l-footer {
    /* ticket id : Test_tic: */
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 10px;
    color: #272727;
    letter-spacing: 0.44px;
}

.small-t-l-footer > ul {
    list-style: none;
    margin: 0px;
    padding: 0px;

}

.small-t-l-footer > ul > li {
    display: inline-block;

}

.small-t-l-header-052017 > ul > li.ticket-time-ago {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 12px;
    margin-top: 4px;
}

.small-t-l-footer > ul > li.ticket-id-h {
    color: #272727;
}

.small-t-l-footer > ul > li.ticket-id {
    color: #223448;
}

.small-t-l-header-052017 > ul > li.user-052017 {
    color: #516D8F;
}

.small-t-l-header-052017 > ul > li.close-052017 {
    color: #EA3B3B;
}

.right-act-date {
    color: #16ecab !important;
    text-align: right;
    float: right;
}

.header-052017.inline-h > ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-052017.inline-h > ul > li {
    display: inline-block;
    /* color: #fff; */
}

.header-r-icon-052017 {
    width: 36px;
    height: 36px;
    overflow: hidden;
    position: relative;
    background: #FFDEEB;
    border-radius: 50%;
    text-align: center;
    margin-top: -6px;
    cursor: pointer;
    margin-left: 5px;
    float: right;
    line-height: 2.6;
}

.header-r-icon-052017:hover {
    background-color:#EE437E;
    color: #ffffff;
}

.header-r-icon-052017.with-text {
    width: 36px;
    height: 36px;
    overflow: hidden;
    position: relative;
    background-color: #FFDEEB;
    color: #EF3F7D;
    border-radius: 0%;
    text-align: center;
    padding-top: 0px;
    margin-top: -6px;
    cursor: pointer;
    border-radius: 100%;
    line-height: 3.1;
}

.header-r-icon-052017.with-text:hover{
    background-color: #EF3F7D;
    color: #ffffff;
}

.header-r-icon-052017.with-text > i {
    color: #EF3F7D;
}

.header-r-icon-052017.with-text:hover > i {
    color: #ffffff;
}

.error-txt {
    color: #ff0000 !important;
}

.header-r-icon-052017.with-text > i {
    padding-left: 5px;
    padding-right: 5px;
}

.header-052017.modal-header {
    width: 100%;
    min-height: 37px;
    overflow: hidden;
    text-align: left;
    font-size: 14px;
    letter-spacing: 0.57px;
    padding: 15px 15px 15px 15px;
}

.modal-body-052017 {
    width: 100%;
    min-height: 150px;
    padding: 15px;
    /*overflow: hidden;*/
    position: relative;
}

.header-r-icon-052017 > i {
    font-size: 16px;
    color: #EE437E;
}

.header-r-icon-052017:hover i {
    color: #ffffff;
}

.user-p-location-d-052017 {
    width: auto;
    min-height: 15px;
    overflow: hidden;
    padding-left: 10px;
    padding-right: 10px;
}

.customer-style-ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.customer-style-ul.inline > li {
    display: inline-block;
}

.user-p-location-d-052017 > ul > li {
    display: inline-block;
}

.location-pin-052017 > i {
    color: #D8D8D8;
}

.location-name-052017 {
    /* 71 Pilgrim Avenue ,C: */
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 13px;
    color: #272727;
    letter-spacing: 0.57px;
}

.user-p-l-map-052017 {
    width: auto;
    height: 150px;
    overflow: hidden;
    position: relative;
    margin: 10px;
    background: #D8D8D8;
}

.user-p-right-h-052017 {
    width: 100%;
    min-height: 50px;
    overflow: hidden;
    position: relative;
    opacity: 0.8;
    font-size: 10px;
    letter-spacing: 0.66px;
    margin: 0;
}

.profile-c-pills-052017 {
    width: 100%;
    /*height: 50px;*/
    overflow: hidden;
    position: relative;
    border-radius: 5px 5px 0 0;
    background-color: #fff;
    -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    padding-right: 10%;
}

.uib-tab.disabled > a {
    color: #f1f1f1 !important;
}

.profile-c-pills-052017 > li,
.profile-c-pills-052017 > li.active,
.profile-c-pills-052017 > li.active > a {
    background: transparent;
}

.profile-c-pills-052017 > li > a {
    font-size: 14px;
    letter-spacing: 0.57px;
    border-radius: 0px;
    padding: 15px;
    color:#333333;
}

.profile-c-pills-052017 > li {
    padding:0;
}

.profile-c-pills-052017 > li.active > a,
.profile-c-pills-052017 > li.active > a:focus,
.profile-c-pills-052017 > li.active > a:hover {
    color: #EE437E;
    background-color: transparent !important;
    outline: none;
    border-bottom: 4px solid #ee437e;
}

.profile-c-pills-052017 > li > a:hover,
.profile-c-pills-052017 > li > a:focus,
.profile-c-pills-052017 > li > a:active {
    color: #EE437E;
    background-color: #FFDEEB !important;
    outline: none;
}

.user-p-h-right-btn-052017 {
    display: inline-block;
}

.user-p-right-tab-052017 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.user-e-widget-052017 {
    background: #Fff;
    width: 100%;
    min-height: 285px;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
}

.user-p-e-wrapper-052017 {
    width: 100%;
    min-height: 170px;
    overflow: hidden;
    position: relative;
    padding: 10px;
}

/*user channel wrapper */
.user-c-e-wrapper-052017 {
    width: 100%;
    min-height: 200px;
    overflow: hidden;
    position: relative;
}

.e-d-row-052017 {
    min-height: 35px;
    background: #fff;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 15px;
}

.e-d-row-052017:nth-of-type(odd) {
    background: #F2F4F8;
    border-radius: 5px;
}
.e-d-row-052017.gray {
    background: #f9fdf4;
    border-radius: 6px;
}

.crm-bl-tick-052017 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #bbb;
    font-size: 11px;
    cursor: pointer;
    margin-left: 6px;
    transition: background 0.2s, color 0.2s;
}
.crm-bl-tick-052017:hover {
    background: #fdecea;
    color: #e74c3c;
}
.crm-bl-tick-052017.is-blacklisted {
    background: #fdecea;
    color: #e74c3c;
    cursor: pointer;
}
.crm-bl-tick-052017.is-blacklisted:hover {
    background: #eafaf1;
    color: #27ae60;
}

.desc-052017 {
    /* Company: */
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 12px;
    color: #272727;
    letter-spacing: 0.53px;
    text-transform: uppercase;
}

.desc-052017 > i {
    padding-right: 5px;
    color: #b5ea85;
}

.c-text-green-052017 {
    color: #b5ea85 !important;
}

.desc-052017 > i.none-icon {
    padding-right: 21px;
}

.value-052017 {
    /* 103: */
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 12px;
    color: #565e67;
    letter-spacing: 0.53px;
    text-transform: uppercase;
}

.right-icon-delete {
    float: right;
    width: 20px;
    height: 20px;
    background: #f65d51;
    border-radius: 100%;
    margin-left: 10px;
    text-align: center;
    padding-top: 4px;
    cursor: pointer;
}

.right-icon-delete > i {
    color: #fff;
}

.value-052017 > i {
    color: #b5ea85;
    padding-left: 5px;
}

.profile-tag-052017 {

}

.profile-tag-052017 > li {
    display: inline-block;
    padding: 3px 8px 2px 8px;
    color: #e6794f;
    margin-left: 4px;
    margin-top: -4px;
    text-align: center;
    border: 1px solid #f7f7f7;
    border-radius: 5px;
}

.user-eng-call-wrapper-052017 {
    width: 100%;
    min-height: 90px;
    overflow: hidden;
    position: relative;
    padding-left: 6px;
    padding-right: 6px;
}

.eng-channel-052017 {
    width: 48%;
    min-height: 70px;
    max-height: 65px;
    overflow: hidden;
    position: relative;
    background: rgba(163, 229, 100, 0.10);
    box-shadow: 0 0 1px 0 #A3E564;
    margin-top: 0px;
    margin-left: 5px;
    display: inline-block;
    margin-bottom: 3px;
}

.channel-p-b-052017 {
    width: 100%;
    min-height: 20px;
    display: block;
    overflow: hidden;
    position: relative;
    margin-top: 30px;
}

.eng-channel-des-052017 {
    width: 100%;
    min-height: 20px;
    overflow: hidden;
    position: relative;
    padding: 10px 10px 0px 10px;
}

.channel-main-wrapper {
    padding-top: 5px;
}

.channel-des-052017 {
    /* SMS: */
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 13px;
    color: #45B007;
    letter-spacing: -0.16px;
    text-transform: uppercase;
}

.channel-value-052017 {
    /* 25% (150): */
    font-family: AvenirNextLTPro-Regular;
    font-size: 11px;
    color: #45B007;
    letter-spacing: -0.13px;
}

.c-progress-b-052017 {
    background: #D7E7C7;
    height: 9px;
    border-radius: 30px;
    box-shadow: inset 0 0px 0px rgba(0, 0, 0, .1);
}

.c-progress-b-052017 > .progress-bar {
    background: #A3E564;
    -webkit-box-shadow: inset 0 0px 0 rgba(0, 0, 0, .0);
    box-shadow: inset 0 0px 0 rgba(0, 0, 0, .0);
}

.user-p-t-s-052017 {
    width: 100%;
    min-height: 250px;
    overflow: hidden;
    position: relative;
    background: #ffffff;
    padding: 10px;
    margin: 0px;
}

.ticket-s-wrapper-052017 {
    width: auto;
    min-height: 230px;
    overflow: hidden;
    background: #F8FDF3;
    position: relative;
    margin: 0 auto;
    padding-bottom: 25px;
}

.ticket-s-chart-052017 {
    width: 250px;
    height: 250px;
    background: transparent;
    margin: 0 auto;
    padding: 0px;
}

.user-p-ivr-wrapper-052017 {
    width: auto;
    min-height: 675px;
    background: #ffffff;
    overflow: hidden;
    position: relative;
    margin: 10px;
    padding: 10px;

}

.ivr-main-wrapper {

}

.ivr-t-h-052017 {
    width: auto;
    min-height: 40px;
    border-bottom: 3px solid #FAFAFA;
    overflow: hidden;
    position: relative;
    padding: 12px 5px 5px 5px;
    margin: 5px;
    margin-bottom: 5px;
}

.ivr-t-h-052017 > th {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 10px;
    color: #8A8E86;
    letter-spacing: 0.44px;
    text-transform: uppercase;
}

.ivr-t-body-052017 {

}

.ivr-t-body-052017 {
    width: 100%;
    height: 500px;
    overflow: auto;
    position: relative;
}

.ivr-t-body-052017 > .ivr-t-row-052017 {
    border: 0px;
}

.ivr-t-body-052017 > .ivr-t-row-052017 > th,
.ivr-t-body-052017 > .ivr-t-row-052017 > td {
    width: auto;
    min-height: 35px;
    overflow: hidden;
    position: relative;
    border-top: 0px !important;
    font-size: 14px;
    color: #8A8E86;
    letter-spacing: 0.62px;
    border-radius: 12px 0 0 12px;
    text-transform: capitalize;
    padding: 8px;

}

.ivr-t-body-052017 > .ivr-t-row-052017 > td {
    border-top: 0px !important;
}

.ivr-t-body-052017 > .ivr-t-row-052017 > td:first-child {
    border-radius: 5px 0 0 5px;
}

.ivr-t-body-052017 > .ivr-t-row-052017 > td:last-child {
    border-radius: 0 5px 5px 0;
}

.ivr-t-body-052017 > tr.ivr-t-row-052017:nth-child(odd) {
    background-color: #F2F4F8;
    border-radius: 5px;
}

.ivr-t-c-wrapper-052017 {
    text-align: center;
}

.ivr-t-c-wrapper-052017 {
    /* TOTAL: */
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 24px;
    color: #8C9088;
    letter-spacing: 0.57px;
    margin-top: 45px;
}

.help-block {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 12px;
    color: #8C9088;
    letter-spacing: 0.57px;
}

/* engagement time line */
.user-p-e-tl-wrapper-052017 {
    width: 100%;
    height: 930px;
    overflow: hidden;
    position: relative;
}

.engagement-tl-052017 > li {
    margin-bottom: 20px;
    position: relative;
}

.engagement-tl-052017:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 4px;
    background: #E5E7E3;
    left: 54%;
    margin-left: -1.5px;
    border-radius: 14px;
}

.engagement-tl-052017 > li > .e-t-l-wrapper-052017 {
    /* Rectangle 21: */
    width: 350px;
    min-height: 198px;
    border: 1px solid #F8F8F8;
    border-radius: 5px;
    overflow: hidden;
    padding: 10px;
    background: #FAFBFD;
}

.e-t-l-wrapper-052017.left {
    /*margin-left: 3%;*/
}

.e-t-l-wrapper-052017.right {
    /*margin-right: 3%;*/
}

.engagement-tl-052017 > li.time-line-right-052017 > .e-t-l-wrapper-052017 {
    float: right;
}

.e-t-l-header-052017 {
    width: 100%;
    min-height: 50px;
    overflow: hidden;
    position: relative;
    padding: 10px 10px 5px 10px;
    margin: 0px;
    background: #FFFFFF;
}

.e-t-l-wrapper-052017 >
.e-t-l-header-052017 > ul {
    width: 100%;
    min-height: 25px;
    display: block;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #cfcfcf;
    padding: 0 10px 10px;
    margin-bottom: 10px;
}

.e-t-l-wrapper-052017 >
.e-t-l-header-052017 > ul:last-child {
    border-bottom:none;
}

.e-t-l-header-052017 > ul > li {
    display: inline-block;
}

ul.customer-style-ul > li.from-to-052017 {
    font-size: 13px;
    color: #000;
    text-align: left;
    font-weight: 600;
    min-width: 50px;
}

ul.customer-style-ul > li.value {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    /* duodemouser@gmail.co: */
    font-size: 14px;
    color: #8A8E86;
    letter-spacing: 0.68px;
    text-align: left;
}

.e-t-l-badge-052017 {
    color: #fff;
    width: 30px;
    height: 30px;
    line-height: 50px;
    font-size: 1.4em;
    text-align: center;
    position: absolute;
    top: 36px;
    margin-left: -15px;
    z-index: 0;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    /* Oval 6: */
}

.outbound-panel-right {
    float: right !important;
}

timeline-badge {
    box-shadow: 0 0 0 0px white, inset 0 0px 0 rgba(0, 0, 0, 0), 0 0px 0 0px rgba(0, 0, 0, 0);
    color: #fff;
    width: 30px;
    height: 30px;
    line-height: 50px;
    font-size: 1.4em;
    text-align: center;
    position: absolute;
    top: 16px;
    left: 50%;
    margin-left: -15px;
    z-index: 0;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
}


timeline-panel {
    /*width: 350px;*/
    min-height: 220px;
    border: 1px solid;
    border: 1px solid #cfcfcf;
    border-radius: 5px;
    padding: 10px;
    background: #ffffff;
    float: left;
    position: relative;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0);
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
}

.e-t-l-badge-052017.facebook {
    background: #FFFFFF !important;
    border: 5px solid rgba(117, 172, 235, 0.20);
    box-shadow: 0 4px 5px 0 #B8D5F5;
}

.e-t-l-badge-052017.call {
    background: #FFFFFF !important;
    border: 5px solid rgba(243, 194, 174, 0.20);
    box-shadow: 0 4px 5px 0 #B8D5F5;
}

.e-t-l-badge-052017.twitter {
    background: #FFFFFF !important;
    border: 5px solid rgba(50, 106, 218, 0.20);
    box-shadow: 0 4px 5px 0 #B8D5F5;
}

.e-t-l-badge-052017.api {
    border: 3px solid #fff;
    box-shadow: 0 1px 17px 0 rgba(170, 170, 170, 0.18);
}


timeline-event:nth-of-type(odd) li timeline-badge {
    background-color:#EE437E !important;
}

timeline-event:nth-of-type(even) li timeline-badge {
    background-color:#682F8E !important;
}
.e-t-l-direction-052017 > ul > li {
    /*display: inline-block;*/
}

.e-t-l-direction-052017 {
    display: block;
    min-height: 50px;
    overflow: hidden;
    margin-top: 0px;
    padding: 10px;
    background: #F2F4F8;
    border-radius: 5px;
    margin: 0 10px;
}

.direction-icon-052017 {
    float: right;
}

.e-t-l-d-icon-052017 {
    /*width: 48px;*/
    /*height: 48px;*/
    /*!* Oval 7: *!*/
    /*background: rgba(59, 89, 152, 0.37);*/
    /*border: 9px solid rgba(59, 89, 152, 0.37);*/
    overflow: hidden;
    text-align: center;
    border-radius: 50%;
}



.e-t-l-d-icon-052017 > i {
    font-size: 20px;
    padding-top: 5px;
    color: #ffffff;
}

.e-t-l-channel-d-052017 {
    /* direction : inbound: */
    display: block;
    min-height: 20px;
    font-weight: 600;
    font-size: 14px;
    color: #000000;
    letter-spacing: 0.68px;
    text-align: left;
    text-transform: capitalize;
    padding: 0px 10px;
    width: calc(100% - 80px);
}

.e-t-l-channel-d-052017 time-ago {
    font-size:11px;
    color: #999999;
    margin-top:20px;
    display:block;
}

.e-t-l-channel-d-052017.channel {
    text-transform: uppercase;
}

.e-t-l-channel-d-052017.channel.facebook {
    color: #3B5998 !important;
    background: transparent !important;
}

.e-t-l-channel-d-052017.channel.skype {
    color: #00AFF0 !important;
    background: transparent !important;
}

.e-t-l-channel-d-052017.channel.call {
    color: #F3C2AE !important;
    background: transparent !important;
}

.e-t-l-channel-d-052017.channel.twitter {
    color: #326ADA !important;
    background: transparent !important;
}

.e-t-l-channel-d-052017.channel.api {
    color: #9CA7B3 !important;
    background: transparent !important;
}

.e-t-l-d-desc-052017 {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    padding: 5px;
    margin-bottom: 5px;
}

.e-t-d-d-wrapper-052017 {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 14px;
    color: #8A8E86;
    background: #F2F4F8;
    border-radius: 5px;
    margin: 10px 5px 0;
    padding: 10px;
}

.e-t-l-more-052017 {
    width: 100%;
    min-height: 60px;
    overflow: hidden;
    position: relative;
    padding: 0px;
}

.e-t-l-m-wrapper-052017 {
    /* Rectangle 22: */
    width: 100%;
    min-height: 65px;
    overflow: hidden;
    position: relative;
    background: rgba(143, 213, 56, 0.05);
    border: 1px solid rgba(143, 213, 56, 0.15);
}

.e-t-l-m-wrapper-052017 {
    width: 100%;
    min-height: 50px;
    overflow: hidden;
    position: relative;
    padding: 10px;
    margin-bottom: 4px;
}

.e-t-l-m-wrapper-052017 > .e-t-l-m-auth-052017 {
    width: 100%;
    min-height: 20px;
    display: block;
    overflow: hidden;
    position: relative;
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 12px;
    color: #45B007;
    letter-spacing: 0.44px;
}

.e-t-l-m-wrapper-052017 >
.e-t-m-details-052017 {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    width: 100%;
    min-height: 20px;
    display: block;
    overflow: hidden;
    position: relative;
    font-size: 11px;
    color: #45B007;
    letter-spacing: 0.53px;
}

/* profile ticket */
.user-p-t-wrapper-052017 {
    width: 100%;
    height: 1000px;
    overflow: hidden;
    position: relative;
    background: #FFFFFF;
    border: 0px solid #F8F8F8;
}

.user-p-t-h-wrapper-052017 {
    width: 100%;
    /*min-height: 120px;*/
    height: 60px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #F0F0F0;
    box-shadow: 9px 7px 10px 0px rgba(0, 0, 0, 0.09);
}

.user-p-t-type-052017 {
    width: 100%;
    min-height: 60px;
    overflow: hidden;
    position: relative;
    padding: 0px 10px;
    margin-bottom: 5px;

}

.u-p-t-t-wrapper-052017 {
    /* TYPE: */
    width: 100%;
    min-height: 15px;
    overflow: hidden;
    position: relative;
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 13px;
    color: #8A8E86;
    letter-spacing: 0.63px;
    text-transform: uppercase;
    margin-bottom: 10px;
    margin-top: 10px;
}

.ticket-type-052017 {
    width: 95px;
    height: 29px;
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 11px;
    letter-spacing: 0.63px;
    border-radius: 3px;
    text-align: center;
    text-transform: uppercase;
    padding-top: 5px;
    margin-right: 5px;
    color: #8A8E86;
    /* background: rgba(138, 142, 134, 0.20); */
    border: 1px solid #8A8E86;
    margin-bottom: 5px;
    cursor: pointer;
}

.ticket-type-052017.selected {
    background: rgba(143, 213, 56, 0.18);
    border: 1px solid #AEE776;
    color: #8FD539;

}

.ticket-type-052017 > i {
    float: left;
    padding-left: 10px;
    color: #8FD539;
    font-size: 16px;
}

.u-p-t-t-list > ul > li {
    display: inline-block;
}

.user-p-t-body {

}

.user-p-t-body > .user-p-t-b-wrapper-052017 {

}

.tbl-t-052017 {
    /* MORE: */
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 16px;
    color: #8A8E86;
    letter-spacing: 0.77px;
    text-align: center;
}

.more-record-052017 {
    width: 200px;
    height: 40px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

tr.ticket-tbl-row-052017 {
    width: 100%;
    height: 60px;
    overflow: hidden;
    position: relative;

}

tr.ticket-tbl-row-052017:hover {
    background: #f6f6f6;
}

tr.ticket-tbl-row-052017 > th,
tr.ticket-tbl-row-052017 > td {
    /* tag trigger is worki: */
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 14px;
    color: #8A8E86;
    letter-spacing: 0.73px;
    border-top: 0px !important;
}

tr.ticket-tbl-row-052017:nth-child(even) {
    background-color: #FAFBFD;
}

.t-c-img-052017 {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.t-c-img-052017 > img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 4px solid rgba(34, 52, 72, 0.10);
}

.ticket-tbl-row-052017 > td.t-td-type-052017 {
    /* QUESTION: */
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 13px;
    color: #8A8E86;
    letter-spacing: 0.58px;
    text-transform: uppercase;
    padding-top: 14px;
    text-align: left;
}

.t-td-type-052017 > .t-td-s-g-wrapper-052017 {
    width: 110px;
    /* height: 20px; */
    overflow: hidden;
    position: relative;
    border: 2px solid #F1F7FF;
    border-radius: 16px;
    padding: 8px 8px 5px 23px;
    text-align: left;
    font-size: 11px;
}

.ticket-tbl-row-052017 > td.t-td-desc-052017 {
    /* tag trigger is worki: */
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 15px;
    color: #8A8E86;
    letter-spacing: 0.73px;
    padding-top: 20px;
    text-align: left;
}

.t-td-channel-052017 {
    overflow: hidden;
    position: relative;
}

.t-td-c-wrapper-052017 {
    width: 35px;
    height: 35px;
    overflow: hidden;
    position: relative;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    margin-top: 5px;
}

.t-td-c-wrapper-052017.facebook {
    /* Oval 7: */
    background: #B8D5F5;
    border: 4px solid rgba(183, 213, 245, 0.31);
}

.t-td-c-wrapper-052017.twitter {
    /* Oval 7: */
    background: #B8D5F5;
    border: 4px solid rgba(183, 213, 245, 0.31);
}

.t-td-c-wrapper-052017 > i {
    font-size: 17px;
    color: #ffffff;
    padding-top: 5px;
}

.ticket-tbl-row-052017 > td.t-td-t-ago-052017 {
    /* 21 days ago: */
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 14px;
    color: #908E8D;
    letter-spacing: 0.57px;
    padding-top: 20px;
    text-align: left;
}

.t-td-t-status-052017 {
    position: absolute;
    width: 12px;
    height: 12px;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 50%;
    display: inline-block;
    left: 7px;
}

.urgent-052017 {
    background: #EA3B3B;
}

.low-052017 {
    background: #8298ae;
}

.normal-052017 {
    background: #00cd73;
}

.high-052017 {
    background: #ff8c00;
}

.ticket-tbl-row-052017 > td.t-td-more-052017 {
    /* MORE: */
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 14px;
    color: #8A8E86;
    letter-spacing: 0.68px;
    padding-top: 20px;
    cursor: pointer;
}

/*create new ticket model */
.user-p-c-n-ticket-052017 {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    background: #ffffff;
    top: 0;
    left: 0;
}

.user-p-t-header-052017 {
    width: 100%;
    height: 50px;
    overflow: hidden;
    position: relative;
    background: #F2F4F8;
    text-align: center;
    margin: 0 auto;
    padding-top: 0px;
}

.user-p-t-header-052017 > .header-052017 {
    text-align: center;
    text-transform: capitalize;
}

.user-p-t-body-052017 {
    height: auto;
    min-height: 500px;
    /*overflow: hidden;*/
    position: relative;
    /*border: 1px solid #EEEEEE;*/
    margin: 0px auto;
    padding: 0;
    border-radius: 5px;
}

.user-p-t-body-052017.create-new-t {
    background: #F2F4F8;
    margin: 30px auto;
    padding: 0px;
    float: left;
    width: 100%;
}

.user-p-t-body-052017 .form-group {
   margin-bottom: 10px;
}

.user-p-t-body-052017.create-new-t:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 18px solid #f6f6f6;
    position: absolute;
    top: -17px;
    left: 50%;
    margin: 0 auto;
}

.create-new-t .no-padding {
    padding: 0!important;
}
.create-new-t .no-padding-l {
    padding-left: 0!important;
    padding-right: 10px!important;
}
.create-new-t .no-padding-r {
    padding-right: 0!important;
    padding-left: 10px!important;
}

.label-052017,
.control-label {
    /* Priority: */
    /*font-family: 'AvenirNextLTPro-Regular', sans-serif !important;
    font-size: 11px;
    color: #8A8E86 !important;
    letter-spacing: 0.57px;
    text-transform: uppercase;*/
}

.txt-input-052017,
.form-control {
    font-family: 'AvenirNextLTPro-Regular', sans-serif !important;
    /* Rectangle 6: */
    border: 1px solid #EAE6E6;
    border-radius: 6px;
}

tags-input .tags {
    font-family: 'AvenirNextLTPro-Regular', sans-serif !important;
    font-size: 11px;
    border: 1px solid #EAE6E6 !important;
    border-radius: 6px !important;
}

.user-p-t-tags-052017 {
    width: 100%;
    min-height: 20px;
    overflow: hidden;
    position: relative;

}

.user-p-t-tags-052017 > ul > li {
    display: inline-block;
}

.btn-tag-sm {
    /* Rectangle 8: */
    background: #FFFFFF;
    border-radius: 5px;
    /* HIGH: */
    font-family: 'AvenirNextLTPro-Regular', sans-serif !important;
    font-size: 10px;
    color: #cccccc;
    letter-spacing: 0.57px;
    outline: none !important;
}

.btn-tag-sm.selected-this > i {
    display: inline-block;
    color: #fff !important;
}

.btn-tag-sm > i {
    display: none;
}

.tag-reload-052017 {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    display: inline-block;
    opacity: 0.8;
    font-size: 12px;
    color: #8A8E86;
    letter-spacing: 0.79px;
    cursor: pointer;
    text-decoration: underline;

}

.ivr-n-found-052017 {
    width: 100%;
    min-height: 30px;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.ivr-n-f {
    margin: 30% auto;
}

.ticket-cht-summary {
    margin-top: 30px;
}

.ivr-icon {
    width: 100%;
    display: block;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.error-msg {
    width: 100%;
    color: #d9dee4;
    letter-spacing: 0.44px;
    display: block;
}

.error-msg.text-lg-052017 {
    font-size: 20px;
}

.chat-Temp-obj {
    border-bottom-style: groove;
    border-bottom-width: thin;
    height: 40px;
}

.chat-Temp-obj > span {
    padding-top: 15px;
    padding-bottom: 5px;
}

/*profile edit wrapper */
.user-p-edit-wrapper-052017 {
    width: 100%;
    position: absolute;
    top: 70px;
    bottom: 0;
    background: rgb(246, 246, 246);
    z-index: 10;
}

.user-edit-wrapper {
    width: 100%;
    overflow: hidden;
    min-height: 250px;
    background: rgb(255, 255, 255);
    position: relative;
    padding: 15px 5px 15px 5px;
}

.user-edit-wrapper-loading {
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0;
    background: rgb(246, 246, 246);
    z-index: 100;
}

.ch-temp-list {
    position: absolute;
    left: 0;
    right: 0px;
    width: 100%;
    height: 224px;
    text-align: center;
    background-color: #c7cce3;
    bottom: -400px;
}

.temp-p-show {
    bottom: 0px;
}

.temp-p-hide {
    bottom: -400px;
}

.temp-view {
    padding-top: 10px;
    height: 100px
}

.temp-view-tx-box {
    width: 350px;
    padding-left: 10px;
    margin-left: 20px;
}

.temp-block {
    padding-left: 5px;
}

.temp-block {
    margin-left: 20px;
    border-bottom: thick;
    border-radius: 25px;
    background: #f4f9e5;
    width: inherit;
    min-height: 30px;
    margin-bottom: 10px;
    margin-top: 5px;
    padding-left: 20px;
    padding-top: 5px;
    display: inline-block;
    padding-right: 10px;

}

.temp-list-block {
    height: 100px;
}

.temp-list-block {
    height: 120px;
    overflow-x: auto;
    overflow-y: auto;
    margin-right: 20px;

}

.temp-btn-block {
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 250px;
}

.search-temp {
    padding-top: 20px;
    margin-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;

}

.u-chat-temp-wrp {
    position: absolute;
    width: 100%;
    height: 320px;
    bottom: -400px;
    right: 0;
    z-index: 100;
    -webkit-box-shadow: -3px 1px 12px -5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -3px 1px 12px -5px rgba(0, 0, 0, 0.75);
    box-shadow: -3px 1px 12px -5px rgba(0, 0, 0, 0.75);
    overflow: hidden;
    /*background: #f7f7f7;*/
    background: #fff;
}

.search-no-result-box {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    top: 38px;
    position: absolute;
    overflow: hidden;
    background-color: #ffffff;
    width: 310px;
    height: 100px;
    text-align: center;
    padding-top: 18px;
    font-size: 17px;
    color: #bdbaba;
}

.search-no-result-box > i {
    display: block;
    font-size: 25px;
    padding-bottom: 15px;
}

.temp-done-btn {
    padding-right: 10px;
}

.form-group.validation-on-052017 > label {
    color: #EA3B3B !important;
}

.no-result-box > li {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    color: #8298ae;
    text-align: center;
}

.form-group.validation-on-052017 > .form-control {
    border: 1px solid #EA3B3B;
    color: #EA3B3B;
}

.user-img-wrp-052017 {
    width: 220px;
    height: 134px;
    padding-top: 10px;
    margin: 0px auto;
    text-align: center;
    margin-bottom: 27px;
}

.user-img {
    width: 100%;
    display: block;
}

.edit-btn-img {
    padding-top: 10px;
}

.profile-tag-052017.btn-wrp > li {
    font-family: ' AvenirNextLTPro-Bold', sans-serif;
    background: #EE437E;
    color: #fff;
    border-radius: 5px;
    opacity: 0.8;
    font-size: 12px;
    letter-spacing: 0.66px;
    cursor: pointer;
}

.profile-tag-052017.btn-wrp > li:hover,
.profile-tag-052017.btn-wrp > li:active,
.profile-tag-052017.btn-wrp > li:focus {
    background: #000000;
    color: #ffffff;
    outline: none !important;
}

/* user profile location wrapper */
.user-p-l-wrapper-052017 {
    background: #FAFBFD;
    width: 100%;
    min-height: 285px;
    overflow: hidden;
    position: relative;
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);border: 1px solid #EEEEEE;
    border-radius: 5px;
    margin-bottom: 20px
}

.user-p-l-wrapper-052017.fix-h-052017 {
    min-height: 80px;
}

.map-wrapper-052017 {
    width: 100%;
    height: 255px;
    overflow: hidden;
    position: relative;
}

.location-d-052017 {
    width: 100%;
    min-height: 50px;
    overflow: hidden;
    position: relative;
    padding: 10px;
}

/* multiple profile view */
.user-p-mp-052017 {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    z-index: 10;
    background: #F5F5F5;

}

.user-p-mp-wrapper-052017 {
    width: 100%;
    height: 550px;
    background: #ffffff;
    margin-top: 50px;
    margin-bottom: 10px;
    /* border-radius: 10px; */
}

.multiple-p-left-w-052017 {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* border-right: 0px solid rgba(138, 142, 134, 0.1); */
    /* background: rgba(145, 211, 70, 0.07); */
    /* border-top-left-radius: 10px; */
    /* border-bottom-left-radius: 10px; */
    border-top: 1px solid #f8f8fa;
}

.create-new-wrp-052017 {
    width: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    margin: 0 auto;
}

.multiple-p-right-w-052017 {
    background: #Fff;
    width: 100%;
    min-height: 285px;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
}

.icon-lg-center-052017 {
    margin: -6px auto 0;
    position: relative;
    text-align: center;
    cursor: pointer;
    display: inherit;
    padding-top: 0 !important;
    float: left;
}

.lg-text-052017 {
    text-align: center;
    /* CREATE NEW PROFILE: */
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 14px;
    color: #AEE776;
    letter-spacing: 0.74px;
    display: inline-block;
}

.m-p-header-052017 {
    width: 100%;
    height: 50px;
    overflow: hidden;
    position: relative;
    border-radius: 5px 5px 0 0;
    background-color: #fff;
    -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.body-mp-052017 {
    width: calc(100% - 30px);
    min-height: 90px;
    overflow: hidden;
    position: relative;
    margin: 0 15px;
    border-radius: 5px;
}

.img-with-text-widget {
    width: 100%;
    min-height: 90px;
    overflow: hidden;
    position: relative;
}

.img-with-text-widget.blue {
    background: rgba(183, 213, 245, 0.16);
}

.img-with-text-widget.gray {
    background: #FAFBFD;
}

.li-text-block {
    width: auto;
    min-height: 50px;
    overflow: hidden;
    position: relative;
    padding-top: 23px;
    padding-left: 5px;
}

.li-text-block.auto-width {
    width: 50%;
}

.li-left-img-wrp {
    /* Oval 8: */
    width: 60px;
    height: 60px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden;
    border: 0px solid rgba(183, 213, 245, 0.37);
    margin: 15px 10px 0px 15px;
    float: left;
}

.li-left-img-wrp > div > img {
    width: 60px;
    height: 60px;
    border-radius: 100%;
}

.li-mu-p-name, .li-mu-p-income-no {
    width: auto;
    min-height: 10px;
    overflow: hidden;
    display: block;
    position: relative;
    text-align: left;
    padding-bottom: 5px;
}

.li-mu-p-name {
    /* William Jacob: */
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 14px;
    color: #223448;
    letter-spacing: 0.57px;
}

.li-mu-p-income-no {
    /* +9435678123: */
    /*font-family: 'AvenirNextLTPro-Bold', sans-serif;*/
    font-size: 13px;
    color: #8A8E86;
    letter-spacing: 0.48px;
}

.li-mu-r-i-wrp {
    position: absolute;
    bottom: 28px;
    right: 15px;
    min-height: 30px;
    float: right;
    overflow: hidden;
}

.btn-m-p-more {
    /* Rectangle 26: */
    width: 50px;
    height: 22px;
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    background: #EE437E;
    color: #fff;
    font-size: 12px;
    border-radius: 5px;
    letter-spacing: 0.57px;
    text-align: center;
    overflow: hidden;
    padding: 0px;
    outline: none !important;
    text-transform: uppercase;
}

.btn-m-p-more:hover,
.btn-m-p-more:focus,
.btn-m-p-more:active,
.btn-more-data:hover,
.btn-more-data:focus,
.btn-more-data:active {
    background: #000000;
    color: #fff;
}

.btn-more-data {
    width: 120px;
    height: 30px;
    background: #EE437E;
    font-family: 'AvenirNextLTPro-Demi', sans-serif;
    color: #fff;
    text-align: center;
    padding: 5px 5px;
    margin-bottom: -2px;
    cursor: pointer;
    position: relative;
    border-radius: 5px;
}

.multiple-p-e-wrapper {
    position: absolute;
    left: 0;
    top: 128px;
    width: 250px;
    height: 400px;
    background: #ffffff;
    z-index: 22;
}

.multiple-e-wrapper {
    padding-left: 50px;
    padding-right: 50px;
}

.none-color {
    background: transparent;
    border: 0px;
}

.img-with-text-widget:nth-child(odd) {
    background: #F2F4F8;
}

.set-pointer {
    cursor: pointer;
    cursor: hand;
}

.tb-create-new {
    color: #95C0F2 !important;
}

.tb-create-new > i {
    color: #95C0F2 !important;
    padding-right: 5px;
}

.top-left-tab-btn-052017 {
    position: absolute;
    top: 0px;
    right: 15px;
}

.action-btn-052017.lg-action-btn {
    width: 36px;
    height: 36px;
    padding-top: 0;
    line-height: 4;
}

.top-left-tab-btn-052017 > button {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    width: 110px;
    height: 30px;
    /* Rectangle 3: */
    background: #FFFFFF;
    border: 1px solid #8FD539;
    border-radius: 5px;
    opacity: 0.8;
    font-size: 10px;
    color: #8FD539;
    letter-spacing: 0.66px;
    text-transform: uppercase;
}

.top-left-tab-btn-052017 > button:hover,
.top-left-tab-btn-052017 > button:active,
.top-left-tab-btn-052017 > button:focus {
    background: #8FD539;
    color: #fff;
}

.more-ticket-wrapper-052017 {
    width: 100%;
    height: 50px;
    background: rgb(255, 255, 255);
    z-index: 100;
    text-align: center;
    margin: 0 auto;
    padding-top: 19px;
    border-top: 1px solid #f3f3f3;
}

/* other engagement details */
.uer-p-other-052017 {
    width: 100%;

}

/* add new note view mode */
.user-p-note-wrapper-052017 {
    width: 100%;
    height: 255px;
    position: relative;
    overflow: hidden;
    bottom: 0;
    background: #fff;
    z-index: 10;
}

.note-add-wrapper {
    padding: 10px;
}

/*my note new UI update */
.modal-header-052017 {
    border-bottom: 1px solid rgba(229, 229, 229, 0.37);
    padding-top: 20px;
    padding-bottom: 17px;
    padding-left: 30px;
    padding-right: 24px;
}

.modal-header-052017.small {
    border-bottom: 1px solid rgba(229, 229, 229, 0.37);
    padding: 10px 15px;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 5px 5px 0 0;
    /* background: #682F8E; */
    -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.dialerScreen-title {
    color: #444444;
}

.modal-lg-header {
    font-size: 14px;
    color: #8A8E86;
    letter-spacing: 0.6px;
}

.my-note-r-052017 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(243, 242, 242, 0.95);
    z-index: 10;
}

.btn-modal {
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    width: 115px;
    height: 35px;
    background: rgba(173, 231, 118, 0.33);
    border: 1px solid #8FD539;
    border-radius: 8px;
    font-size: 11px;
    color: #8FD539;
    letter-spacing: 0.71px;
    text-align: center;
    text-transform: uppercase;
    padding-top: 10px;
    outline: none !important;
}

.text-modal {
    height: 40px;
}

.reminder-wrapper-052017 {
    width: 100%;
    height: 255px;
    background: #ffffff;
    margin: 20% auto;
    border-radius: 8px;
}

/*profile avatar upload wrapper */
.i-u-profile-052017 {
    height: 450px;
    overflow: hidden;
    position: relative;
    background: #ffffff;
    border-radius: 2px;
    padding: 20px;
}

.upload-wrapper {
    min-height: 150px;
    margin: 64px auto;
    position: relative;
    overflow: hidden;
    padding-top: 25px;
    cursor: pointer;
}

.header-wrp {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 10px;
    text-align: center;
}

.upload-icon > i {
    font-size: 25px;
    text-align: center;
}

/* new dialer UI */
.dialer-052017.main-wrapper {
    position: fixed;
    width: 735px;
    /*height: 320px;*/
    height: auto;
    right: 70px;
    bottom: 0px;
    z-index: 100;

    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);

    /* background: #682F8E; */
    background: #fff;
    border: 1px solid #EEEEEE;
    border-radius: 5px 5px 0 0;
    -webkit-transition: right 0.5s;
    -moz-transition: right 0.5s;
    -ms-transition: right 0.5s;
    -o-transition: right 0.5s;
    transition: right 0.5s;
}

.dialer-052017 .header-052017 .btn-circle {
    height: 24px;
    width: 24px;
    line-height: 2.5;
    font-size: 10px;
}


.btn-dialer-refresh {
    position: absolute;
    bottom: -93px;
    left: 0;
    right: 83px;
    margin: 0 auto;
}

.dialer-052017--current-number {
    line-height: 2.4;
}

.dialer-052017 .form-control {
    background-color: transparent;
    color: #ffffff;
}

.dialer-052017 .form-group .label-052017 {
    color: #ffffff;
}


.dialer-minimize {
    width: 160px !important;
    height: 47px !important;
    z-index: 100 !important;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
    border: none !important;
    background: #EE437E !important;
    border-radius: 20px !important;
    bottom: 6px !important;
}

.dialer-minimize .header-052017 {
    background-color: transparent !important;
    border:none !important;
    box-shadow: none;
    height: 48px;
}

.view-dialer {
    background: #EE437E;
    font-family: 'AvenirNextLTPro-Demi', sans-serif;
    color: #fff;
    text-align: center;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 120;
    height: 47px;
    width: 162px;
    font-size: 14px;
    line-height: 3.5;
}

.current-dialer-bar-controllers .view-dialer {
    right: -6px;
    top: -6px;
}

.dialer-minimize .model-btn-wrapper .btn-warp {
    display: none;
}

.dialer-minimize .model-btn-wrapper .dialar-minimiz-btn {
    display: block !important;
}

.dialer-minimize .model-btn-wrapper .dialar-minimiz-btn .btn-circle{
    width: 100%;
    background: transparent;
    color: #fff;
}
.dialer-minimize .dialer-052017-body {
    display: none !important;
}

.blue-header {
    /* AUTO NUMBER DIALER: */
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    font-size: 13px;
    color: #223448;
    letter-spacing: 0.71px;
}

.dialer-052017-body {
    width: 100%;
    height: 195px;
    padding: 5px 15px 50px;
}

.dialer-052017-tbl-wrp {
    width: 100%;
    height: 185px;
    overflow: hidden;
}

.t-dialer-h {
    /* Rectangle 2: */
    /*background: #e3e3e4;*/
}

.t-dialer-h > th {
    /* NUMBER: */
    /*font-family: 'AvenirNextLTPro-Bold', sans-serif;*/
    font-size: 12px;
    color: #B6B8B5;
    /* color: #fff; */
    letter-spacing: 0.71px;
    border-bottom: 0px solid #ddd !important;
    text-transform: uppercase;
}

tr.t-dialer-b > th,
tr.t-dialer-b > td {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 13px;
    letter-spacing: 0.71px;
    border-top: 0px solid #ddd !important;
}

.t-dialer-b:nth-child(even) {
    background: transparent;
}

.t-dialer-b:nth-child(even) th {
    /* color: #fff; */
}

.t-dialer-b:nth-child(even) td {
    /* color: #fff; */
}

.t-dialer-b:nth-child(odd) {
    background: #F2F4F8;
    border-radius: 5px;
}

.dialer-052017-footer {
    width: 100%;
    height: 55px;
    padding-top:14px;
    overflow: hidden;
    position: relative;
    margin-top: 15px;
    background: #fff;
    background-color: #682F8E;
    -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
}

.dialer-icon-wrp {
    text-align: center;
    margin: 0 auto;
}

.dialer-icon-wrp > li {
    display: inline-block;
}

.contact-block {
    background: beige;
    border-radius: 10px;
    height: 30px;
    padding-top: 5px;
    padding-left: 15px;
    margin-bottom: 5px;
}

.contact-block > li {
    list-style-type: none;
}

.play-wrp {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    display: inline-block;
    margin-top: 12px;
}

.dialer-btn {
    cursor: pointer;
}

.dialer-052017.batch-num {
    position: absolute;
    top: 7px;
    right: 70px;

}

.border-right {
    border-right: 1px solid #e3e3e4;
    padding-right: 17px;
}

.dialer-052017.dialer-details {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #ffffff;
    /* margin-bottom: 6px; */
    margin-bottom: 0px;
    border: 0px solid #F8F8F8;

}

.dialer-052017.dialer-details > ul > li {
    display: table-cell;
    padding-right: 10px;
    vertical-align: middle;
}

.dialer-052017.dialer-details > ul > li:last-child {
    padding-right:0;
}

.dialer-052017.dialer-details .model-btn-wrapper .btn-circle{
    height: 24px;
    width: 24px;
    line-height: 2.5;
    font-size: 10px;
}
.model-btn-wrapper.xs-buttons .btn-circle{
    height: 17px;
    width: 17px;
    line-height: 2;
    font-size: 9px;
}

.dialer-save{
    background-color: rgba(255,255,255,0.2);
    /* padding:3px; */
}

.dialer-save--first{
    border-radius:  8px 0 0 8px;
    padding:0;
}

.dialer-save--first + li {
    padding-right:0;
}

.dialer-save--last{
    border-radius: 0 8px 8px  0;
}

.dialer-052017.dialer-details .model-btn-wrapper {
    position: absolute;
    right:6px;
    top: 6px;
}

.attempt-count {
    font-size: 10px;
    position: relative;
    line-height: 0;
    margin-top: 10px;
    right: 0;
    float: right;
    margin-left: 5px;
}

.dialer-052017--city-form {
    min-width: 160px;
}

.dialer-052017--city-form .form-control {
    width: 100% !important;
}

.dialer-052017--action-form {
    max-width: 160px;
}

.batch-num-wrp {
    width: 100%;
    overflow: hidden;
    padding: 10px;
}

.center-lg-select {
    width: 300px;
    height: 45px;
    margin: 0 auto;
}

.batch-select-btn-wrp {
    width: 100%;
    text-align: center;
    padding-top: 8px;
}

.btn-batch-selected {
    width: 300px;
    margin: 0 auto
}

.dialer-052017.current-item {
    font-family: 'AvenirNextLTPro-Bold;', sans-serif;
    font-size: 14px;
    /*color: #B6B8B5;*/
    color: #fff;
    font-weight: bold;
}

.dialer-052017.current-item .form-control {
    color: #fff!important;
}

.dialer-052017.current-item .form-control option {
    color: #555!important;
}

.profile-not-found {
    width: 210px;
    margin: 40px auto;
    text-align: center;
}

/*update pawan CSS */
.u-template-wrp {
    width: 500px;
    height: auto;
    max-height: 500px;
    bottom: 0;
    right: 0;
    left: 0;
    top: 10px;
    margin: 110px auto 20px auto;
    z-index: 100;
    -webkit-box-shadow: -3px 1px 12px -5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -3px 1px 12px -5px rgba(0, 0, 0, 0.75);
    box-shadow: -3px 1px 12px -5px rgba(0, 0, 0, 0.75);
    overflow: hidden;
    /*background: #f7f7f7;*/
    background: #fff;
}

.u-sms-body-container {
    padding-left: 15px;
    margin-top: 20px;
}

.u-sms-body-wrp {
    width: 450px;
    height: 100px;
}

.text-temp-wrap {
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    position: relative;
    padding: 10px;
    border-bottom-color: #0d5ab1;
}

.temp-topic {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 14px;
    color: #292929;
    letter-spacing: 0.53px;
    text-transform: uppercase;
}

.contact-action:hover {
    background-color: #c7d6e9;
    cursor: pointer;
    text-color: whitesmoke;
}

.dialer-btn {
    cursor: pointer;
}

.attchment-text-deco {
    text-decoration: line-through;
}

.attchment-clip:hover {
    cursor: pointer;
}

.profile-data-error {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 19px;
    color: #e5e7e3;
    position: absolute;
    top: 111px;
    margin: 0 auto;
    left: 153px;
    text-transform: uppercase;
}

.dialer-052017-tbl-wrp .profile-data-error{
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
}

.dialer-052017-tbl-wrp .please-wait {
    position: absolute;
    top: 110px;
    font-size: 20px;
    text-align: center;
    background: #fff;
    padding: 30px;
    color: #999;
    text-transform: uppercase;
}

.dialer-052017 #btn-update .save-list{
    margin: 0 14px;
}
/*end */

.contact-d-nf-wrapper-052017 {
    position: absolute;
    background: #fff;
    top: 53px;
    left: 0;
    right: 0;
    z-index: 9;
    bottom: 0;
    text-align: center;
    padding-top: 40px;
}

/*action btn wrapper */
.quick-action-btn-wrp {
    margin-top: 7px;
}

.quick-action-btn-wrp > ul {
}

.quick-action-btn-wrp > ul > li {
    display: inline-block;
}

.action-btn-052017 {
    width: 36px;
    height: 36px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    text-align: center;
    border-radius: 100%;
    line-height: 2.6;
}

.action-btn-052017.active {
    background-color: #FFDEEB ;
}

.action-btn-052017.active-org {
    background-color:#FFDEEB !important;
}

.action-btn-052017-orange {
    background: #FFFFFF;
    border-radius: 5px;
    opacity: 0.8;
    color: #FFAA00;
}

.action-btn-052017:hover,
.action-btn-052017:active,
.action-btn-052017:focus {
    background: #EE437E;
    color:#ffffff;
}

.action-btn-052017:hover i,
.action-btn-052017:active i,
.action-btn-052017:focus i{
    background: #EE437E;
    color:#ffffff;
}

.action-btn-052017 > i {
    color: #EE437E;
    font-size: 14px;
}

.active-org:hover  i {
    color: #ffffff;
    font-size: 14px;
}

.active-org > i:hover {
    color: #fff;
}

.action-btn-052017.active-org:hover {
    background-color: #EE437E !important;
}

/*main console icon bar update */
.top-log-052017 {
    width: 110px;
    height: 52px;
    overflow: hidden;
    position: relative;
    float: left;
    /*background-image: linear-gradient(-90deg, #223448 26%, #364C67 100%);*/
    padding-top: 20px;
}

.top-log-052017 > .version-name {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    position: absolute;
    color: #90d246;
    font-size: 8px;
    right: 42px;
    bottom: 3px;
}

.top-log-052017 > img {
    margin-top: -17px;
    height: 42px;
}

.left-menu-wrapper052017 {
    width: 50px;
    height: 100%;
    position: fixed;
    margin-top:90px;
    float: left;
    top: 54px;
    bottom: 0;
    left: 0;
    text-align:center;
    border-radius: 0 5px 5px 0;
    background: #682F8E;
    box-shadow: 3px 0 5px 0 rgba(0, 0, 0, 0.06);
    -o-box-shadow: 3px 0 5px 0 rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 3px 0 5px 0 rgba(0, 0, 0, 0.06);
    -webkit-box-shadow: 3px 0 5px 0 rgba(0, 0, 0, 0.06);
}

#windowHeightLeftMenu {
    height: auto;
    overflow: hidden;

    /*position: relative;*/
}

.left-menu-wrapper052017 {

}

.left-menu-wrapper052017 > .slimScrollDiv > #windowHeightLeftMenu > ul,
.left-menu-bottom > ul {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
}

.left-menu-wrapper052017 > .slimScrollDiv > #windowHeightLeftMenu > ul > li,
.left-menu-bottom > ul > li {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    text-align: center;
    padding-top: 8px;
    margin: 6px auto;
}

.left-menu-wrapper052017 > .slimScrollDiv > #windowHeightLeftMenu > ul > li:hover, .left-menu-bottom > ul > li:hover{
    background-color: #8759A4;
    color: #ffffff;
}


.left-menu-wrapper052017 > .slimScrollDiv > #windowHeightLeftMenu > ul > li:hover i:before, .left-menu-bottom > ul > li:hover i:before{
    color: #ffffff;
}

.left-menu-wrapper052017 > .slimScrollDiv > #windowHeightLeftMenu > ul > li:first-child,
.left-menu-bottom > ul > li:first-child {
    content:'+';
    font-size: 24px;
    font-weight: 700;
    color:#ffffff;
    position: fixed;
    top: 50px;
    background: #EE437E;
    border-radius: 0;
    margin: 10px -10px;
    width: 56px;
    height: 50px;
    padding: 11px 10px;
    line-height: 2;
    border-radius: 0 12px 12px 0;
}

.left-menu-wrapper052017 > .slimScrollDiv > #windowHeightLeftMenu > ul > li:first-child:hover,
.left-menu-bottom > ul > li:first-child:hover {
    background: #000000;
}

.left-menu-wrapper052017 > .slimScrollDiv > #windowHeightLeftMenu > ul > li:first-child img,
.left-menu-bottom > ul > li:first-child img {
    margin-top:-92px;
}

.left-menu-wrapper052017 > .slimScrollDiv > #windowHeightLeftMenu > ul > li > .left-icon {
    cursor: pointer;
}

.left-menu-wrapper052017 > .slimScrollDiv > #windowHeightLeftMenu > ul > li > .left-icon > img.small {
    width: 22px;
}

img.small {
    width: 22px;
    cursor: pointer;
}

i.small-icon {
    font-size: 23px;
}

.icon-soft-phone.offline-phone:before {
    color: #E7855E;
}

i.small-icon:hover:before {
    color: #797979;
}

.icon-status {
    width: 12px;
    height: 12px;
    position: absolute;
    overflow: hidden;
    border-radius: 100%;
}

.icon-status.left-menu {
    border: 3px solid #682F8E;
    bottom: 21px;
    right: 5px;
}

.icon-status.left-menu.offline {
    background: #E7855E;
}

.icon-status.left-menu.online {
    background: #91d346;
}

.header-search052017 {
    width: 350px;
    background: #2F4762;
    height: 37px;
    overflow: hidden;
}

ul.m-right-user-info {
    list-style: none;
}

ul.m-right-user-info > li {
    display: inline-block;
}

.agent-login-name {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 14px;
    color:  #8298ae;
    letter-spacing: 0.84px;
    padding-right: 10px;
    padding-left: 20px;

}

.console-def-img {
    position: absolute;
    width: 400px;
    text-align: center;
    margin: 250px auto;
    left: 36%;
}

.left-menu-bottom {
    position: absolute;
    bottom: 70px;
}

/*ticket tracker */
.timer-wrapper052017 {
    background: #ffffff;
    position: fixed;
    overflow: hidden;
    left: 56px;
    bottom: 12px;
    width: 210px;
    height: 60px;
    /* background-image: linear-gradient(-180deg, #DEFFD5 0%, #7BDDBB 100%); */
    padding: 5px 10px 5px 10px;
    z-index: 100;
    border-radius: 3px;
    -webkit-box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.2);
}

.timer-wrapper052017 > .t-ticket-details {
    display: block;
    height: 20px;
}

.t-ticket-details > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.t-ticket-details > ul > li {
    display: inline-block;
}

.t-ticket-id {
    /* Ticket - Duo-40914: */
    /*font-family: Avenir-Medium;*/
    float: left;
    font-size: 10px;
    color: #9a9e9b;
    letter-spacing: 1.21px;
    text-align: left;
}

.ticket-link:hover {
    text-decoration: underline;
    color: #6f7569;
}

.t-link-icon {
    text-align: right;
    float: right;
    font-size: 9px;
    text-decoration: underline;
    color: #888e82;
    cursor: pointer;
}

.t-link-icon:hover {
    color: #6f7569;
}

.t-timer-count {
    /* 00:00:03: */
    font-family: 'Avenir-Heavy', sans-serif;
    font-size: 15px;
    color: #223448;
    letter-spacing: 2.22px;
    text-align: left;
    float: left;
}

.t-action {
}

.timer-action-menu {
    position: absolute;
    right: 5px;
    top: 16px;
}

.timer-action-menu > ul > li {
    display: inline-block;
}

.t-action > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.t-action > ul > li {
    display: inline-block;
}

.run-timer {
    /* Oval 18: */
    width: 30px;
    height: 30px;
    border-radius: 100%;
    text-align: center;
    margin: 0 auto;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.50);
    padding-top: 6px;
}

.run-timer.active {
    background: #efffee;
}

.run-timer.disable {
    background: #e0ecd3;
}

.run-timer > i {
    font-size: 19px;
    color: #91d346;
    padding-left: 6px;
    padding-top: 0px;
}

.run-timer.disable > i {
    color: #e2e6dd;
}

.run-timer.active > i {
    color: #91d346;
}

.timer-pause,
.run-timer,
.timer-stop {
    margin-right: 10px;
    cursor: pointer;
}

.timer-stop.active > i {
    color: #e87777;
}

.timer-stop.disable > i {
    color: #f9f9f9;
}

.timer-pause.active > i {
    color: #747574;
}

.timer-pause.disable > i {
    color: #f9f9f9;
}

.slideInLeft > i {
    color: #ffffff;
}

.selected-tab {
    background: #4E2370 !important;
}

.selected-tab > div > i {
    color: #ffffff;
}

#mobile-menu {
    display: none;
}

.notification-count {
    width: 20px;
    height: 20px;
    top: 0px;
    right: 8px;
    text-align: center;
    font-size: 8px;
    /*padding-top: 4px;*/
    padding-left: 0px;
    color: #fff;
}

/* active timer */
/* Pure CSS Loading Clock Using a Single Div */
.loading-clock {
    margin: 0 auto;
    width: 25px;
    height: 25px;
    border: 2px solid #cacbca;
    border-radius: 100%;
    position: relative;
}

.loading-clock:before,
.loading-clock:after {
    position: absolute;
    display: block;
    content: "";
    width: 2px;
    left: 10px; /* half width of clock - half width of hand */
    background: #e7855e;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

/* Animations */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Big hand */
.loading-clock:before {
    top: 5px;
    height: 7px; /* half the width/height of the clock */
    transform-origin: 1px 15px;
    /*animation: rotate .35s infinite linear;*/
}

/* Little hand */
.loading-clock:after {
    top: 2px;
    height: 8px; /* top + height for little hand must = top + height for big hand */
    transform-origin: 1px 9px;
    animation: rotate 4.2s infinite linear; /* time should be big-hand time * 12 */
}

/* Structure */
json-tree {
    box-sizing: border-box;
}

json-tree *,
json-tree *:before,
json-tree *:after {
    box-sizing: border-box;
}

json-tree .key {
    vertical-align: middle;
}

json-tree .expandable {
    position: relative;
}

json-tree .expandable::before {
    pointer-events: none;
}

json-tree .expandable::before,
json-tree .expandable > .key {
    cursor: pointer;
}

json-tree .branch-preview {
    display: inline-block;
    vertical-align: middle;
}

/* Looks */
json-tree ul {
    padding-left: 20px;
}

json-tree li,
json-tree ul {
    list-style: none;
}

json-tree li {
    line-height: 1.5em;
}

json-tree .key {
    color: #D02828;
    padding: 5px 10px 5px 15px;
}

json-tree .key::after {
    content: ':';
}

json-tree json-node.expandable::before {
    content: '\25b6';
    position: absolute;
    left: 0px;
    font-size: 10px;
    -webkit-transition: -webkit-transform .1s ease;
    transition: -webkit-transform .1s ease;
    transition: transform .1s ease;
    transition: transform .1s ease, -webkit-transform .1s ease;
}

json-tree json-node.expandable.expanded::before {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

json-tree .leaf-value,
json-tree .branch-preview {
    word-break: break-all;
}

json-tree .branch-preview {
    overflow: hidden;
    font-style: italic;
    max-width: 40%;
    height: 1.5em;
    opacity: .7;
}

/*agent summary widget */
.section-wrapper05201 {
    width: 200px;
    min-height: 90px;
    background: #fff;
    /*overflow: hidden;*/
    position: relative;
    z-index: 10000;
    border-radius: 5px;
    display: block;
    box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.12);
}

.section-wrapper05201::before {
    /*content: '';*/
    /*width: 0;*/
    /*height: 0;*/
    /*border-left: 50px solid transparent;*/
    /*border-right: 50px solid transparent;*/
    /*border-bottom: 100px solid red;*/
}

.a-summary05201-left {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: inline-block;
    float: left;
    -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 15px 15px 6px;
}

.a-summary05201-right {
    display: inline-block;
    width: 200px;
    height: 135px;
    /*overflow: hidden;*/
    position: relative;
    background: #82E9A0;
    float: right;
}

.a-summary05201-right:before {
    content: '';
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-left: 22px solid #e4f7d2;
    border-bottom: 20px solid transparent;
    position: absolute;
    left: -13px;
    top: 32px;
}

.tooltip-transparent + .tooltip > .tooltip-inner {
    background-color: transparent;
    opacity: 1;
    z-index: 10000 !important;
    padding: 0px;
}

.tooltip-transparent + .tooltip.in {
    filter: alpha(opacity=90);
    opacity: 1;
}

.tooltip-transparent + .tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 10px 5px 10px 0;
    border-right-color: #fff;
}

.a-summary-avatar {
    width: 28px;
    height: 20px;
    float: left;
}

.round-a-3-80 {
    width: 80px;
    height: 80px;
    overflow: hidden;
    text-align: center;
    border-radius: 100%;
    background: rgba(130, 233, 159, 0.37);
}

.round-a-2-60 {
    width: 60px;
    height: 60px;
    overflow: hidden;
    margin: 10px auto;
    border-radius: 100%;
    background: rgba(130, 233, 159, 0.49);
}

.round-a-3-40 {
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 100%;
    float: left;
}

.a-summary-desc {
    min-height: 50px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    padding-left: 15px;
}

.a-summary-name {
    /* Emma Isabella: */
    font-family: 'AvenirNext-Bold', sans-serif;
    font-size: 12px;
    color: #223448;
    display: block;
    height: 17px;
    overflow: hidden;
    position: relative;
    letter-spacing: 0.3px;
}

.a-summary-email {
    /* emma@lsabella.com: */
    font-family: 'AvenirNext-UltraLight', sans-serif;
    font-size: 10px;
    color: #223448;
    letter-spacing: 0.3px;
}

.a-summary-error {
    font-family: 'AvenirNext-UltraLight', sans-serif;
    font-size: 12px;
    color: #d0d0d0;
    letter-spacing: 0.3px;
    text-align: center;

}

.a-summary-state > ul {
    list-style: none;
    display: block;
    width: auto;
    margin: 5px auto;
    padding: 0;
    text-align: center;
}

.a-summary-state > ul > li {
    float: left;
}

.a-summary-state > ul > li.a-s-status-txt {
    /* online: */
    font-family: 'AvenirNext-Medium', sans-serif;
    font-size: 8px;
    color: #223448;
}

.a-s-status > .a-state {
    width: 5px;
    height: 5px;
    border-radius: 100%;
}

.online05201 {
    background: #82E9A0;
    /*border: 4px solid rgba(130, 233, 159, 0.28);*/
}

.a-summary-r-wrapper {
    width: 100%;
    min-height: 100px;
    max-height: 200px;
    height: auto;
    overflow: hidden;
    position: relative;
    padding: 23px 5px;
}

.a-summary-r-text {
    /* connect to partner: */
    font-family: 'AvenirNext-UltraLight', sans-serif;
    font-size: 15px;
    text-align: center;
    margin: 0 auto;
    color: #FFFFFF;
    padding-bottom: 18px;
}

.a-s-connect-option {
    width: 36px;
    height: 36px;
    /*overflow: hidden;*/
    position: relative;
    text-align: center;

    border-radius: 100%;
    margin: 0px 10px 0px 0px;
    line-height: 2.6;
}

.a-s-connect-option.online {
    background: #36ba45;
}

.a-s-connect-option.offline {
    background: #565E6B;
}

.a-s-connect-option.busy {
    background: #EA3B3B;
}

.a-s-connect-option > i {
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}

.a-s-connect-option > i:hover {
    color: #fff;
}

.a-s-call-status {
    width: 13px;
    height: 13px;
    background: rgb(255, 255, 255);
    border: 4px solid #82e9a0;
    overflow: hidden;
    border-radius: 100%;
    position: absolute;
    right: -3px;
    top: 2px;
}

.btn-grtn-action > i {
    padding-left: 10px;
    font-size: 50px;
}

.btn-grtn-action.voice-record-active > i {
    color: #EA3B3B;
    animation: leaves 0.5s infinite;
    transform-origin: center;
}

@keyframes leaves {
    from {
        transform: none;
    }
    50% {
        transform: scale(1.54);
    }
    to {
        transform: none;
    }
}

/* voice record css */
.voice-record-wrapper {
    width: 100%;
    height: 50px;
    overflow: hidden;
    position: relative;
}

.record-list-wrapper {
    width: 100%;
    height: 40px;
    overflow: hidden;
    position: relative;
}

.btn-grtn-action > span {
    color: white;
    padding-left: 10px;
}

/*update inbox */
.main-inbox-wrapper05201 {
    margin: 0 -15px;
}

.inbox-right-wrapper05201 {
    position: relative;
    width: 100%;
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5));
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    margin-bottom: 20px;
    border-radius: 5px;
    background: #ffffff;
    overflow: hidden;
    padding:15px;
}

.slimScrollDiv {
    border-radius: 5px;
    overflow: visible !important;
    height: auto;
}

.inbox-left-toggle-wrapper {
    /*position: fixed;*/
    width: 100%;
    background: #ffffff;
    float: left;
    /*height: 600px !important;*/
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    border-radius: 5px;
}

.i-left-top-wrapper {
    min-height: 35px;
    background: #ffffff;
    padding: 6px 12px 5px 12px;
    border-bottom: 1px solid #E6E6E6;
    margin: 0 8px;
    border-radius: 0px;

    background-color: rgba(255, 255, 255, 0.8);
}

.i-right-top-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-bottom:1px solid #E6E6E6;
}

.count-inline-row {
    width: 100%;
    min-height: 30px;
    /*overflow: hidden;*/
    position: relative;
}

.count-inline-row > ul > li {
    display: inline-block;
}

ul > li > h5.header {
    /* TICKET FILTER: */
    margin: 7px 0;
    font-size: 14px;
    color: #808080;
    text-transform: capitalize;
}

ul > li > h5.header > i {
    padding-right: 10px;
    cursor: pointer;
    color: #EE437E;
    font-size: 12px;
}

.ul > li > h5.header > i:hover {
    color: #223448;
}

.count-right {
    float: right;
}

.inline-t-count {
    width: 30px;
    height: 20px;
    overflow: hidden;
    position: relative;
    text-align: center;
    padding: 4px 7px 0px 7px;
    /* font-size: 13px; */
    margin-top: 2px;
    font-size: 12px;
}
.inline-count-pill {
    display: inline-block;
    padding: 0px 5px;
    background: #eee;
    color: #888;
    border-radius: 20px;
    margin-left: 5px;
    font-size: 13px;
    line-height: 19px;
}
.inline-count-pill.count-on {
    background: #EE437E;
    color: #fff;
}

.filter-search-wrapper {
    width: 100%;
    padding-top: 7px;
}

.search-txt05201 {
    /* Rectangle 45: */
    background: #FAFCFE;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    /* search filter here…: */
    font-family: 'AvenirNext-Regular', sans-serif;
    font-size: 13.67px;
    color: #B3B6B3;
    letter-spacing: 0.6px;
    border: 0px;
}

.gray800 {
    /* Rectangle 3: */
    background: #9B9998;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.28);
    border-radius: 38px;
    color: #ffffff;
}

.i-left-wrap {
    width: 30%;
    height: 100px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    float: left;
}

.inbox-h-top-left-wrapper {
    display: block;
    margin-left:-15px
}

.inbox-header-left05201 {
    overflow: hidden;
    display: block;
}

.inbox-title > h4 {
    /* All Tickets -: */
    padding: 15px 0;
    font-size: 18px;
    text-transform: capitalize;
    margin:0;
}

.inbox-title > h4 > small {
    /* 15 Total: */
    font-family: 'AvenirNext-Regular', sans-serif;
    font-size: 10px;
    color: #B3B6B3;
    letter-spacing: 0.62px;
}

.inbox-sort-option {
    display: block;
    margin-top: 0px;
}

.sort-option-select {
    font-family: 'AvenirNext-Regular', sans-serif;
    color: #9B9B9B;
    width: 120px;
    height: 30px;
    background: transparent;
    border: 0px;
    font-size: 12px;
}

.sort-option > li {
    display: inline-block;
}

.sort-option > li.title > small {
    /* Sort by :: */
    font-family: 'AvenirNext-Regular', sans-serif;
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: 0.42px;
}

.i-top-navigation {
    display: block;
    float: right;
    margin-right:-7px;
}

ul.i-top-navigation > li {
    display: inline-block;
}

/*ticket filter */
.i-left-t-filter-wrapper {
    /*width: 100%;*/
    /*min-height: 150px;*/
    /*overflow: hidden;*/
    /*position: relative;*/
    /*background: #F9FBFE;*/
}

.i-inbox-header-wrp {
    min-height: 35px;
    overflow: hidden;
    position: relative;
    padding: 6px 12px 5px 12px;
    margin: 10px;
    border-bottom: 1px solid #E6E6E6;
}

.clickable-menu-item {
    cursor: pointer;
    transition: background 0.3s;
    margin-bottom: 0;
}

.clickable-menu-item:hover {
    background: #fafafa;
    transition: background 0.3s;
}

.i-left-inbox-wrapper {
    width: 100%;
    /*min-height: 150px;*/
    overflow: hidden;
    position: relative;
    /*background: #ffffff;*/
}

.customer-style-ul > ul > li {
    display: inline-block;
}

.ticket-filter-body {
    width: 100%;
    min-height: 45px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    padding:0 10px 0 10px;

    box-shadow: inset 0 0 0 0 #fff;
    -webkit-transition: all ease 0.8s;
    -moz-transition: all ease 0.8s;
    transition: all ease 0.8s;
}

.t-f-wrp {
    width: 100%;
    min-height: 42px;
    overflow: hidden;
    position: relative;
    padding: 0 10px;
}

.text-decoration {
    text-decoration: line-through;
}

.t-f-ul > li > .t-filter-name {
    float: left;
    /* Open Ticket: */
    font-family: "AvenirNextLTPro-Regular", Courier, monospace;
    font-size: 12px;
    color: #9B9998;
    padding: 14px 0px 0px 12px;
    text-transform: capitalize;
    width: calc(100% - 46px);
}

.t-filter-todo {
    color: #546E7A;
}

.t-filter-progress {
    color: #F15A24;
}

.t-filter-done {
    color: #39B54A;
}

.t-f-ul > li > .t-filter-name.count0 {
    color: #dfdddc;
}

.t-f-ul > li > .t-item-count {
    float: right;
    margin-top: 12px;
}

.t-item-count {
    /* Rectangle 2: */
    width: 30px;
    height: 20px;
    border-radius: 51px;
    overflow: hidden;
    position: relative;
    text-align: center;
    color: #ffffff;
    font-size: 10px;
    padding-top: 4px;
}

.t-item-count.count-loading > i {
    color: #dfdddc;
    margin-top: 3px;
}

.t-item-count.green {
    background: #82E9A0;
    box-shadow: 0 2px 6px 0 #82E9A0;
}

.t-item-count.black {
    background: #FFDEEB;
    color: #EE437E;
}

.t-item-count.red {
    /* Rectangle 2: */
    background: #F36B5B;
}

.ticket-filter-body:hover,
.ticket-filter-body.t-active-menu {
    /*box-shadow: inset 0 100px 0 0 #ffffff;*/
}

.t-active-menu{
    background: #f5f5f5;
}

.i-filter-bar-wrapper {
    width: 100%;
    height: 45px;
    background: #ffffff;
    /* Rectangle 49:
    box-shadow: 9px 7px 10px 0px rgba(0, 0, 0, 0.09);*/
}

.t-f-wrp > li {
    display: inline-block;
    margin-right: 10px;
}

.t-f-wrp > li.check-box-item {
    /*padding-top: 13px;*/
}

.i-f-b-wrapper {
    width: 100%;
    padding: 6px 0px 14px 0px;
}

.t-f-btn-wrp {
    /* Rectangle 52: */
    background: rgba(173, 231, 118, 0.33);
    border-radius: 5px;
    /* Close: */
    font-family: "AvenirNextLTPro-Regular", Courier, monospace;
    font-size: 11px;
    color: #8FD539;
    padding: 6px 10px;
    cursor: pointer;
}

.c-check-box {
    margin-top: 0px;
    margin-bottom: 0px;
}

/* ticket list item wrapper */
.t-list-header {
    display: block;
    width: 100%;
    min-height: 30px;
    overflow: hidden;
    position: relative;
    padding: 10px 15px 5px 15px;
}

.t-list-h {
    /* ASSIGNEE BY: */
    font-family: "AvenirNextLTPro-Bold", Courier, monospace;
    font-size: 12px;
    color: #666667;
    text-transform: uppercase;
    display: inline-block;
}

.header-check {
    width: 5%;
}

.header-assignee {
    width: 15%;
}

.header-subject {
    width: 20%;
}

.header-pri,
.header-status {
    width: 15%;
}

.header-created,
.header-type,
.header-more {
    width: 9%;
}

.t-list-view-wrapper {
    width: 100%;
    height: 55px;
    padding: 5px 15px;
}

.t-list-view-body {
    width: 100%;
    height: 60px;
    overflow: hidden;
    position: relative;
    background: #FFFFFF;
    padding-top: 5px;
    cursor: pointer;
}

.t-list-view-body td{
    vertical-align: middle !important;
}

.t-list-view-body:nth-of-type(odd) {
    background-color:#F2F4F8;
    border-radius: 5px;
}

.t-list-view-body:nth-of-type(odd) td:first-child{
    border-radius: 5px 0 0 5px;
}

.t-list-view-body:nth-of-type(odd) td:last-child{
    border-radius: 0 5px 5px 0;
}

.t-list-view-body:hover,
.t-list-view-body:focus {
    background-position: right bottom;
}

.inline-assignee > li {
    float:left;
}

.t-assignee-avatar {
}

.t-assignee-avatar > img {
    border-radius: 100%;
}

.inline-assignee {
    width:120px;
}

.t-assignee-name {
    font-family: "AvenirNextLTPro-Regular", Courier, monospace;
    font-size: 14px;
    color: #4A4A4A;
    text-transform: capitalize;
    padding-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 84px;
    padding-top: 8px;
}

.t-i-desc {
    font-family: "AvenirNextLTPro-Regular", Courier, monospace;
    font-size: 14px;
    color: #4A4A4A;
    text-transform: none;
    text-align: left;
}

.t-i-priority,
.t-status {
    /*padding-top: 12px;*/
}

.priority-view,
.t-status-view {
    min-width: 36px;
    height: 22px;
    text-align: center;
    position: relative;
    font-size: 12px;
    border-radius: 5px;
    padding-top: 3px;
    overflow: hidden;
    font-weight: 700;

}

.priority-view.low,
.t-status-view.closed {
    /* Rectangle 53: */
    background: #ECEFF1;
    color: #546E7A;
}

.t-status-view.new {
    background: rgba(130, 233, 159, 0.19);
    color: #82E9A0;
    /*box-shadow: 0 0 15px 0 rgba(130, 233, 159, 0.29);*/
}

.t-status-view.progressing {
    background: rgba(130, 233, 159, 0.19);
    color: #82E9A0;
    /*box-shadow: 0 0 15px 0 rgba(130, 233, 159, 0.29);*/
}

.priority-view.normal {
    background: #DCFFDF;
    color: #39B54A;
}

.priority-view.urgent {
    background: #FFCDD2;
    color: #BE1E2D;
}

.priority-view.high {
    background: #FFE3DC;
    color: #F15A24;
}

.t-status-view.open {
    /* Rectangle 53: */
    background: rgba(173, 231, 118, 0.33);
    border-radius: 4px;
    color: #8FD539;
}

/*.t-status-view.close {*/
/*!* Rectangle 53: *!*/
/*background: rgba(209, 218, 226, 0.40);*/
/*color: #8298AE;*/
/*}*/

.t-i-type-wrp {
    /* padding-top: 7px;*/
}

.t-type-wrapper {
    width: 36px;
    height: 36px;
    background: #e9e9e9;
    border-radius: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
    font-size: 15px;
    margin: 0 auto;
    line-height: 2.6;
}

.t-i-more-wrp {
    padding-top: 17px;
}

.t-i-tbody > tr > td,
.t-i-tbody > tr > th {
    border: 0px !important;
    text-transform: capitalize;
}

.t-i-list-wrapper {
    padding-left: 10px;
    padding-right: 10px;
}

.margin-0 {
    margin: 0 !important;
}

.top-check-all {
    margin-top: 1px !important;
}

.i-ticket-check {
    padding-top: 13px;
}

/*ticket pager customer style */
.ticket-pager.pager {
    padding: 0;
    margin: 0;
}

.ticket-pager.pager li > a,
.ticket-pager.pager li > span {
    display: inline-block;
    padding: 5px 8px;
    background: #F9F3FF;
    font-size: 14px;
    color: #682F8E;
    border:none;
}

.ticket-pager.pager li:first-child a{
    border-radius:12px 0 0 12px;
}

.ticket-pager.pager li:last-child a{
    border-radius:0 12px 12px 0;
}

.ticket-pager.pager li + li {
    border-right:2px solid #ffffff;
}

.pager-count {
    font-size: 12px;
    color: #B3B6B3;
    position: relative;
    top:4px;
}

.loading-svg {
    width: 50px;
    height: 50px;
    margin: 200px auto;
}
.loading-phone-svg {
    width: 50px;
    height: 50px;
    margin: 80px auto;
}
.t-i-main-loader {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 120px;
    left: 15px;
    background: rgba(255, 255, 255, 0.99);
}

.disable-scroll {
    overflow: hidden;
}

.btn-refresh {
    font-size: 14px;
    padding: 7px 6px 0px 6px;
    cursor: pointer;
    width: 30px;
    height: 30px;
}

.btn-refresh:hover {
    color: #777;
    /*cursor: not-allowed;*/
    background-color: #fff;
}

.console-menu-icon > i.notification-success {
    color: #B3B3B3;
}

.selected-short {
    height: 30px;
    background: #ffffff;
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
}

/* Ticket inbox subject filter. .selected-short sets no width, and .form-control is width:100% on a
   shrink-to-fit li, so a select would size itself to its longest subject name. The filter bar is a
   fixed 45px with overflow:hidden, meaning anything that wraps to a second row is clipped rather
   than scrolled - so this control gets an explicit width. */
.subject-filter-control {
    width: 140px;
    text-overflow: ellipsis;
}

/*update new dashboard UI */
.d-main-wrapper05201 {
    width: 100%;
    height: 100%;
}

.d-widget-main-wrp {
    width: 100%;
    overflow: hidden;
    position: relative;
    background-color: #ffffff;
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    margin-bottom: 20px;
    border-radius: 5px;
}

.d-widget-main-wrp .collapse {
    padding:0 0 15px;
}

header.widget-main-header {
    width: auto;
    overflow: hidden;
    position: relative;
    border-radius: 5px 5px 0 0;
    background-color: #fff;
    -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-bottom: 20px;
}

header.widget-main-header > .d-header-wrp {
    /* MY PRODUCTIVITY: */
    display: inline-block;

}


header.widget-main-header > .d-header-wrp > h3 {
    font-size: 18px;
    color: #4D4D4E;
    display: inline-block;
    margin: 0;
    text-transform: capitalize;
}

header.widget-main-header > .d-header-wrp > i {
    display: inline-block;
    color: #EE437E;
    font-size: 15px;
    cursor: pointer;
    padding-left: 20px;
}

header.widget-main-header > .d-header-wrp > i:hover {
    color: rgba(150, 150, 150, 1);
}

.d-widget-w {
    position: relative;
    width: 100%;
    min-height: 250px;
    background: #ffffff;
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    border-radius: 5px;
}

.d-widget-w-340 {
    min-height: 351px;
}

.d-widget-w-308 {
    min-height: 308px;
}

.d-widget-w.light-blue {
    background: #F2F4F8;
}

.d-note-summary.gradient-green {
    /* Rectangle 21: */
    /* Rectangle 21: */
    /* Rectangle 21: */
    /* Rectangle 21: */
    background-image: linear-gradient(-180deg, #2DE1AA 0%, #8ED439 100%);
}

.d-call-s-wrap05201 {
    width: 100%;
    min-height: 130px;
    overflow: hidden;
    position: relative;
    display: block;
    padding: 15px 15px 0px 15px;
}

.d-call-count-w {
    display: inline-block;
    background: #F2F4F8;
    width: 100%;
    padding: 13px 15px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.d-call-count-w > .d-c-count,
.d-call-count-w > .d-c-name,
.d-call-count-w > .d-c-type {
    display: block;
    text-transform: uppercase;
}

.d-call-count-w > .d-c-count,
.d-call-count-w > .d-c-name {
    font-family: 'AvenirNext-Regular', sans-serif;
}

.d-call-count-w > .d-c-count {
    /* 00:00:00: */
    font-size: 24px;
    color: #4D4D4E;
    height: 28px;
    font-weight: 700;
}

.d-call-count-w > .d-c-name {
    /* On Call Time: */
    font-size: 14px;
    color: #223448;
    letter-spacing: 1.62px;
}

.d-call-count-w > .d-c-type {
    /* Inbound: */
    font-family: "AvenirNext-Bold", sans-serif;
    font-size: 10px;
    letter-spacing: 0.72px;
}

.d-call-count-w > .d-c-type.outbound {
    /* outbound: */
    color: #F2A183;
}

.d-call-count-w > .d-c-type.inbound {
    /* outbound: */
    color: #65C0E0;
}

.d-performance-wrapper {
    width: 100%;
    min-height: 55px;
}

.d-call-performance05201 {
    width: 100%;
    /*min-height: 50px;*/
    overflow: hidden;
    position: relative;
    /*border-top: 1px solid #EEEEEE;*/
    background: #fdfdfd;
    border-radius: 5px;
}

.w-inside-h {
    /* SUMMARY: */
    font-family: 'AvenirNext-Regular', sans-serif;
    font-size: 11px;
    color: rgba(150, 150, 150, 1);
    letter-spacing: 1.32px;
    display: block;
    text-transform: uppercase;
    padding-left: 15px;
    padding-bottom: 7px;
    padding-top: 10px;
}

.d-call-performance05201 > .d-call-performance05201 {
    display: block;
    width: 100%;
}

.d-p-s-count > .d-p-s-value,
.d-p-s-count > .d-p-s-header {
    text-align: center;
    text-transform: uppercase;
}

.d-p-s-count > .d-p-s-value {
    /* 80%: */
    font-family: 'AvenirNext-Regular', sans-serif;
    font-size: 15px;
    color: #B3B6B3;
}

.d-p-s-count > .d-p-s-header {
    /* MISSED: */
    font-family: 'AvenirNextLTPro-Demi', sans-serif;
    font-size: 13px;
    color: #223448;
}

.d-p-s-value > .d-performance-status {
    display: inline-block;
}

.d-performance-status > i {
    font-size: 15px;
}

.d-performance-status.down > i {
    color: #EA3B3B;
}

.d-performance-status.up > i {
    color: #82E9A0;
}

.d-performance-status.up > i.ti-arrow-down {
    display: none;
}

.d-performance-status.down > i.ti-arrow-up {
    display: none;
}

.d-w-boarder-left {
    border-right: 1px solid #EEEEEE;
}

.d-p-wrapper {
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    position: relative;
    /*padding-bottom: 15px;*/
    background: #F2F4F8;
}

.d-p-chart-wrp {
    padding-top: 25px;
    background: #fff;
    padding-bottom: 10px;
    margin-left: -15px;
}

.widget-h {
    /* PRODUCTIVITY - HOURS: */
    font-size: 13px;
    color: #9B9998;
    text-transform: uppercase;
    font-size: 14px;
    color: #4D4D4E;
    text-transform: capitalize;
    font-weight: 700;
}

.widget-h.white-txt {
    color: #ffffff !important;
}

.widget-h.p-15 {
    padding: 15px;
}

.p-grph {
    width: 230px;
    height: 230px;
    text-align: center;
    margin: 0 auto;
    padding-bottom: 10px;
}

.d-productivity-s-right {
    width: 100%;

}

.d-p-inline-summary {
    width: 100%;
    min-height: 20px;
    overflow: hidden;
    position: relative;
    display: block;
    padding: 15px 0 0;
}

.d-p-inline-summary.gray-row {
    /*background: rgba(150, 150, 150, 0.04);*/
}

.d-p-inline-summary.white-row {
    /*background: #FFFFFF;*/
}

.d-p-inline-summary > .d-left-header,
.d-p-inline-summary > .d-right-value {
    display: inline-block;
    font-family: "AvenirNextLTPro-Demi", sans-serif;
    font-size: 13px;
    letter-spacing: 1.22px;
    text-transform: capitalize;
}

.d-p-inline-summary > .d-left-header {
    text-align: left;
}

.d-p-inline-summary > .d-right-value {
    text-align: right;
    float: right;
}

.d-left-header.d-missed,
.d-right-value.d-missed {
    color: #EA3B3B;
}

.d-left-header.d-inbound,
.d-right-value.d-inbound {
    color: #8A8E86;
}

.d-note-widget05201 {

}

.widget-header-wrapper {
    width: 100%;
    min-height: 20px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #EEEEEE;
    padding: 15px;
}

.widget-scr-body-note {
    width: 100%;
    height: 293px;
    overflow: hidden;
    position: relative;
    /*padding: 5px 10px 5px 14px;*/
}

.widget-scr-body-call-s {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
}

.d-note-row-wrapper {
    width: 100%;
    min-height: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Rectangle 57: */
    border-bottom: 1px solid #EEEEEE;
    /*margin-bottom: 5px;*/
    padding-bottom: 5px;
}

.even-row:nth-child(even) {
    background: #FAFCFE;
}

.d-note-des-wrp > .d-note-subject {
    /* Why Do We Use It?: */
    font-family: "AvenirNextLTPro-Demi", sans-serif;
    font-size: 12px;
    color: #B3B6B3;
    letter-spacing: 0.36px;
    padding-top: 10px;
    padding-bottom: 2px;
}

.d-note-des-wrp > .d-note-body {
    font-family: "AvenirNext-Regular", sans-serif;
    font-size: 10px;
    color: #9B9998;
    letter-spacing: 0.76px;
    line-height: 10px;
}

.note-d-h-1.d-note-1,
.note-d-h-3.d-note-1 {
    /* FRI 24: */
    font-size: 11px;
    color: #223448;
    letter-spacing: 0.36px;
    text-align: left;
}

.note-p05201 {
    left: 82%;
    top: 24px;
}

.note-p05201 > .note-type {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.note-p05201 > .note-type.low {
    background: #ffa918;
}

.note-p05201 > .note-type.normal {
    background: #37dba9;
}

.note-p05201 > .note-type.urgent {
    background: #4383c4;
}

.note-p05201 > .note-type.high {
    background: #fb5f21;
}

.d-t-grph {
    padding: 0px 20px 20px 15px;
    margin: 0 auto;
}

.widget-r-header {
    font-size: 10px;
    text-transform: uppercase;
    min-height: 33px;
    overflow: hidden;
    background: #f7f5f5;
    padding: 10px;
}

.d-ticket-summary-wrp {
    width: 100%;
    min-height: 100px;
    overflow: hidden;
    position: relative;
    padding-top: 60px;
    margin: 0 auto;
}

.activity-not-img {
    width: 120px;
    height: 120px;
    overflow: hidden;
    position: relative;
    border-radius: 100%;
    margin: 0px auto;
    margin-top: 55px;
    border: 8px solid rgba(188, 232, 207, 0.27);
}

.activity-not-found > .activity-not-ftext {
    font-family: "AvenirNextLTPro-Demi", sans-serif;
    font-size: 12px;
    text-align: center;
    margin-top: 20px;
    letter-spacing: 2px;
}

/* preview notification wrapper*/
.preview-notification-wrapper {
    position: fixed;
    width: 300px;
    right: 30px;
    top: 20%;
    overflow: hidden;
    z-index: 2000;
    background: #FFFFFF;
    box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.48);
    border-radius: 5px;
}

.p-ndata-wrp {
    width: 300px;
    height: 200px;
    padding: 0px 10px;
    overflow: auto;
}

.p-noti-action-panel {
    width: 300px;
    height: 40px;
    background: #2f4762;
    text-align: center;
    padding-top: 11px;
    font-family: 'AvenirNext-Regular', sans-serif;
}

.p-noti-action-panel > div {
    display: block;
    color: #223448;
    font-size: 13px;
    cursor: pointer;
    letter-spacing: 0.9px;
}

.p-noti-action-panel > div.accepted {
    border-right: 1px solid #7c7d7c;
    color: #45bf55;
}

.p-noti-action-panel > div.reject {
    color: #d90000;
}

.p-noti-action-panel > div:hover {
    font-family: 'AvenirNext-Bold', sans-serif;
}

.p-ndata-header {
    width: 300px;
    height: 40px;
    overflow: hidden;
    padding: 13px 10px 0 10px;
    background: #2f4762;
    margin-bottom: 4px;
    border-radius-topleft: 0;
    border-radius-topright: 0;
}

.p-ndata-header > h3 {
    font-family: 'AvenirNext-Bold', sans-serif;
    font-size: 15px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #fff;
    margin: 0px;
}

/* animation priview panel */
.preview-animation-outer {
    animation: phone-outer 7000ms infinite;
}

@keyframes phone-outer {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/*end preview */

.d-ticket-summary-row {
    width: 100%;
    min-height: 30px;
    padding: 20px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #EEEEEE;
}

.d-ticket-summary {
    /* CREATED TICKETS: */
    font-family: 'AvenirNext-Bold', sans-serif;
    font-size: 13px;
    letter-spacing: 1.02px;
}

.d-ticket-summary.create {
    color: #2DE1AA;
}

.d-ticket-summary.close-t {
    color: #76DDFB;
}

.d-ticket-summary.in-progress-t {
    color: #FFAA00;
}

.widget-r-icon {
    width: 25px;
    height: 25px;
    overflow: hidden;
    position: relative;
    text-align: center;
    border-radius: 100%;
    background: rgba(150, 150, 150, 0.52);
    padding-top: 3px;
    cursor: pointer;
    float: right;
    margin-left: 8px;

}

.widget-r-icon.lg-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    float: inherit;
    padding-top: 10px;
}

.widget-r-icon:hover {
    /* Oval: */
    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.10);
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    transform: scale(1.1);
}

.widget-r-icon > i {
    color: #ffffff;
    font-size: 12px;
}

.widget-r-icon.lg-icon > i {
    font-size: 25px !important;
}

.notices-img {
    width: 100%;
    height: 170px;
    overflow: hidden;
    position: relative;
}

.notice-title {
    font-family: "AvenirNextLTPro-UltLt", sans-serif;
    font-weight: bold;
    font-size: 20px;
    display: block;
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: underline;
    color: #ffffff;
}

.notice-message {
    display: block;
    font-size: 24px;
    font-family: "AvenirNextLTPro-UltLt", sans-serif;
    padding-left: 7px;
    word-wrap: break-word;
}

.notice-priority-low {
    background-color: #626262; /* Low priority color */
    color: #FFFFFF !important;
    padding-left: 10px;
    padding-right: 10px;
    width: fit-content;
    border-radius: 2px;
}

.notice-priority-medium {
    background-color: #00b24c; /* Medium priority color */
    color: #FFFFFF !important;
    padding-left: 10px;
    padding-right: 10px;
    width: fit-content;
    border-radius: 2px;
}

.notice-priority-high {
    background-color: #d21b30; /* High priority color */
    color: #FFFFFF !important;
    padding-left: 10px;
    padding-right: 10px;
    width: fit-content;
    border-radius: 2px;
}

.notice-priority-urgent {
    background-color: #d21b30;
    color: #FFFFFF !important;
    padding-left: 10px;
    padding-right: 10px;
    width: fit-content;
    border-radius: 2px;
}

.notice-priority {
    font-size: 16px;
    font-family: "AvenirNextLTPro-UltLt", sans-serif;
}

.notice-footer {
    display: block;
    padding-left: 21px;
    /* Rectangle 64: */
    border-top: 1px solid #f7f5f5;
    margin-top: 10px;
}

.notice-footer-item {
    border-top: 1px solid #f7f5f5;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 6px;
}

.time-ago {
    font-family: "AvenirNextLTPro-Bold", sans-serif;
    color: #ffffff;
    font-size: 12px;
}

.image-text-wrapper {
    color: #ffffff;
    padding: 10px;
}

.notices-img > img {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.notice-application {
    height: 130px;
    padding-top: 38px;
}

.download-text {
    font-family: "AvenirNextLTPro-Bold", sans-serif;
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    padding-top: 10px;
    cursor: pointer;
}

.float-right {
    float: right;
}

.notice-footer-icon {
    margin-top: 5px;
    margin-right: 5px;
}

.h-button {
    padding: 5px 10px 3px 10px;
    /*border-radius: 5px;*/
    text-transform: capitalize;
    cursor: pointer;
    position: relative;
}

.h-button:hover{
    /*background-color: #000000;*/
    border-bottom: solid 2px #EE437E;
}

.h-button.active {
    /*background: #EE437E;*/
    /*color: #fff;*/
    /*font-size: 12px;*/

    border-bottom: solid 2px #EE437E;
    color: #EE437E;
    font-size: 14px;
    border-radius: 0;
}

.dynamic-form .btn {
    display: inline-block;
    float:right;
    margin-left:20px;
    margin-bottom:20px;
}

.d-new-note-wrapper {
    width: calc(100% - 30px);
    height: 285px;
    background: #F2F4F8;
    position: absolute;
    top: 0;
    right: -100%;
    opacity: 0;
    z-index: 1;
    border-radius: 5px;
}

.elastic {
    animation: elastic 1s;
    left: 15px;
    opacity: 1;
}

@keyframes elastic {
    0% {
        -webkit-transform: scale3d(0, 0, 1);
    }
    25% {
        -webkit-transform: scale3d(1, 1.2, 1);
    }
    50% {
        -webkit-transform: scale3d(1, 0.85, 1);
    }
    75% {
        -webkit-transform: scale3d(1, 1.05, 1)
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
    }
}

.gored {
    background-color: #e7855e;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
}

/*svg aniamtion */
svg {
    overflow: visible;
}

.st11-animation {
    animation: animationFrames 4s linear infinite;
    transform-origin: 50% 50%;
    -webkit-animation: animationFrames 4s linear infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: animationFrames 4s linear infinite;
    -moz-transform-origin: 50% 50%;
    -o-animation: animationFrames 4s linear infinite;
    -o-transform-origin: 50% 50%;
    -ms-animation: animationFrames 4s linear infinite;
    -ms-transform-origin: 50% 50%;
}

@keyframes animationFrames {
    0% {
        transform: translate(0px, 0px);
    }
    3% {
        transform: translate(-10px, 0px);
    }
    6% {
        transform: translate(0px, 0px);
    }
    9% {
        transform: translate(10px, 0px);
    }
    12% {
        transform: translate(0px, 0px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

@-moz-keyframes animationFrames {
    0% {
        -moz-transform: translate(0px, 0px);
    }
    3% {
        -moz-transform: translate(-10px, 0px);
    }
    6% {
        -moz-transform: translate(0px, 0px);
    }
    9% {
        -moz-transform: translate(10px, 0px);
    }
    12% {
        -moz-transform: translate(0px, 0px);
    }
    100% {
        -moz-transform: translate(0px, 0px);
    }
}

@-webkit-keyframes animationFrames {
    0% {
        -webkit-transform: translate(0px, 0px);
    }
    3% {
        -webkit-transform: translate(-10px, 0px);
    }
    6% {
        -webkit-transform: translate(0px, 0px);
    }
    9% {
        -webkit-transform: translate(10px, 0px);
    }
    12% {
        -webkit-transform: translate(0px, 0px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
    }
}

@-o-keyframes animationFrames {
    0% {
        -o-transform: translate(0px, 0px);
    }
    3% {
        -o-transform: translate(-10px, 0px);
    }
    6% {
        -o-transform: translate(0px, 0px);
    }
    9% {
        -o-transform: translate(10px, 0px);
    }
    12% {
        -o-transform: translate(0px, 0px);
    }
    100% {
        -o-transform: translate(0px, 0px);
    }
}

@-ms-keyframes animationFrames {
    0% {
        -ms-transform: translate(0px, 0px);
    }
    3% {
        -ms-transform: translate(-10px, 0px);
    }
    6% {
        -ms-transform: translate(0px, 0px);
    }
    9% {
        -ms-transform: translate(10px, 0px);
    }
    12% {
        -ms-transform: translate(0px, 0px);
    }
    100% {
        -ms-transform: translate(0px, 0px);
    }
}

/* suspend mode */
.suspend-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #F9FBFE;
    top: 0;
    bottom: 0;
    z-index: 100;

}

.suspend-msg-wrapper {
    width: 450px;
    height: 360px;
    margin: 120px auto;
    background: #fff;
    position: relative;
    border-radius: 5px;
    box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.06);
}

.s-msg-top {
    height: 300px;
    overflow: hidden;
    position: relative;
}

.s-msg-bottom {
    height: 60px;
    overflow: hidden;
    position: relative;
    border-top: 1px solid #EEEEEE;
}

.suspend-header-txt {
    font-family: "AvenirNextLTPro-Bold", sans-serif;
    text-transform: uppercase;
    padding-top: 20px;
    padding-bottom: 20px;
}

.suspend-header-txt > h5 {
    text-align: center;
    font-size: 18px;
}

.suspend-icon-wrp {
    text-align: center;
    padding-top: 40px;
}

.suspend-i-inline-wrp {
    width: 50px;
    height: 50px;
    overflow: hidden;
    position: relative;
    padding-top: 16px;
    padding-left: 13px;

}

.suspend-i-inline-wrp > i {
    font-size: 30px;
    color: #cecece;
}

.suspend-icon-bullet {
    width: 10px;
    height: 10px;
    position: absolute;
    border-radius: 100%;
    background: #F36B5B;
    border: 2px solid #ffffff;
    top: 19px;
    right: 2px;
}

.footer-msg {
    font-family: "AvenirNextLTPro-Bold", sans-serif;
    text-transform: capitalize;
    text-align: center;
    padding-top: 21px;
    cursor: pointer;
    color: #9ea29f;
}

.suspend-task {
    display: block;
    width: 100%;
    height: 59px;
    background: #f9f9f9;
    border-radius: 5px;
}

.suspend-task-list {
    margin: 0px 40px 8px 40px;
}

.suspend-inline-txt {
    font-family: "AvenirNextLTPro-Bold", sans-serif;
    padding-top: 20px;
    padding-left: 0px;
    color: #adadad;
}

.suspend-task > ul > li {
    padding-right: 5px;
    padding-left: 25px
}

.suspend-header-txt {
    text-align: center;
}

.suspend-header-txt > span {
    font-family: "AvenirNextLTPro-Regular", sans-serif;
    font-size: 14px;
    text-transform: capitalize;
}

.agent-suspend {
    background: #f30715;
}

.transport-error {
    animation: 5s infinite;
}


/*Kasun_Wijeratne_23_JAN_2018*/

/*Floating Engagement Details panel*/
/*.engage-simple-wrap {*/
/*position: fixed;*/
/*!*padding-right: 25px;*!*/
/*top: 105px;*/
/*left: 80px;*/
/*z-index: 1;*/
/*width: auto;*/
/*background: #fff;*/
/*border-radius: 3px;*/
/*-webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);*/
/*-moz-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);*/
/*box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);*/
/*}*/
/*.engage-simple-wrap .engage-state-offset>div {*/
/*width: 35px;*/
/*height: 35px;*/
/*border-radius: 50%;*/
/*background: #fafafa;*/
/*padding: 4px;*/
/*!*border: solid 2px #ccc;*!*/
/*border: solid 2px #e8e8e8;*/
/*right: -10px;*/
/*top: -15px;*/
/*position: absolute;*/
/*}*/
/*.engage-simple-wrap .engage-state-offset>div:nth-child(2) {*/
/*right: 35px;*/
/*}*/
/*.engage-simple-wrap .engage-row {*/
/*padding: 5px 10px;*/
/*width: 100%;*/
/*}*/
/*.engage-simple-wrap .engage-row.bordered {*/
/*border-top: solid 1px #eee;*/
/*background: #f3f8fd;*/
/*}*/
/*.engage-simple-wrap .engage-row.extra-p {*/
/*padding: 20px 15px 15px 15px;*/
/*}*/
/*.engage-simple-wrap .engage-row .engage-item{*/
/*display: inline-block;*/
/*padding: 5px 10px;*/
/*background: #f5f5f5;*/
/*}*/
/*.engage-simple-wrap .engage-row .engage-item.vertical{*/
/*display: inline-block;*/
/*}*/
/*.engage-simple-wrap .engage-row .engage-item.br{*/
/*border-right: solid 1px #eee;*/
/*}*/
/*.engage-simple-wrap .engage-row .engage-item .engage-title{*/
/*font-size: 12px;*/
/*color: #8A8E86;*/
/*letter-spacing: 1px;*/
/*}*/
/*.engage-simple-wrap .engage-row .engage-item .engage-text{*/
/*display: inline!important;*/
/*}*/
/*.engage-simple-wrap .engage-row .engage-item .engage-text>b{*/
/*display: inline!important;*/
/*}*/


/*Merged Engagement Details panel*/
.engage-simple-wrap {
    padding: 0;
    top: 95px;
    left: 85px;
    z-index: 1;
    width: auto;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    overflow: hidden;
    /*margin: 0 15px 20px;*/
}
.engage-simple-wrap .engage-state-offset>div {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #fafafa;
    padding: 4px;
    /*border: solid 2px #ccc;*/
    border: solid 2px #e8e8e8;
    right: -10px;
    top: -15px;
    position: absolute;
}
.engage-simple-wrap .engage-state-offset>div:nth-child(2) {
    right: 35px;
}
.engage-simple-wrap .engage-row {
    /*padding: 15px 15px;*/
    padding: 10px 5px;
    /* width: 100%; */
    /*display: inline-block;*/
    display: block;
    /*height: 60px;*/
    /*text-align: center;*/
}
.engage-simple-wrap .engage-row.rightaligned{
    /*width: 310px;*/
    padding: 10px 6px;
    background: #F9F3FF;
    color: #682F8E;
}
.engage-simple-wrap .engage-row.centeraligned{
    /*width: calc(100% - 427px);*/
}
.engage-simple-wrap .engage-row.leftaligned{
    /*width: 110px;*/
    padding: 10px 6px;
    background: #F9F3FF;
    color: #682F8E;
    margin-bottom: 2px;
}
.engage-simple-wrap .engage-row.bordered {
    width: 110px;
}
.engage-simple-wrap .engage-row.extra-p {
    padding: 20px 15px 15px 15px;
}
.engage-simple-wrap .engage-row .engage-item{
    display: inline-table;
    padding: 0px 10px;
    font-family: 'AvenirNextLTPro-Bold', sans-serif;
    /*background: #f5f5f5;*/
}

.engage-simple-wrap .engage-row .engage-item .li-mu-p-name {
    /*color: #EE437E;*/
    color: #a260ce;
}

.engage-simple-wrap .engage-row .engage-item.secondary .engage-text{
    color: #888;
    font-size: 14px;
    text-transform: uppercase;
}
.engage-simple-wrap .engage-row .engage-item .engage-text.text-state>span{
    text-transform: uppercase;
    font-weight: 700;
    /*display: inline;*/
    display: inline-block;
    /*margin-right: 5px;*/
    color: #888;
    width: 90px;
}
.engage-simple-wrap .engage-row .engage-item.vertical{
    /*display: inline-block;*/
}
.engage-simple-wrap .engage-row .engage-item .engage-text b{
    position: relative;
    top: 2px;
}
.engage-simple-wrap .engage-row .engage-item.bigger .engage-text{
    color: #888;
}
.engage-simple-wrap .engage-row .engage-item.bigger .engage-text b{
    margin: 0 5px;
    font-size: 20px;

    display: inline-block;
    width: auto;
}
.engage-simple-wrap .engage-row .engage-item.br{
    border-right: solid 1px #eee;
}
.engage-simple-wrap .engage-row .engage-item .engage-title{
    font-size: 12px;
    color: #8A8E86;
    /*margin-top: 1px;*/
    /*float: left;*/
    /*margin-right: 6px;*/
    /*font-weight: 700;*/
    /*font-family: 'AvenirNextLTPro-Bold', sans-serif;*/
    /*text-transform: uppercase;*/
    letter-spacing: 1px;

    width: 90px;
    display: inline-block;
    text-transform: uppercase;
}
.engage-simple-wrap .engage-row .engage-item .engage-text{
    display: inline!important;
}
.engage-simple-wrap .engage-row .engage-item .engage-text>b{
    display: inline!important;
}
.engage-simple-wrap .engage-row.rightaligned .engage-item .engage-text>b, .engage-simple-wrap .engage-row.leftaligned .engage-item .engage-text>b{
    top: 1px!important;
}



/*Kasun_Wijeratne_23_JAN_2018 - ENDS */


/*Agent profile timeline*/
timeline-event:nth-of-type(odd) li timeline-panel {
    float:left;
}

timeline-event:nth-of-type(even) li timeline-panel:before {
    /* left: -14px;
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
     right: initial;
     border-left: 15px solid #ccc;
     border-right: 0px solid #ccc;*/
}

timeline-event:nth-of-type(even) li timeline-panel:after {
    /*left: -27px;
    right:inherit;
    border-right: 14px solid #fff;*/
}
timeline-event:nth-of-type(even) li timeline-panel {
    /*float:right;*/
}
/*Agent profile timeline end*/


/*Buttons*/
.btn-template-primary {
    background-color: #FFDEEB;
    color: #EF3F7D;
}

.btn-template-primary:hover {
    background-color: #EF3F7D;
    color: #ffffff;
}


.btn-template-secondary {
    background: #F9F3FF;
    color: #682F8E;
}

.btn-template-secondary:hover {
    background: #682F8E;
    color: #ffffff;
}

.btn-circle {
    border-radius: 50%;
    height: 36px;
    width: 36px;
    text-align: center;
    padding: 0;
    line-height: 2.5;
    outline: none!important;
}

/*Buttons END*/


/*Tooltip overwrite*/
.ui-widget-shadow{
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    border: none!important;
    background: #fff!important;
    color: #EF3F7D!important;
}


/*.fixed_headers {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  
  th { text-decoration: underline; }
  th, td {
    padding: 5px;
    text-align: left;
  }
  
  td:nth-child(1), th:nth-child(1) { min-width: @column_one_width; }
  td:nth-child(2), th:nth-child(2) { min-width: @column_two_width; }
  td:nth-child(3), th:nth-child(3) { width: @column_three_width; }

  thead {
    /*background-color: @header_background_color;
    color: @header_text_color;
    tr {
      display: block;
      position: relative;
    }
  }
  tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: @table_body_height;
    tr:nth-child(even) {
      background-color: @alternate_row_background_color;
    }
  }
}*/


/** Profile Settings Greeting**/

.user-settings--greeting {
    padding: 15px;
    background-color: #F2F4F8;
    border-radius: 5px;
    margin-bottom:20px;
}

.user-settings--greeting .col-lg-8{
    padding: 10px 15px;
}

.user-settings--greeting .col-lg-8 .col-lg-7 {
    padding-left: 0;
}

.user-settings--greeting-buttons {
    float: right;
}

.user-settings--greeting-buttons .btn-greeting {
    float: left;
}

.user-settings--greeting-buttons .btn-greeting + .btn-greeting{
    margin-left: 6px;
}

.user-settings--greeting-available, .user-settings--greeting-notavailable, .user-settings--greeting-upload, .user-settings--greeting-failed   {
    text-align: center;
    float: right;
    padding: 2px 10px;
    border-radius: 30px;
    color: #ffffff;
    width: 100%;
}

.user-settings--greeting-available {
    background-color: #168039;
}

.user-settings--greeting-notavailable {
    background: #8298ae;
}

.user-settings--greeting-upload {
    background: #ff8c00;
}
.user-settings--greeting-failed {
    background: maroon;
}

.user-settings--greeting-status {
    text-align: right;
    padding-right: 0;
}

/***User Image Upload**/

.user-profile--modal-header {
    min-height:60px;
    position: relative;
    border-radius: 5px 5px 0 0;
    background-color: #fff;
    -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin: 0 -15px 20px;
    float: left;
    width: calc(100% + 30px);
}

.user-profile--modal-header h3 {
    margin: 0;
}

.user-profile--modal-footer {
    background: #0d1c34;
    width: calc(100% + 30px);
    height: 60px;
    padding-right: 27px;
    margin: 0px -15px 0;
    padding: 15px;
}

.user-profile--modal-uploader{
    background: #F2F4F8;
    margin: 0px auto 20px;
    padding: 15px;
    float: left;
    width: 100%;
    border-radius: 5px;
}

.user-profile--modal-uploader-wrap {
    margin: 0 -15px;
}

.uploader-title {
    min-height: 20px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #EEEEEE;
    padding: 0 15px 15px;
    margin: 0 -15px 20px;
}


timeline-event .outbound-panel-right:before {
    right: initial;;
    left: -15px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

timeline-event .outbound-panel-right:after {
    right: initial;;
    left: -14px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.main-search-input .dropdown-menu {
    min-width: 312px;
    left:0 !important;
}

.ticket-other bootstrap-decorator {
    float: left;
    width: 100%;
    font-size: 14px;
}

.ticket-other bootstrap-decorator .radio-inline {
    margin:0 15px;
    font-size: 14px;
}

.ticket-other bootstrap-decorator .help-block {
    font-family: 'AvenirNextLTPro-Regular', sans-serif;
    font-size: 14px;
    margin:10px 15px;
}

.ticket-other bootstrap-decorator .control-label{
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #dddd;
    padding: 15px;
    margin: 0 0px 0px;
    width: 100%;
    font-size: 14px;
    background-color: #F2F4F8;
    border-radius: 5px;
}

.contact-info-wr.height-auto {
    height: auto!important;
}

/*Notification panel*/
.notif-panel {
    overflow: hidden;
    padding: 0;
    right: 70px;
    bottom: 0;
    z-index: 200;
    width: 260px;
    height: 210px;
    background: #fff;
    position: fixed;
    border-radius : 8px;
    -webkit-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -moz-box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    box-shadow: 0 0px 4px 0 rgba(130, 152, 174,0.5), 0 0px 0px 0 rgba(130, 152, 174,0.5);
    -webkit-transition: right 0.5s, height 0.3s;
    -moz-transition: right 0.5s, height 0.3s;
    -ms-transition: right 0.5s, height 0.3s;
    -o-transition: right 0.5s, height 0.3s;
    transition: right 0.5s, height 0.3s;
}
.notif-panel .widget-main-header {
    margin-bottom: 0;
    background: transparent;
    color: #fff;
    background: linear-gradient(#9a5dc3 35%, #9c64c2 38%, #d5abf1);
    z-index: 1;
    padding: 7px;
}
.notif-panel .notif_panel_body {
    height: calc(100% - 30px);
    background: #eee;
}
#call_notification_body {
    height: 100%;
}
#call_notification_calling_icon{
    /*height: 65px;*/
    padding: 0;
}
#call_notification_calling_icon>img{
    position: absolute;
    left: 5px;
    top:0;
    bottom:0;
    margin: auto;
}

#call_notification_panel {
    z-index: 3000;
}

#call_notification_panel .d-header-wrp>div, #call_notification_panel .d-header-wrp>h3 {
    display: inline-block;
}

#call_notification_panel .d-header-wrp>h3 {
    padding-left: 40px;
    color: #fff;
    font-size: 15px;
}

#call_notification_panel header.widget-main-header > .d-header-wrp > i {
    color: #ffb1cc;
}

#call_notification_Information,
#call_notification_outbound,
#call_notification_acw_panel {
    /*height: calc(100% - 65px);*/
    height: 100%;
}

.notif-icon-btn {
    background: transparent;
    border: none;
    width: 40px;
    padding: 0;
}
.notif-body {
    height: calc(100% - 45px);
    padding: 15px 0;
}
.notif-footer {
    border-top: solid 1px #ccc;
    padding: 5px;
    text-align: center;
}
.notif-function-wrap {
    /*position: absolute;*/
    height: 40px;
    /*bottom: 40px;*/
    /*left: 0;*/
    width: 100%;
    overflow: auto;
    /*z-index: 10;*/
    /*padding: 0 20px;*/
}
.notif-function-wrap img {
    cursor: pointer;
}
.notif-function-wrap #call_notification_call_transfer_panel,
.notif-function-wrap #call_notification_call_function_btns {
    /*background: #682F8E;*/
    background: #bbb;
    -webkit-box-shadow: 0 2px 4px 0 rgba(130, 152, 174, 0.5), 0 0px 0px 0 rgba(130, 152, 174, 0.5);
    -moz-box-shadow: 0 2px 4px 0 rgba(130, 152, 174, 0.5), 0 0px 0px 0 rgba(130, 152, 174, 0.5);
    box-shadow: 0 2px 4px 0 rgba(130, 152, 174, 0.5), 0 0px 0px 0 rgba(130, 152, 174, 0.5);
}

#call_notification_call_transfer_panel {
    /*padding: 5px;*/
}
#call_notification_call_transfer_panel input{
    height: 30px;
    margin-top: 5px;
}

#call_notification_acw_countdown_timer .values, #call_notification_freeze_duration_timer {
    font-size: 20px;
    color: #aaa;
}

#call_notif_full {
    height: 100%;
    /*background: linear-gradient(#682f8e, #e9c7ff, #f8edff, #fff, #fff);*/
}

#call_notification_panel.call_notification_panel_min {
    height: 47px;width: 160px;border-radius: 20px;
    bottom: 7px;
    right: 70px;
}
#call_notif_min {
    border-radius: 20px;
    font-size: 14px;
    line-height: 1;
    padding: 10px;
}
#call_notif_min>i.fa{
    margin-right: 10px;
}
.custom-batch-container {
    position: fixed;z-index: 150;
    /*right: 374px;*/
    margin-left: 10px;
    bottom: 0px;border-radius: 5px 5px 0 0;width: 420px;height: 0px;background: #fff;overflow: hidden;
    opacity: 0;
    padding: 10px;
    overflow-y: scroll;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
}
.custom-batch-container.show-batch {
    height: 160px;
    bottom: 14px;
    opacity: 1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.custom-batch-item {
    padding: 5px;
    border-bottom: solid 1px #eee;
}
.custom-batch-item:hover {
    background: #fafafa;
}


.agent-company-name {
    padding-top: 5px;
    font-size: 12px;
    color: #847e7e;
}

.ticket-otherdata-block
{
    border-radius: 5px;
    background: rgb(254, 255, 249);
    overflow: hidden;
    padding: 15px;
}
.categorybox
{
    width: auto;
    overflow: hidden;
    position: relative;
    border-radius: 5px 5px 5px 5px;
    background-color: #fff;
    -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-bottom: 20px;
    padding-top: 10px;
    margin-top: 30px;
    height: 200px;

}
.categorybox-other
{
    width: auto;
    overflow: hidden;
    position: relative;
    border-radius: 5px 5px 5px 5px;
    background-color: #aeaeae;
    -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-bottom: 20px;
    padding-top: 10px;
    margin-top: 30px;
    height: auto;

}
.webview-panel
{
    width: auto;
    overflow: hidden;
    position: relative;
    border-radius: 5px 5px 5px 5px;
    background-color: #f2f2f2;
    -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-bottom: 20px;
    padding-top: 10px;
    margin-top: 30px;
    height: auto;

}

.markvote
{
    color: #1727ff;
}

.display-article
{
    font-size: 40px;
}

.article-author-img > img {
    width: 20px;
    height: 20px;
    border-radius: 50%;

}
.article-author-img {
    margin-bottom: 15px;
    margin-top: 4px;
}
.embed-wrap {
    background: #a474c5;
    padding: 2px 7px 3px 7px;
    border-radius: 4px;
    color: #f7f7f7;
}

.embed-wrap:hover {
    background: #114858 !important;
    border-radius: 4px !important;
}
.app-notif {
    border-radius: 5px;
    padding: 10px;
    margin-top: 15px;
    font-size: 11px;
    border: solid 1px #eee;
}

.app-notif.app-notif-success {
    background: #d2f7d2;
    color: #3f903f;
}
.app-notif.app-notif-error {
    background: #ffe1e1;
    color: #e84343;
}

.show-pointer {
    cursor: pointer;
}

.app-form-popup .picker__holder, .app-form-popup .picker {
    position: relative !important;
}

.app-main-loader {
    margin-left: 256px;
    margin-bottom: 50px;
}

.new-main-panel {
    position: fixed;
    padding: 10px;

    background: #ee3568;
    top: 60px;
    left: 50px;
    z-index: 1000;
    border-radius: 0 10px 10px 10px;
}

#new-main-btn.clear-rad {
   border-radius: 0!important;
}

.new-main-panel .new-main-panel-list {
    list-style: none;
    padding: 0;
}

.new-main-panel .new-main-panel-list .-list-item {
    padding: 5px;
    cursor: pointer;
    color: #fff;
}

.new-main-panel .new-main-panel-list .-list-item:hover {
    background: #ffffff50;
}

.assignee-dropdown-menu{
    position: static!important;
}
.requester-dropdown-menu{
    position: static!important;
}
.half-divider{
    width: 60%;
    height: 2px;
    background: #eee;
    margin: 10px auto;
}
.login-with-social {
    width: 100%;
    text-align: center;
    padding: 10px 20px 20px 20px;
}

.login-with-social > ul {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
}

.login-with-social > ul > li {
    list-style: none;
    display: inline-block;
    padding-right: 12px;
    padding-left: 12px;
}

.login-with-social > ul > li > i {
    font-size: 20px;
    color: #5d5a5a;
    cursor: pointer;
}

.login-with-social > ul > li > i.disable {
    color: #9e9c9c;
    cursor: not-allowed;
}

.login-with-social > ul > li > i.hover:hover {
    /*color: #f7af1c;*/
    color: #ee407d;
}

.login-with-social > ul > li > i.fa-spinner {
    color: #f7af1c;
}

.timeline-block {
    border-width: 3px;
    border-radius: 25px;
    border-color: #958a8a;
    border-style: solid;
    padding: 10px 10px 10px 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-top: 20px;
}

.timeline-block .channel-badge {
    position: absolute;
    top: -20px;
    right: -20px;
    border-radius: 50%;
    color: white;
}

.time-ago-setup {
    padding-top: 30px;
    text-align: right;
}
.long-divider{
    width: 80%;
    height: 2px;
    background: #eee;
    margin: 10px auto;
}

.full-btn{
    width: 100%;
}


.qcont{
    text-transform: capitalize !important;
  }
/* 
h4.bold.ng-binding {
    /* text-transform: uppercase; */
    text-transform: capitalize !important;
}
  */