/*
 * App styles
 */ 

.trans-p-2{
    transition: all 0.2s ease;
}

.width-100-p{
    width: 100%;
}

input[type=text],
select{
    padding: 10px;
}

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

.log-out-fail,
.arrow-up,
.arrow-up-behind{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.log-out-fail{
    background-color: #ffe4e4;
    width: auto;
    text-align: center;
    min-width: 300px;
    padding: 15px 10px;
    border: 2px solid #c10002;
    box-shadow: 0 0 17px -12px black;
    border-radius: 12px;
    color: #e20101;
    top: 74px;
}

.arrow-up{
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    top: -22px;
    border-bottom: 20px solid #c10002;
    background-color: transparent;
    z-index: 1;
}

.arrow-up-behind{
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    top: -20px;
    border-bottom: 21px solid #ffe4e4;
    background-color: transparent;
    z-index: 1;
}

.pad-left-0{
    padding-left: 0;
}

.pad-right-0{
    padding-right: 0;
}

/* ---------------------------------
    Login Page
   --------------------------------- */
.login-wrapper{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background-color: #fff;
}

.login-container{
    transform: translateY(-58%) !important;
}

.login-container .logo-wrapper{
    width: 250px;
    height: 180px;
    position: relative;
    margin: 0px auto 20px;
    overflow: hidden;
}

.login-container .logo-wrapper img{
    width: 90%;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.login-wrapper .lc-wrapper{
    position: relative;
    flex-grow: 1;
    padding: 3% 10%;
    display: flex;
    justify-content: center;
}
.lc-wrapper .lc-logo{
    margin-bottom: 15px;
}
.lc-wrapper .lc-logo img {
    height: 30px;
    width: auto;
    max-width: 200px;
}
.login-container{
    position: absolute;
    width: 350px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.login-container .lc-content .lc-title{
    margin-top: 0;
    font-weight: 300;
    font-size: 24px;
    color: #404040;
}
.login-container .form-control,
.login-container .button{
    height: 40px;
}
.login-container .button-ajax.loading:after{
    top: 11px;
}
.login-container .form-control::-webkit-input-placeholder {   
    color: #949494;
}
.login-container .form-control::-moz-placeholder {
    color: #949494;
}
.login-container .form-control:-ms-input-placeholder {
    color: #949494;
}
.login-container .form-control:-moz-placeholder { 
    color: #949494;
}

.login-container .lc-actions{
    margin-top: 20px;
}
.login-container .lc-actions a{
    color: inherit;
}
.login-container .lc-actions a:hover{
    color: #006a5a;
}
.login-wrapper .side-container{
    position: relative;
    width: 40%;
    overflow: hidden;
    background-color: #111a00;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.login-wrapper .side-container:after{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.8);
}
.login-wrapper .side-container .sc-content{
    position: absolute;
    color: #fff;
    left: 10%;
    right: 10%;
    top: 50%;
    z-index: 2;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.side-container .sc-content .scc-quote{
    font-size: 32px;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.2;
    position: relative;
}
.side-container .sc-content .scc-author{
    margin-top: 0;
    font-size: 20px;
    margin-bottom: 0;
    font-weight: 200;
    color: #f0f0f0;
}
.login-wrapper .version-note{
    margin-top: -10px;
}
.login-wrapper .dev-note{
    position: absolute;
    bottom: 15px;
    text-align: center;
}
.login-wrapper .dev-note p,
.login-wrapper .version-note p{
    margin-top: 0;
    margin-bottom: 0;
    font-size: 13px;
}
.login-wrapper .dev-note p a:hover{
    color: #108271;
}

/* ---------------------------------
    App Header
   --------------------------------- */
.app-header{
    position: fixed;
    background-color: #fff;
    top: 0;
    left: 0;
    right: 0;
    z-index: 990;
    height: 60px;
    box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.1);
}
.app-header .ah-container{
    width: 100%;
    height: 100%;
    padding: 0 15px;
    align-items: center;
    justify-content: space-between;
}
.app-header .company-logo{
    width: 200px;
    height: 100%;
    padding: 0 15px 0 0;
    overflow: hidden;
    position: relative;
}
.app-header .company-logo > a{
    display: inline-block;
    min-width: 80px;
    position: relative;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.app-header .company-logo img{
    height: auto;
    width: auto;
    max-width: 150px;
    max-height: 50px;
}

.app-header .ah-actions .ah-action-list{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.app-header .ah-action-list li.ah-action-item{
    float: left;
    margin-right: 10px;
    height: 40px;
}
.app-header .ah-action-list li.ah-action-item:last-child{
    margin-right: 0;
    margin-left: 15px;
}
.app-header .ah-action-list li.ah-action-item > a{
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 42px;
    font-size: 22px;
    border-radius: 100px;
    background-color: #ffffff;
    text-align: center;
    color: inherit;
    position: relative;
}
.app-header .ah-action-list li.ah-action-item > a:hover{
    background-color: #f6f6f6;
}
.app-header .ah-action-list li.ah-action-item > a .aha-noti-badge{
    display: inline-block;
    font-size: 11px;
    color: #fff;
    text-align: center;
    background-color: #d35454;
    position: absolute;
    top: -2px;
    right: 0;
    border-radius: 20px;
    padding: 2px 4px;
    height: 20px;
    min-width: 20px;
    font-weight: 500;
    line-height: 17px;
    overflow: hidden;
}
.app-header .ah-action-list li.ah-action-item.ahai-user > a{
    overflow: visible;
    width: auto;
    height: auto;
    line-height: 1;
    border-radius: 0;
    text-align: left;
    align-items: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.app-header .ah-action-list li.ah-action-item.ahai-user > a:hover{
    background-color: #fff;
}
.app-header .ah-actions .ah-user-pic{
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
.app-header .ah-action-list li.ah-action-item.ahai-user > a .ah-user-details{
    font-size: 13px;
    line-height: 1.2;
    margin-left: 10px;
    white-space: nowrap;
}
.app-header .ah-action-list li.ah-action-item.ahai-user > a .ah-user-details > span{
    display: block;
}
.app-header .ah-action-list .ahai-user > a .ah-user-details > .aud-name{
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 3px;
}
.app-header .ah-action-list .ahai-user > a .ah-user-details > .aud-company{
    font-size: 12px;
}

.app-header .ah-actions .dropdown-menu{
    margin-top: 12px;
}

.app-header .ah-search{
    flex-grow: 1;
    margin-right: 50px;
}
.app-header .ah-search .form-control{
    height: 40px;
}
.app-header .ah-search .input-group-label{
    height: 40px;
}
.app-header .ah-search .input-group-label .button{
    padding: 9px 15px;
    font-size: 20px;
}


/* ---------------------------------
    App Sidebar
   --------------------------------- */
.app-sidebar-nav{
    position: fixed;
    background-color: #111a00;
    left: 0;
    top: 0;
    bottom: 0;    
    z-index: 990;
    width: 80px;
}
.app-sidebar-nav .asn-do-logo{
    width: 100%;
    height: 70px;
    text-align: center; 
    overflow: hidden; 
}
.app-sidebar-nav .asn-do-logo > a{
    width: 100%;
    height: 100%;
    background-color: #000;
    align-items: center;
    justify-content: center;
}
.app-sidebar-nav .asn-do-logo img{
    max-width: 60%;
    max-height: 100px;
    width: auto;
    height: auto;
    margin: 0 auto;
}
.app-sidebar-nav .asn-items{
    overflow: hidden;
}
.app-sidebar-nav .asn-items-list{
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: block;
    position: relative;
    /*height: 100%;*/
}
.app-sidebar-nav .asn-items-list .asn-item,
.app-sidebar-nav .asn-items-list .asn-item > a{
    display: block;
    position: relative;
}
.app-sidebar-nav .asn-items-list .asn-item > a{
    padding: 15px 5px;
    color: #fff;
    text-align: center;
}
.app-sidebar-nav .asn-items-list .asn-item .asni-icon{
    display: block;
    font-size: 22px;
    line-height: 1;
    margin-bottom: 5px;
}
.app-sidebar-nav .asn-items-list .asn-item .asni-label{
    font-size: 11px;
    line-height: 1.3;
    display: block;
}
.app-sidebar-nav .asn-items-list .asn-item.active > a,
.app-sidebar-nav .asn-items-list .asn-item > a:hover{
    background-color: #212c0d;
}

/*.app-sidebar-nav .asn-items-list .asn-item:last-child,
.app-sidebar-nav .asn-items-list .asn-item:nth-last-child(2){
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.app-sidebar-nav .asn-items-list .asn-item:nth-last-child(2){
    bottom: 71px;
}*/
.app-sidebar-nav .asn-items-list .asn-item .asni-count-badge{
    position: absolute;
    min-width: 18px;
    height: 18px;
    border-radius: 100%;
    background-color: #c84030;
    color: #fff;
    font-size: 10px;
    line-height: 17px;
    text-align: center;
    top: 4px;
    padding: 0 4px;
}

.app-sidebar-nav .asn-profile-settings{
    position: absolute;
    bottom: 0;
    height: 90px;
    width: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.app-sidebar-nav .asn-profile-settings:before{
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    border-top: 1px solid #2e391a;
}
.asn-profile-settings .asn-ps-identity{
    text-align: center; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding: 10px 0;
}
.asn-ps-identity .asn-ps-i-pic{
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #111a00;
}
.asn-ps-identity .asn-ps-i-pic > span{
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
.asn-ps-identity .asn-ps-i-pic.not-covered > span{
    background-size: contain;
    background-position: center;
}
.asn-ps-identity .asn-ps-i-pic:not(:last-child){
    margin-bottom: -10px;
}
.asn-profile-settings .dropdown-menu{
    top: auto;
    left: calc(100% + 10px);
    bottom: 10px;
    box-shadow: -3px 3px 12px rgba(0, 0, 0, 0.175);
    padding: 13px;
    min-width: 220px;
    max-width: 220px;
    user-select: none;
}
.asn-profile-settings .dropdown-menu:before{
    position: absolute;
    content: " ";
    width: 0;
    height: 0;
    bottom: 25px;
    right: 100%;
    border: solid transparent;
    border-right-color: #ffffff;
    border-width: 10px;
}
.asn-ps-settings .asn-ps-user{
    align-items: center;
    margin-bottom: 10px;
}
.asn-ps-settings .asn-ps-user .asn-ps-u-pic{
    display: block;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 100%;
    overflow: hidden;
    background-color: #fff;
}
.asn-ps-settings .asn-ps-user .asn-ps-u-pic > span{
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
.asn-ps-user .asn-ps-u-details{
    flex: 1;
    padding-left: 7px;
    overflow: hidden;
}
.asn-ps-user .asn-ps-u-details .asn-ps-u-name,
.asn-ps-user .asn-ps-u-details .asn-ps-u-sub{
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.asn-ps-user .asn-ps-u-details .asn-ps-u-name{
    font-weight: 500;
    font-size: 14px;
}
.asn-ps-user .asn-ps-u-details .asn-ps-u-sub{
    font-size: 12px;
    margin-top: 2px;
}
.asn-profile-settings .asn-ps-settings .asn-ps-options{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.asn-ps-settings .asn-ps-options li a{
    display: block;
    padding: 8px 0;
    color: inherit;
    position: relative;
}
.asn-ps-settings .asn-ps-options li a:hover{
    color: #108271;
}
.asn-ps-settings .asn-ps-options li a > i{
    width: 16px;
    margin-right: 2px;
}
.asn-ps-settings .asn-ps-options li a.button-ajax.loading:after{
    border-color: #0e9f89 transparent #0e9f89 transparent;
}
.asn-profile-settings .asn-ps-identity:hover,
.asn-profile-settings.open .asn-ps-identity{
    background-color: #212c0d;
}

/* ---------------------------------
    App Container
   --------------------------------- */
.app-container{
    position: relative;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 15px;
    padding-top: 0px;
    background-color: #fff;
}

/* ---------------------------------
    Breadcumbs
   --------------------------------- */
.view-breadcumbs{
    position: relative;
}
.view-breadcumbs > a,
.view-breadcumbs > .vb-child{
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    margin-right: 5px;
    color: #111a00;
}
.view-breadcumbs > a:hover{
    color: #006a5a;
}
.view-breadcumbs > a:after,
.view-breadcumbs > .vb-child:after {
    content: '\f105';
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 15px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
}
.view-breadcumbs > a:last-child,
.view-breadcumbs > .vb-child:last-child{
    pointer-events: none;
    margin-right: 0;
}
.view-breadcumbs > a:last-child:after,
.view-breadcumbs > .vb-child:last-child:after{
    display: none;
}

.pg-title{
    margin-top: 0;
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 500;
}

.page-controller-bar{
    position: relative;
    z-index: 360;
}
.page-controller-bar.backgrounded{
    background-color: #fff;
    padding-bottom: 15px;
    padding-top: 15px;
    margin-top: -15px;
}

/* ---------------------------------
    Elements
   --------------------------------- */

/* Photo uploader */
.app-photo-uploader{
    position: relative;
    width: 75px;
    height: 75px;
    border-radius: 100%;
    display: block;
    border: 3px solid #ce3838;
    text-align: center;
}
.app-photo-uploader .apu-prev{
    width: 100%;
    height: 100%;
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    opacity: 0.6;
    border-radius: 100%;
    overflow: hidden;
}
.app-photo-uploader input[type=file] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.app-photo-uploader .apu-icon{
    position: absolute;
    font-size: 25px;
    color: #979797;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    cursor: pointer;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    overflow: hidden;
    z-index: 1;
    background-color: rgba(255,255,255,0.3);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-shadow: 0 0 11px rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.5);
}
.app-photo-uploader.has-error .apu-icon i:before{
    content: '\f071';
}
.app-photo-uploader .apu-remove{
    position: absolute;
    z-index: 1;
    width: 20px;
    height: 20px;
    z-index: 1;
    display: inline-block;
    color: #fff;
    background-color: #ce3838;
    border-radius: 100%;
    top: 0;
    right: 0;
    font-size: 16px;
    line-height: 1.4;
    visibility: hidden;
    opacity: 0;
}
.app-photo-uploader .apu-remove:hover{
    background-color: #e71212;
}
.app-photo-uploader:not(.loaded) .apu-icon:hover{
    background-color: rgba(255,255,255,0.6);
}
.app-photo-uploader.loaded .apu-prev{
    opacity: 1;
}
.app-photo-uploader.loaded .apu-icon{
    visibility: hidden;
    opacity: 0;
}
.app-photo-uploader.loaded:hover .apu-icon,
.app-photo-uploader.loaded:hover .apu-remove{
    visibility: visible;
    opacity: 1;
}

.app-photo-uploader.boxed{
    width: 100%;
    border-radius: 3px;
    border-width: 1px;
    border-color: #c8c8c8;
}
.app-photo-uploader.boxed .apu-prev{
    border-radius: 0;
    background-size: contain;
    background-position: center;
    width: 95%;
    height: 95%;
    max-width: 95%;
    max-height: 95%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.app-photo-uploader.boxed .apu-icon{
    border-radius: 0;
}
.app-photo-uploader.boxed .apu-remove{
    top: -10px;
    right: -10px;
}

/* File uploader */
.uploader-wrapper { 
    text-align: center;
    display: flex;
    align-items: center;
    min-height: 120px;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.uploader-wrapper.dashed {
    border: 2px dashed #c8c8c8;
    padding: 15px;
}
.uploader-wrapper.vertical {
    text-align: center;
}
.uploader-wrapper.horizontal .uw-content{
    display: table;
    vertical-align: middle;
}
.uploader-wrapper .uw-content i{
    font-size: 50px;
}
.uploader-wrapper.horizontal.center .uw-content{ 
    margin: 0 auto;
}
.uploader-wrapper.horizontal .uw-buttons{
    padding: 1px;
}
.uploader-wrapper .uw-buttons .upload-text{
    padding: 1px;
}
.uploader-wrapper input[type=file] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.uploader-wrapper .uw-buttons .button-link{
    font-size: 14px;
    line-height: 1;
    color: #006a5a;
    font-weight: 500;
    margin-left: -3px;
    cursor: pointer;
}
.uploader-wrapper.vertical .uw-buttons .button-link{
    margin: 0 auto 5px;
}
.uploader-wrapper .uw-buttons a{
    font-size: 13px;
}
.uploader-wrapper .uw-error{
    font-size: 12px;
    color: #e50f0f;
    margin: 0;
    text-align: left;
    line-height: 1.3;
}
.uploader-wrapper.drag-enter{
    background-color: #f2f2f2;
    border-color: #fb882d;
}
.uploader-wrapper.drag-enter .uw-content{
    pointer-events: none !important;
}
.upload-error{
    font-size: 14px;
    color: #757575;
    font-weight: 900;
    margin: 0 0 0 3px;
}

/* App ratings selector */
.app-ratings-selector{
    /*background-color: #fff;*/
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    position: relative;
    display: block;
    width: 100%;
    height: 35px;
    padding: 7px 12px;
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
}
.ratings-inline .app-ratings-selector{
    height: auto;
    padding: 0;
    border: none;
    width: 160px;
}
.app-ratings-selector .form-control{
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    padding: 0;
    opacity: 0;
    visibility: hidden;
}
.app-ratings-selector .stars{
    display: inline-block;
    padding-right: 4px;
    font-size: 16px;
    color: #e2d24e;
}
.app-ratings-selector .stars:hover i:before,
.app-ratings-selector .stars:hover ~ .stars i:before,
.app-ratings-selector .stars.active i:before,
.app-ratings-selector .stars.active ~ .stars i:before{
    font-weight: bold;
}
.app-ratings-selector .clear{
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* Star ratings */
.star-ratings{
    color: #e2d24e;
    font-size: 14px;
    white-space: nowrap;
}
.star-ratings i{
    display: inline;
    margin-right: 4px;
}
.star-ratings i:last-child{
    margin-right: 0;
}

/* Inline Icons */
.inline-icon{
    display: inline-block;
    width: 20px;
}
.inline-icon:after{
    content: '';
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands';
    font-weight: bold;
}
.icon-bullet{
    position: relative;
    padding-left: 20px;
}
.icon-bullet .inline-icon{
    position: absolute;
    left: 0;
}

.action-list{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.action-list li{
    display: inline-block;
    margin-left: 5px;
}
.action-list li:first-child{
    margin-left: 0;
}
.action-list li a{
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background-color: #e8e8e8;
    border-radius: 100px;
    text-align: center;
    color: inherit;
}
.action-list li a:hover{
    background-color: #006a5a;
    color: #fff;
}

/* 
 * Activity types 
 */
.activity-icon-default:after{
    content: "\f5fc";
    color: #5b799b;
}

/* Call */
.activity-type.type-1{ background-color: #62a155; }
.activity-type.type-1:after{
    content: '\f095' !important;
    color: #62a155; 
}

/* SMS */
.activity-type.type-2{ background-color: #5bb0f9; }
.activity-type.type-2:after{
    content: '\f4b0' !important;
    color: #5bb0f9;
}

/* Email */
.activity-type.type-3{ background-color: #d5973e; }
.activity-type.type-3:after{
    content: '\f0e0' !important;
    color: #d5973e;
}

/* Meeting */
.activity-type.type-4{ background-color: #f95b89; }
.activity-type.type-4:after{
    content: '\f2b5' !important;
    color: #f95b89;
}

/* System */
.activity-type.type-5{ background-color: #5b799b; }
.activity-type.type-5:after{
    content: '\f5fc' !important;
    color: #5b799b;
}

/* Note */
.activity-type.type-6{ background-color: #d9b823; }
.activity-type.type-6:after{
    content: '\f249' !important;
    color: #d9b823;
}

/* Facebook */
.activity-type.type-7{ background-color: #3b5999; }
.activity-type.type-7:after{
    content: '\f082' !important;
    color: #3b5999;
}

/* Instagram */
.activity-type.type-8{ background-color: #d6007d; }
.activity-type.type-8:after{
    content: '\f16d' !important;
    color: #d6007d;
}

/* Bmby */
.activity-type.type-9{ background-color: #3b5999; }
.activity-type.type-9:after{
    content: '\f292' !important;
    color: #3b5999;
}

/* Web */
.activity-type.type-10{ background-color: #059E4A; }
.activity-type.type-10:after{
    content: '\f0ac' !important;
    color: #059E4A;
}

/* File */
.activity-type.type-11{ background-color: #5e8dc7; }
.activity-type.type-11:after{
    content: '\f15c' !important;
    color: #5e8dc7;
}

/* Won */
.activity-type.type-12{ background-color: #49b456; }
.activity-type.type-12:after{
    content: '\f091' !important;
    color: #49b456;
}

/* Loss */
.activity-type.type-13{ background-color: #b94f4f; }
.activity-type.type-13:after{
    content: '\f5b4' !important;
    color: #b94f4f;
}

.inline-icon.activity-type{
    background-color: transparent;
}

/* Dot reader */
.dot-reader{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
}
.dot-reader.dot-blue{ background-color: #3891dd; }

/* Tables */
.table.table-detailed tr th{
    font-size: 14px;
    padding: 6px 15px;
}
.table.table-detailed tr td{
    padding: 8px 15px;
}

.content-wrapper .version-note{
    font-size: 12px;
    font-weight: 400;
    color: #757575;
    font-style: italic;
    display: block;
}
.activity-length{
/*    display: block;
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;*/
}

.list-count{
    font-size: 13px;
    font-weight: 600;
    margin-right: 10px;
    text-align: left;
    white-space: nowrap;
    line-height: 1;
}

/*
 * File
 */

.file-item-wrapper{
    position: relative;
    margin-bottom: 10px;
}
.file-item-wrapper > a{
    display: block;
}
.file-item{
    flex-direction: row;
    align-items: center;
    background-color: #f4f4f4;
    border-radius: 3px;
    overflow: hidden;
}
.file-item-wrapper .file-remove-wrapper{
    position: absolute;
    width: 20px;
    height: 20px;
    top: 2px;
    right: 2px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.file-item-wrapper .file-remove-wrapper i{
    font-size: 14px;
    color: #f24f4f;
}
.file-item-wrapper:hover .file-remove-wrapper{
    visibility: visible;
    opacity: 1;
}
.file-icon-box{
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 50px;
    min-width: 40px;
/*    background-color: #ebebeb;*/
}
.file-icon-box .file-type:after{
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands';
    font-weight: lighter;
    position: absolute;
/*    left: 50%;
    top: 50%;*/
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: 42px;
}
.file-icon-box.f-icon{
    font-size: 42px;
}
.file-text-box{
    flex-direction: column;
    flex: 1;
    padding-left: 5px;
    max-width: calc(100% - 65px);
    overflow: hidden;
}
.file-text{
    color: #757575;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 4px 0;
    display: block;
    line-height: 1;
    font-weight: 600;
}
.file-text-danger{
    color: #f24f4f;
}
.file-text.file-size{
    margin-bottom: 0;
    font-size: 80%;
    font-weight: normal;
}

/*
 * File Type
 */

/* Image */
.file-type.file-1{ background-color: #65aaf7; }
.file-type.file-1:after{
    content: '\f1c5' !important;
    color: #65aaf7;
}
/* PDF */
.file-type.file-2{ background-color: #a20009; }
.file-type.file-2:after{
    content: '\f1c1' !important;
    color: #a20009;
}
/* Zip */
.file-type.file-3{ background-color: #edc700; }
.file-type.file-3:after{
    content: '\f1c6' !important;
    color: #edc700;
}
/* Excel */
.file-type.file-4{ background-color: #31703f; }
.file-type.file-4:after{
    content: '\f1c3' !important;
    color: #31703f;
}
/* Word */
.file-type.file-5{ background-color: #364b93; }
.file-type.file-5:after{
    content: '\f1c2' !important;
    color: #364b93;
}
/* CSV */
.file-type.file-6{ background-color: #31703f; }
.file-type.file-6:after{
    content: '\f6dd' !important;
    color: #31703f;
}
/* File */
.file-type.file-10{ background-color: #5e8dc7; }
.file-type.file-10:after{
    content: '\f15c' !important;
    color: #5e8dc7;
}

/* ---------------------------------
    Tooltip with content
   --------------------------------- */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

.tooltip-wrapper .tooltip-content {
    visibility: hidden;
    opacity: 0;
    width: 320px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 99;
    top: -16px;
    left: 125%;
}

.tooltip-wrapper .tooltip-content::after {
    content: "";
    position: absolute;
    top: 15%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
.tooltip-wrapper:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
}

/* ---------------------------------
    Tooltip content table
   --------------------------------- */
.tbl-tooltip-content{
    width: 100%;
}
.tool-tr{
    text-transform: lowercase;
}
.tool-tr .tool-td,
.tool-tr .tool-th{
    padding: 2px 10px;
    vertical-align: top;
    line-height: 1.4;   
}
.tool-tr .tool-td:first-of-type{
    padding-left: 8px;
    text-align: left;
}
.tool-tr .tool-td:last-of-type{
    padding-right: 8px;
    text-align: left;
    word-break: break-word;
}
.tool-separator{
    position: relative;
    display: block;
}
.tool-separator:after{
    position: absolute;
    content: ':';
    right: -10px;
    top: 0;
}

/* ---------------------------------
    Content - Dashboard
   --------------------------------- */
body.abc-dashboard{
    background-color: #f1f1f1;
}
body.abc-dashboard .app-container{
    background-color: transparent;
}

.horizontal-link-list{
    padding: 0;
    margin: 0;
    list-style-type: none;
}
.horizontal-link-list li{
    display: inline-block;
    margin-right: 25px;
}
.horizontal-link-list li:last-child{
    margin-right: 0;
}

.horizontal-link-list.horizontal-tabs a{
    font-size: 16px;
    opacity: 0.6;
}
.horizontal-link-list.horizontal-tabs a.active,
.horizontal-link-list.horizontal-tabs a:hover{
    opacity: 1;
}

.pg-panel{
    border: 1px solid #ebebeb;
    background-color: #fff;
    padding: 15px;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    margin-bottom: 15px;
}
.pg-panel-activity{
    min-height: calc(100vh - 342px);
}
.pgp-title{
    font-weight: 500;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 15px;
}

.summary-card{
    position: relative;
    background-color: #0e9f89;
    color: #fff;
    padding: 20px;
    border-radius: 3px;
}
.summary-card.bg-stars{
    background-color: #e29512;
}
.summary-card.bg-won{
    background-color: #64a256;
}
.summary-card.bg-lost{
    background-color: #c25d5d;
}

.summary-card .sc-icon{
    width: 70px;
    font-size: 35px;
    text-align: center;
}
.summary-card .sc-content{
    flex: 1 1 auto;
    padding-left: 15px;
}
.summary-card .sc-content p{
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1;
    white-space: nowrap;
}
.summary-card .sc-content .scc-major{
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 3px;
}
.summary-card .sc-content .scc-minor{
    font-size: 18px;
    font-weight: 300;
}

@media screen and (max-width: 991px) {
    .summary-card{
        margin-bottom: 20px;
    }
}


/* ---------------------------------
    Content - Groups
   --------------------------------- */
body.abc-groups,
body.abc-groups .app-container{
    background-color: #f1f1f1;
}
.gl-item{
    position: relative;
    width: 100%;
    min-height: 200px;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 15px 20px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    /*border: 1px solid #ebebeb;*/
}
.gl-item .gli-header{
    width: 100%;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.gl-item .gli-header > h3{
    float: left;
    width: calc(100% - 35px);
    margin-top: 0;
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  
}
.gl-item .gli-header .glih-actions{
    float: right;
    width: 35px;
    text-align: right;
    visibility: hidden;
    opacity: 0;
    /*-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;*/
}
.gl-item:hover .gli-header .glih-actions{
    visibility: visible;
    opacity: 1;
}
.gl-item .gli-header .glih-actions > .dropdown-toggle{
    font-size: 20px;
}
.gl-item .gli-header > h3 > a,
.gl-item .gli-header .glih-actions > .dropdown-toggle{
    color: inherit;
}
.gl-item .gli-header > h3 > a:hover,
.gl-item .gli-header .glih-actions > .dropdown-toggle:hover,
.gl-item .gli-header .glih-actions.dropdown.open > .dropdown-toggle{
    color: #006a5a;
}

.gl-item .gli-header .glih-actions .dropdown-menu{
    margin-top: 10px;
    /*min-width: 120px;*/
}
.gl-item .gli-header .glih-actions .dropdown-menu>li>a{
    padding: 6px 12px;
}
.gl-item .gli-header .glih-actions .dropdown-menu>li>a:hover{
    color: #fff !important;
}
.gl-item .gli-header .glih-actions .dropdown-menu:before {
    position: absolute;
    content: " ";
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
    top: -7px;
    right: 3px;
}

.gl-item .glic-list,
.gl-item .glip-list{
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 100%;
}
.gl-item .glic-list .glicl-item{
    float: left;
    width: 50%;
    margin-bottom: 5px;
    padding-right: 10px;
}
.gl-item .glic-list .glicl-item > span{
    display: block;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.05em;
}
.gl-item .glic-list .glicl-item .glicli-value{
    font-weight: bold;
    font-size: 22px;
}
.gl-item .glic-list .glicl-item.won > span{
    color: #49b356;
}
.gl-item .glic-list .glicl-item.lost > span{
    color: #cd5a5b;
}

.gl-item .gli-profiles{
    margin-top: 10px;
}
.gl-item .glip-list .glip-item{
    float: left;
    margin-right: 10px;
}
.gl-item .glip-list .glip-item:last-child{
    margin-right: 0;
}
.gl-item .glip-list .glip-source{
    float: left;
    margin-right: 3px;
}
.gl-item .glip-list .glip-source:last-child{
    margin-right: 0;
}
.gl-item .glip-list .glip-item > a{
    display: inline-block;
    position: relative;
}
.gl-item .glip-list .glip-item .glipi-pic{
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.gl-item .glip-list .glip-item .glipi-name{
    position: absolute;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(0,0,0,0.9);
    color: #fff;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 2px;
    text-align: center;
    top: 115%;
    left: 50%;
    width: auto;
    max-width: 150px;
    z-index: 2;
    white-space: nowrap;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.gl-item .glip-list .glip-item .glipi-name:after{
    position: absolute;
    content: " ";
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent; 
    border-bottom: 5px solid rgba(0,0,0,0.9);
    bottom: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
}
.gl-item .glip-list .glip-item > a:hover .glipi-name{
    opacity: 1;
    visibility: visible;
}
.gl-item .glip-list .glip-item .glipi-more{
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    overflow: hidden;
    background-color: #111a00;
    text-align: center;
    padding: 3px;
    line-height: 2.1;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    color: #fff;
}
.gl-sources-wrapper{
    display: flex;
    justify-content: flex-end;
}
.source-wrapper{
    font-size: 16px;
}
.source-fb{
    color: #3b5999;
}
.source-web{
    color: #059E4A;
}


/* Facebook */
.source-type.type-1{ background-color: #3b5999; }
.source-type.type-1:after{
    content: '\f082' !important;
    color: #3b5999;
}

/* Instagram */
.source-type.type-4{ background-color: #d6007d; }
.source-type.type-4:after{
    content: '\f16d' !important;
    color: #d6007d;
}

/* Group Users */
.group-users-list{
    padding-right: 5px;
}
.group-users-list .gul-item{
    margin-top: 5px;
}
.group-users-list .checkbox:first-child{
    margin-top: 0;
}
.group-users-list .guli-content{
    display: flex;
    align-items: center;
    padding: 3px 15px 3px 35px;
    margin-bottom: 0;
    margin-right: 0;
    border-radius: 2px;
    padding-left: 35px !important;
}
.group-users-list .guli-content:hover{
    background-color: #eee;
}
.group-users-list .checkbox label:before{
    top: auto;
    left: 10px;
}
.group-users-list .checkbox input[type=checkbox]:checked+label:after{
    top: auto;
    margin-top: -3px;
    left: 13px;
}
.group-users-list .gul-avatar{
    display: inline-block;
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
    border-radius: 100px;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    overflow: hidden;
    margin-right: 8px;
}

/* Group Sources */
.expandable-list ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 100%;
}
.expandable-list .exl-item{
    border-bottom: 1px solid #ebebeb;
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;
    position: relative;
    margin-left: 35px;
}
.expandable-list .exl-item > a{
    display: block;
    color: #111a00;
    font-weight: 500;
    pointer-events: none;
}
.expandable-list .exl-item > a > i{
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 100px;
    background-color: #111a00;
    color: #fff;
    margin-right: 10px;
    margin-left: -40px;
}
.expandable-list .exl-item.exli-facebook > a{
    color: #3b5998;
    pointer-events: auto;
}
.expandable-list .exl-item.exli-facebook > a > i{
    background-color: #3b5998;
}
.expandable-list .exl-item > a.exli-dropdown:after{
    position: absolute;
    content: '\f105';
    font-family: 'Font Awesome 5 Pro';
    right: 0;
    top: 7px;
    display: block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    font-size: 15px;
    color: initial;
}
.expandable-list .exl-item.open > a.exli-dropdown:after{
    transform: rotate(90deg);
}
.expandable-list .exl-item .exli-content{
    display: none;
    position: relative;
}
.expandable-list .exl-item.open .exli-content{
    display: block;
}
.expandable-list .exl-item.open:last-child{
    border-bottom: none;
}
.expandable-list .exli-sub{
    margin-top: 10px;
}
.expandable-list .exli-sub .exlis-item{
    justify-content: space-between;
    margin-bottom: 10px;
    cursor: default;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 10px;
    position: relative;
}
.expandable-list .exli-sub .exlis-item:last-child{
    border-bottom: none;
}
.expandable-list .exli-sub .exlisic-heading,
.expandable-list .exli-sub .exlisic-sub-heading,
.expandable-list .exlisi-deletion .exlisid-msg .exlisidm-heading,
.expandable-list .exlisi-deletion .exlisid-msg .exlisidm-sub{
    display: block;
}
.expandable-list .exli-sub .exlisic-heading,
.expandable-list .exlisi-deletion .exlisid-msg .exlisidm-heading{
    color: #545454;
}
.expandable-list .exli-sub .exlisic-sub-heading,
.expandable-list .exlisi-deletion .exlisid-msg .exlisidm-sub{
    color: #888888;
    font-size: 13px;
    margin-top: 3px;
}
.expandable-list .exli-sub .exlisi-actions > a{
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
    font-size: 12px;
    color: inherit;
    display: block;
    text-align: center;
    background-color: transparent;
    line-height: 25px;
    border-radius: 60px;
    opacity: 0;
    visibility: hidden;
}
.expandable-list .exli-sub .exlisi-actions > a:hover{
    background-color: #f6f6f6;
}
.expandable-list .exli-sub .exlis-item:hover .exlisi-actions > a{
    opacity: 1;
    visibility: visible;
}
.expandable-list .exli-sub .exlisi-actions > a.loading{
    opacity: 1;
    visibility: visible;
}
.expandable-list .exli-sub .exlisi-actions > a.loading:after{
    top: 4px;
    right: 5px;
    border-color: #00695a transparent #00695a transparent;
    background-color: rgba(255,255,255,0.8);
}

.expandable-list .exli-sub .exlisi-deletion{
    width: 100%;
    background-color: #fff;
    position: relative;
    display: none;
}
.expandable-list .exlisi-deletion .exlisid-msg{
    float: left;
    width: calc(100% - 150px);
    padding-right: 10px;
}
.expandable-list .exlisi-deletion .exlisid-actions{
    float: right;
    width: 150px;
    white-space: nowrap;
    text-align: right;
}
.expandable-list .exlisi-deletion .exlisid-actions .button{
    font-size: 13px;
    padding: 6px 12px;
    height: 30px;
    line-height: 1.4;
}
.expandable-list .exlisi-deletion .exlisid-actions .button.loading{
    padding-right: 25px;
}
.expandable-list .exlisi-deletion .exlisid-actions .button.loading:after{
    right: 8px;
    width: 12px;
    height: 12px;
}
.expandable-list .exlis-item.del-confirm .exlisi-deletion{
    display: block;
}
.expandable-list .exlis-item.del-confirm .exlisi-content,
.expandable-list .exlis-item.del-confirm .exlisi-actions{
    display: none;
}

.expandable-list .exli-interaction{
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 2px;
    margin-top: 25px;
}
.expandable-list .exli-interaction .exliim-msg{
    width: 60%;
    font-weight: 500;
    margin: 0 auto 10px;
    line-height: 1.3;
}
.expandable-list .exli-interaction .btn-exliim-facebook{
    background-color: #3b5998;
    border-color: #3b5998;
}
.expandable-list .exli-interaction .btn-exliim-facebook:hover{
    background-color: #263f73;
}
.expandable-list .exli-interaction .btn-exliim-facebook > i{
    padding-right: 10px;
    margin-right: 5px;
    border-right: 1px solid rgba(255,255,255,0.25);
}

.button-append-grey .input-group-label{
    background-color: transparent;
}
.button-append-grey .input-group-label .button{
    background-color: #cccccc;
    color: #757575;
}
.button-append-grey .input-group-label .button:active i{
    transform: translateY(4px);
}
.skip-wrapper{
    float: right;
    margin: 10px 0 0 0;
}


@media screen and (min-width: 992px) {
    .group-list-wrap .gl-item-wrap:nth-child(3n+1){
        clear: both;
    }
}

@media screen and (min-width: 1440px) {
    .group-list-wrap .gl-item-wrap{
        width: 33.333%;
    }
}

@media screen and (min-width: 1680px) {
    .group-list-wrap .gl-item-wrap{
        width: 25%;
    }
    .group-list-wrap .gl-item-wrap:nth-child(3n+1){
        clear: none;
    }
    .group-list-wrap .gl-item-wrap:nth-child(4n+1){
        clear: both;
    }
}

@media screen and (max-width: 991px) {
    .group-list-wrap .gl-item-wrap:nth-child(2n+1){
        clear: both;
    }
}

/* ---------------------------------
    Content - Leads
   --------------------------------- */

/* Leads Filter */
.filter-sidebar{
    position: fixed;
    top: 60px;
    bottom: 0;
    right: 0;
    width: 375px;
    background-color: #454545;
    color: #fff;
    z-index: 365;
    padding: 20px;
}
.filter-sidebar .fs-header{
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.fs-header .fs-heading > h2{
    margin-top: 0;
    margin-bottom: 0;
    color: #fff;
    font-weight: 400;
    line-height: 1;
    font-size: 24px;
}
.fs-header .fs-closer button {
    display: inline-block;
    background-color: transparent;
    font-size: 26px;
    outline: 0 !important;
    border: 0 !important;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
    color: #d2d2d2;
    padding: 0;
}
.filter-sidebar .fs-footer{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #454545;
}
.filter-sidebar .fs-container,
.filter-sidebar .fs-container > form{
    position: relative;
    height: 100%;
}
.filter-sidebar .fs-content{
    max-height: calc(100% - 120px);
    margin-right: -15px;
}
.filter-sidebar .fs-content .fsc-widget{
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.3);
}
.filter-sidebar .fs-content .fsc-widget:last-of-type{
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.filter-sidebar .app-form .form-group{
    margin-bottom: 0;
}

.form-control.fc-transparent,
.fg-transparent .app-ratings-selector,
.fcsw-transparent.select-wrapper:after,
.input-group.fcig-transparent > .do-daterangepicker-triggerbutton,
.input-group.fcig-transparent .input-group-label,
.filter-sidebar .button-transparent{
    background-color: transparent;
    color: #fff;
}
.fld-label.fl-transparent{
    color: #fff;
}
.filter-sidebar .button-transparent:hover,
.filter-sidebar .button-transparent:focus{
    background-color: #108271;
}
.fcsw-transparent.select-wrapper:after{
    padding: 4px 2px;
}
.fcsw-transparent.select-wrapper option{
    color: #555555;
}
.form-control.fc-transparent:focus{
    box-shadow: none;
    border-color: #0e9f89;
}
.input-group.fcig-transparent:focus{
    outline: 0;
}
.input-group.fcig-transparent > .do-daterangepicker-triggerbutton,
.input-group.icon-ontop > .do-daterangepicker-triggerbutton{
    padding-right: 35px;
}
.input-group.fcig-transparent .input-group-append,
.input-group.icon-ontop .input-group-append{
    position: absolute;
    right: 0;
    pointer-events: none;
    margin-left: 0;
}
.input-group.fcig-transparent .input-group-label,
.input-group.icon-ontop .input-group-label{
    width: 35px;
    padding: 6px 5px;
    border: none;
    border-radius: 0;
}
.input-group.icon-ontop .input-group-label{
    background-color: transparent;
}
.input-group.fcig-transparent .input-group-label > i,
.input-group.icon-ontop .input-group-label > i{
    font-size: 15px;
}

.form-control.display-only{
    background-color: #ececec;
}

.filter-sidebar.ng-enter,
.filter-sidebar.ng-leave {
    -webkit-transition : right ease-in-out 0.15s;
    -moz-transition    : right ease-in-out 0.15s;
    -ms-transition     : right ease-in-out 0.15s;
    -o-transition      : right ease-in-out 0.15s;
    transition         : right ease-in-out 0.15s;
}
.filter-sidebar.ng-enter,
.filter-sidebar.ng-leave.ng-leave-active {
    right : -380px;
}
.filter-sidebar.ng-leave,
.filter-sidebar.ng-enter.ng-enter-active {
    right : 0;
}

.app-link-inside-dark{
    color: #fff;
}
.app-link-inside-dark:hover{
    color: #20ccb2;
}
.filter-count-text{
    display: inline-block;
    font-size: 80%;
    vertical-align: text-top;
}
.filter-panel-overlay{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 360;
}

/* Lead List */
.abc-leads .list-scroller{
    position: relative;
    max-height: calc(100vh - 80px);
    padding-right: 0;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}

.button-danger{
    color: #cd5a5b;
}
.button-danger:hover{
    color: #eb797a;
}

.button-red{
    background-color: #cd5a5b;
}

.button-red:hover,
.button-red:focus{
    background-color: #e83334;
}

.button-small{
    padding: 0px;
    width: 40px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* New Lead */
.pl-leads-rw .pl-leads-col-pic{
    width: 100px;
}
.pl-leads-rw .pl-leads-col-first{
    width: 50%;
    border-right: 1px solid #ebebeb;
    padding-right: 30px;
}
.pl-leads-rw .pl-leads-col-last{
    width: calc(100% - (100px + 50%));
    padding-left: 30px;
}

/* Lead Single */
.sl-view-rw .slv-col-pic{
    width: 100px;
}
.sl-view-rw .slv-col-details{
    width: 55%;
    padding-right: 20px;
    padding-bottom: 20px;
}
.sl-view-rw .slv-col-actv{
    width: calc(100% - (100px + 57.6%));
    padding-left: 20px;
    padding-right: 20px;    
    border-left: 1px solid #ebebeb;
    background-color: #fff;
    position: fixed;
    right: 0;
    top: 20px;
    bottom: 20px;
}
.slvp-avatar{
    width: 75px;
    height: 75px;
    overflow: hidden;
    border-radius: 100%;
    border: 1px solid #ebebeb;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
.slvp-avatar.has-border{
    border: 4px solid transparent;
}
.slvp-avatar.iconized{
    overflow: visible;
}
.slvp-avatar.iconized:before{
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    font-family: 'Font Awesome 5 Pro';
    font-size: 14px;
    line-height: 28px;
    border-radius: 100%;
    text-align: center;
    z-index: 1;
    color: #fff;
    top: -6px;
    right: -6px;
}
.slvp-avatar.won{
    border-color: #49b356;
}
.slvp-avatar.lost{
    border-color: #cd5a5b;
}
.slvp-avatar.won.iconized:before{
    content: '\f091';
    background-color: #49b356;
}
.slvp-avatar.lost.iconized:before{
    content: '\f5b4';
    background-color: #cd5a5b; 
}

.slv-details{
    margin-top: 10px;
}
.slv-details .slvd-header{
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 15px;
    margin-bottom: 10px;
}
.slv-details .slvdh-actions{
    min-width: 200px;
}
.slv-details .slvd-header .slvdh-title,
.slv-details .slvd-header .slvdh-subtitle{
    color: #606060
}
.slv-details .slvd-header .slvdh-title{
    margin-top: 0;
    margin-bottom: 0;
    font-size: 26px;
    font-weight: 500;
}
.slv-details .slvd-header .slvdh-subtitle{
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 400;   
}

.slv-details .slvdh-actions .slvdh-straight-actions,
.slv-details .slvdh-actions .slvdh-bubble-actions{
    float: right;
}
.slv-details .slvdh-actions .slvdh-bubble-actions > a,
.slv-details .slvdh-actions .slvdh-bubble-actions a.slvdh-bubble{
    display: block;
    float: left;
    width: 35px;
    height: 35px;
    line-height: 36px;
    border-radius: 100px;
    text-align: center;
    position: relative;
    background-color: #111a00;
    color: #fff;
    margin-right: 8px;
}
.slv-details .slvdh-actions .slvdh-bubble-actions > a:hover,
.slv-details .slvdh-actions .slvdh-bubble-actions a.slvdh-bubble:hover{
    background-color: #96a281;
}

.slv-details .slvdh-actions .slvdh-bubble-dropdown{
    float: left;
}
.slv-details .slvdh-actions .slvdh-bubble-dropdown .dropdown-menu{
    top: 130%;
}
.slv-details .slvdh-actions .slvdh-bubble-actions .action-won{
    background-color: #49b356;
}
.slv-details .slvdh-actions .slvdh-bubble-actions .action-won:hover{
    background-color: #76d281;
}
.slv-details .slvdh-actions .slvdh-bubble-actions .action-lost{
    background-color: #cd5a5b;
}
.slv-details .slvdh-actions .slvdh-bubble-actions .action-lost:hover{
    background-color: #eb797a;
}
.select-wrapper.with-icon:after{
    content: '\f0b0';
    font-weight: bold;
    font-size: 15px;
    line-height: 1.6;
}

.tbl-static-content{
    width: 100%;
}
.tbl-static-content td,
.tbl-static-content th{
    padding: 6px 10px;
    vertical-align: top;
    line-height: 1.4;
}
.tbl-static-content td:first-of-type{
    padding-left: 0;
}
.tbl-static-content td:last-of-type{
    padding-right: 0;
    word-break: break-word;
}
.tbl-static-content .colon-separator{
    position: relative;
    display: block;
}
.tbl-static-content .colon-separator:after{
    position: absolute;
    content: ':';
    right: -10px;
    top: 0;
}
.tbl-static-content .colon-separator .inline-icon{
    margin-right: 7px;
    text-align: center;
}

.hide-clear .app-ratings-selector .clear{
    display: none;
}

.slv-details .slvd-content{
    position: relative;
}
.slv-details .slvd-content .slvd-c-wrap{
    position: relative;
    z-index: 2;
}
.slv-details .slvd-content .slvdc-won-lost-banner{
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0;
    pointer-events: none;
    user-select: none;
    transform: translateY(-50%);
}
.slv-details .slvd-content .slvdc-won-lost-banner > img{
    width: auto;
    height: auto;
    max-width: 380px;
    max-height: 280px;
}
.slv-details .slvd-content .slvdc-section{
    margin-top: 20px;
}
.slv-details .slvdc-section .slvdcs-title{
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 600;
    position: relative;
}
.slv-details .slvdc-section .slvdcs-title > span{
    background-color: #fff;
    position: relative;
    z-index: 1;
    padding-right: 10px;
}
.slv-details .slvdc-section .slvdcs-title:after{
    content: '';
    width: 100%;
    border-top: 1px solid #ebebeb;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
}

.social-profile-list{
    position: relative;
}
.social-profile-list > a{
    display: block;
    float: left;
    width: 30px;
    height: 30px;
    line-height: 31px;
    border-radius: 100px;
    text-align: center;
    background-color: #111a00;
    color: #fff;
    margin-right: 5px;
    margin-bottom: 5px;
}
.social-profile-list > a:hover{
    background-color: #96a281;
}

.sl-view-rw .slv-actv{
    height: 100%;
    position: relative;
}
.slv-actv .slva-header{
    justify-content: space-between;
}
.slv-actv .slva-header .slvah-title{
    margin-top: 5px;
    margin-bottom: 0;
    color: #606060;
    font-weight: 500;
}
.slv-actv .slvaa-list{
    padding: 0;
    margin: 20px 0 0;
    list-style-type: none;
    position: relative;
}
.slv-actv .slvaa-list:before{
    content: '';
    position: absolute;
    top: -20px;
    bottom: 0;
    left: 16px;
    width: 3px;
    background-color: #c6c6c6;
}
.slv-actv .slva-activities{
    margin-right: -15px;
    margin-top: 20px;
    max-height: calc(100% - 110px);
/*    min-height: calc(100vh - 250px);
    max-height: calc(100vh - 250px);*/
}
.slv-actv .slvaa-activity{
    position: relative;
    display: block;
    margin-bottom: 15px;
    margin-left: 40px;
}
.slvaa-activity .slvaa-profile{
    align-items: center;
    margin-left: -40px;
}
.slvaa-activity .slvaa-profile .slvaap-pic{
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
    display: block;
    border-radius: 100px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    margin-right: 5px;
}
.slvaa-activity .slvaa-profile .slvaap-name{
    font-weight: 600;
    font-size: 14px;
    flex: 1;
    padding-right: 10px;
}
.slvaa-activity .slvaa-content{
    background-color: #ececec;
    overflow: hidden;
    border-radius: 10px;
    border-top-left-radius: 0;
    justify-content: space-between;
    margin-top: -5px;
}
.slvaa-activity .slvaa-content .slvaac-type{
    width: 25px;
    min-width: 25px;
    position: relative;
    color: #fff;
    background-color: #5b799b;
}
.slvaa-activity .slvaa-content .slvaac-type:after{
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands';
    font-weight: lighter;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    content: "\f5fc";
}
.slvaa-activity .slvaa-content .slvaac-type.activity-type:after{ 
    color: #fff !important;
}
.slvaa-activity .slvaa-content .slvaac-type.activity-type[data-icon-val="f082"]:after{
    content: '\f39e' !important; /* Different facebook icon (without square) */
}

.slvaa-activity .slvaa-content .slvaac-details{
    flex-grow: 1;
    padding: 10px 15px;
    color: #979797;
}
.slvaa-activity .slvaa-content .slvaac-details .slvaacd-title{
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    word-break: break-word;
}
.slvaa-activity .slvaa-date{
    font-size: 11px;
    text-align: right;
    color: #979797;
}

.slv-actv .slva-form{
    margin-top: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
}
.slv-actv .slva-form .input-group{
    background-color: #e2e2e2;
    border-radius: 7px;
    padding: 5px 0;
    align-items: flex-end;
}
.slv-actv .slva-form .input-group .form-control,
.slv-actv .slva-form .input-group .input-group-label{
    background-color: transparent;
    border: none;
}
.slv-actv .slva-form .input-group .input-group-label .select-wrapper{
    background-color: transparent;
}
.slv-actv .slva-form .input-group .input-group-label .select-wrapper .form-control{
    width: 90px;
    min-width: 50px;
    padding: 5px;
    color: inherit;
    margin-left: 40px;
    z-index: 2;
}
.slv-actv .slva-form .slva-types-wrap{
    position: relative;
    background-color: #e2e2e2;
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: -45px;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.slv-actv .slva-form.panel-open .slva-types-wrap{
    margin-bottom: 5px;
    z-index: 99;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}
.slv-actv .slva-form .slva-types-wrap .slvat-content{
    justify-content: space-between;
    flex-wrap: wrap;
}
.slv-actv .slva-form .slva-types-wrap .slvat-content > a{
    position: relative;
    background-color: transparent;
    padding: 13px 10px;
    color: inherit;
    font-weight: 500;
    min-width: 20%;
    max-width: 20%;
    text-align: center;
}
.slv-actv .slva-form .slva-types-wrap .slvat-content .slvat-content-label{
    background-color: transparent !important;
    position: relative;
    padding-left: 22px;
    display: inline-block;
}
.slv-actv .slva-form .slva-types-wrap .slvat-content .slvat-content-label:after{
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    left: 0;
    top: 50%;
    width: 18px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.slv-actv .slva-form .slva-types-wrap .slvat-content > a:hover{
    background-color: #d8d8d8;
}
/*.slv-actv .slva-form .input-group .input-group-label .select-wrapper .form-control:focus{
    padding-left: 5px;
    margin-left: 35px;
    width: 50px;
}*/
.slv-actv .slva-form .input-group .slva-types-trigger{
    line-height: 23px;
    position: relative;
    padding-left: 40px;
    box-shadow: none;
    color: inherit;
    min-width: 130px;
    text-align: left;
}
.slv-actv .slva-form .input-group .slva-types-trigger:before{
    position: absolute;
    content: '\f067';
    font-family: 'Font Awesome 5 Pro';
    font-size: 20px;
    width: 25px;
    left: 10px;
    opacity: 0.8;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.slv-actv .slva-form.panel-open .slva-types-trigger:before{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.slv-actv .slva-form .input-group .slva-types-trigger .slvatt-selected{
    background-color: transparent !important;
    position: relative;
    display: inline-block;
    padding-left: 32px;
    line-height: 1.6;
}
.slv-actv .slva-form .input-group .slva-types-trigger .slvatt-selected:after{
    font-family: 'font Awesome 5 Pro';
    position: absolute;
    left: 0;
    font-size: 13px;
    background-color: #d2d2d2;
    width: 25px;
    height: 25px;
    border-radius: 100px;
    overflow: hidden;
    text-align: center;
    line-height: 2;
    top: 50%;
    transform: translateY(-50%);
}

.slv-actv .slva-form .input-group .input-group-label .select-wrapper:after{
    content: '\f067';
    font-size: 20px;
    padding: 3px;
    background-color: transparent;
    left: 0;
    right: auto;
    width: 40px; 
    pointer-events: none;
}
.slv-actv .slva-form .input-group .input-group-label .select-wrapper:hover:after,
.slv-actv .slva-form .input-group .input-group-label .select-wrapper:focus:after{
    color: #108271;
}
.slv-actv .slva-form .input-group > .form-control{
    padding-left: 10px;
    padding-right: 0; 
}

.slv-actv .slva-form .content-editable{
    flex: 1;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
}
.slv-actv .slva-form .content-editable .form-control{
    height: auto;
    padding: 10px;
    word-break: break-word;
    box-shadow: none;
    line-height: 1.4;
}
.slv-actv .slva-form .content-editable .ce-placeholder{
    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 0.8;
    z-index: 1;
    pointer-events: none;
}
.slv-actv .slva-form .content-editable.not-empty .ce-placeholder{
    display: none;
}

.slv-actv .slva-form .input-group-label .button{
    padding: 7px 15px;
    height: 100%;
    opacity: 1;
}
.slv-actv .slva-form .input-group-label .button:disabled{
    opacity: 0.5;
}
.slv-actv .slva-form .input-group-label .button.loading:before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #e2e2e2;
}
.slv-actv .slva-form .input-group-label .button.loading:after{
    border-color: #108271 transparent #108271 transparent;
    right: 15px;
}
.slv-actv .slva-form .input-group-label .button:hover, 
.slv-actv .slva-form .input-group-label .button:focus{
    background-color: transparent;
    color: #108271;
}

@media screen and (max-width: 1024px) {
    .slv-details .slvd-header{
        flex-direction: column;
        flex-wrap: wrap;
        align-items: unset;
    }
    .slv-details .slvdh-actions{
        margin-top: 10px;
        width: 100%;
    }
    .slv-details .slvdh-actions .slvdh-straight-actions,
    .slv-details .slvdh-actions .slvdh-bubble-actions{
        float: left;
    }
    .slv-details .slvdh-actions .slvdh-straight-actions{
        margin-right: 10px;
    }
}

/* Lead won lost single */
.slv-wo-lo-watermark{
    background-repeat: no-repeat;
    background-position: center;
    background-size: 300px;
}

/* Lead won lost pop */
.slvp-btn-won{
    border-color: #49b356;
    background-color: #49b356;
}
.slvp-btn-won:focus,
.slvp-btn-won:hover{
    border-color: #76d281;
    background-color: #76d281;
}
.slvp-btn-loss{
    border-color: #cd5a5b;
    background-color: #cd5a5b;
}
.slvp-btn-loss:focus,
.slvp-btn-loss:hover{
    border-color: #eb797a;
    background-color: #eb797a;
}

/* Lead Attachment */
.at-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: normal;
    color: #555555;
    outline: 0;
    border-radius: 3px;
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid #006a5a;
}
.lead-attach-label{
    margin: 2px 3px 0 0;
}

/* User assignees */
.assignee-users{
    position: relative;
    pointer-events: all;
}
.assignee-users .au-list-wrap{
    float: left;
}
.assignee-users .au-list{
    padding: 0;
    margin: 0;
    list-style-type: none;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.assignee-users .au-list .aul-item{
    position: relative;
    align-items: center;
    z-index: 2;
}
.assignee-users .au-list .aul-item:not(:last-child){
    margin-left: -10px;
}
.aul-item .aul-i-pic{
    display: block;
    width: 35px;
    height: 35px;
    border-radius: 100%;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid #5d5d5d;
    cursor: pointer;
    background-color: #fff;
}
.aul-item .aul-i-name{
    position: absolute;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(0,0,0,0.9);
    color: #fff;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 3px;
    text-align: center;
    bottom: 115%;
    left: 50%;
    width: auto;
    max-width: 150px;
    font-weight: normal;
    z-index: 2;
    white-space: nowrap;
    pointer-events: none;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
}
.aul-item .aul-i-name.not-allow{
    display: none;
}
.aul-item .aul-i-name:after{
    position: absolute;
    content: " ";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(0,0,0,0.9);
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
}
.aul-item .aul-i-remover,
.aul-item .aul-i-add,
.sud-list .sud-item.exists .sud-i-pic:after{
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    top: -3px;
    right: -3px;
    background-color: #c84f4f;
    color: #fff;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    opacity: 0;
    pointer-events: none;
    display: block;
    cursor: pointer;
}
.aul-item .aul-i-remover > i{
    pointer-events: none;
}
.aul-item.empty .aul-i-pic{
    border-style: dashed;
    border-color: #aeaeae;
}
.aul-item.empty .aul-i-add{
    opacity: 1;
    top: 20px;
    pointer-events: all;
    background-color: #717171;
}
.assignee-users .au-list .aul-item:hover{
    z-index: 3;
}
.au-list .aul-item:hover .aul-i-pic{
    border-width: 2px;
}
.au-list .aul-item:hover .aul-i-name{
    opacity: 1;
    visibility: visible;
}
.assignee-users .au-list .aul-item:hover .aul-i-remover{
    opacity: 1;
    pointer-events: all;
}
.aul-item .aul-i-remover:hover{
    background-color: #df1616;
}
.aul-item.aul-i-more .aul-i-pic{
    background-color: #111a00;
    font-size: 15px;
    white-space: nowrap;
    line-height: 2.3;
    text-align: center;
    color: #fff;
    border: none;
}

.search-user-dropdown{
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 230px;
    max-width: 250px;
    background-color: #fff;
    z-index: 99;
    padding: 5px;
    overflow: hidden;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.3);
    background-clip: padding-box;
    margin-bottom: 35px;
    border-radius: 2px;
}
.search-user-dropdown.open{
    display: block;
}
.search-user-dropdown .search-filter{
    padding-left: 28px;
    padding-right: 6px;
    height: 30px;
    font-size: 13px;
    min-width: auto;
}
.search-user-dropdown .search-field-wrap:before{
    width: 30px;
    height: 30px;
    line-height: 32px;
    padding-left: 4px;
}
.search-user-dropdown .sud-list{
    padding: 0;
    margin: 5px 0 0;
    list-style-type: none;
    max-height: 180px;
}
.sud-list .sud-item{
    cursor: pointer;
}
.sud-list .sud-item > .flex-item{
    align-items: center;
    padding: 3px 5px;
}
.sud-list .sud-item .sud-i-pic{
    display: inline-block;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border-radius: 100px;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    overflow: hidden;
    margin-right: 8px;
    background-color: #eee;
    border: 1px solid #ddd;
    position: relative;
}
.sud-list .sud-item .sud-i-name{
    white-space: normal;
    line-height: 1;
}
.sud-list .sud-item:hover{
    background-color: #eee;
}
.sud-list .sud-item.exists .sud-i-pic{
    border: 2px solid #3891dd;
    overflow: visible;
}
.sud-list .sud-item.exists .sud-i-pic:after{
    content: '\f00d';
    font-family: 'Font Awesome 5 Pro';
    bottom: -3px;
    top: auto;
    width: 12px;
    height: 12px;
    font-size: 10px;
    line-height: 13px;
}
.sud-list .sud-item.exists:hover .sud-i-pic:after{
    opacity: 1;
}
.sud-overlay{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 90;
}
.search-user-dropdown .sud-no-users{
    padding: 5px;
}

/* Vertical assignees */
.assignee-users.vertical{
    margin: 100px auto 0;
}
.assignee-users.vertical:before{
    position: absolute;
    content: '';
    height: 100px;
    border-left: 2px dashed #c6c6c6;
    bottom: 100%;
    left: 50%;
}
.assignee-users.vertical .au-list{
    flex-direction: column;
}
.assignee-users.vertical .au-list .aul-item:not(:last-child){
    margin-left: auto;
    margin-bottom: -10px;
}

/*.assignee-users.disabled,
.assignee-users.disabled .aul-item.empty .aul-i-add{
    pointer-events: none !important;
}*/
.assignee-users.disabled{
    opacity: 1;
}
.assignee-users.disabled .au-list .aul-item{
    pointer-events: all;
}
.assignee-users.disabled .au-list .aul-item:hover .aul-i-remover{
    opacity: 0;
    pointer-events: none;
}
.assignee-users.disabled .aul-item .aul-i-pic{
    cursor: auto;
}
.assignee-users.disabled .aul-item .aul-i-name.allow,
.assignee-users.disabled .aul-item.empty .aul-i-add{
    display: none;
}
.assignee-users.disabled .aul-item .aul-i-name.not-allow{
    display: block;
}


/* ---------------------------------
    Content - Users
   --------------------------------- */
.ul-user-col-name{
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.ul-user{
    position: relative;
}
.ul-user .ulu-avatar{
    display: inline-block;
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
    border-radius: 100px;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    overflow: hidden;
    margin-right: 10px;
}
.pg-users-rw .pg-users-col-pic{
    width: 100px;
}
.pg-users-rw .pg-users-col-first{
    width: calc(100% - 100px);
}

/* ---------------------------------
    Content - Settings
   --------------------------------- */
.settings-panel{
    position: relative;
}
.settings-panel .settings-nav{
    border-right: 1px solid #ebebeb;
    padding-right: 0;
}
.settings-nav .settings-nav-item{
    display: block;
    padding: 10px 15px;
    color: inherit;
    margin-bottom: 1px;
    border: none;
    width: 100%;
    text-align: left;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    box-shadow: none;
}
.settings-nav .settings-nav-item:last-child{
    margin-bottom: 0;
}
.settings-nav .settings-nav-item > i{
    width: 20px;
    color: initial;
}
.settings-nav .settings-nav-item:hover{
    background-color: #ebebeb;
}
.settings-nav .settings-nav-item.active{
    font-weight: 500;
    background-color: #ebebeb;
}
.settings-panel .settings-tab{
    display: none;
}
.settings-panel .settings-tab.active{
    display: block;
}
.settings-tab .st-heading{
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebebeb;
}

/* ---------------------------------
    Content - Funnel
   --------------------------------- */
.drag-drop-info{
    margin: 0;
    line-height: 1.2;
}
.funnel-content-make-ralative{
    position: relative;   
}
.funnel-filter-wrap{
    justify-content: flex-end;
    align-items: center;
}
.funnel-filter{
    display: inline-block;
    width: 175px;
}
.funnel-filter-dropdown{
    display: inline-block;
    width: 150px;
}
.funnel-lead-add{
    margin: -2px 0 0 2px;
}
.funnel-filter .app-ratings-selector .clear{
    right: 16px;
}
.funnel-wrapper{
    display: flex;
    flex-direction: row;
    /*overflow: hidden;*/
    border: 1px solid #ebebeb;
}
.settings-dropdown > .dropdown-toggle{
    font-size: 24px;
}
.settings-dropdown .dropdown-menu{
    top: 130%;
}
.settings-dropdown .dropdown-menu.pointed.right:after{
    right: 5px;
}

/*Dont change this class name*/
.funnel-column{
    position: relative;
    width: 100%;
    overflow: hidden;
/*    display: flex;
    align-items: center;
    justify-content: center;*/
}
/*Dont change this class name*/
.funnel-item-s{
    width: 100%;
    min-height: calc(100vh - 200px);
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    border-right: 1px solid #ebebeb;
    position: relative;
}
.funnel-item-s::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}
.column-active{
    background-color: #00695a;
}
.content-loader-hide .content-loader{
    display: none;
}
.content-loader-show .content-loader{
    display: block;
}
.funnel-step-title{    
    font-weight: 600;
    font-size: 15px;
    padding: 10px 15px;
    vertical-align: middle;
    color: #474747;
    text-align: left;
    border-right: 1px solid #ebebeb;
    background-color: #f4f4f4;
}
.funnel-column-last{
    border-right: 0px solid #ebebeb;
}
.funnel-item{
    height: 50px;
    background-color: #f7f7f7;
    margin: 5px;
    border: 1px solid #ebebeb;
    display: flex;
    flex-direction: row;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}
.funnel-item:hover{
    background-color: #e0e0e0;
}
.funnel-item .funnel-item-details-wrap{
    /*width: calc(100% - 30px);*/
    width: 100%;
}
.funnel-item-icon{
    width: 30px; 
    min-width: 30px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.funnel-item-icon i{
    color: #ffffff;
    font-size: 16px;
}
.funnel-item-icon:after{
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Brands';
    font-weight: lighter;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    color: #fff !important;
    font-size: 16px;
}

/* Facebook special icon */
.funnel-item-icon.activity-type[data-icon-val="f082"]:after{
    content: "\f39e" !important;
}
.funnel-fb{
    background-color: #8894bf;
}
.funnel-insta{
    background-color: #db73ab;
}
.funnel-web{
    background-color: #059e4a;
}
.funnel-manual{
    background-color: #fcba03;
}
.funnel-item-detail{
    display: flex;
    flex-direction: column;
    width: 87%;
    justify-content: center;
}
.funnel-item-detail p{
    margin: 0 0 0 6px;
    line-height: 16px;  
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  
}
.funnel-item-grab{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    color: #757575;
}
.funnel-item-name{
    font-size: 14px;
    font-weight: 500;
}
.funnel-item-phone{
    font-size: 12px;
    font-weight: 400;
    width: 150px;
    display: inline !important;
}
.funnel-step-drag-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px 0 0;
    cursor: move;
    width: 30px;
}
.f-step-sort.step-length-1 .f-step-sort-first .f-step-sort-field .f-step-sort-group .funnel-step-drag-icon{
    pointer-events: none;
    display: none;
}
#won-lost-model{
    visibility: hidden;
}
.won-lost-model-wrapper{
    display: flex;
    align-items: center;
    padding: 2px;
    -webkit-appearance: none;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}
.wlm-drop{
    width: 48%;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: dashed 1px;
    border-radius: 5px;
    font-size: 16px;
}
.wlm-drop-left{
    border-color: #cd5a5b;
    color: #cd5a5b;
}
.wlm-drop-right{
    border-color: #49b356;
    color: #49b356;
    margin-right: 5px;
}
.wlm-drop.on-drag-over{
    background-color: #eee;
}

@media screen and (max-width: 1439px) {
    .won-lost-model-wrapper .wlm-drop{
        width: 40%;
    }
}

/* Won / Lost single model*/
.model-wrapper-new {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99992;
    -webkit-overflow-scrolling: touch;
    outline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: rgba(30, 30, 30, 0.9);
}
.model-wrapper-new.in {
    display: block;
}
.model-dialog-new {
    position: relative;
    background-clip: padding-box;
    background-color: #fff;
    width: 500px;
    box-shadow: 5px 2px 20px 0 rgba(0, 0, 0, 0.2);
    outline: 0;
    margin: 50px auto;
    overflow: hidden;
}
.model-dialog-new .model-header-new{
    padding-bottom: 10px;
    width: 100%;
    background-color: #111a00;
    padding: 10px 0;
}
.model-dialog-new .model-header-top{
    display: table;
    vertical-align: top;
    width: 100%;
}
.model-dialog-new .model-header-bottom{
    margin: 5px 0;
}
.model-dialog-new .model-header-bottom .model-avatar{
    width: 55px;
    height: 55px;
    min-width: 55px;
    min-height: 55px;
    overflow: hidden;
    border-radius: 100%;
    background-color: #ebebeb;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
.model-dialog-new .model-header-bottom .model-text-wrapper{
    flex-direction: column;
    padding-left: 10px;
    padding-right: 25px;
    justify-content: center;
    flex: 1;
}
.model-dialog-new .model-closer-new,
.model-dialog-new .model-heading-new{
    display: table-cell;
    vertical-align: top;
    /*below only for model-closer-new*/
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 99999;
}
.model-dialog-new .model-heading-new{
    padding-right: 15px;
    position: relative;
}
.model-dialog-new .model-heading-new .icon{
    margin-right: 5px;
}
.model-dialog-new .model-header-new .model-header-bottom h3{
    font-size: 22px;
    margin: 0;
    font-weight: 500;
    line-height: 1;
    color: #ffffff;
}
.model-dialog-new .model-header-new .model-header-bottom h5{
    margin: 5px 0 0;
    font-weight: 300;
    font-size: 14px;
    color: #ffffff;
}
.model-dialog-new .model-closer-new{
    width: 25px;
}
.model-dialog-new .model-closer-new button{
    display: inline-block;
    background-color: transparent;
    font-size: 22px;
    outline: 0 !important;
    border: 0 !important;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
    color: #ffffff;
    padding: 0;
}
.model-dialog-new .model-closer-new button:hover{
    color: #ffffff;
}
.model-dialog-new .model-content-new{
    position: relative;
    padding: 15px 25px;
}
.model-dialog-new .model-content-new p{
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.4;
}
.model-dialog-new .model-content-new .content-loader{
    position: absolute;
    border-radius: 0;
}
.model-dialog-new .model-content-new .content-loader.loading:after{
    top: 37%;
    left: 46%;
}
/*-------------------------------------*/

.funnel-bottom-wrapper{
    position: absolute;
    display: block;
    background-color: #ffffff;
    width: 20%;/* 100 */
    margin: 10px 0 0 0;
    padding: 0 1px 0 1px;
    height: 62px;/* 97 */
    left: 100px;
    top: 0;/* remove */
}
.funnel-bottom{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ebebeb;
    box-shadow: 0px -2px 5px #ebebeb;
    width: 100%;
    height: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/*Dont change this class name*/
.funnel-won-lost{
    height: 50px;
    width: 400px;
    margin: 0 30px;
    padding: 14px;
    font-size: 15px;
}


/*Dont change this class name*/
.funnel-lost{
    background-color: #c1585b;
    border: 1px solid #c1585b;
}
.funnel-lost:hover{
    background-color: #df6e71;
    border: 1px solid #df6e71;
}

/*Dont change this class name*/
.funnel-won{
    background-color: #5eb84c;
    border: 1px solid #5eb84c;
}
.funnel-won:hover{
    background-color: #7dd76a;
    border: 1px solid #7dd76a;
}

.funnel-step-loader{
    position: absolute;
    height: 35px;
    background-color: #ffffff;
    border: none;
    bottom: 0;
    left: 1px; 
    right: 1px;
    text-align: center;
    padding: 9px 10px;  
    pointer-events: none; 
    opacity: 1;
    z-index: 3;
    -webkit-transition: all ease-in-out 0.15s;
    -moz-transition: all ease-in-out 0.15s;
    transition: all ease-in-out 0.15s;
}
.funnel-step-loader-hide{
    opacity: 0;
    z-index: -1;
}
.funnel-step-loader.loading:after{
    content: '';
    border: 2px solid #fff;
    border-top: 2px solid transparent;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    margin: 0 auto;
    border-color: #00695a transparent #00695a transparent;
    display: inline-block;
    -webkit-animation: spin-dual-ring 1.2s linear infinite;
    -moz-animation: spin-dual-ring 1.2s linear infinite;
    animation: spin-dual-ring 1.2s linear infinite;
}

/* ---------------------------------
    Content - Help
   --------------------------------- */
#help-iframe{
    width: 100%;
    min-height: calc(100vh - 124px);
    border: 0px;
}

/* ---------------------------------
    Content - Email
   --------------------------------- */
.email-panel{
    position: relative;
    flex-direction: column;
}
.email-nav-wrapper{
    border-bottom: 1px solid #ebebeb;
}
.email-panel .email-nav{
    padding-right: 0;
}
.email-nav .email-nav-item{
    display: block;
    padding: 10px 15px;
    color: #757575;
    border: none;
    width: 120px;
    text-align: center;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    font-size: 18px;
}
.email-nav .email-nav-item:last-child{
    margin-bottom: 0;
}
.email-nav .email-nav-item > i{
    width: 20px;
    color: initial;
}
.email-nav .email-nav-item:hover{
    background-color: #ebebeb;
}
.email-nav .email-nav-item.active{
    font-weight: 500;
    border-bottom: 4px solid #108271;
}
.email-panel .email-tab{
    display: none;
}
.email-panel .email-tab.active{
    display: block;
}
.email-compose-wrapper{
    border: 1px solid #ebebeb;
    margin: 20px 0 0 0;
}
.email-field-margin{
    margin-left: 0;
    margin-right: 0;
}
.email-field-border{
    border-bottom: 1px solid #ebebeb;
}
.email-label{
    color: #757575;
    font-size: 14px;
    font-weight: 500;
    margin: auto;
}
.email-sb-dropdown{
    margin: 7px 0;
    width: 100%;
}
.hide-common-style{
    border: 0px;
    box-shadow: none !important;
}
.hide-col-padding{
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.form-group-file{
    justify-content: flex-end;
    margin-top: 3px;
    margin-bottom: 0px !important;
}
.email-body{
/*    height: calc(100vh - 470px) !important;
    max-height: calc(100vh - 470px) !important;*/
    height: 300px !important;
    max-height: 300px !important;
    padding: 0px 12px
}
.email-btn{
    border: 0px;
    border-color: #ffffff;
    background-color: #ffffff !important;
    font-size: 20px;
    padding: 5px 15px 5px !important;
}
.sms-body{
    /*height: calc(100vh - 380px) !important;
    max-height: calc(100vh - 380px) !important;*/
    height: 300px !important;
    max-height: 300px !important;
    padding: 0px 12px
}
.email-template-wrapper{
    margin: 20px 0 0 0;
}
.email-template-body-wrapper{
    border: 1px solid #ebebeb;
}
.email-trash-btn{
    color: #ba404c;
}
.email-trash-btn:focus,
.email-trash-btn:hover{
    color: #c4545f;
}
.email-template-body{
    height: calc(100vh - 349px) !important;
    max-height: calc(100vh - 349px) !important;
}
.app-file-uploader{
    width: 20px;
    height: 20px;
    border-radius: 0;
    border: 0px;
}
.app-file-uploader .file-icon{
    font-size: 18px;
}
.app-file-uploader .at-icon{
    width: fit-content;
    font-size: 14px;
    border-radius: 0;
    color: #006a5a;
}
.email-attachment-wrapper{
    margin: 5px 0 0 15px;
}
.email-attachment-label{
    font-size: 14px;
    color: #757575;
    font-weight: 600;
    margin: 0 0 0 3px;
}
.email-attachment-ul{
    /*background: #ebebeb;*/
    margin: 7px 0;
    padding: 0 20px;
    list-style: none;
}
.email-attachment-ul .email-attachment-li{
    /*background: #cce5ff;*/
    margin: 5px 0;
}
.email-attachment-remove{
    color: #f24f4f;
    font-size: 12px;
    margin: 0 0 0 5px;
}
.email-attachment-remove:focus,
.email-attachment-remove:hover{
    color: #f24f4f;
}
.file-too-large{
    color: #ba404c !important;
}

/* ---------------------------------
    Notifications
   --------------------------------- */
.notifications-list{
    width: calc(100% + 45px);
    overflow: hidden;
}
.notifications-list .nl-item{
    position: relative;
    border-radius: 3px;
    margin-bottom: 10px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    width: 100%;
}
.notifications-list .nl-item > a{
    display: block;
    color: inherit;
    background-color: #f6f6f6;
    max-width: 650px;
}
.notifications-list .nl-item.unread > a{
    border-left: 4px solid #3891dd;
}
.nl-item .nl-i-header{
    width: 100%;
    justify-content: space-between;
    padding: 10px 15px 0;
    /*background-color: #efefef;*/
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.nl-item .nl-i-header .nl-ih-heading{
    margin: 0;
    color: #474747;
    padding-right: 20px;
}
.nl-item .nl-i-header .nl-ih-date{
    margin: 0;
    font-size: 13px;
    color: #949494;
    white-space: nowrap;
}
.nl-item .nl-i-body{
    padding: 5px 15px 10px;
}
.nl-item .nl-i-body p{
    margin: 0 0 10px;
    line-height: 1.3;
}
.nl-item .nl-i-body p:last-child{
    margin-bottom: 0;
}
.notifications-list .nl-item a:hover{
    background-color: #e7e7e7;
}

.nl-item .nl-i-change-status{
    position: absolute;
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 32px;
    border-radius: 100%;
    border: none;
    outline: none;
    background-color: #0e9f89;
    color: #fff;
    text-align: center;
    font-size: 18px;
    padding: 0;
    cursor: pointer;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
}
.nl-item .nl-i-change-status:hover{
    background-color: #108271;
}
.nl-item:hover .nl-i-change-status{
    opacity: 1;
    visibility: visible;
}

.notifications-list .nl-item.swipe{
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    transform: scale(0.85);
    -webkit-animation: swipe_left 0.2s linear 0.2s forwards, notifi_hide 0.2s linear 0.5s forwards; 
    -moz-animation: swipe_left 0.2s linear 0.2s forwards, notifi_hide 0.2s linear 0.5s forwards; 
    animation: swipe_left 0.2s linear 0.2s forwards, notifi_hide 0.2s linear 0.5s forwards; 
}

@-webkit-keyframes swipe_left {
    0%{ right: 0%; }
    100%{ right: 100%; }
}
@-moz-keyframes swipe_left {
    0%{ right: 0%; }
    100%{ right: 100%; }
}
@keyframes swipe_left {
    0%{ right: 0%; }
    100%{ right: 100%; }
}

@-webkit-keyframes notifi_hide {
    to{
        height: 0px;
        overflow: hidden;
        margin-bottom: 0;
        opacity: 0;
    }
}
@-moz-keyframes notifi_hide {
    to{
        height: 0px;
        overflow: hidden;
        margin-bottom: 0;
        opacity: 0;
    }
}
@keyframes notifi_hide {
    to{
        height: 0px;
        overflow: hidden;
        margin-bottom: 0;
        opacity: 0;
    }
}

/* ---------------------------------------------
    Celebration styles (balloons and fireworks)
   --------------------------------------------- */
.app-celebrations{
    position: fixed;
    top: 60px;
    left: 80px;
    right: 0;
    bottom: 0;
    z-index: 999;
    overflow: hidden;
    pointer-events: none;
}
.pyro{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}
.pyro > .before, .pyro > .after {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, -12px -338.66667px #00f6ff, 220px -388.66667px #99ff00, -69px -27.66667px #ff0400, -111px -339.66667px #6200ff, 155px -237.66667px #00ddff, -152px -380.66667px #00ffd0, -50px -37.66667px #00ffdd, -95px -175.66667px #a6ff00, -88px 10.33333px #0d00ff, 112px -309.66667px #005eff, 69px -415.66667px #ff00a6, 168px -100.66667px #ff004c, -244px 24.33333px #ff6600, 97px -325.66667px #ff0066, -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, 140px -196.66667px #9000ff, 125px -175.66667px #00bbff, 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, 91px -278.66667px #000dff, -22px -191.66667px #9dff00, 139px -392.66667px #a6ff00, 56px -2.66667px #0099ff, -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, -238px -346.66667px #00ff73, 62px -363.66667px #0088ff, 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, 141px -208.66667px #9000ff, 211px -285.66667px #ff6600, 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, 189px 70.33333px #00ffc8, -18px -383.66667px #00ff33, 100px -6.66667px #ff008c;
    -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
    animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; 
}

.pyro > .after {
    -moz-animation-delay: 1.25s, 1.25s, 1.25s;
    -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
    -o-animation-delay: 1.25s, 1.25s, 1.25s;
    -ms-animation-delay: 1.25s, 1.25s, 1.25s;
    animation-delay: 1.25s, 1.25s, 1.25s;
    -moz-animation-duration: 1.25s, 1.25s, 6.25s;
    -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
    -o-animation-duration: 1.25s, 1.25s, 6.25s;
    -ms-animation-duration: 1.25s, 1.25s, 6.25s;
    animation-duration: 1.25s, 1.25s, 6.25s; 
}

@-webkit-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; 
    }
}
@-moz-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; 
    } 
}
@-o-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; 
    }
}
@-ms-keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; 
    } 
}
@keyframes bang {
    from {
        box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; 
    } 
}
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; 
} 
}
@-moz-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0; 
    } 
}
@-o-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0; 
    } 
}
@-ms-keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0; 
    } 
}
@keyframes gravity {
    to {
        transform: translateY(200px);
        -moz-transform: translateY(200px);
        -webkit-transform: translateY(200px);
        -o-transform: translateY(200px);
        -ms-transform: translateY(200px);
        opacity: 0; 
    } 
}
@-webkit-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%; 
    }
    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%; 
    }
    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%; 
    }
    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%; 
    }
    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%; 
    } 
}
@-moz-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%; 
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%; 
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%; 
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%; 
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%; 
    } 
}
@-o-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%; 
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%; 
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%; 
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%; 
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%; 
    } 
}
@-ms-keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%; 
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%; 
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%; 
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%; 
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%; 
    } 
}
@keyframes position {
    0%, 19.9% {
        margin-top: 10%;
        margin-left: 40%; 
    }

    20%, 39.9% {
        margin-top: 40%;
        margin-left: 30%; 
    }

    40%, 59.9% {
        margin-top: 20%;
        margin-left: 70%; 
    }

    60%, 79.9% {
        margin-top: 30%;
        margin-left: 20%; 
    }

    80%, 99.9% {
        margin-top: 30%;
        margin-left: 80%; 
    } 
}


.balloon-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.balloon {
    height: 125px;
    width: 105px;
    border-radius: 75% 75% 70% 70%;
    position: relative;
}

.balloon:before {
    content: "";
    height: 75px;
    width: 1px;
    padding: 1px;
    background-color: rgba(0,0,0,0.5);
    display: block;
    position: absolute;
    top: 125px;
    left: 0;
    right: 0;
    margin: auto;
}

.balloon:after {
    content: "▲";
    text-align: center;
    display: block;
    position: absolute;
    color: inherit;
    top: 120px;
    left: 0;
    right: 0;
    margin: auto;
}

@keyframes float {
    from {transform: translateY(100vh); opacity: 1;}
    to {transform: translateY(-300vh); opacity: 0;}
}

/* ---------------------------------
    Reports
   --------------------------------- */
.abc-acquisition-overview,
.abc-acquisition-overview .app-container{
    background-color: #f4f4f4;
}

.report-tab-panel{
    position: relative;
}
.report-tab-panel .rtp-nav{
    width: 220px;
    border-right: 1px solid #ebebeb;
}
.report-tab-panel .rtp-content{
    flex: 1;
    padding-left: 15px;
}
.rtp-nav .rtp-nav-item{
    display: block;
    color: inherit;
    margin-bottom: 1px;
    padding: 10px 15px;
}
.rtp-nav .rtp-nav-item:hover,
.rtp-nav .rtp-nav-item.active{
    background-color: #ebebeb;
}
.rtp-nav .rtp-nav-item.active{
    font-weight: 500;
}
.rtp-content .rtp-c-tab{
    display: block;
}

.card-panel{
    position: relative;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    margin-bottom: 20px;
}
.card-panel .cp-heading{
    padding: 15px;
}
.card-panel .cp-heading > h3{
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}
.card-panel .cp-content{
    padding: 0 15px 15px;
}

tr td.hovered{
    background-color: #f5f5f5;
}


/* ---------------------------------
    Print styles
   --------------------------------- */
@media print {
    .app-header,
    .app-sidebar-nav,
    .print-hide{
        display: none !important;
    }
    .app-container{
        margin-top: 0 !important;
        margin-left: 0 !important;
    }
    .print-full-width{
        width: 100% !important;
    }
    .print-block{
        display: block;
    }
    .print-text-left{
        text-align: left !important;
    }
    .printable .print-result-filters{
        justify-content: flex-start;
        margin-top: 15px !important;
    }
    .printable .print-result-filters .m-l-10:first-of-type{
        margin-left: 0 !important;
    }
    .printable .print-page-break{
        page-break-after: always;
    }

    .printable .card-panel{
        box-shadow: none;
    }
    .printable .card-panel .cp-heading{
        padding: 0 0 15px;
    }
    .printable .card-panel .cp-content{
        padding: 0;
    }
}

.li-disp-inline > li{
    display: inline;
    margin-right: 60px;
}

.th-align-left th{
    text-align: left;
}

.capitalize{
    text-transform: capitalize;
}

.top-bar{
    padding: 11px 10px;
    position: sticky;
    box-shadow: 0px 0px 10px -1px black;
    z-index: 10000;
    align-items: center;
}

.top-bar .top-bar-inner{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.top-bar .user .user-inner{
    position: relative;
}

.top-bar .user .user-inner .user-options{
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    visibility: hidden;
    top: 74px;
    background-color: #f7f7f7;
    box-shadow: 0 2px 12px -6px black;
}

.top-bar .user .user-inner .user-options.show{
    visibility: visible;
}

.top-bar .user .user-inner .user-options.show + .log-out-fail{
    opacity: 0.2;
}

.top-bar .user .user-options > ul{
    padding: 0;
    margin: 0;
}

.top-bar .user .user-options > ul > li{
    list-style: none;
}

.top-bar .user .user-options > ul > li > a{
    font-size: 16px;
    width: 150px;
    padding: 13px 10px;
    display: inline-block;
    text-align: center;
}

.top-bar .user .user-options > ul > li:not(:last-child){
    border-bottom: 1px solid;
}

.top-bar .logo > a,
.top-bar .user .user-avatar{
    display: inline-block;
    position: relative;
}

.top-bar .user .user-avatar{
    width: 45px;
    height: 45px;
    overflow: hidden;
    border-radius: 50px;
    border: 2px solid #ff3334;
}

.top-bar .user .user-avatar:hover{
    box-shadow: 0px 3px 9px -2px rgba(0, 0, 0, 0.6);
}

.top-bar .logo > a{
    width: 120px;
    height: 65px;
    overflow: hidden;
}

.top-bar .logo > a > img,
.top-bar .user .user-avatar > img{
    width: 90%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.top-bar .user .user-avatar > img{
    width: 87%;
}

.listing-top-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.listing-search input{
    height: 45px;
    width: 290px;
    padding: 10px 10px;
}

.common-add-item{
    font-size: 22px;
}

.common-main-content{
    margin-top: 30px;
}

.table-common{
    font-size: 16px;
    margin: auto;
    width: 100%;
}

.table-projects td,
.table-projects th{
    width: 25%;
}

.table-projects td:last-child,
.table-projects th:last-child{
    width: 2%;
}

.table-common th, .table-common td{
    padding: 17px 20px;
}

.table-common th{
    text-align: left;
}

/*.table-designs tr th:last-child,
.table-designs tr td:last-child,
table-projects tr th:last-child,
table-projects tr td:last-child{
    
}*/

.table-common tbody tr:nth-child(odd){
    background-color: #f4f4f4;
}

.table-common tbody tr:not(:first-child):hover{
    background-color: #e8e8e8;
    cursor: pointer;
}

.table-buttons{
    display: flex;
    align-items: center;
}

.table-buttons > a:first-child{
    margin-right: 15px;
}

.form-title{
    color: #5d5c5c;
}

.add-proj-section{
    display: flex;
    flex-direction: column;
}

.proj-des-data-entry-sec,
.common-data-entry-sec{
    display: flex;
    flex-wrap: wrap;
}

.common-data-entry-sec,
.proj-submit-sec,
.proj-des-form-botom,
.proj-res-sec,
.des-res-sec,
.lc-wrapper{
    padding: 0 270px;
}

.add-proj-section .proj-name-sec .common-data-entry-sec .form-group{
    width: 100%;
}

.add-proj-section .form-common input[type=text],
.add-proj-section .form-common input[type=email],
.add-proj-section .form-common input[type=number],
.add-proj-section .form-common select{
    width: 100%;
}

.add-proj-section .proj-name-sec{
/*    display: flex;
    align-items: flex-end;        */
}

.add-proj-section .proj-name-sec .common-data-entry-sec{
    /*margin-right: 60px;*/
}

.proj-name-sec .buttons-wrapper{
    display: flex;
}

.proj-name-sec .design-info-sec{
    margin-top: 60px;
}

.proj-name-sec .design-info-sec .common-data-entry-sec{
    display: inline-block;
    width: 100%;
}

.design-info-sec .form-bottom{
    margin-top: 0px;
    /*display: flex;*/
    justify-content: space-between;
    align-items: center;
}

.design-info-sec .form-bottom .form-group{
    /*margin-bottom: 0;*/
}

.form-bottom.copy-link-wrapper input[type=text]{
    margin-right: 13px;
    width: 485px;
    padding: 10px;
}

.form-bottom.copy-link-wrapper.proj-des-form-botom input[type=text]{
    width: 100%;
}

.form-group .radio-wrapper > input{
    margin-left: 10px;
}

.form-group .radio-wrapper > input:not(:last-child){
    margin-right: 30px
}

.form-group .radio-wrapper .fld-label{
    margin-bottom: 0;
}

#hello{
    display: none;
}

/*
Copy link wrapper inner
*/

.copy-link-inner{
    position: relative;
}

.copy-link-inner .copy-link-notice,
.copy-link-inner .arrow-up,
.copy-link-inner .arrow-up-behind{
    opacity: 0;
}

.copy-link-inner .copy-link-notice{
    position: absolute;
    right: 0;
    top: 68px;
    font-size: 16px;
    width: 260px;
    text-align: center;
    padding: 19px 13px;
    color: #0a9206;
    background-color: #e2f9e2;
    border: 2px solid #0a9206;
    box-shadow: 0 0 5px -2px black;
}

.copy-link-inner.copied .copy-link-notice,
.copy-link-inner.copied .arrow-up,
.copy-link-inner.copied .arrow-up-behind{
    opacity: 1;
}

.copy-link-inner .arrow-up-behind{
    border-bottom: 21px solid #e2f9e2;
    top: 51px;
    left: 487px;
}

.copy-link-inner .arrow-up{
    border-bottom: 20px solid #0a9206;
    top: 48px;
    left: 488px;
}

.copy-link-inner .arrow-up,
.copy-link-inner .arrow-up-behind{
    transform: none
}

.page-design-edit .proj-res-sec{
    margin-bottom: 0;
}

.page-design-edit .proj-res-sec .response-output{
    margin-bottom: 25px;
}

.des-img-wrapper{
    height: 250px;
    overflow: hidden;
    position: relative;
    /*box-shadow: 0 -4px 2px -1px black;*/
    border: 1px solid black;
    border-bottom: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.des-img-wrapper .overlay-white,
.des-img-wrapper a{
    position: absolute;
}

.des-img-wrapper .overlay-white{
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background-image: linear-gradient( rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

.des-img-wrapper a{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
/*
Title bar
*/
.title-bar{
    display: flex;
    justify-content: center;
    padding: 50px 0;
    color: white;
    position: relative;
    font-size: 40px;
    margin-bottom: 20px;
}

.title-bar > replace-text{
    z-index: 2;
}

.title-bar:after{
    background-color: #006a59;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    z-index: 1;
}
/*
Breadcrumbs
*/

.breadcrumbs{
    margin-bottom: 20px;
    padding: 10px 0;
    position: relative;
}

.breadcrumbs:after{
    content: "";
    position: absolute;
    width: 100%;
    bottom: 0px;
    background-color: #0e9f89;
    height: 1px;
}

.breadcrumbs ul{
    padding: 0;
    margin: 0;
}

.breadcrumbs ul > li{
    display: inline;
}

.breadcrumbs ul > li:not(:last-child){
    margin-right: 6px;
    color: #006a5a;
}

.breadcrumbs ul > li > a:hover{
    color: #7fb4ac;
}

.breadcrumbs ul > li:not(:last-child):after{
    content: ">";
    margin-left: 6px;
}