/* body { */
    /* -moz-transform: scale(0.8, 0.8); Moz-browsers */
    /* zoom: 0.8; Other non-webkit browsers */
    /* zoom: 80%; Webkit browsers */
/* } */

body, body.auth-wrapper .all-wrapper {
    padding: 0px !important;
}

.form-control {
    font-weight: 400;
}
.menu-side-compact-w {
    /* background-color: #fff;
    -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
    box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
    position: relative;
    width: 90px; */
    border-radius: 0px 0px 0px 0px !important;
}

.menu-side .content-w {
    border-radius: 0px 0px 0px 0px !important;
    /* display: table-cell; */
}


.top-menu-secondary {
    /* background-color: #fff;
    -webkit-box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
    box-shadow: 0px 2px 4px rgba(126, 142, 177, 0.12);
    padding: 0px 20px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative; */
    border-radius: 0px 0px 0px 0px;
}

.voice {
    padding: 15px !important;
}

.content-box {
    padding: 0px !important;
}

.logo-w{
    /* margin-top:-20px; */
    min-height: 54px;
    max-height: 54px;
}

/* .logo{
    margin-top:-10px;
    z-index: 9999;
} */

.logonya{
    z-index: 9999;
}

@media (max-width: 1650px)
.content-box {
    padding: 0px !important;
}


.menu-position-side.menu-w.menu-side-left .logo-w:first-child {
    border-radius: 0px 0px 0px 0px !important;
}


.daft-channel{
    margin-bottom: -32px;
}


.os-tabs-controls {
    padding-top: 8px;
    padding-left: 10px;

}

.padding15{
    padding:20px !important;
}


/* 
.content-panel.compact {
    margin-right: 0px !important;
    margin-left: 20px  !important;
} */

.layout-w{
    /* min-height: 100% !important; */

}

.content-w{
    min-height: 96vh !important;
    /* overflow: scroll !important; */
}

.floated-customizer-btn{
    display: none;
}

.floated-colors-btn {
    display: none;
}

.floated-chat-btn{
    display: none;
}

/* #main-content{
    margin-left:-20;
    margin-right:-20;
} */

.daft-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
  }


  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  .sticky + .content {
    padding-top: 60px;
  }
  
  #navbar{
      z-index: 20;
  }

  #main-content{
    padding-top: 48px;
    /* padding-top: 24px; */
  }


  .top-bar .logged-user-w .logged-user-menu {
    top: 47px;
    right: -17px;
}

  /* .user-avatar-w{
      color: #046fdf !important;
  } */

.biru{
      color: #046fdf !important;
}

.daft-user-menu{
    margin-left:-15px !important; 
    margin-right:-15px  !important;
}

.aei-timestamp{
    color:#474747 !important;
}

/* .new {
    background-color: #fbb463 !important;
} */

/* tabsnya */

.nav-link .close {
    display: inline-block;
    margin-left: 10px;
    margin-top: 1px;
}

.close {
    font-size: 1rem !important;
    font-weight: 500;
    line-height: 1;
    float: right;
    opacity: .5;
    color: #000;
    text-shadow: none;
}



.close:hover, .close:focus {
    color: #e65252;
    text-decoration: none;
    opacity: 1;
}

.nav-tabs .nav-link.active .close {
    color: #000;
    opacity: 1;
}

.nav-tabs .nav-link.active .close:hover, .close:focus  {
    color: #e65252;
}

.daft-cat-ticket{
    padding-bottom: 10px;
}


.alignleft {
	float: left;
}
.alignright {
	float: right;
}

.daft-clear{
    clear: both;
}


a i .daft-bold{ 
     font-weight: 500 !important; 
}


.frameabu{
    padding: 15px 15px;
    /* margin-left: 15px; */
    font-size: .99rem;
    background-color:#f3f3f7;
    border-radius: 6px;
}


.framepink{
    padding: 15px 15px;
    /* margin-left: 15px; */
    font-size: .99rem;
    background-color:#fff6d7;
    border-radius: 6px;
}

ul.horizontal-list li {
    display: inline;
    padding-right:10px;
  }


.gold{
    color: #fbb463;
    /* color: #d7dd3b; */
    
} 

.daft-tanggal{
    position: absolute;
    top: 10px;
    right: 15px;
    color:#A3A3A3;
    font-size: .63rem;
}

.active > .daft-tanggal{
    color:#fff;
}


.daft-tanggal2{
    margin-top:-15px;
    margin-right:-20px;
}

.daft-email-spoiler{
    min-height:45px;
}

.daft-load{
    text-align: center;
}

.next{
    font-family: Arial, Helvetica, sans-serif !important;
   content: ">"  !important;
}

.prev{
    font-family: Arial, Helvetica, sans-serif  !important;
   content: "<"  !important;
}

/* helper cwc */

#skin-toolbox {
    z-index: 3;
    overflow: visible !important;
    position: fixed;
    top: 52px;
    bottom: 0px;
    right: -500px;
    width: 500px;
    -webkit-transition: right 0.1s ease-in-out;
    -moz-transition: right 0.1s ease-in-out;
    transition: right 0.1s ease-in-out;
}


#skin-toolbox.toolbox-open {
    right: 0;
}


.float{
    z-index:3;
	position:fixed;
	width:40px;
	height:40px;
    /* bottom:40px; */
    top: 70px;
	right:10px;
	background-color:#1b55e2;
	color:#FFF !important;
	border-radius:20px;
	text-align:center;
    /* box-shadow: 2px 2px 3px #999; */
    -webkit-transition: right 0.1s ease-in-out;
    -moz-transition: right 0.1s ease-in-out;
    transition: right 0.1s ease-in-out;
}

.my-float{
	margin-top:13px;
}


#bro.bro-open {
    right: 510px;
}

.cwc-tab{
    font-size: .8rem !important; margin-top:-30px;
}


.cwc-container{
    position: relative;
    /* width: 600px; */
    height: 600px;
  }
/* helper cwc end */

/* softphone */
#skin-toolboxsp {
    z-index: 3;
    overflow: visible !important;
    position: fixed;
    top: 52px;
    bottom: 0px;
    right: -500px;
    /*width: 500px;*/
	width: 366px;
    -webkit-transition: right 0.1s ease-in-out;
    -moz-transition: right 0.1s ease-in-out;
    transition: right 0.1s ease-in-out;
}


#skin-toolboxsp.toolbox-open {
    right: 0;
}

.floatsp{
    z-index:3;
	position:fixed;
	width:40px;
	height:40px;
    /* bottom:40px; */
    top: 120px;
	right:10px;
	background-color:#04DD0F;
	color:#FFF !important;
	border-radius:20px;
	text-align:center;
    /* box-shadow: 2px 2px 3px #999; */
    -webkit-transition: right 0.1s ease-in-out;
    -moz-transition: right 0.1s ease-in-out;
    transition: right 0.1s ease-in-out;
}

.my-floatsp{
	margin-top:13px;
}

#brosp.bro-open {
  right: 376px;
  /*right: 510px;*/
}
/* softphone end */


/* logo kepuasan */

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
    -moz-appearance:none;
            appearance:none;
}
.good{background-image:url(../../assets/images/exp1.png);}
.soso{background-image:url(../../assets/images/exp2.png);}
.bad{background-image:url(../../assets/images/exp3.png);}
/* .mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);} */

.cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
    -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:30px;height:30px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.2) grayscale(5) opacity(.8);
    -moz-filter: brightness(1.2) grayscale(5) opacity(.8);
            filter: brightness(1.2) grayscale(5) opacity(.8);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
    -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

.bigs{
    font-size:100px;
}

/* logo kepuasan end */


.email-hide{
    display:none;
}

.email-toolbar{
    padding:20px;
}

.email-toolbar > a{
    padding-right:10px;
}

.aec-reply .reply-header {
    border-bottom: 0px !important;
}

/* 
.full-chat-w .full-chat-left {
    padding: 0px !important;
} */



/* webchat */
.full-chat-w .chat-info-section {
    padding: 0px !important;
}

.full-chat-w .chat-info-section .ci-content .ci-file-list ul {
    list-style-type: none;
    color: #047bf8;
    margin-left: 0px;
    margin-bottom: 0px;
    padding-left: 10px;
}


/* cwc */

.element-box-tp{
    padding-top:10px;
    padding-right:15px;
    padding-left:15px;
}



body.color-scheme-dark .form-control, .content-panel.color-scheme-dark .form-control {
    background-color: rgb(252, 252, 255);
    border-color: rgba(31, 4, 95, 0.69);
    color: #000000;
    border-radius: 10px;
    line-height: 20px;
    font-weight: 600;
}

.skintoolbox{
    padding-left: 10px;padding-right: 10px;background: linear-gradient(to bottom right,#242786, #000000);
}

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

hr.style-one {
    border: 0;
    height: 1px;
    background: #ffffff57;
    /* background-image: linear-gradient(to right, #ccc, #333, #ccc); */
}

.cwc-tab {
    font-size: 0.9rem !important;
    margin-top: -30px;
    font-weight: 500;
}

.nav-tabs .nav-link:after, .nav-tabs .nav-item .nav-link:after {

    height: 4px;
}

select.form-control.form-control-select:not([size]):not([multiple]) {
    height: calc(1.9rem );
}

input.mergeticket {
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid white;
color:yellow;
font-weight:600;
}

.activity-boxes-w .activity-time {
font-size: .7rem;
}

body.color-scheme-dark .activity-boxes-w .activity-time, .content-panel.color-scheme-dark .activity-boxes-w .activity-time {
color: white;
}

.activity-boxes-w .activity-avatar {

margin-right: 0;
}
i.icon-cj{
font-size:30px;
}

.activity-boxes-w .activity-avatar {

border-radius: 0px;

}

.activity-boxes-w .activity-role {
font-size: 15px;
}

.activity-boxes-w .activity-title {
font-size: 15px;
}

input.mergeticket {
    border: 0;
    outline: 0;
    background: transparent;
    border-bottom: 1px solid white;
    color: yellow;
    font-weight: 600;
}


/* ticket start */

/* filter */

.scroll-list-ticket{
    height: 453px;
    overflow-y: scroll;
    position: relative;
}

.spacemin {
    margin-left: 0px;
}
/* 
#list_tickets {
    position: relative;
    height: 490px;
}     */

.ticketdata{
    position: relative; padding-left:15px;padding-bottom:30px !important;
}

.ticketnomer{
    position: absolute;top:5px;right:15px;font-size:12px; font-weight:bold
}

.ticketnama{
    font-size:16px;
}

.ticketjudul{
    font-size:12px !important;
    color:#1d1818c7  !important;
}

.tickettanggal{
    position: absolute;bottom:5px;left:15px;font-size:11px;color:#A3A3A3;
}

.ticketstatus{
    position: absolute;bottom:5px;right:15px;
}

.ticket-tab-frame{
    padding: 15px;
    background-color:white;
    /* height:100%; */
    height: 460px;
    overflow-y: scroll;
    position: relative;
}



/* .full-chat-w .full-chat-left .user-list .user-w {
    padding-left: 15px;
} */

.full-chat-w .full-chat-left .user-list .user-w {
    padding: 5px 30px 30px 15px !important;
    position: relative;
}

.full-chat-w .full-chat-left .user-list .user-w:hover .ticketnomer{
    color:white;
}

.full-chat-w .full-chat-left .user-list .user-w:hover .ticketjudul{
    color:white  !important;
}

.full-chat-w .full-chat-left .user-list .user-w:hover .tickettanggal{
    color:white;
}

/* ticket journey */
.modaljourney-body{
    background-color:#e5e5e5
}
.ucase{
    text-transform: capitalize !important;
}
.tj-container{
    /* position: relative; */
    /* height: 600px; */
}
/* ticket journey */

.badgedaft{
    font-size:11px;
    color:white;
    padding-left:5px;
    padding-right:5px;
    border-radius:4px;
}

.badgedaft-new{
    border: 1px solid #04DD0F;background-color: #04DD0F;
}

.badgedaft-open{
    border: 1px solid #FFCC29;background-color:#FFCC29;
}

.badgedaft-onprogress{
    border: 1px solid #5797FC;background-color:#5797FC;
}

.badgedaft-pending{
    border: 1px solid #7E6FFF;background-color: #7E6FFF;
}

.badgedaft-reject{
    border: 1px solid #E25253;background-color:#E25253;
}

.badgedaft-close{
    border: 1px solid black;background-color:black;
}

.custinfo{
    font-size: 14px;
}

.frameabu.custinfo{
    font-size: .9rem;;
    vertical-align: top;
    font-weight: 400;
    line-height: 1.5;
    color: #3E4B5B;
}
.custinfotb{
    width:100%;
}
.custinfotb tr { line-height: 25px; }

.btnform{
    height:33px;margin-top:1px;
}
.ticketmodal{
    min-width:800px;
}
.pi-modal-header{
    border-bottom: 1px solid #dde2ec;
}

.modal-header{
    border-bottom: 1px solid #dde2ec;
}

.dataTables_wrapper .row{
    width:100%;
    
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
    border: 1px solid #5797FC;
    /* background-color: #5797FC; */
    color: white !important;
    border-radius:4px;
    margin-right:5px;
    padding-left:5px;
    padding-right:5px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #5797FC !important;
    border: 1px solid #5797FC;
    background-color: white;
    border-radius:4px;
    padding-left:5px;
    padding-right:5px;

}

.search-helper-modal{
    left: 70px;
    top: 147px;
    display: none;
}

.ssg-headerm{
   text-align:right;padding-top:10px;padding-bottom:10px;
}

/* ticket */

.modal_large{
    min-width: 1000px !important;
}

.modal_superlarge{
    min-width: 1300px !important;
}

/* webchat */




.webchat-sync{
    width:100%; 
    max-height:
    50px;padding: 10px 20px;
    background-color:white;
    border-bottom: 1px solid rgba(0,0,0,0.2); 
    /* text-align:right; */
  }

  .email-sync{
    width:100%; 
    max-height:50px;
    padding: 10px 10px;
    background-color:white;
    border-bottom: 1px solid rgb(229, 229, 229); 
    /* text-align:right; */
  }

  .btn.btn-success.btn-md{
    /* margin-top:15px; */
    text-shadow: 1px 1px 0 #528009;
  }

  .chat-sync{
    color: #047bf8;
    font-size: 20px;
  }

  .full-chat-w .chat-input input[type="text"] {
      padding: 20px 30px 20px 30px;
      
  }
  
  .chat-controls{
    position:relative;
  }
  
  
  
  .chat-attachment > input
  {
      display: none;
  }    
  
  
  .file-input, .chat-send{
    color: #047bf8 !important;
    font-size:20px;
  }
  
  .file-input:hover{
    text-decoration: underline !important;
  }
  
  .webchat-btn{
    width:100%;
  }
  
  #input-text-chat, #input-text-chat:focus, #input-text-chat:hover{
    width:100%;
    
    outline: none ;
    /* border : 1px solid rgb(229, 229, 229); */
    border : 1px solid #1b55e2d1;

    
    border-radius: 40px;
    padding-left: 5px;
    padding: 5px 10px;
   

  }

  
  
  #input-text-whatsapp, #input-text-whatsapp:focus, #input-text-whatsapp:hover, #input-text-fbmess, #input-text-fbmess:focus, #input-text-fbmess:hover, #input-text-sms, #input-text-sms:focus, #input-text-sms:hover{
    width:100%;
    
    outline: none ;
    /* border : 1px solid rgb(229, 229, 229); */
    border : 1px solid #1b55e2d1;

    
    border-radius: 40px;
    padding-left: 5px;
    padding: 5px 10px;
   

  }
  
  .file-input-label{
    padding-bottom:0px;
  }
  
  .webchat-control{
    width:100%;margin-top:10px;
    
  }
