/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
.errors{
    color:red;
}
.yajra-datatable a,.yajra-datatable a:hover{
    text-decoration: none !important;
}
.card.setting-panel .sidebar .list ul li a.active,
.card.setting-panel .sidebar .list ul li a{
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card.setting-panel .sidebar .list ul li.danger:before {
    background: #f8000b;
}

.card.dash-xt-blue{
    background: #17a2b8 !important;
}
.card.dash-xt-green{
    background-color: #7DC500 !important;
}
.card.dash-xt-orange{
    background-color: #F89500 !important;
}
.card.dash-xt-pink{
    background-color: #F14695 !important;
}
.card.dash-xt-red{
    background-color: #f14646 !important;
}
.d-none{
    display:none;
}
.card.dash-xt-violet{
    background-color: #8547A7 !important;
}
.modal#img-preview-modal {
    height: 100vh;
    padding: 0 !important;
    text-align: right
}

.modal#img-preview-modal .modal-dialog {
    margin: 0 auto;
    max-width: 100%
}

.modal#img-preview-modal .modal-content {
    background: none;
    border-radius: 0;
    display: block;
    height: 100vh;
    text-align: center
}

.modal#img-preview-modal .modal-content img {
    left: 50%;
    max-height: 100%;
    padding: 20px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.modal#img-preview-modal .close {
    float: right;
    margin: 0;
    position: relative;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10
}
.switch-label.no-text {
    display: inline-block;
    height: 24px;
    width: 40px;
}
.input-content{
    height: 180px;
    padding: 20px;
    border: 0;
    width: 100%;
    overflow: auto;
    box-shadow: inset 0 7px 9px -7px rgb(0 0 0 / 40%);
}
.h-200{
    height: 200px;
}
.piechartsect .charts{
    min-height: 400px;
}
.card.count-box{background:#fff;border-top:3px solid transparent;box-shadow:0 3px 20px rgba(0,0,0,.15);margin-bottom:30px;position:relative;transition:.3s}
.card.count-box .card-body{overflow:hidden;padding:25px 20px;position:relative}
.card.count-box .card-body .d-flex{position:relative;z-index:1}
.card.count-box .card-body .bg{height:100%;opacity:.1;position:absolute;right:-50%;top:0;transform:rotate(55deg);width:110%}
.card.count-box:before{background:#fff;border-radius:10px;bottom:-12px;box-shadow:0 3px 20px rgba(0,0,0,.05);content:"";height:40px;left:5%;position:absolute;width:90%;z-index:-1}
.card.count-box .title{font-size:13px;font-weight:500;opacity:.6;white-space:nowrap}
.card.count-box .count{font-size:26px;font-weight:500;white-space:nowrap}
.card.count-box svg{height:28px;width:28px}
.card.count-box .icon-in{transform:rotate(180deg)}
.card.count-box .fa-reply{font-size:23px}

body .tabs-container.dashtabs .nav-tabs.tabs li{
    margin-bottom: 15px;
}

.wa-img-frame {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 10;
    border-radius: 0;
    background-image: url(../images/whatsapp_template/whatsapp_screen.png);
    height: 390px;
    width: 185px;
    background-size: contain;
    background-repeat: no-repeat;
}
.msg-overflow {
    position: absolute;
    right: 0;
    height: 300px;
    width: 185px;
    top: 50px;
    overflow-y: auto;
    overflow-x: hidden;
}
.msg-overlay {
    background: rgba(0,0,0,0.3);
    z-index: 10;
    position: absolute;
    position: absolute;
    right: 1px;
    height: 350px;
    width: 183px;
    top: 40px;
    display: none;
}
.msg-area {
    width: 130px;
    height: auto;
    min-height: 40px;
    background-color: #fff;
    border-radius: 8px;
    margin: 10px 0 0px 8px;
    top: 30px;    
    font-size: 0.62em;
    line-height: 1.4;
    text-align: left;    
    padding: 3px;
}

.msg-area-1 {
    width: 130px;
    height: auto;
    min-height: 40px;
    background-color: #fff;
    border-radius: 8px 8px 0 0;
    margin: 10px 0 0px 8px;
    top: 30px;    
    font-size: 0.62em;
    line-height: 1.4;
    text-align: left;    
    padding: 3px;
}
/* .msg-area:before {
    content: "\A";
    border-style: solid;
    border-width: 6px 10px 6px 0;
    border-color: transparent #fff transparent transparent;
    position: absolute;
    left: 32px;
    top: 18px;
} */
.msg-channel-thumb {
    width: 24px;
    height: 24px;
    background-color: #fff;
    text-align: center;
    font-size: .6em;
    padding: 2px;
    position: absolute;
    font-weight: bold;
    border-radius: 13px;
    top: 12px;
    left: 5px;
}
.msg-overflow::-webkit-scrollbar {
    width: 3px;
}
.msg-overflow::-webkit-scrollbar-track {
    background: transparent;
}
.msg-overflow::-webkit-scrollbar-thumb {
    background: #888;
}
.msg-header {
    width: 124px;
    height: auto;
    min-height: 1px;
    background-color: #fff;
    font-weight: bold;
    margin-bottom: 5px;
}
.msg-header img {
    margin-bottom: 5px;
    border-radius: 6px;
}
.msg-header video {
    width: 124px;
    border-radius: 6px;
    height: 80px;    
}    

.msg-body {
    width: 124px;
    height: auto;
    min-height: 1px;
    background-color: #fff;    
    white-space: pre-wrap;
    padding: 0px 3px;
    word-wrap: break-word;
}
.msg-list {
    width: 185px;
    height: 185px;
    min-height: 1px;
    background-color: #fff;
    padding: 0px 7px;
    z-index: 11;    
    position: absolute;
    bottom: 0;
    left: 0;
    display: none;
}
.msg-list .list-header {
    width: 100%;
    float: left;
    height: 30px;
}
.msg-list .list-body {
    width: 175px;
    height: 120px;    
    background-color: #fff;    
    padding: 0px 7px;
    overflow-y: auto;
    overflow-x: hidden;
    float: left;
}
.msg-list .list-footer {
    width: 100%;
    float: left;
    height: 26px;
}
.msg-list .list-footer button {
    font-size: 0.75em;
    background: #3dc25d;
    color: #fff;
    border:1px solid #3dc25d;
    width: 100%;
    text-align: center;
}
.list-body::-webkit-scrollbar {
    width: 3px;
}
.list-body::-webkit-scrollbar-track {
    background: transparent;
}
.list-body::-webkit-scrollbar-thumb {
    background: #888;
}

.msg-list .listItem .texts {
    width: 86%;
    float: left;
    height: 40px;
}
.msg-list .listItem .action {
    width: 12%;
    float: left;
}

.msg-list .listItem label {
    font-size: .75em;
    font-weight: 600;
    width: 100%;  
    text-overflow: ellipsis; 
    text-align: left;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-list .listItem label + label{
    font-weight: normal;
    top: -12px;
    position: relative;
    color: #888;
    text-align: left;
    width: 100%;
    font-size: 0.75em;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-list span.radioBtn {
    background-color: #fff;
    border: 1.5px solid #298c7e;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    padding: 5px;
    float: left;
    margin: 12px 0;
}
.msg-list span.radioBtn.active {
    padding: 2px;
}
.msg-list span.radioBtn.active::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: #298c7e;
}
.msg-footer {
    width: 124px;
    height: auto;
    min-height: 1px;
    background-color: #fff;
    color: #888;
    margin-top: 5px;
    padding: 0px 3px
}
.msg-button {
    width: 126px;
    height: auto;
    margin: 5px 0 0px 0px;
    font-size: 0.62em;
    line-height: 1.4;
    margin: 0px 0 0px 8px;
}
.msg-area + .msg-button div {
    width: 130px;
    padding: 4px;
    margin-top: 1px;
    text-align: center;
    color: #34a1ff;
    float: left;
    background: #fff;
    text-overflow: ellipsis; 
    overflow: hidden;   
    border-radius: 8px;
}
.msg-area-1 + .msg-button div {
    width: 130px;
    padding: 4px;
    margin-top: 1px;
    text-align: center;
    color: #34a1ff;
    float: left;
    background: #fff;
    text-overflow: ellipsis;    
    overflow: hidden;
}
.msg-area-1 + .msg-button div span {
    background-image: url('../images/link_icon.png');
    background-position: center;
    background-repeat: no-repeat;
    padding: 5px;
    background-size: contain;
    margin-right: 2px;
}
.msg-area-1 + .msg-button div:last-child {
    border-radius: 0 0 8px 8px;
}
.msg-list .list-head {
    width:100%;
    text-align:center;
    font-weight:bold;
    font-size:0.8em;
    padding:3px 0;
    text-overflow: ellipsis;    
    overflow: hidden;
    font-family: inherit;
}
.ajax-loadernew {
    background: hsla(0,0%,100%,.7);
    opacity: 0;
    position: absolute;
    visibility: hidden;
    z-index: 99;
}
.ajax-loadernew.show {
    opacity: 1;
    visibility: visible;
}
.tlgcbnotify span.success svg {
    background: #03ae24;
    border-radius: 100px;
    color: #fff;
    height: 20px;
    margin-right: 5px;
    padding: 3px;
    width: 20px;
}
.tlgcbnotify span.warning svg {
    background: #ff4d4d;
    border-radius: 100px;
    color: #fff;
    height: 20px;
    margin-right: 5px;
    padding: 3px;
    width: 20px;
}

.emojiSelect {
  margin-top: 1em;
  margin-bottom: 1em;
  height: 140px;    
  overflow-y: scroll;
  border: 1px solid #eee;
  padding: 5px 10px 0px;    
  box-shadow: 0 0 4px rgba(0,0,0,.25);    
  background: #fff;
}
.emojiSelect label{
    cursor: pointer;   
    width: 30px;
    height: 30px;
    padding: 3px 3px 3px 5px;  
}
.emojiSelect label.active{
    background:#ccc;
    border-radius: 20px;
}
.emojiSelect-input {
  position: relative;
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
}