body {background-color:#f3f3f4; font-size: .875rem}
.page-content {padding-top: 107px; margin-bottom: 50px;}
.navbar-toggler {font-size: 1rem; line-height: 1; padding: .1rem .4rem;}
.tabpanel{background-color: #fff; border:1px solid #0000001a; border-top: 0px }
.white-tabpanel{background-color: #f7f7f7; border:none;}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{background-color: #fff; color: black; border-bottom: none}
.nav-tabs .nav-link{border: 1px solid #0000001a; border-top-left-radius: .25rem; border-top-right-radius: .25rem; background: #f7f7f7; color: black; border-bottom: none}
.nav-tabs{border-bottom: none}
.content-section {background: #f7f7f7; border: 1px solid #dddddd}
.table{border: 1px solid #ced4da}
.inner-content-section {background: #f7f7f7; border: 1px solid #dddddd; border-top: 0px; margin-bottom: 20px}
.history-table{padding: 10px; background: #ffff; border: none}
.account-img {height: 125px; width: 125px; margin-right: 20px; margin-bottom: 16px}
.account-heading {font-size: 2.3rem}
form .alert ul li{list-style: none}
form .alert ul {margin: 0; padding: 0}
form .alert {margin: 7px}
.panel-heading {color: #fff; background-color: #5a6268 ; border-color: #5a6268; padding: 10px 15px; border-bottom: 1px solid transparent; border-bottom-color: transparent}
.bg-footer{background-color: #f5f5f5; border-top: 1px solid #ddd}
.bg-white {border: #ced4da 1px solid }
.input-group-text {background-color: #fff!important}
.caption {caption-side: top}
.link-nav{text-decoration: none}
.asteriskField {display: none}
.call-bar{
  position: fixed;
  z-index: 999;
  right: 0px;
  margin-top: 47px;
  border-top: 1px solid #f3f3f4;
}
.card-header{
  font-weight: 500;
  line-height: 1.2;
  font-size: 1rem;
}
.form-group {
  margin-bottom: 0.5rem
}
.form-control::placeholder {
  color:#6c757d;
  opacity: 0.6;
}
.col-form-label, label {
  font-size: 14px;
  font-weight: 600;
}
.btn-success {
  color: #fff;
  background-color: #3ac47d;
  border-color: #3ac47d;
}
.btn-success:hover {
  color: #fff;
  background-color: #31a66a;
  border-color: #2e9d64;
}
.btn-success.disabled, .btn-success:disabled {
  color: #fff;
  background-color: #2fa078a1;
  border-color: #2fa078a1;
  cursor: not-allowed;
}
.btn-light, .btn-light:hover{
  border-color: #9fa5a4;
}
.alert {
  font-weight: bold
}
.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem 1.25rem;
}
.col-centered{
    margin: 0 auto;
    width: 70%;
}
.table{
  margin-bottom: 0px;
}
.table > tbody > tr > .emptyrow {
    border-top: none;
}
.table > thead > tr > .emptyrow {
    border-bottom: none;
}
.table > tbody > tr > .highrow {
    border-top: 3px solid;
}
.table-active{
  background: #ffcd30;
}
.table td, .table th {
  vertical-align: middle;
}
.form-control {
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  height: calc(1.8125rem + 2px);
  padding: .25rem .5rem;  
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
}
.fa-times-circle{
  color: red;
  font-size: 1.45rem;
  margin-top: .27rem;
}
.paid{
  color: #155724;
  background-color: #d4edda;
  border-color: #d4edda;
}
.unpaid{
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}
.overpaid{
  color: #1c4672;
  background-color: #d7ecf8;
  border-color: #d7ecf8;
}
.phone-col{
  border-left: 1px solid rgba(0,0,0,.1)
}
.error {
  font-size: 80%;
  color: #dc3545;
}
.errorlist{
  list-style: none;
}
.btn-circle i {
  position: relative;
  top: -3px;
}
.btn-circle.btn-sm { 
  width: 30px; 
  height: 30px; 
  padding: 6px 0px; 
  border-radius: 15px; 
  font-size: 17px; 
  text-align: center; 
}
#addPhone {
  display: none;
}
.button-notification{
  position:relative;
  display:inline-block;
}
.notify-badge{
  position: absolute;
  right: -6px;
  top: 22px;
  background:red;
  text-align: center;
  border-radius: 29px 29px 29px 29px;
  color:white;
  padding:3px 8px;
  font-size:11px;
  font-weight: bold;
}
.fa-phone-alt{
	color: #fff;
}

@media (max-width: 992px){
  .navbar-item{
    margin-top: 10px;
  }
}
.dropdown-item{
  cursor: pointer;
}
.agent-status {
  height: 13px;
  width: 13px;
  border-radius: 50%;
  background-color: white;
  display: inline-flex;
  vertical-align: middle;
  }

#output-volume, #input-volume{
  display: block;
  height: 20px;
  width: 0;
  border-radius: 3px;
}
.input-background{
  display: block;
  height: 20px;
  width: 70px;
  border-radius: 3px;
  background: #f3f3f4;
}
.call-status-el {
  display: none;
}
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 2;
  cursor: default;
}

#overlay-text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
.dropdown-toggle::after{
  color: #fff;
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  content: "";
  border-top: .5em solid;
  border-right: .5em solid transparent;
  border-bottom: 0;
  border-left: .5em solid transparent;
}
.toggle.btn {
  min-width: 6.7rem;
}
.datetimepicker-input{
  border: 1px solid #ced4da;
}
.red-border{border-top: 5px solid #be0c21}
.yellow-border{border-top: 5px solid #ffc107}
.blue-border{border-top: 5px solid #0772ff}
.green-border{border-top: 5px solid #3ac47d}
.black-border{border-top: 5px solid #333}

.stats-filter{
    padding: 20px;
    margin: auto;
    border-radius: 10px;
    background: #e9ecef;
}
#loadingStatus {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 2;
  cursor: progress;
}
.lds-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ripple div {
  position: absolute;
  border: 4px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes lds-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}