/* webchat end */


/* loading need */

@keyframes lds-eclipse {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    50% {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes lds-eclipse {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    50% {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  .lds-eclipse {
    position: relative;
    z-index: 11;
  }
  .lds-eclipse div {
    position: absolute;
    -webkit-animation: lds-eclipse 1s linear infinite;
    animation: lds-eclipse 1s linear infinite;
    width: 160px;
    height: 160px;
    top: 20px;
    left: 20px;
    border-radius: 50%;
    box-shadow: 0 4px 0 0 #047bf8;
    -webkit-transform-origin: 80px 82px;
    transform-origin: 80px 82px;
  }
  .lds-eclipse {
    width: 200px !important;
    height: 200px !important;
    -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
    transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
  }
/* loading end */

/* navbar needs */
.top-bar.color-scheme-bright.sticky{
    height:52px !important;
}

.top-bar>ul li a:after {
    bottom: -2px;
}


.logonya {
    width: 102px;
    margin-left: 7px;
    margin-right: 7px;
    margin-top: 7px;
}


.nav.nav-tabs.d-none.d-lg-flex.menu_octopush{
    border-bottom: 0px solid #dee2e6 !important;
}

.top-bar>ul.menu_octopush li a{
        padding:12.5px 25px !important;
}

.top-bar>ul.menu_octopush_ticket li a, .top-bar>ul.menu_octopush_channel li a{
    padding: 12px 16px !important;

}

.nav-tabs.menu_octopush_channel, .nav-tabs.menu_octopush_ticket {
    border-bottom: 0px solid #dee2e6 !important;
    padding:2px;
}

.top-bar .messages-notifications{
    margin: 0px 0.6rem;
    font-size: 18px;
}

.top-bar .logged-user-w .avatar-w img {
    width: 36px;
}

/* #1841A6 */
/* navbar end */

/* email start */

.emailtb{
    width:100%; color:#3E4B5B;padding:20px;border-top:1px solid #e5e5e5;
}
.emailtb-grey{
    background-color:#F6F6F6;
}
.emailtb-white{
    background-color:white;
}

.emailtb-avatar{
    border-radius: 20px;width: 40px;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-webkit-user-drag: none;
}

.emailinput{
    border-top:0px;border-left:0px;border-right:0px;border-bottom:1px solid #e5e5e5 !important; border-radius:0px; 
}

.emailinput:hover, .emailinput:focus {
    border-top:0px;border-left:0px;border-right:0px;border-bottom:1px solid #3A7FF8 !important; border-radius:0px; 
}

.emailinput.flexdatalist-alias.to-flexdatalist{
    border-top:0px;border-left:0px;border-right:0px;border-bottom:1px solid #e5e5e5 !important; border-radius:0px; 
}

.emailinput.flexdatalist-alias.to-flexdatalist:focus{
    border-top:0px;border-left:0px;border-right:0px;border-bottom:1px solid #3A7FF8 !important; border-radius:0px; 
}

/* email end */

/* step progress ticket */
/* .step-triggers{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:2.5rem;border-bottom:1px solid rgba(0,0,0,0.1)}.step-triggers .step-trigger{padding-bottom:1rem;-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:center;font-size:1.08rem;color:rgba(0,0,0,0.3);position:relative;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}.step-triggers .step-trigger:focus{text-decoration:none}.step-triggers .step-trigger:hover{text-decoration:none;color:#3E4B5B;cursor:pointer}.step-triggers .step-trigger:before{position:absolute;content:"";height:4px;background-color:#047bf8;left:0px;right:100%;bottom:-2px;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}.step-triggers .step-trigger.complete:before{right:0pxx}.step-triggers .step-trigger.active{color:#3E4B5B}.step-triggers .step-trigger.active:before{right:0px} */
.step-triggers {
    /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex; */
    margin-bottom: 2.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 5px;

}

.step-triggers .step-trigger {
    padding-bottom: 6px;
    /* -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1; */
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.3);
    position: relative;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    padding-left:10px;
    padding-right:10px;
}

.step-triggers .step-trigger:focus {
    text-decoration: none
}

.step-triggers .step-trigger:hover {
    text-decoration: none;
    color: #3E4B5B;
    cursor: pointer
}

.step-triggers .step-trigger:before {
    position: absolute;
    content: "";
    height: 4px;
    background-color: #047bf8;
    left: 0px;
    right: 100%;
    bottom: -2px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease
}

.step-triggers .step-trigger.complete:before {
    /* right: 0px */
}

.step-triggers .step-trigger.active {
    color: #3E4B5B
}

.step-triggers .step-trigger.active:before {
    right: 0px
}

/* step progress tiket end */

.nav-tabs .nav-link:after, .nav-tabs .nav-item .nav-link:after {
    bottom: -1px;
}

/* NAVBAR FOOTER */

.daft-footer{
    min-height: 32px;
    width:100%;
    padding-top: 6px;
    padding-left: 12px;
    padding-right: 12px;
    background: #c1c1c1;
    color: #000000;
    font-weight:bold;
    font-size:12px;
    /* text-align:right; */
    position:fixed;    /*Here's what sticks it*/
    bottom:0;          /*to the bottom of the body*/
    left:0;            /*and to the left of the body.*/
    z-index: 5;
    /*EFFECTS*/
    /* border-top:1px solid whitesmoke;  */
    /*border for accent*/
    /* box-shadow:0 -6px 32px;  */
    box-shadow: 0 1px 4px;
    /*shadow*/
}
/* NAVBAR FOOTER END */


/* loader */
.loginloader{
    position: relative;
    left: 48%;
    margin-top: -300px;
}

.lds-ring {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
    z-index: 11;  
  }
  .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 51px;
    height: 51px;
    margin: 6px;
    border: 6px solid #047bf8;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #047bf8 transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  

  /* how to call */
  /* <div class="lds-ring"><div></div><div></div><div></div><div></div></div> */
/* loader end */


/* cross email */

/* The cb-daft */
.cb-daft {
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.cb-daft input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;

    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.cb-daft:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.cb-daft input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.cb-daft input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.cb-daft .checkmark:after {
    left: 6px;
    top: -12px;
    width: 5px;
    height: 10px;
    color:#E65252;
    content: "x";
}

/* cross email done */


.modalj-noticket{
    font-size:20px;
}

.modalj-date{
    margin-top:-20px;
}

.daft-tanggal3{
    /* margin-top: -17px;
    margin-right: -15px; */
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.list-nick-name{
    /* float: right; */
    padding: 2px 7px;
    /* border: 1px solid #04DD0F;
    background-color: #04DD0F; */
    border: 1px solid #ffc412;
    background-color: #ffc412;

    border-radius: 12px;
    font-size: .68rem;
    color: black;
    /* color: rgba(0,0,0,0.3); */
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    position: absolute;
    bottom: 5px;
    left: 10px;
}

.list-nick-name:hover{
    color: #1B55E2;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.active{
    color: white !important;
    border: 1px solid #5797FC;
    background-color: #5797FC;
    
}



.top-bar.color-scheme-dark>ul li.active a, .top-bar.color-scheme-dark>ul li:hover a, .top-bar.color-scheme-bright>ul li.active a, .top-bar.color-scheme-bright>ul li:hover a {
    outline: none;
}

.top-bar>ul li, .top-bar>ul li:focus, .top-bar>ul li:hover, .top-bar>ul li:active {

    outline: none;
}


/* admin & report */

.pad20{
    padding:20px;
}

.btn37{
    height:37px ;
}

ul.buttonnav li { 
    display: inline-block; 
} 

.ml18{
    margin-left:18px;
}

.bgw{
    background-color:white;
}

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

.mlm40{
    margin-left:-40px;
}

/* admin & report end */



/* timeline */

.frst-container {
    padding: 20px 0px 10px 40px;
}

.frst-timeline-style-18 .frst-timeline-block::before {
    margin-top: 4px;
}

.frst-timeline-block {
    padding-right: 20px;
}

/* timeline end */


/* email */


.ae-list .user-w {
    padding-left: 15px;
}


.ae-list .user-w {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 5px 30px 30px 15px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.ae-list .user-w:hover {
    background-color: #047bf8;
    cursor: pointer;
}

.ae-list .user-w .avatar {
    margin-right: 20px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50px;
    flex: 0 0 50px;
}

.ae-list .user-w .avatar img {
    width: 50px;
    height: auto;
    border-radius: 50px;
    display: block;
}

.ae-list .user-w .user-date {
    float: right;
    padding: 2px 7px;
    background-color: #fff;
    border-radius: 12px;
    font-size: .72rem;
    color: rgba(0,0,0,0.3);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.ae-list .user-w:hover .user-date {
    background-color: #fff;
    color: #046fdf;
}

.ae-list .user-w .user-name {
    font-weight: 500;
    font-size: .99rem;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.ae-list .user-w:hover .user-name {
    color: #fff;
}

.ae-list .user-w .last-message {
    color: rgba(0,0,0,0.4);
    font-size: .81rem;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.ae-list .user-w:hover .last-message {
    color: rgba(255,255,255,0.5);
}


.ae-list-w {
    background-color: #ebeef3;
}

#list_email {
    position: relative;
    height: 490px;
}   


.last-message{
    color:white;
}
/* email end */

/* cwc */
.form-check {
    font-size: 13px;
}

.content-panel.color-scheme-dark input:read-only.form-control {
    background-color: rgba(252, 252, 255, 0.71);

}
/* cwc end */

/* journey */
.cjsentiment{
    position: absolute;
    top: 0px;
    right: 0px;
    margin-top: -40px;
}
/* journey end */
/* .modal-lg{
    min-width: 1000px;
} */

#table_customer{
    width:100% !important;
}

#search_cust_modal .modal-dialog{
    min-width:1200px;
}

.btn-sm.blue {
    color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.active a {
    color: white !important;
}

/* glyp */

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
  }
  
/* glyp */

/* notif ch */
ul.menu_octopush_channel li{
    position: relative;
}

.ch-notif{
    background-color: #e65252;
    color: #fff;
    border-radius: 6px;
    font-weight: 500;
    position: absolute;
    top: 10px;
    right: 5px;
    padding: 4px 4px;
    vertical-align: middle;
    font-size: .72rem;
    line-height: 1;
}
/* notif ch */


/* webchat css */

.brrgrey{
    border-right: 1px solid rgba(0,0,0,0.2);
}
.w100{
    width:100%;
}
.w94{
    width:94%;
}
.listtitle{
    font-size: 16px;font-weight:600;
}

.mh41{
    min-height:41px;
}

.mh49{
    min-height:49px;
    max-height:49px;
}

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

.mh180{
    min-height:180px;
}

.mh540{
    min-height: 540px;
}

.tab-webchat{
    margin-top:9px;background-color:white;
}
.listtitle{
    position:relative;
}

.listtitle:after{
    content: "";
    background-color: #047bf8;
    width: 25px;
    height: 4px;
    border-radius: 0px;
    display: block;
    position: absolute;
    bottom: -14px;
    left: 0px;
}

.pb2{
    padding-bottom:2px;
}


.scroll-interaction-webchat{
    height: 453px;
    overflow-y: scroll;
    position: relative;
}

.scroll-list-webchat{
    height: 378px;
    overflow-y: scroll;
    position: relative;
}

.scroll-queue-webchat{
    height: 189px;
    overflow-y: scroll;
    position: relative;
}

.list-queue > .user-w.new{
    padding: 5px 15px 5px 15px !important;
}

.daft-tanggal4{
    padding: 2px 7px;
    background-color: #fff;
    border-radius: 12px;
    font-size: .65rem;
    color: black;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
 .user-date {
     color: black;
 }

.full-chat-w .full-chat-left .user-list .user-w .user-date {
   color: black;
}

.full-chat-w .full-chat-left .user-list .user-w:hover .user-date {
    color: white;
    
}


/* animate typing */

@keyframes blink {
/**
* At the start of the animation the dot
* has an opacity of .2
*/
0% {
opacity: .2;
}
/**
* At 20% the dot is fully visible and
* then fades out slowly
*/
20% {
opacity: 1;
}
/**
* Until it reaches an opacity of .2 and
* the animation can start again
*/
100% {
opacity: .2;
}
}

.daft-typing span {
/**
* Use the blink animation, which is defined above
*/
animation-name: blink;
/**
* The animation should take 1.4 seconds
*/
animation-duration: 1.4s;
/**
* It will repeat itself forever
*/
animation-iteration-count: infinite;
/**
* This makes sure that the starting style (opacity: .2)
* of the animation is applied before the animation starts.
* Otherwise we would see a short flash or would have
* to set the default styling of the dots to the same
* as the animation. Same applies for the ending styles.
*/
animation-fill-mode: both;
}

.daft-typing span:nth-child(2) {
/**
* Starts the animation of the third dot
* with a delay of .2s, otherwise all dots
* would animate at the same time
*/
animation-delay: .2s;
}

.daft-typing span:nth-child(3) {
/**
* Starts the animation of the third dot
* with a delay of .4s, otherwise all dots
* would animate at the same time
*/
animation-delay: .4s;
}

/* animate typing done */
/* webchat css */


/* sms css */

.scroll-list-sms{
    height: 450px;
    overflow-y: scroll;
    position: relative;
}

.scroll-queue-sms{
    height: 450px;
    overflow-y: scroll;
    position: relative;
}


.scroll-interaction-sms{
    height: 365px;
    overflow-y: scroll;
    position: relative;
}

/* sms css */

/* telegram css */

.scroll-list-telegram{
    height: 450px;
    overflow-y: scroll;
    position: relative;
} 

.scroll-queue-telegram{
    height: 450px;
    overflow-y: scroll;
    position: relative;
}


.scroll-interaction-telegram{
    height: 365px;
    overflow-y: scroll;
    position: relative;
}

/* telegram css */


/* facebookmessenger css */

.scroll-interaction-facebookMsg{
    height: 453px;
    overflow-y: scroll;
    position: relative;
}

.scroll-list-facebookMsg{
    height: 378px;
    overflow-y: scroll;
    position: relative;
}

.scroll-queue-facebookMsg{
    height: 189px;
    overflow-y: scroll;
    position: relative;
}

/* facebookmessenger css */

/* whatsapp css */


.scroll-interaction-whatsapp{
    height: 453px;
    overflow-y: scroll;
    position: relative;
}

.scroll-list-whatsapp{
    height: 378px;
    overflow-y: scroll;
    position: relative;
}

.scroll-queue-whatsapp{
    height: 189px;
    overflow-y: scroll;
    position: relative;
}

/* whatsapp css */

/* email css */

.bg-grey{
    background-color: #F6F7F8;
}

.scroll-list-email{
    height: 450px;
    overflow-y: scroll;
    position: relative;
    background-color: #F6F7F8;
}

.scroll-queue-email{
    height: 450px;
    overflow-y: scroll;
    position: relative;
    background-color: #F6F7F8;
}

.scroll-interaction-email, .scroll-interaction-email2{
    height: 485px;
    overflow-y: scroll;
    position: relative;
}

/* whatsapp css */


.btn-end{
    margin-top: 20px;
}


.scroll-list-logcwc{
    height: 453px;
    overflow-y: scroll;
    position: relative;
    margin-right: -2px;
}

.scroll-list-voice{
    height: 453px;
    overflow-y: scroll;
    position: relative;
}

/* webchat */

.tab-webchat  .nav-tabs .nav-link.active:after, .tab-webchat  .nav-tabs .nav-item.show .nav-link:after, .tab-webchat  .nav-tabs .nav-link:hover:after, .tab-webchat  .nav-tabs .nav-item:hover .nav-link:after {
    width: 80%;
}


.tab-webchat .nav-tabs .nav-link:after, .tab-webchat  .nav-tabs .nav-item .nav-link:after {

    background-color: #b004f8 !important;
}

/* animation */


@-webkit-keyframes shake {
    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }
  
    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }
  
  @keyframes shake {
    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }
  
    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }
  
  .shake {
    -webkit-animation-name: shake;
    animation-name: shake;
  }
  
  
  
  @-webkit-keyframes tada {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    10%,
    20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
  
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
  
    40%,
    60%,
    80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  
  @keyframes tada {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    10%,
    20% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    }
  
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
  
    40%,
    60%,
    80% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  
  .tada {
    -webkit-animation-name: tada;
    animation-name: tada;
  }
  
  /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
  
  @-webkit-keyframes wobble {
    from {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    15% {
      -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
      transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
  
    30% {
      -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
      transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
  
    45% {
      -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
      transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
  
    60% {
      -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
      transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
  
    75% {
      -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
      transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
  
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  
  
  
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  
  .animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  
  .animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }
  
  .animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }
  
  .animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
  }
  
  .animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
  }
  
  .animated.fast {
    -webkit-animation-duration: 800ms;
    animation-duration: 800ms;
  }
  
  .animated.faster {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
  }
  
  .animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }
  
  .animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
  }
  
  @media (prefers-reduced-motion) {
    .animated {
      -webkit-animation: unset !important;
      animation: unset !important;
      -webkit-transition: none !important;
      transition: none !important;
    }
  }
/* animation */


#table_category{
    width: 100% !important;
}


/* thread */

.rel{
    position:relative;
}

.ml65{
    margin-left:65px;
}

.ml131{
    margin-left:131px;
}

.ml131rep{
    margin-left: 200px;
    /* margin-left: 164px; */
    
}

.thimage{
    border-radius:30px;
    height:45px;
    width:45px;
}

.thcustomer-image{
    position:absolute;left:0px;                                                         
}

.thagent-image{
    position:absolute;left:67px;                                                         
}


.thagent-imagerep{
    position:absolute;left: 130px;;                                                         
}

.scroll-interaction-inbox{
    height: 453px;
    overflow-y: scroll;
    position: relative;
}
.scroll-interaction-threadfb, .scroll-interaction-thread{
    height: 453px;
    overflow-y: scroll;
    position: relative;
}

.scroll-interaction-threadnyafb, .scroll-interaction-threadnya{
    height: 453px;
    overflow-y: scroll;
    position: relative;
}

.scroll-list-tifb, .scroll-list-ti{
    height: 378px;
    overflow-y: scroll;
    position: relative;
}

.scroll-queue-tifb, .scroll-queue-ti{
    height: 189px;
    overflow-y: scroll;
    position: relative;
}

.threadtb {
    width: 100%;
    color: #3E4B5B;
    padding: 20px;
}

.telement{
    margin-left: 18px;
    color: #047bf8;
}

.tmedialist{
    padding-left:0px;
}

ul.tmedialist li {
    display:inline;
    margin-right: 5px;
    margin-top: 5px;
}

.tmedia{
    width:100px; height:auto;
}

.tstatus{
    font-size:12px;
    padding-left:0px;
}

ul.tstatus li {
    display:inline;
    margin-right: 5px;
}

.ttitle{
    color:#047bf8;
    font-weight: 600;
}

.thread-field{
    padding:30px; 
    background-color:#EBEEF3;
}

.thread-box{
    padding:20px; 
    background-color:white;
}

.thread-btn-hist{
position:absolute;
right:0px;
}

.thread-btn-reply{
    height:100px;
    padding-top:38px;
    margin-left:10px;
}
/* thread */

.activity-mark{
    position: absolute;
    bottom: -12px;
    left: 16px;
    -ms-flex: 0 0 100px;
    font-size: .63rem;
    color: rgba(0,0,0,0.4);

}

#table_customer_wrapper .row .col-sm-6 .dataTables_length, #table_category_wrapper .row .col-sm-6 .dataTables_length{ 
    display:none;
}

#table_customer_wrapper, #table_category_wrapper{
margin-top:-62px;
    
}


#table_customer tr td, #table_category tr td{
    
    padding-top:5px;
    padding-bottom:5px;
    
}

.modal-header button.close {
 z-index:1;
 outline:none;
}

.daft-channel .top-bar>ul {
    letter-spacing: 0px;
}



.user-list .table.table-lightborder td span {
    font-size:12px;
}



.user-list .table.table-lightborder td  {
    padding-top:3px !important;
     padding-bottom:3px  !important;
}



/* scroll fix */

.scroll-list{
    height: 290px;
    overflow-y: scroll;
    position: relative;
}

.scroll-queue{
    height: 145px;
    overflow-y: scroll;
    position: relative;
}

.scroll-main{
    height: 586px;
    overflow-y: scroll;
    position: relative;    
}

.mr2{
    margin-right: -2px;
}

.home-view{
    margin-bottom: -100px;
    margin-right: -22px;
    padding-right: 20px;
    margin-top: -14px;
    padding-top: 20px;
}

/* scroll fix end */

.filterbox{
    margin-top: 0;
    margin-bottom: 10px;
}

ul.filterbox li{
    display: inline-block;
    
}


/* jtable */
.jtable{
    font-family: Helvetica, sans-serif;


}

div.jtable-main-container > table.jtable > thead th {
    /* font-family: Helvetica, sans-serif; */
    font-weight: 300;
    font-size: 13px;
    color: #fff;
}

table.jtable tr td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}



table.jtable thead tr th div{
    max-height:36px  !important;
}

.jtable-column-header-sorted-asc:before {
    margin-top: 19px !important;
}

.jtable-column-header-sortable:before { 
    margin: 19px 0 0 10px  !important;
}

.jtable-column-header{
    max-height:24px;
}

/* .jtable th {
    font: 15px/38px "verdana", sans-serif  !important;
} */

.parent-turquoise .jtable-title, .child-turquoise .jtable-child-row .jtable-title {
    background-color: #1b55e2  !important;
    border-bottom: 4px solid #fbb463  !important;
}

.ui-dialog .ui-dialog-titlebar {
    background-color: #1b55e2  !important;
    border-bottom: 4px solid #fbb463  !important;
}

.ui-dialog-titlebar-close:after {
    color: #ffffff !important;
    opacity: 1 !important;
}

button:focus {
    outline: none !important;
}

.ui-dialog-buttonpane #AddRecordDialogSaveButton, .ui-dialog-buttonpane #EditDialogSaveButton {
    background-color: #047BF8 !important;
}

.jtable-column-header-sorted-desc:before, .jtable-column-header-sorted-asc:before {
    margin-top: 19px !important;
}


/* jtable end */

/* via */
.viareply{
    font-size: 14px;
    padding-left: 13px;
}


.badge-hijau{
    background-color:#24b314;
    color:white;
    width:26px;
}

.badge-kuning{
    background-color:#FFCC29;
    color:white;
    width:26px;
}

.badge-abu{
    background-color:#908f8f;
    color:white;
    width:26px;
}

table.dashboardas th{
 font-size: 14px;       
}

.centertext{
   text-align:center;
}


.scroll-list-ticket .ticketdata{ background-color:#F6F7F8; }
.scroll-list-ticket{  background-color:#F6F7F8 !important; }


.chat-message-content{
    word-break: break-all;
}

.textright{
    text-align: right;
}


[class*="block-grid-"] {
    display: block;
    padding: 0;
    margin: 0 -0.625rem; }
    [class*="block-grid-"]:before, [class*="block-grid-"]:after {
      content: " ";
      display: table; }
    [class*="block-grid-"]:after {
      clear: both; }
    [class*="block-grid-"] > li {
      display: block;
      float: left;
      height: auto;
      padding: 0 0.625rem 1.25rem; }
  
  
  @media only screen {
    .small-block-grid-1 > li {
      list-style: none;
      width: 100%; }
      .small-block-grid-1 > li:nth-of-type(1n) {
        clear: none; }
      .small-block-grid-1 > li:nth-of-type(1n+1) {
        clear: both; }  
   
    .small-block-grid-2 > li {
      list-style: none;
      width: 50%; }
      .small-block-grid-2 > li:nth-of-type(1n) {
        clear: none; }
      .small-block-grid-2 > li:nth-of-type(2n+1) {
        clear: both; }
  
    .small-block-grid-3 > li {
      list-style: none;
      width: 33.33333%; }
      .small-block-grid-3 > li:nth-of-type(1n) {
        clear: none; }
      .small-block-grid-3 > li:nth-of-type(3n+1) {
        clear: both; }
  
    .small-block-grid-4 > li {
      list-style: none;
      width: 25%; }
      .small-block-grid-4 > li:nth-of-type(1n) {
        clear: none; }
      .small-block-grid-4 > li:nth-of-type(4n+1) {
        clear: both; }
  
    .small-block-grid-5 > li {
      list-style: none;
      width: 20%; }
      .small-block-grid-5 > li:nth-of-type(1n) {
        clear: none; }
      .small-block-grid-5 > li:nth-of-type(5n+1) {
        clear: both; }
  
    .small-block-grid-6 > li {
      list-style: none;
      width: 16.66667%; }
      .small-block-grid-6 > li:nth-of-type(1n) {
        clear: none; }
      .small-block-grid-6 > li:nth-of-type(6n+1) {
        clear: both; }
  
    .small-block-grid-7 > li {
      list-style: none;
      width: 14.28571%; }
      .small-block-grid-7 > li:nth-of-type(1n) {
        clear: none; }
      .small-block-grid-7 > li:nth-of-type(7n+1) {
        clear: both; }
  
    .small-block-grid-8 > li {
      list-style: none;
      width: 12.5%; }
      .small-block-grid-8 > li:nth-of-type(1n) {
        clear: none; }
      .small-block-grid-8 > li:nth-of-type(8n+1) {
        clear: both; }
  
    .small-block-grid-9 > li {
      list-style: none;
      width: 11.11111%; }
      .small-block-grid-9 > li:nth-of-type(1n) {
        clear: none; }
      .small-block-grid-9 > li:nth-of-type(9n+1) {
        clear: both; }
  
    .small-block-grid-10 > li {
      list-style: none;
      width: 10%; }
      .small-block-grid-10 > li:nth-of-type(1n) {
        clear: none; }
      .small-block-grid-10 > li:nth-of-type(10n+1) {
        clear: both; }
  
    .small-block-grid-11 > li {
      list-style: none;
      width: 9.09091%; }
      .small-block-grid-11 > li:nth-of-type(1n) {
        clear: none; }
      .small-block-grid-11 > li:nth-of-type(11n+1) {
        clear: both; }
  
    .small-block-grid-12 > li {
      list-style: none;
      width: 8.33333%; }
      .small-block-grid-12 > li:nth-of-type(1n) {
        clear: none; }
      .small-block-grid-12 > li:nth-of-type(12n+1) {
        clear: both; } }
  @media only screen and (min-width: 40.0625em) {
    .medium-block-grid-1 > li {
      list-style: none;
      width: 100%; }
      .medium-block-grid-1 > li:nth-of-type(1n) {
        clear: none; }
      .medium-block-grid-1 > li:nth-of-type(1n+1) {
        clear: both; }
  
    .medium-block-grid-2 > li {
      list-style: none;
      width: 50%; }
      .medium-block-grid-2 > li:nth-of-type(1n) {
        clear: none; }
      .medium-block-grid-2 > li:nth-of-type(2n+1) {
        clear: both; }
  
    .medium-block-grid-3 > li {
      list-style: none;
      width: 33.33333%; }
      .medium-block-grid-3 > li:nth-of-type(1n) {
        clear: none; }
      .medium-block-grid-3 > li:nth-of-type(3n+1) {
        clear: both; }
  
    .medium-block-grid-4 > li {
      list-style: none;
      width: 25%; }
      .medium-block-grid-4 > li:nth-of-type(1n) {
        clear: none; }
      .medium-block-grid-4 > li:nth-of-type(4n+1) {
        clear: both; }
  
    .medium-block-grid-5 > li {
      list-style: none;
      width: 20%; }
      .medium-block-grid-5 > li:nth-of-type(1n) {
        clear: none; }
      .medium-block-grid-5 > li:nth-of-type(5n+1) {
        clear: both; }
  
    .medium-block-grid-6 > li {
      list-style: none;
      width: 16.66667%; }
      .medium-block-grid-6 > li:nth-of-type(1n) {
        clear: none; }
      .medium-block-grid-6 > li:nth-of-type(6n+1) {
        clear: both; }
  
    .medium-block-grid-7 > li {
      list-style: none;
      width: 14.28571%; }
      .medium-block-grid-7 > li:nth-of-type(1n) {
        clear: none; }
      .medium-block-grid-7 > li:nth-of-type(7n+1) {
        clear: both; }
  
    .medium-block-grid-8 > li {
      list-style: none;
      width: 12.5%; }
      .medium-block-grid-8 > li:nth-of-type(1n) {
        clear: none; }
      .medium-block-grid-8 > li:nth-of-type(8n+1) {
        clear: both; }
  
    .medium-block-grid-9 > li {
      list-style: none;
      width: 11.11111%; }
      .medium-block-grid-9 > li:nth-of-type(1n) {
        clear: none; }
      .medium-block-grid-9 > li:nth-of-type(9n+1) {
        clear: both; }
  
    .medium-block-grid-10 > li {
      list-style: none;
      width: 10%; }
      .medium-block-grid-10 > li:nth-of-type(1n) {
        clear: none; }
      .medium-block-grid-10 > li:nth-of-type(10n+1) {
        clear: both; }
  
    .medium-block-grid-11 > li {
      list-style: none;
      width: 9.09091%; }
      .medium-block-grid-11 > li:nth-of-type(1n) {
        clear: none; }
      .medium-block-grid-11 > li:nth-of-type(11n+1) {
        clear: both; }
  
    .medium-block-grid-12 > li {
      list-style: none;
      width: 8.33333%; }
      .medium-block-grid-12 > li:nth-of-type(1n) {
        clear: none; }
      .medium-block-grid-12 > li:nth-of-type(12n+1) {
        clear: both; } }
  @media only screen and (min-width: 64.0625em) {
    .large-block-grid-1 > li {
      list-style: none;
      width: 100%; }
      .large-block-grid-1 > li:nth-of-type(1n) {
        clear: none; }
      .large-block-grid-1 > li:nth-of-type(1n+1) {
        clear: both; }
  
    .large-block-grid-2 > li {
      list-style: none;
      width: 50%; }
      .large-block-grid-2 > li:nth-of-type(1n) {
        clear: none; }
      .large-block-grid-2 > li:nth-of-type(2n+1) {
        clear: both; }
  
    .large-block-grid-3 > li {
      list-style: none;
      width: 33.33333%; }
      .large-block-grid-3 > li:nth-of-type(1n) {
        clear: none; }
      .large-block-grid-3 > li:nth-of-type(3n+1) {
        clear: both; }
  
    .large-block-grid-4 > li {
      list-style: none;
      width: 25%; }
      .large-block-grid-4 > li:nth-of-type(1n) {
        clear: none; }
      .large-block-grid-4 > li:nth-of-type(4n+1) {
        clear: both; }
  
    .large-block-grid-5 > li {
      list-style: none;
      width: 20%; }
      .large-block-grid-5 > li:nth-of-type(1n) {
        clear: none; }
      .large-block-grid-5 > li:nth-of-type(5n+1) {
        clear: both; }
  
    .large-block-grid-6 > li {
      list-style: none;
      width: 16.66667%; }
      .large-block-grid-6 > li:nth-of-type(1n) {
        clear: none; }
      .large-block-grid-6 > li:nth-of-type(6n+1) {
        clear: both; }
  
    .large-block-grid-7 > li {
      list-style: none;
      width: 14.28571%; }
      .large-block-grid-7 > li:nth-of-type(1n) {
        clear: none; }
      .large-block-grid-7 > li:nth-of-type(7n+1) {
        clear: both; }
  
    .large-block-grid-8 > li {
      list-style: none;
      width: 12.5%; }
      .large-block-grid-8 > li:nth-of-type(1n) {
        clear: none; }
      .large-block-grid-8 > li:nth-of-type(8n+1) {
        clear: both; }
  
    .large-block-grid-9 > li {
      list-style: none;
      width: 11.11111%; }
      .large-block-grid-9 > li:nth-of-type(1n) {
        clear: none; }
      .large-block-grid-9 > li:nth-of-type(9n+1) {
        clear: both; }
  
    .large-block-grid-10 > li {
      list-style: none;
      width: 10%; }
      .large-block-grid-10 > li:nth-of-type(1n) {
        clear: none; }
      .large-block-grid-10 > li:nth-of-type(10n+1) {
        clear: both; }
  
    .large-block-grid-11 > li {
      list-style: none;
      width: 9.09091%; }
      .large-block-grid-11 > li:nth-of-type(1n) {
        clear: none; }
      .large-block-grid-11 > li:nth-of-type(11n+1) {
        clear: both; }
  
    .large-block-grid-12 > li {
      list-style: none;
      width: 8.33333%; }
      .large-block-grid-12 > li:nth-of-type(1n) {
        clear: none; }
      .large-block-grid-12 > li:nth-of-type(12n+1) {
        clear: both; } }




        .compose-bio{
            border-bottom: 1px solid #d5dbdb;
            border-left: 0px;
            border-right: 0px;
            border-top: 0px;
            border-radius: 0px;
            padding:0px;
        }
        
        .compose-bio:hover,.compose-bio:focus{
            border-bottom: 1px solid #1B55E2;
        
        }
        
        .compose-bio-label{
            font-size: 14px;
        }
        
        
        
        .customer-ticket-list  .user-w {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 20px 30px;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }
        
        
        .customer-ticket-list .user-list .user-w {
            padding: 5px 30px 30px 15px !important;
            position: relative;
        }
        
        .customer-ticket-list .user-w .avatar img {
            width: 50px;
            height: auto;
            border-radius: 50px;
            display: block;
        }
        
        .customer-ticket-list .user-w .avatar {
            margin-left: -14px;
            margin-right: 20px;
        }
        
        
        
        .customer-ticket-list .user-w .user-info {
            -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
        }
        
        
        .customer-ticket-list .user-w .user-name {
            font-weight: 500;
            font-size: .99rem;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        .ticketjudul {
            font-size: 12px !important;
            color: #1d1818c7 !important;
        }

        .customer-ticket-list .user-w:hover, .customer-ticket-list .user-w:focus, .customer-ticket-list .user-w .ticketjudul:hover,.customer-ticket-list .user-w .ticketjudul:focus  {
            color: white;
            background: #1B55E2;
        }
        
        .scroll-list-cwc-journey{
            padding: 11px 21px 24px 45px !important;
        }
        .scroll-list-ticket-journey, .scroll-list-cwc-journey, .scroll-list-ticket-customer {
            height: 553px;
            overflow-y: scroll;
            position: relative;
        }

        #facebok_message{
            text-align: justify;
            margin-top: 10px;
        }
        
        .unread{
            animation: blink 1s linear infinite;
        }
        
        @keyframes blink{
            0%{opacity: 0;}
            50%{opacity: .5;}
            100%{opacity: 1;}
        }
        
        
        /* chat */
        
        .chat-message-content{
            word-break: break-word;
        }
        

        .trumbowyg-box.trumbowyg-editor-visible.trumbowyg-en.trumbowyg{
            margin-top: 51px;
        }
        
        .trumbowyg-button-pane .trumbowyg-right {
            float: left !important;
        }

        
        .onboarding-modal .onboarding-side-by-side .onboarding-content.with-gradient { 
            background-size: 160px 359px;
        }  


        .datepicker--content{
            background-color:white;
        }


        .search-with-suggestions-w.over-search-field {
            z-index: 1 !important;
        }

        .ae-list-w .ae-list .aei-content {
            width: 100%;
        }

        .onnotif{
            background-color: #e65252;
            color: #fff;
            border-radius: 6px;
            font-weight: 500;
            position: absolute;
            top: 13px;
            right: -6px;
            padding: 4px 4px;
            vertical-align: middle;
            font-size: .72rem;
            line-height: 1;
        }

        .onpagging{
            text-align: center;
            /* background-color: blue; */
            color: white;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .onpagging .ae-load-more{
            color: white;
            padding: 6px 100px;
        }

        .onpagging .btn-pagging {
            padding:2px 90px 4px 90px;
            padding-bottom:4px;
            font-size:10px; 
            margin-top:-5px;
            font-weight:700;
        }
        /* .onpagging:hover{
            background-color: white;
            color: blue;
        } */

        .onpagging .ae-load-more:hover{
            color: blue;
            text-decoration: none; 
        }

        .resp-container {
            position: relative;
            overflow: hidden;
            padding-top: 10%;
            height:235px;
        }
        .resp-iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }


        /* qa */

        .qa-bg{
            background-color:#F2F4F8 !important;
        }

        .mt20{
            margin-top:20px;
        }

        .qa-box{
            padding:10px;
            border-color: #F2F4F8;
            border-style: solid;
            border-width: 1px; 
            background-color:white;
        }

        .w300{
            width:300px !important;
        }
        
        .qa-work-view {
            height: 500px;
            overflow-y: scroll;
            position: relative;
            padding-right:10px;
            padding-bottom:10px;
        }
        /* qa */

        .logged-user-menu.color-style-bright{
            min-width:200px;
        }

        
        .whitebox{
            padding: 15px;background-color:white;
            
        }

        .whitebox2{
            background-color:white;padding:10px;margin-bottom:10px;
        }

        .bgw{
            background-color:#fff;
        }

        .scroll-list-outbound {
            height: 583px;
            overflow-y: scroll;
            position: relative;
        }


        .outbond-tab-frame{
            height: 583px;
            overflow-y: scroll;
            position: relative;
        }

        .box-hist {
            height: 278px;
            overflow-y: scroll;
            position: relative;
        }

        .compose-bio{
            background-color:#f3f3f3;
            padding:0px 3px;
        }

        .compose-bio-label{
            font-size: 13px;
        }

        select.form-control.compose-bio:not([size]):not([multiple]) {
            height:inherit;
        }

        
        /* admin */

        .content-w {
            background-color: #e6e6e6;
        }
        
        .greybox{
            background-color:#f3f3f3;padding:10px;
        }

        .logoadmin{
            width: 96px !important;
            margin-bottom:-7px !important;
            
        }
        
        .h54{
            height:54px;
        } 
        
        .p10{
            padding: 10px !important;
        }

        .mt5{
            margin-top: 5px !important;
        }

        .mt10{
            margin-top:10px !important;
        }

        .mt23{
            margin-top: 23px !important;
        }

        .mbmt10{
            margin-bottom:10px;
            margin-top:10px;
        }

        .judulgar{
            margin-bottom: -15px;
            padding-bottom: 0px;
        }

        .mb10{
            margin-bottom:10px !important;
        }

        .mb5{
            margin-bottom:5px !important;
        }

        .mb4 {
            margin-bottom: 4px !important;
        }

        .mb0{
            margin-bottom:0px !important;
        }

        .mh150{
            min-height:150px;
        }

        /* agent */
        .top-bar>ul.menu_octopush_ticket li a:after {
            width: 100%;
        }

        legend {
            margin-bottom: 3px !important;
            margin-top: 10px !important;
        }

        .greyscript {
            padding: 20px 25px;
            font-size: .99rem;
            background-color: #f3f3f7;
            border-radius: 6px;
            min-height: 160px;
        }


        .compose-bio:focus {
            background-color: #fcffe1;
        }

        .table-history th td {
            font-size: 11px;
        }

        .fcl{
            padding: 15px 10px 10px 10px !important;
            background-color: #E6E6E6 !important;
        }
        

        .outbondnav .nav-tabs .nav-item .active.show {
            background-color: white !important;
        }

        .outbondnav .nav-tabs .nav-item .nav-link.active:after,
        .outbondnav .nav-tabs .nav-item .nav-link.active:hover {

            top: 0px !important;
        }

        .bg1{
            background-color:#e6e6e6 !important;
        }

        .m15103x{
            margin: 15px 10px 10px 10px;
        }

        .bg2{
            background-color:#f3f3f3 !important;
        }


        .btn-xs {
            padding: 3px 5px;
            font-size: 11px;
            line-height: 1;
            border-radius: 5px;
            border-width: 1px;
        }

        .box-hist .activity-box-w {
            padding: 5px 0px;
        }

        .box-hist .activity-box-w .activity-box .activity-avatar {
            margin-right: 10px;
        }

        .box-hist .activity-box-w .activity-box .activity-avatar img {
            width: 50px;
            border-radius: 50px;
            overflow: hidden;
            margin-right: 1.1rem;
        }


        .box-hist .activity-box-w .activity-box .activity-info div.clndr {
            position: absolute;
            right: 10px;
        }

        .box-hist .activity-box-w .activity-box .activity-info .activity-role,
        .box-hist .activity-box-w .activity-box .activity-info .activity-title {
            font-size: 12px;
        }

        .titlean{
            color:#1A55E1;font-size:30px;font-weight:bold;
        }

        .btn-bleu {
            background-image: linear-gradient(-154deg, #3c92fc 8%, #3582e0 90%);
            color: white;
        }

        .btn-bleu:hover {
            background-image: linear-gradient(-154deg, #3582e0 8%, #3c92fc 90%);
            color: white;
        }

        .btn-purp {
            background-image: linear-gradient(-154deg, #b237ff 8%, #5211e6 90%);
            color: white;
        }

        .btn-purp:hover {
            background-image: linear-gradient(-154deg, #5211e6 8%, #b237ff 90%);
            color: white;
        }

        .btn-gree {
            background-image: linear-gradient(-154deg, #56BA2E 8%, #75db4a 90%);
            color: white;
        }

        .btn-gree:hover {
            background-image: linear-gradient(-154deg, #75db4a 8%, #56BA2E 90%);
            color: white;
        }