@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700");
.noSelect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

header {
  background: #ffffff none repeat scroll 0 0;
  -webkit-box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.04);
  -moz-box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.04);
  box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.04);
  display: inline-block !important;
  padding: 10px 15px;
  transition: all 0.5s ease 0s;
  width: 100%;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
header .el-popover {
  padding: 0;
  margin-right: 20px;
}
header .el-alert {
  padding: 12px 10px;
  top: -2px;
}
header .el-alert .el-alert__icon {
  position: relative;
  top: 2px;
}
header .el-alert .el-alert__closebtn {
  top: 14px;
  right: 10px;
}
header .el-alert__content {
  padding: 0 30px 0 8px;
}

.header-top-icons {
  margin-top: 3px;
}
.header-top-icons .icon {
  font-size: 15px;
}
.header-top-icons .el-button {
  padding: 0 !important;
  border: 0;
  height: 30px;
  width: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.header-top-icons .el-button.icon-logout {
  color: #fff;
  background: #e53935;
  font-size: 14px;
  padding-left: 2px !important;
}
.header-top-icons .el-button.icon-key {
  color: #fff;
  background: #FF9100;
  font-size: 14px;
}
.header-top-icons .el-button.border {
  border: 1px solid #e2e2e2;
}

.header .el-popover {
  padding: 0;
  margin-right: 20px;
}

.quick-add-btn {
  position: relative;
  display: inline-block;
}

.quick-add {
  background: #fff;
  position: absolute;
  width: 380px;
  right: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding: 12px;
  box-shadow: 0px 0px 15px 0 #e8e8e8;
  -webkit-box-shadow: 0px 0px 15px 0 #e8e8e8;
  top: 50px;
}
.quick-add a {
  color: #000;
  display: block;
  padding: 12px 0;
  border: 1px solid #e6e6e6;
  width: 110px;
  font-size: 12px;
  text-align: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.quick-add li {
  display: inline-block;
  margin: 0 6px 10px 0;
}
.quick-add li span {
  display: block;
  color: #ed273f;
}

.head-notification {
  position: relative;
  display: inline-block;
}
.head-notification .el-badge__content {
  min-width: 24px;
  height: 24px;
  padding: 0;
  border: 4px solid #fff;
  top: 2px !important;
  right: 14px !important;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  font-size: 9px;
  line-height: 16px;
}

.notification-signal {
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  position: absolute;
  top: -6px;
  width: 18px;
  height: 18px;
  background: red;
  border: 5px solid #fff;
  right: -3px;
  z-index: 1;
}

.blink {
  animation: blink 1s linear infinite;
}

.notification-div {
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  z-index: 3;
  max-height: 400px;
}
.notification-div li {
  position: relative;
  height: 50px;
  margin-top: 15px;
}
.notification-div li span {
  position: absolute;
  top: -12px;
  right: 13px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #3cb6f1;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  color: #fff;
  text-align: center;
  font-size: 9px;
  line-height: 20px;
}
.notification-div li p {
  color: #a7a7a7;
  font-size: 10px;
  margin: 0;
}
.notification-div .head {
  padding: 15px;
  border-bottom: 1px solid #e8e8e8;
}
.notification-div .head a {
  font-size: 11px;
  margin-top: -14px;
}
.notification-div .head .icon {
  position: relative;
  top: 4px;
  font-size: 16px;
}
.notification-div .head .notification-signal {
  width: 8px;
  height: 8px;
  top: -7px;
  background: #3cb6f1;
  border: 0;
}
.notification-div .head .count {
  float: right;
  color: #fff;
  background: rgba(237, 39, 63, 0.65);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  font-size: 11px;
  margin-top: -20px;
  padding: 0 3px;
}
.notification-div .icon {
  font-size: 18px;
}
.notification-div ul {
  background: #f7f7f7;
  padding-top: 10px;
}
.notification-div .see-all {
  background: #f7f7f7;
  padding: 15px;
  font-size: 11px;
  font-weight: 600;
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  -ms-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}
.notification-div .icon {
  position: relative;
  top: 4px;
  font-size: 16px;
}
.notification-div .notification-scroll {
  max-height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
}
.notification-div .show-less {
  font-size: 11px;
  margin-top: 10px;
}

.notification-item {
  margin-top: 12px;
  padding: 0;
}
.notification-item .time {
  font-size: 10px;
}
.notification-item p {
  font-size: 11px;
  color: #8e8e8e;
  line-height: 16px;
}
.notification-item .image {
  padding-left: 15px;
  position: relative;
  width: 36px;
}
.notification-item .image span {
  width: 36px;
  height: 36px;
  display: inline-block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  background: #ccc;
}
.notification-item .image .msg-count {
  position: absolute;
  bottom: -4px;
  right: -8px;
  width: 22px;
  height: 22px;
  background: #3cb6f1;
  color: #fff;
  font-size: 9px;
  line-height: 17px;
  font-style: normal;
  border: 3px solid #fff;
}
.notification-item .image img {
  width: 36px;
}
.notification-item .content {
  position: relative;
  width: calc(100% - 55px);
  left: 15px;
  margin-left: 15px;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .top-welcome-text {
    padding-left: 5%;
    margin: 0;
  }
  .top-welcome-text.welcome-menu-pinned {
    padding-left: 22%;
  }
}
@media (min-width: 992px) {
  header .el-alert {
    display: inline;
    margin-right: 15px;
  }
}
@media (max-width: 767px) {
  header .license-expiry-days {
    display: none;
  }
}
.side-nav {
  position: fixed;
  left: 0;
  padding: 0;
  z-index: 11;
  top: 0;
  bottom: 0;
  background: #061838;
  height: 100%;
  -webkit-transition: width 0.3s;
  transition: width 0.3s;
}
.side-nav a {
  position: relative;
  color: #fff;
}
.side-nav .ps {
  height: calc(100% - 80px);
}
.side-nav .ps__rail-x {
  display: none !important;
}
.side-nav .dropdown:after {
  content: "";
  position: absolute;
  right: 0;
  color: #fff;
  top: 10px;
  cursor: pointer;
  font-family: element-icons !important;
  right: -30px;
  font-size: 12px;
}
.side-nav.width .dropdown:after, .side-nav.width-menu .dropdown:after {
  right: 12px;
}

.left-nav {
  background: #061838;
  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  -o-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}
.left-nav .ico {
  float: right;
  margin: 11px 10px 0 0;
  font-size: 11px;
}

.nav-icon {
  padding-left: 0;
  width: 35px;
  display: inline-block;
  position: relative;
}
.nav-icon .icon-user {
  font-size: 14px;
}
.nav-icon.icon-target {
  font-size: 16px;
}
.nav-icon.icon-cart {
  font-size: 18px;
}
.nav-icon.icon-dealer {
  font-size: 16px;
}
.nav-icon.icon-stock {
  font-size: 18px;
}
.nav-icon.icon-product {
  font-size: 17px;
}
.nav-icon.icon-route {
  font-size: 20px;
}
.nav-icon.icon-battery {
  font-size: 17px;
}
.nav-icon.icon-attendance {
  font-size: 16px;
}
.nav-icon.icon-activity {
  font-size: 22px;
  left: -2px;
}
.nav-icon.icon-placeholder {
  font-size: 16px;
}
.nav-icon.icon-settings {
  font-size: 18px;
}
.nav-icon.icon-leave {
  font-size: 17px;
}
.nav-icon.icon-expense2 {
  font-size: 17px;
}
.nav-icon.invoice {
  font-size: 17px;
}
.nav-icon.icon-service {
  font-size: 15px;
}
.nav-icon.icon-warranty {
  font-size: 18px;
}
.nav-icon.icon-feedback {
  font-size: 15px;
}
.nav-icon.icon-return {
  font-size: 14px;
}
.nav-icon.icon-collection-book {
  font-size: 17px;
}
.nav-icon.icon-receipt {
  font-size: 16px;
}
.nav-icon.icon-cancel-receipt {
  font-size: 16px;
}
.nav-icon.icon-aging-report {
  font-size: 16px;
}
.nav-icon.icon-customer {
  font-size: 16px;
}
.nav-icon.icon-wallet {
  font-size: 16px;
}
.nav-icon.icon-money-bag {
  font-size: 18px;
}
.nav-icon.icon-dealer1 {
  font-size: 15px;
}
.nav-icon.icon-dashboard {
  font-size: 14px;
}
.nav-icon.icon-shop {
  font-size: 18px;
}
.nav-icon.icon-report {
  font-size: 17px;
  top: 4px;
}
.nav-icon.icon-module {
  font-size: 14px;
  top: 3px;
}
.nav-icon.icon-settings1 {
  font-size: 17px;
  top: 3px;
}
.nav-icon.icon-master-set {
  font-size: 17px;
  top: 4px;
}
.nav-icon.icon-complaint {
  font-size: 18px;
  top: 4px;
}
.nav-icon.icon-enquiry1 {
  font-size: 18px;
  top: 3px;
}
.nav-icon.icon-message {
  font-size: 19px;
  top: 5px;
}
.nav-icon.icon-visit {
  font-size: 17px;
  top: 4px;
}
.nav-icon.icon-lead {
  font-size: 18px;
  top: 4px;
}
.nav-icon.icon-sales {
  font-size: 20px;
  top: 5px;
}
.nav-icon.el-icon-document {
  font-size: 18px;
  top: 3px;
}
.nav-icon.icon-drilldown {
  font-size: 15px;
  top: 3px;
}
.nav-icon.icon-mail {
  font-size: 15px;
  top: 3px;
}
.nav-icon.icon-route {
  top: 5px;
}
.nav-icon.icon-campaign-target {
  font-size: 18px;
  top: 5px;
}
.nav-icon.icon-lab-collection {
  font-size: 21px;
  top: 4px;
}

.icon-user.nav-icon,
.icon-target.nav-icon,
.icon-stock.nav-icon,
.icon-product.nav-icon,
.icon-battery.nav-icon,
.icon-attendance.nav-icon,
.icon-placeholder.nav-icon,
.icon-leave.nav-icon,
.icon-service.nav-icon,
.icon-feedback.nav-icon,
.icon-cancel-receipt.nav-icon,
.icon-collection-book.nav-icon,
.icon-customer.nav-icon,
.icon-wallet.nav-icon,
.icon-dealer1.nav-icon,
.icon-dashboard.nav-icon {
  top: 3px;
}

.icon-cart.nav-icon,
.icon-activity.nav-icon,
.icon-settings.nav-icon,
.icon-expense1.nav-icon,
.icon-warranty.nav-icon,
.icon-receipt.nav-icon,
.icon-money-bag.nav-icon,
.icon-shop.nav-icon,
.icon-report.nav-icon {
  top: 4px;
}

.icon-dealer.nav-icon,
.invoice.nav-icon,
.icon-return.nav-icon,
.icon-aging-report.nav-icon {
  top: 2px;
}

.navi li a:before, .navi li a:after {
  content: "";
  position: absolute;
  background: #3d6dc1;
  top: 13px;
  left: 17px;
}
.navi .active a .nav-icon {
  color: #ed273f;
}

.nav-submenu {
  max-height: 0;
  transition: max-height 0.4s ease-out;
  overflow: hidden;
  padding-left: 40px;
}
.nav-submenu li:last-child a:after {
  background: none;
}
.nav-submenu li a:before, .nav-submenu li a:after {
  content: "";
  position: absolute;
  background: #3d6dc1;
}
.nav-submenu li a:before {
  width: 9px;
  height: 1px;
}
.nav-submenu li a:after {
  width: 1px;
  height: 27px;
}

@media (min-width: 992px) {
  .navi a {
    font-size: 12px;
    padding: 0;
    display: inline-block;
    width: 100%;
    line-height: 30px;
    color: #fff;
    white-space: nowrap;
    padding-left: 18px;
  }

  .navi li.active {
    background: none !important;
  }

  .left-nav {
    padding-top: 5px;
    background: var(--secondary-color);
    margin-top: 13px;
    height: 100%;
  }

  .navi li:hover > a {
    background: #09224e;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    border-radius: 50px;
  }

  .sidebar.width-0 {
    width: 0;
  }

  .side-nav {
    width: 54px;
  }
}
@media (max-width: 991px) {
  .nav-icon {
    display: inline-block;
    width: 25px;
  }

  .left-nav li {
    padding: 0;
    border-bottom: 1px solid #0f1f44;
  }

  .menu-close {
    position: absolute;
    background: var(--primary-color);
    color: #fff;
    right: -45px;
    width: 45px;
    height: 45px;
    top: 0;
    text-align: center;
    line-height: 40px !important;
  }

  .left-nav li.active {
    background: #09224e !important;
  }

  .navi li .nav-submenu a {
    font-size: 12px;
  }

  .nav-submenu {
    padding-left: 30px;
  }
  .nav-submenu li a :before {
    left: -10px;
    top: 21px;
  }
  .nav-submenu li:after {
    height: 44px;
    left: -11px;
    top: 21px;
  }

  .nav-sub-arrow {
    display: block !important;
  }
}
.logo {
  padding-top: 12px;
  text-align: center;
  height: 60px;
}

.left-nav .logo {
  height: 50px;
}

.nav-ul .active {
  background: none !important;
}
.nav-ul li.height .nav-submenu {
  max-height: 600px;
  transition: max-height 0.4s ease-in;
}
.nav-ul li.height .nav-submenu a {
  font-size: 11px;
  display: inline-block;
  width: 100%;
}
.nav-ul li.height .nav-submenu a.active, .nav-ul li.height .nav-submenu a:hover {
  color: #3d6dc1;
  background: none !important;
}

.side-nav.width .logo-small,
.side-nav.width-menu .logo-small {
  width: 0;
  opacity: 0;
}

.side-nav.width .logo-large,
.side-nav.width-menu .logo-large {
  width: 170px;
  opacity: 1;
}

.side-nav .logo-large {
  width: 0;
  opacity: 0;
}

.logo-large {
  position: absolute;
  left: 15px;
}

.logo img {
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.menu-pin {
  color: #fff;
  position: absolute;
  right: 15px;
  top: 20px;
  font-size: 18px;
  transform: rotate(85deg);
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  -o-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
  cursor: pointer;
}

.side-nav.width .menu-pin,
.side-nav.width-menu .menu-pin {
  opacity: 10;
}

.side-nav.width-menu .menu-pin {
  color: red;
}

.icon-menu {
  font-size: 24px;
  text-align: center;
  display: inline-block;
  height: 45px;
  line-height: 51px;
  background: #061838;
  color: #fff;
  width: 50px;
  margin: 15px 0 20px 30px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}

.nav-sub-arrow {
  margin: 10px;
  position: absolute;
  right: 0;
  font-size: 11px;
}

@media (min-width: 991px) and (max-width: 1279px) {
  .menu-pin {
    top: 19px;
    font-size: 16px;
  }
}
@media (max-width: 991px) {
  .nav-sub-arrow {
    top: 12px;
  }

  .side-nav.mobile-width .logo-small {
    width: 0;
    opacity: 0;
  }
  .side-nav.mobile-width .logo-large {
    width: 170px;
    opacity: 1;
  }

  .menu-pin {
    display: none;
  }
}
@media (min-width: 1280px) {
  .side-nav.width-menu, .side-nav.width {
    width: 18%;
    -webkit-transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    -ms-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
  }

  .main.main-menu-pinned {
    width: 78%;
    margin-left: 20%;
  }

  .main.all-menu-pinned {
    width: 62%;
    margin-left: 20%;
  }

  .top-welcome-text.welcome-menu-pinned {
    padding-left: 19%;
  }
}
@media (min-width: 1024px) {
  .navi li a:before, .navi li a:after {
    content: "";
    position: absolute;
    background: #3d6dc1;
    top: 13px;
    left: 17px;
  }
  .navi li .nav-submenu a {
    line-height: 26px;
    font-size: 11px;
    padding-left: 30px;
  }
}
@media (min-width: 992px) and (max-width: 1279px) {
  .side-nav.width-menu, .side-nav.width {
    width: 20%;
    -webkit-transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    -ms-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
  }
  .side-nav .logo-large {
    width: 140px;
  }
}
@media (max-width: 991px) {
  .navi a {
    padding: 15px 12px;
    width: 100%;
    display: inline-block;
  }

  .nav-sub-arrow {
    display: block !important;
  }

  .nav-submenu li a:after {
    height: 44px;
  }
  .nav-submenu li a:before, .nav-submenu li a:after {
    top: 22px;
    left: 0;
  }

  .side-nav {
    width: 200px;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .main.main-menu-pinned {
    width: 76%;
    margin-left: 22%;
  }
  .main.all-menu-pinned {
    width: 51%;
  }
}
.user-main .deactive {
  color: #ccc;
}
.user-main .user-overview {
  margin-right: 0;
}
.user-main .user-overview > div {
  padding: 0 0 0 15px;
}
.user-main .user-overview .inner {
  padding: 15px 0;
  background: #fff;
  border-radius: 6px;
}
.user-main .top-info-col h4 {
  font-size: 14px;
  margin: 0 0 5px;
}
.user-main .top-info-col span {
  color: #1565C0;
  font-size: 18px;
  font-weight: 600;
}
.user-main .user-filter {
  padding: 15px;
}
.user-main .user-filter p {
  float: left;
  width: 76px;
}
.user-main .user-filter .el-radio {
  font-weight: 300;
}
.user-main .avtar-user {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 36px;
}
.user-main .avtar-user .el-image {
  width: 36px;
  height: 36px;
}
.user-main .avtar-user .el-image img {
  object-fit: cover;
}
.user-main .avtar-user-name {
  margin: 8px 0 0 5px;
}
.user-main .user-list .user-status {
  top: 0;
  right: -1px;
  border-width: 2px;
}
.user-main .filter-div .el-checkbox__label {
  color: #fff !important;
}
.user-main .filter-div .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #fff !important;
}

.user-list-dropdown a {
  color: #000;
}
.user-list-dropdown .custom-icon {
  margin-right: 10px;
}

.user-details-team .main-ul {
  padding-right: 20px;
  margin: 0;
}
.user-details-team .main-ul .first-sub {
  position: relative;
  padding-left: 40px;
}
.user-details-team .main-ul .first-sub:before {
  content: "";
  background: #659cfd;
  width: 1px;
  position: absolute;
  left: 0;
  height: 100%;
}
.user-details-team .main-ul .first-sub ul {
  border: 1px solid #ccc;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  padding: 12px 15px;
  margin: 8px 0 0;
  position: relative;
}
.user-details-team .main-ul .first-sub ul:before {
  content: "";
  background: #659cfd;
  height: 1px;
  width: 40px;
  position: absolute;
  left: -40px;
  top: 50%;
}
.user-details-team .main-ul .first-sub .sub {
  border: 1px solid #659cfd;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  padding: 12px 15px;
  margin-top: 8px;
  position: relative;
  background: tint(#061838, 10%);
  color: #061838;
}
.user-details-team .main-ul .first-sub .sub:before {
  content: "";
  background: #659cfd;
  height: 1px;
  width: 40px;
  position: absolute;
  left: -40px;
  top: 50%;
}
.user-details-team .main-ul .first-sub .sub li ul {
  margin-left: 20px;
  background: #fff;
}
.user-details-team .main-ul .first-sub .sub li ul:before {
  content: "";
  background: #fff;
  width: 0;
  position: absolute;
  left: -40px;
  top: 0;
  height: 100%;
}
.user-details-team .main-ul .first-name {
  font-weight: 600;
  background: #3977e5;
  color: #fff;
  border: 1px solid #ccc;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  padding: 12px 15px;
  margin-top: 8px;
  position: relative;
}
.user-details-team .main-ul .first-name:before {
  content: "";
  background: #659cfd;
  height: 1px;
  width: 40px;
  position: absolute;
  left: -40px;
  top: 50%;
}

@media (min-width: 600px) {
  .user-main .user-overview {
    display: flex;
  }
  .user-main .user-overview > div {
    flex: 1;
  }
}
@media (max-width: 599px) {
  .user-main .user-overview > div {
    width: 33.333%;
    float: left;
    padding: 0 15px;
  }
}
.user-detail-top-main {
  border-radius: 10px 10px 0 0;
  background: #fff;
  float: left;
  width: 100%;
  padding: 25px 0 0;
  min-height: 130px;
}

.user-detail-top .avtar-user {
  width: 80px;
  height: 80px;
}
.user-detail-top .avtar-user img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.user-detail-top-col {
  margin-bottom: 20px;
}
.user-detail-top-col .block {
  display: block;
  margin-bottom: 8px;
}
.user-detail-top-col i {
  font-style: normal;
}
.user-detail-top-col span.left {
  float: left;
  padding-right: 10px;
  color: #7b7b7b;
}
.user-detail-top-col span.right {
  color: #061838;
  font-weight: 600;
  user-select: all;
}

.user-detail-top {
  float: left;
  width: 100%;
}

.adduser-select-type .el-radio-group {
  margin-top: 18px;
}

.user-list-overview-slide {
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  align-items: center;
}
.user-list-overview-slide .top-info-col {
  height: 100%;
  padding-top: 20px;
}

.user-detail-info .el-image {
  width: 80px;
  height: 80px;
}

.assign-user-popup .assign-users-list li {
  float: left;
  background: #f4f4f5;
  padding: 0 3px 0 6px;
  margin: 10px 5px -5px 0;
  border: 1px solid #e9e9eb;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  font-size: 11px;
  color: #909399;
}
.assign-user-popup .assign-users-list li a {
  background: #C0C4CC;
  margin: 4px 0 0 10px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
  height: 14px;
  width: 14px;
  color: #909399;
  font-size: 10px;
  line-height: 14px;
  float: right;
  text-align: center;
}

@media (min-width: 992px) and (max-width: 1279px) {
  .user-detail-top-col {
    width: 50%;
    margin-bottom: 20px;
  }
  .user-detail-top-col.first span.left, .user-detail-top-col.second span.left, .user-detail-top-col.third span.left {
    width: 125px;
  }
}
@media (min-width: 992px) {
  .dashboard-row {
    display: flex;
  }

  .dashboard-target-col {
    flex: 1;
  }

  .user-details-team {
    margin-bottom: 30px;
  }
  .user-details-team .ps {
    max-height: 200px;
  }

  .upcoming-activities-inner {
    padding: 15px;
  }
}
@media (max-width: 991px) {
  .user-detail-top-col {
    width: 100%;
  }
  .user-detail-top-col h4 {
    margin-top: 0;
  }
  .user-detail-top-col.first span.left, .user-detail-top-col.second span.left, .user-detail-top-col.third span.left {
    width: 125px;
  }

  .user-detail-top .back {
    display: none;
  }

  .user-details-team .ps {
    max-height: 350px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .dashboard-target-col {
    width: 33.3%;
    padding: 0 6px;
    float: left;
  }
}
@media (min-width: 768px) {
  .user-detail-info .user-detail-top-col {
    float: left;
    padding-right: 45px;
  }
  .user-detail-info .user-detail-top-col span {
    padding-left: 0;
  }
  .user-detail-info .user-detail-top-col span.left {
    float: left;
    padding-right: 10px;
    color: #7b7b7b;
  }
  .user-detail-info .user-detail-top-col i {
    font-style: normal;
  }

  .user-list-overview-slide {
    height: 80px;
  }
  .user-list-overview-slide .top-info-col {
    flex: 1;
    border-right: 1px solid #ececec;
  }
}
@media (max-width: 767px) {
  .user-list-overview-slide .top-info-col {
    flex: 0 0 33.333%;
    padding-bottom: 15px;
    justify-content: center;
  }
}
@media (max-width: 600px) {
  .user-detail-top-col.first span.left, .user-detail-top-col.second span.left, .user-detail-top-col.third span.left {
    width: 100%;
    margin-bottom: 5px;
  }
  .user-detail-top-col i {
    display: none;
  }
  .user-detail-top-col .block {
    margin-bottom: 12px;
  }
}
@media (min-width: 1024px) {
  .user-detail-top .content {
    width: calc(100% - 80px);
    padding-left: 24px;
  }

  .user-detail-info.assigned-users .user-detail-top-col {
    width: 100%;
    padding: 0;
    margin-bottom: 0;
  }
}
/** Stage style **/
.stage {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  min-width: 50px;
  min-height: 20px;
  line-height: 18px;
  font-size: 12px;
  text-align: center;
  padding: 0 6px;
  height: auto;
  word-break: break-word;
}
.stage.new {
  background: rgba(255, 114, 59, 0.2);
  color: #ff723b;
  border: 1px solid rgba(255, 114, 59, 0.3);
}
.stage.proposal {
  background: rgba(102, 51, 204, 0.2);
  color: #6633cc;
  border: 1px solid rgba(102, 51, 204, 0.3);
}
.stage.completed {
  background: rgba(88, 197, 34, 0.2);
  color: #58c522;
  border: 1px solid rgba(88, 197, 34, 0.3);
}
.stage.failed {
  background: rgba(246, 41, 94, 0.2);
  color: #f6295e;
  border: 1px solid rgba(246, 41, 94, 0.3);
}
.stage.inprogress {
  background: rgba(23, 128, 225, 0.2);
  color: #1780e1;
  border: 1px solid rgba(23, 128, 225, 0.3);
}
.stage.invoice-sent {
  background: rgba(182, 24, 185, 0.2);
  color: #b618b9;
  border: 1px solid rgba(182, 24, 185, 0.3);
}
.stage.followup {
  background: rgba(0, 148, 217, 0.2);
  color: #0094d9;
  border: 1px solid rgba(0, 148, 217, 0.3);
}
.stage.negotiation {
  background: rgba(0, 204, 204, 0.2);
  color: #00cccc;
  border: 1px solid rgba(0, 204, 204, 0.3);
}

/**End Stage style **/
/** Status style **/
.status {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  background: #fff;
  display: inline-block;
  min-width: 50px;
  height: 20px;
  line-height: 18px;
  font-size: 12px;
  text-align: center;
  padding: 0 5px;
}
.status.warm {
  color: #f59622;
  border: 1px solid #f59622;
}
.status.hot {
  color: #e9273f;
  border: 1px solid #e9273f;
}
.status.cold {
  color: #0dbfef;
  border: 1px solid #0dbfef;
}
.status.new {
  color: #ff7408;
  border: 1px solid #ff7408;
}
.status.complete, .status.approved {
  color: #58c522;
  border: 1px solid #58c522;
}
.status.cancel {
  color: #ea4c58;
  border: 1px solid #ea4c58;
}
.status.reschedule {
  color: #6985d7;
  border: 1px solid #6985d7;
}
.status.punchin {
  color: #00bd7a;
  border: 1px solid #00bd7a;
}
.status.punchout {
  color: #2f4858;
  border: 1px solid #2f4858;
}
.status.pending {
  color: #ff7408;
  border: 1px solid #ff7408;
}
.status.reschedule {
  color: #00cccc;
  border: 1px solid #00cccc;
}
.status.followup {
  color: #0094d9;
  border: 1px solid #0094d9;
}
.status.upcoming {
  color: #13b2e7;
  border: 1px solid #13b2e7;
}
.status.rejected {
  color: #fb2929;
  border: 1px solid #fb2929;
}

/**End Status style **/
/** Status Color style **/
.status-approved {
  color: #58c522;
}

.status-pending {
  color: #ff7408;
}

.status-rejected {
  color: #fb2929;
}

/** End Status Color style **/
/** Status Select Box **/
.status-select {
  border-radius: 50px;
}
.status-select input[type=text] {
  background: transparent;
  border: 0;
  height: 18px;
  width: 70px;
  font-size: 11px;
  padding: 0 10px;
}
.status-select.large input[type=text] {
  height: 30px;
  width: auto;
  font-size: 13px;
}
.status-select.large .el-input .el-select__caret {
  font-size: 14px !important;
}
.status-select.open {
  border: 1px solid #f39090;
}
.status-select.open input[type=text] {
  color: #a90e0e;
}
.status-select.open input[type=text]::placeholder {
  color: #a90e0e;
}
.status-select.open .el-input .el-select__caret {
  color: #a90e0e;
}
.status-select.open .el-input__inner {
  border-color: #a90e0e;
}
.status-select.new {
  border: 1px solid #90d6f9;
}
.status-select.new input[type=text] {
  color: #00a0ef;
}
.status-select.new .el-input .el-select__caret {
  color: #00a0ef;
}
.status-select.closed {
  border: 1px solid #9ad69a;
}
.status-select.closed input[type=text] {
  color: #0e8c0e;
}
.status-select.closed input[type=text]::placeholder {
  color: #0e8c0e;
}
.status-select.closed .el-input .el-select__caret {
  color: #0e8c0e;
}
.status-select.closed .el-input__inner {
  border-color: #0e8c0e;
}
.status-select .el-input__suffix {
  top: 8px;
}
.status-select .is-focus .el-input__suffix {
  top: -8px;
}
.status-select .is-focus .status-select .large .el-input__suffix {
  top: 5px;
}
.status-select .is-focus .status-select .large .status-select.large .is-focus .el-input__suffix {
  top: -5px;
}
.status-select .el-input .el-select__caret {
  font-size: 12px !important;
}

/** End Status Select Box **/
.lead-list th.person-name .cell {
  padding-left: 60px !important;
}
.lead-list td.person-name .cell {
  padding-left: 20px !important;
}
.lead-list td.person-name .icon-product {
  width: 36px;
  height: 36px;
  display: inline-block;
  position: relative;
  left: -8px;
  line-height: 38px;
  text-align: center;
  background: #df7082;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.lead-list .avtar-user {
  margin-right: 6px;
}

.add-lead-status {
  padding: 0 15px 15px 60px;
}
.add-lead-status .inner {
  background: #f3f7fa;
  padding: 15px 0 14px 15px;
}

@media (min-width: 768px) {
  .lead-icons {
    padding-left: 0;
  }

  .search-keyword.lead .el-input__inner {
    width: 268px;
  }
}
.lead-detail-top {
  margin-top: 12px;
}
.lead-detail-top .inner {
  background: #e9edf4;
}

.lead-source {
  background: #e9edf4;
}
.lead-source span {
  display: inline-block;
  background: #e9edf4;
  color: #061838;
  padding: 8px 5px;
  margin-left: 5px;
}
.lead-source i {
  font-size: 16px;
  position: relative;
  top: 1px;
  color: #3ca4fb;
}

.lead-details-time {
  color: #7b7b7b;
}
.lead-details-time .time {
  margin-top: 5px;
}

.lead-detail-head .designation {
  color: #7b7b7b;
  padding-left: 64px;
  margin-top: -5px;
}

.basic-info-ul li.phone p {
  padding-left: 20px;
  position: relative;
}
.basic-info-ul li.phone .el-icon-phone {
  position: absolute;
  left: 0;
  top: 6px;
}
.basic-info-ul li.email p {
  padding-left: 20px;
  position: relative;
}
.basic-info-ul li.email .el-icon-phone {
  position: absolute;
  left: 0;
  top: 6px;
}
.basic-info-ul li .left {
  color: #7b7b7b;
  display: inline-block;
  padding-left: 0;
}
.basic-info-ul li .right {
  color: #000;
  padding-left: 0;
  user-select: all;
}
.basic-info-ul li .right .icon-mail-1 {
  font-size: 12px;
  position: absolute;
  left: 0;
  top: 2px;
}
.basic-info-ul li .right .el-icon-location-outline {
  font-size: 16px;
  position: relative;
  top: 1px;
}

.lead-activity-head .inner {
  border-bottom: 1px solid #ebeef5;
  padding: 15px 0;
}
.lead-activity-head .number {
  margin: 0 5px 0 30px;
  font-weight: 500;
  font-size: 18px;
  color: #ed273f;
}

.lead-activity-col h5 {
  margin: 0;
}
.lead-activity-col .inner {
  padding: 8px 12px;
  border: 1px solid #ebeef5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  background: #fff;
  margin-left: 74px;
}
.lead-activity-col:last-child .lead-activity-icon:after {
  background: none;
}
.lead-activity-col .icon {
  display: inline-block;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  font-size: 16px;
  position: relative;
  z-index: 1;
  border: 5px solid #fff;
}

.lead-activity-icon {
  position: absolute;
  height: 100%;
  padding-left: 0;
}
.lead-activity-icon:after {
  content: "";
  width: 1px;
  background: #ebeef5;
  height: 122%;
  position: absolute;
  left: 23px;
  top: 0;
}

.lead-activity-text i {
  margin-right: 5px;
}

.lead-activity-main {
  background: #f9fafc;
  margin-bottom: 5px;
}

.lead-activity-content {
  padding: 10px 15px;
}

.lead-activity-icons {
  float: right;
  margin-left: 10px;
}

.lead-activity-col .icon.phone {
  background: #2eb661;
}
.lead-activity-col .icon.msg {
  background: #fba833;
}
.lead-activity-col .icon.chat {
  background: #a058d2;
}
.lead-activity-col .icon.visit {
  background: #04bcb5;
  line-height: 41px;
}
.lead-activity-col .icon.drive {
  background: #1978da;
  font-size: 22px;
  line-height: 39px;
}
.lead-activity-col .icon.icon-followup {
  background: #ff739c;
  font-size: 13px;
  line-height: 40px;
}

@media (min-width: 768px) {
  .lead-details-time {
    margin-top: -10px;
  }

  .lead-detail-head .left-name .designation {
    padding-left: 70px;
    margin: -10px 0 15px;
  }
  .lead-detail-head .info {
    width: calc(100% - 150px);
  }
}
@media (max-width: 991px) {
  .lead-detail-main .el-collapse-item__content {
    padding-bottom: 20px !important;
  }
}
@media (max-width: 767px) {
  .lead-detail-head .left-name h4 {
    font-size: 16px;
  }

  .lead-details-time {
    padding: 0;
  }

  .lead-activity-col .inner {
    margin-left: 45px;
  }

  .lead-activity-content-row {
    margin-bottom: 6px;
  }

  .lead-activity-content-row .pull-right {
    display: none;
  }
}
@media (max-width: 599px) {
  .lead-status,
.lead-stage {
    margin-top: 12px;
    width: 100%;
  }
}
.log-history-row {
  color: #7b7b7b;
  font-size: 10px;
  border-left: 1px solid #e2e8f2;
  padding: 0 0 12px 20px;
  margin-top: 10px;
  position: relative;
  left: 5px;
}
.log-history-row:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  background: #f0f6ff;
  border: 3px solid #a1c8e2;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  left: -7px;
  top: -2px;
}
.log-history-row p {
  color: #7b7b7b;
  font-size: 10px;
  letter-spacing: 0.5px;
  margin-top: 5px;
}
.log-history-row p span {
  color: #37a9f8;
  font-weight: 500;
  font-size: 11px;
}
.log-history-row .el-icon-date {
  font-size: 12px;
}

.lead-detail-log-history {
  background: #f0f6ff;
  vertical-align: top;
}
.lead-detail-log-history .inner {
  padding: 20px;
  border-top: 1px solid #ebeef5;
  max-height: 400px;
  overflow-y: auto;
}
.lead-detail-log-history h4 {
  margin-bottom: 30px;
}

.lead-stage span {
  padding: 5px 10px;
  display: inline-block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  margin-left: 5px;
}
.lead-stage .new {
  background: rgba(255, 116, 8, 0.2);
  color: #ff7408;
}
.lead-stage .proposal {
  background: rgba(102, 51, 204, 0.2);
  color: #6633cc;
}
.lead-stage .negotiation {
  background: rgba(0, 204, 204, 0.2);
  color: #00cccc;
}
.lead-stage .completed {
  background: rgba(88, 197, 34, 0.2);
  color: #58c522;
}
.lead-stage .failed {
  background: rgba(246, 41, 94, 0.2);
  color: #f6295e;
}
.lead-stage .inprogress {
  background: rgba(12, 128, 225, 0.2);
  color: #0c80e1;
}
.lead-stage .invoice-sent {
  background: rgba(182, 128, 225, 0.2);
  color: #0c80e1;
}

/****************** Drag & Drop ***********************/
.lead-drag-main .lead-drag-top {
  font-size: 14px;
  color: #6a8bc6;
  border-top: 1px solid #e4ecfb;
  padding-top: 25px;
  border-bottom: 1px solid #e4ecfb;
  padding-bottom: 18px;
}
.lead-drag-main .lead-drag-top span {
  color: #415e93;
  background: #e4ebf9;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  width: 32px;
  height: 32px;
  margin: -8px 10px 0 0;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  border: 1px solid #b9cbec;
}
.lead-drag-main .select-round {
  width: 280px;
  display: inline-block;
}
.lead-drag-main .list {
  background-color: rgba(6, 24, 56, 0.04);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  margin: 30px 0 0;
  padding: 10px;
  width: 100%;
  border: 1.5px solid rgba(6, 24, 56, 0.06);
}
.lead-drag-main .list > header {
  font-size: 15px;
  line-height: 20px;
  color: #6a8bc6;
  padding: 0 0 6px;
  font-weight: 500;
  -webkit-box-shadow: 0 0 0 0px #f1f1f1;
  -moz-box-shadow: 0 0 0 0px #f1f1f1;
  box-shadow: 0 0 0 0px #f1f1f1;
  background: none;
}
.lead-drag-main .list article {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.lead-drag-main .list .card {
  background-color: #415e93;
  border-bottom: 1px solid #ccc;
  padding: 8px 10px 0;
  cursor: pointer;
  margin-bottom: 6px;
}
.lead-drag-main .list .card:hover, .lead-drag-main .list .card:focus {
  background-color: #344970;
  cursor: all-scroll;
}
.lead-drag-main .list .card p {
  margin: 0;
  color: #7b7b7b;
  font-size: 11px;
}
.lead-drag-main .list .card span {
  display: block;
  margin: 3px 0 8px;
  font-size: 12px;
  color: #D7E3FB;
  word-break: break-word;
}
.lead-drag-main .list .card span i {
  float: left;
  margin-right: 8px;
}
.lead-drag-main .drag-area {
  min-height: 100px;
  max-height: 450px;
  overflow-y: auto;
  margin-top: 10px;
}

@media (min-width: 1024px) {
  .lead-drag-main .select-round {
    margin-left: 10px;
  }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .lead-drag-main .list > header {
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  .lead-drag-main .drag-colum-main {
    display: flex;
    overflow-x: auto;
  }

  .drag-colum {
    flex: 1;
    padding: 0 7px;
    min-width: 22%;
    margin-bottom: 15px;
  }
}
@media (max-width: 767px) {
  .lead-drag-main .select-round {
    width: 100%;
    margin-bottom: 15px;
  }

  .lead-drag-top .col-xs-12 {
    margin-bottom: 18px;
  }
}
/****************** End Drag & Drop ***********************/
/****************** Lead Note ***********************/
.lead-note-col {
  margin-top: 15px;
}
.lead-note-col h5 {
  margin: 0;
}
.lead-note-col p {
  line-height: 20px;
  font-size: 13px;
  color: #7b7b7b;
}
.lead-note-col .date {
  font-size: 12px;
}
.lead-note-col .inner {
  background: #dbe8ff;
  padding: 15px 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #c0d6fd;
}

.lead-note-main {
  padding-bottom: 20px;
}

.btn-text {
  width: auto;
  padding: 0 15px !important;
  font-size: 14px !important;
}

/****************** End Lead Note ***********************/
.lead-activity-col .status {
  margin-right: 10px;
}

.lead-add-quotation .add-order-colum {
  height: 75px;
  margin-bottom: 0 !important;
  margin: 15px 0;
}
.lead-add-quotation .pl-60 {
  padding-left: 60px;
}
.lead-add-quotation .el-table tr td:first-child .cell,
.lead-add-quotation .el-table tr th:first-child .cell {
  padding-left: 15px;
}
.lead-add-quotation .el-table tr td:last-child .cell,
.lead-add-quotation .el-table tr th:last-child .cell {
  padding-right: 0;
}

@media (min-width: 768px) {
  .add-order-plus {
    margin-top: 30px;
  }
}
@media (max-width: 767px) {
  .add-order-plus .add-second-btn {
    float: right;
  }
}
/***** Lead Details ****************/
.lead-details .arrow {
  width: 100px;
  height: 26px;
  display: inline-block;
  position: relative;
}
.lead-details .arrow:after {
  border-left: 13px solid;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  display: inline-block;
  content: "";
  position: absolute;
  right: -13px;
}
.lead-details .Home:after {
  color: lightcoral;
}
.lead-details .Visit {
  background-color: lightcoral;
}
.lead-details .Test:after {
  color: darkcyan;
}
.lead-details .Drive {
  background-color: darkcyan;
}
.lead-details .Booking {
  background-color: darkolivegreen;
}
.lead-details .Booking :after {
  color: darkolivegreen;
}
.lead-details .Meeting {
  background-color: lightsalmon;
}
.lead-details .Meeting:after {
  color: lightsalmon;
}
.lead-details .Call {
  background-color: lightskyblue;
}
.lead-details .Call:after {
  color: lightskyblue;
}
.lead-details .el-collapse-item__header {
  float: left;
  margin-right: 30px;
  text-transform: uppercase;
  color: #7b7b7b;
  border-bottom: 2px solid #fff;
}
.lead-details .el-collapse-item__header.active {
  border-color: #ed273f !important;
  color: #061838;
  font-weight: 600;
  background: none !important;
}
.lead-details .el-collapse-item__wrap {
  position: absolute;
  top: 70px;
  width: 100%;
}
.lead-details .el-collapse {
  float: left;
  width: 100%;
}
.lead-details .el-icon-arrow-right {
  display: none;
}
.lead-details .lead-assignto {
  margin-bottom: 25px;
}
.lead-details .lead-assignto span {
  color: #3ca4fb;
  font-weight: 600;
}
.lead-details .el-collapse-item__content {
  padding-bottom: 0 !important;
}
.lead-details .mail-main {
  height: auto;
  margin-top: 30px;
}
.lead-details .mail-box-middle {
  min-height: 235px;
}
.lead-details .mail-box-middle .no-date {
  padding-top: 34px;
}

.lead-detail-head {
  margin-bottom: 30px;
}
.lead-detail-head .image {
  width: 80px;
  height: 80px;
}
.lead-detail-head .image img {
  object-fit: cover;
  min-width: 80px;
}
.lead-detail-head .left-name h4 {
  margin: 15px 0 6px;
  font-size: 20px;
}
.lead-detail-head .left-name span,
.lead-detail-head .left-name p {
  color: #7b7b7b;
}

.lead-status span {
  display: inline-block;
  background: #f9dee1;
  color: #ed273f;
  padding: 5px 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  margin-left: 5px;
}

.lead-detail-icons a {
  margin-left: 10px;
  font-size: 18px;
  color: #7b7b7b;
}
.lead-detail-icons a.el-icon-edit {
  font-size: 16px;
}
.lead-detail-icons .el-icon-phone {
  font-size: 16px;
}

.lead-activity-col.date,
lead-note.date {
  font-size: 13px;
}

.lead-accessory-ul .inner {
  background: #ebeff5;
  padding: 15px 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #cedcf1;
}
.lead-accessory-ul .head {
  border-bottom: 1px solid #cedcf1;
  padding-bottom: 10px;
  margin: -6px 0 5px;
}
.lead-accessory-ul li {
  float: left;
  margin: 0;
  width: 100%;
  line-height: 20px;
}
.lead-accessory-ul li .title {
  color: #7b7b7b;
}
.lead-accessory-ul li .title i {
  font-style: normal;
}
.lead-accessory-ul li .text {
  font-weight: 600;
  line-height: 20px;
  color: #000;
}

.lead-activity-content span {
  color: #7b7b7b;
  display: inline-block;
  width: 90px;
  margin-right: 5px;
}
.lead-activity-content p {
  margin: 0;
}
.lead-activity-content i {
  font-style: normal;
}

.lead-detail-punch-location a {
  font-weight: 600;
}
.lead-detail-punch-location a.active {
  color: #33abff;
  background: none !important;
}

.lead-detail-distance {
  padding: 0 20px 0 0;
}
.lead-detail-distance .inner-block {
  background: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding: 15px 15px 0;
  margin-top: 5px;
}
.lead-detail-distance .icon-car {
  font-size: 28px;
}
.lead-detail-distance .icon-stop {
  font-size: 19px;
  margin-top: 5px;
  padding-left: 22px;
}
.lead-detail-distance .bar {
  height: 5px;
  background: #c1c1c1;
  -webkit-border-radius: 29px;
  -moz-border-radius: 29px;
  -ms-border-radius: 29px;
  border-radius: 29px;
  margin-top: 18px;
  position: relative;
  left: 10px;
}

.lead-detail-map {
  background: #fff;
  padding: 6px;
}

.lead-detail-km-digit div {
  margin-top: -18px;
}

.lead-details-test-drive p {
  border-bottom: 1px solid #d8d8d8;
  padding-bottom: 8px;
  margin: 5px 0 8px;
}
.lead-details-test-drive p:last-child {
  border: 0;
  margin: 0;
}
.lead-details-test-drive i {
  font-style: normal;
  font-size: 12px;
  margin-left: 5px;
}
.lead-details-test-drive .satisfied {
  background: #1b5e20;
}
.lead-details-test-drive .average {
  background: #0091ea;
}
.lead-details-test-drive .dissatisfied {
  background: #ffab00;
}
.lead-details-test-drive .poor {
  background: #bf360c;
}
.lead-details-test-drive .ex-satisfied {
  background: #689f38;
}

.lead-detail-add {
  font-size: 15px;
  color: #000;
}

.lead-detail-accessory {
  border-top: 1px solid #e0e0e0;
  padding-top: 8px;
}

.lead-detailhead-right h3 {
  font-size: 20px;
}
.lead-detailhead-right .colum p {
  font-size: 13px;
}
.lead-detailhead-right .count {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  height: 55px;
  width: 55px;
  background: #fff;
  border: 1px solid #fff;
  position: relative;
  margin: 35px 0 10px;
  text-align: center;
}
.lead-detailhead-right .count.pending {
  border-color: #f59521;
}
.lead-detailhead-right .count.pending span {
  background: #f59521;
}
.lead-detailhead-right .count.coming {
  border-color: #13b2e7;
}
.lead-detailhead-right .count.coming span {
  background: #13b2e7;
}
.lead-detailhead-right .count.complete {
  border-color: #69c445;
}
.lead-detailhead-right .count.complete span {
  background: #69c445;
}
.lead-detailhead-right .count span {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  border: 3px solid #fff;
  position: absolute;
  top: -14px;
  right: -22px;
  line-height: 32px;
  text-align: center;
  color: #fff;
}

.lead-detail-rightbottom-icon {
  background: #f3f3f3;
}

.lead-detail-rightbottom-icon .ico {
  display: block;
}

.lead-detail-rightbottom .head {
  border-bottom: 1px solid #ebeef5;
  height: 50px;
}
.lead-detail-rightbottom .head a {
  color: #ed273f;
  margin-top: 12px;
}

.lead-detailhead-right .count .icon {
  font-size: 20px;
  margin-top: 16px;
  display: inline-block;
}
.lead-detailhead-right .count.pending i {
  color: #f59521;
}
.lead-detailhead-right .count.coming i {
  color: #13b2e7;
}
.lead-detailhead-right .count.complete i {
  color: #69c445;
}

.lead-detail-log-history {
  padding: 0;
}

.add-lead-level2 .enable-textbox {
  padding-left: 60px;
}

@media (max-width: 767px) {
  .lead-detail-head {
    padding: 0 15px;
  }

  .lead-detailhead-right,
.lead-detail,
.lead-detail-rightbottom {
    padding: 0 30px;
  }

  .lead-activity-col .inner {
    margin-left: 28px;
  }

  .lead-activity-icon {
    left: -22px;
  }
}
@media (max-width: 991px) {
  .lead-detail-top p {
    margin-top: 20px;
  }

  .lead-detailhead-right {
    margin-bottom: 20px;
  }
}
@media (max-width: 599px) {
  .basic-info-ul li {
    margin-bottom: 15px;
    float: left;
    width: 100%;
  }
  .basic-info-ul li .left span {
    display: none;
  }
}
@media (max-width: 1279px) {
  .lead-detail-top p {
    margin-top: 12px;
  }
}
/***** End Lead Details ****************/
/***** Close Lead ****************/
.close-lead-radio .el-radio__label {
  padding-left: 2px;
}

.closelead-review-text {
  margin-bottom: 2px !important;
}

.close-lead-loan {
  margin-bottom: 0 !important;
}
.close-lead-loan .el-radio {
  margin: 15px 0 0;
}

.close-lead-popup .el-input__inner {
  background-color: transparent !important;
}
.close-lead-popup .popup-color-box {
  padding: 20px 15px 15px;
}
.close-lead-popup .el-date-editor .el-icon-date {
  display: none;
}

.close_lead-block-details {
  background: #d9edf7;
  padding: 10px 10px 2px 10px;
  float: left;
  width: 100%;
  border-color: #bce8f1;
  color: #31708f;
  margin-top: 5px;
  font-size: 13px;
  font-weight: 600;
}
.close_lead-block-details > div {
  float: left;
  width: 100%;
  margin-bottom: 8px;
}
.close_lead-block-details span {
  float: left;
  font-weight: normal;
  font-size: 12px;
  width: 110px;
}

/***** End Close Lead ****************/
/***** Document Start ****************/
.lead-doc-col {
  margin-top: 30px;
}
.lead-doc-col h5 {
  color: #061838;
}
.lead-doc-col .ico {
  display: inline-block;
  text-align: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.lead-doc-col .el-icon-view {
  background: #f4efff;
  margin-right: 5px;
}
.lead-doc-col .el-icon-download {
  background: #f4f1f1;
}
.lead-doc-col .el-icon-date {
  font-size: 11px;
}

.lead-doc-text .date {
  color: #7b7b7b;
  font-size: 12px;
  display: block;
  margin-top: -3px;
}

@media (min-width: 600px) {
  .lead-doc-text {
    padding-left: 0;
  }

  .lead-doc-col .ico {
    width: 34px;
    height: 34px;
    font-size: 18px;
    line-height: 34px;
  }
}
@media (max-width: 599px) {
  .lead-doc-col .ico {
    width: 28px;
    height: 28px;
    font-size: 15px;
    line-height: 28px;
  }
  .lead-doc-col .el-icon-view {
    margin-bottom: 5px;
  }
  .lead-doc-col .col-xs-3 {
    padding-left: 0;
  }

  .lead-detail-log-history {
    margin-top: 20px;
  }
}
/***** End Document ****************/
/***** Sales Start ****************/
.lead-sales-row {
  background: #f6f6f6;
  padding: 20px 15px;
  margin-top: 20px;
}

.lead-sales-feedback {
  background: #fff;
  padding: 25px;
  margin-top: 20px;
}
.lead-sales-feedback span {
  color: #d8596e;
  font-size: 12px;
}

.lead-sales-row-right {
  font-size: 12px;
  color: #7b7b7b;
  margin: 0 0 5px;
}
.lead-sales-row-right h5 {
  margin: 0 0 5px;
}

.lead-sales-row-main {
  width: 98%;
  padding: 15px;
}

.lead-sales-main .el-icon-price-tag {
  background: #d8596e;
  color: #fff;
  display: inline-block;
  width: 56px;
  height: 56px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  font-size: 26px;
  transform: rotate(55deg);
  line-height: 54px;
  text-align: center;
}

/***** End Sales ****************/
/***** Start quotation ****************/
.lead-quotation-view .lead-quatation-top {
  background: var(--light-bg);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  padding: 15px 0;
}
.lead-quotation-view .colum-style {
  padding: 0 15px;
  min-width: 16%;
}
.lead-quotation-view .add-btn-small {
  padding-left: 0;
  margin-top: 10px;
}
.lead-quotation-view .add-btn-small .el-button {
  padding: 0 !important;
  border: 0;
  background: none;
  -webkit-box-shadow: 0 0 0 0px #f1f1f1;
  -moz-box-shadow: 0 0 0 0px #f1f1f1;
  box-shadow: 0 0 0 0px #f1f1f1;
  font-size: 18px;
  color: #061838;
}
.lead-quotation-view .add-btn-small .btn-close {
  color: #ed273f;
}
.lead-quotation-view .popup-color-box {
  padding: 15px 15px 0;
}
.lead-quotation-view .add-btn-large {
  margin-top: 26px;
}
.lead-quotation-view .lead-quatation-address p {
  margin-bottom: 2px;
}
.lead-quotation-view .lead-quatation-top b,
.lead-quotation-view .lead-quatation-total b {
  color: #000;
  margin-left: 5px;
}
.lead-quotation-view .lead-quatation-total b {
  font-size: 16px;
}
.lead-quotation-view .lead-quatation-total {
  border-top: 1px solid #ebeef5;
  padding: 0 15px;
}
.lead-quotation-view .el-table tr td:last-child .cell {
  padding-right: 10px;
}

@media (min-width: 1024px) {
  .lead-quatation-top {
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .lead-quotation-view .colum-style {
    width: 50%;
    float: left;
  }
}
@media (max-width: 767px) {
  .lead-quotation-view .colum-style {
    width: 100%;
  }
}
/***** End quotation ****************/
/***** Start Update Activity ****************/
.update-activity-top {
  background: #f0f0f0;
}
.update-activity-top .col .icon {
  background: #061838;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 16px;
}
.update-activity-top .col.icon-dashboard-icon-shop {
  padding-top: 2px;
}
.update-activity-top .text {
  width: calc(100% - 30px);
  padding: 6px 0 0 15px;
  font-size: 14px;
}

@media (min-width: 768px) {
  .update-activity-top {
    display: flex;
    padding: 18px 15px;
  }
  .update-activity-top .col {
    min-width: 33.5%;
    padding: 0 15px;
  }
}
@media (max-width: 767px) {
  .update-activity-top .col {
    width: 100%;
    float: left;
    padding: 10px 25px;
  }
}
/***** End Update Activity ****************/
/***** Start Add Excel ****************/
.lead-add-excel .dragndrop span i {
  color: #df7082;
  font-style: normal;
}
.lead-add-excel .download-error-leaddetails {
  padding: 0;
  margin-bottom: 15px;
}

/***** End Add Excel ****************/
@media (min-width: 600px) {
  .lead-right-top .col:first-child:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 10px solid #dbe6f3;
    bottom: -58px;
    margin: auto;
    left: 0;
    right: 0;
  }
}
.el-carousel--horizontal.one-item .el-carousel__arrow {
  display: none;
}

.lead-list-table .avtar-contact-name {
  width: 32px;
  height: 32px;
}
.lead-list-table .avtar-contact-name img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.lead-list-table .contact-name {
  width: calc(100% - 36px);
  float: left;
  padding: 6px 0 0 8px;
  word-break: break-word;
  white-space: normal;
  line-height: 16px;
}

.add-lead-description {
  min-height: 50px;
}

.lead-quotation-pdf-view .btn-primary {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  color: #fff;
  padding: 10px 15px;
}

.lead-stage-col {
  margin-bottom: 10px;
  font-size: 14px;
  cursor: grab;
}

.lead-stage-col .inner {
  border: 1px solid #afcaf9;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  background: #eff4fd;
  height: 85px;
  padding-top: 32px;
}

.lead-stage-col .stage-text {
  color: #061838;
}

.lead-stage-col .el-icon-delete {
  color: #ed273f;
  font-size: 15px;
}

.lead-stage-col .num {
  border-right: 1px solid #afcaf9;
}

.lead-location .google-map {
  width: 100%;
  height: 360px;
  margin: 0 auto;
  background: gray;
}

.lead-product-col span {
  word-break: break-word;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .lead-activities .dash-lead-activity-col .text {
    left: 82px;
  }

  .dash-lead-activity-col .inner {
    padding: 40px 0;
  }
}
.activity-status-clear {
  margin-top: -5px;
}
.activity-status-clear a {
  display: inline-block;
  background: #061838;
  color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 12px;
}

.activity-main .activity-icon {
  float: left;
  margin-right: 8px;
}
.activity-main .activity-icon.icon-visit {
  font-size: 14px;
}
.activity-main .activity-icon.icon-followup {
  margin-top: 2px;
  font-size: 12px;
}
.activity-main .activity-icon.activity-icon {
  margin-top: 2px;
}
.activity-main .activity-icon.el-icon-phone-outline, .activity-main .activity-icon.el-icon-message.activity-icon {
  margin-top: 4px;
}
.activity-main .el-icon-chat-square.activity-icon {
  margin-top: 5px;
  font-size: 14px;
}
.activity-main .input-item > div {
  margin-bottom: 0;
}
.activity-main .el-radio.activity-filter {
  margin: 15px 0 5px;
}
.activity-main .activity-filter-bottom {
  border-top: 1px solid #112954;
  padding-top: 5px;
}

.activity-view-popup .el-loading-mask {
  position: fixed !important;
}
.activity-view-popup .lead-activity-content span {
  width: 180px;
}
.activity-view-popup .lead-detail-distance {
  background: #eee;
  margin-top: 15px;
  padding: 15px;
}
.activity-view-popup .lead-detail-distance .bar {
  left: -15px;
  margin-top: 12px;
}
.activity-view-popup .lead-detail-km-digit {
  font-size: 12px;
  margin-top: 15px;
}
.activity-view-popup .status {
  font-size: 11px;
  height: 16px;
  line-height: 16px;
}
.activity-view-popup .google-map {
  width: 100%;
  height: 350px;
}
.activity-view-popup .location-btns {
  padding-bottom: 30px;
  border-bottom: 1px solid #DCDFE6;
}
.activity-view-popup .location-btns a {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  border: 1px solid #DCDFE6;
  padding: 10px 12px;
  margin: 0 3px;
}
.activity-view-popup .location-btns a.active {
  background: #061838 !important;
  color: #fff;
  border-color: #061838;
}
.activity-view-popup .details {
  display: flex;
  flex-wrap: wrap;
}
.activity-view-popup .details .colum-style h5 {
  word-break: break-word;
}

@media (min-width: 992px) {
  .lead-activity-content .colum-style:nth-child(3n+1) {
    clear: left;
  }

  .activity-view-popup .colum-style {
    flex: 0 0 33.333%;
  }
}
@media (max-width: 991px) {
  .activity-view-popup .colum-style {
    flex: 0 0 50%;
  }
}
@media (max-width: 599px) {
  .lead-activity-content i {
    display: none;
  }
  .lead-activity-content span {
    display: block;
  }
  .lead-activity-content p {
    margin-bottom: 12px;
  }

  .lead-detail-distance .bar {
    left: 8px;
  }

  .activity-view-popup .colum-style {
    flex: 0 0 100%;
  }
}
.target-period > div {
  margin-right: 30px;
}
.target-period span {
  color: rgba(123, 123, 123, 0.9);
  display: inline-block;
  margin-right: 5px;
}
.target-period b {
  color: #7b7b7b;
}

@media (max-width: 991px) {
  .target-period {
    margin-top: 20px;
  }
  .target-period div {
    margin-bottom: 15px;
  }
}
.target-details-table .el-table tr th:first-child .cell,
.target-details-table .el-table tr td:first-child .cell {
  padding-left: 15px;
}
.target-details-table .el-table tr th:lest-child .cell,
.target-details-table .el-table tr td:lest-child .cell {
  padding-right: 15px;
}

.update-target .first-add-btn {
  padding-left: 60px;
}
.update-target .target-color-box {
  padding-left: 60px;
}

.target-details .colum-div {
  display: flex;
  flex-wrap: wrap;
}
.target-details .colum-style {
  padding: 0 15px;
  margin-bottom: 15px;
}
.target-details .colum-style.comment {
  flex: 1;
}

.drawer-div.target .el-table tr th:first-child .cell,
.drawer-div.target .el-table tr td:first-child .cell {
  padding-left: 10px;
}
.drawer-div.target .el-table tr th:last-child .cell,
.drawer-div.target .el-table tr td:last-child .cell {
  padding-right: 10px;
}

@media (min-width: 1024px) {
  .target-details .colum-style {
    flex: 0 0 33.333%;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .target-details .colum-style {
    flex: 0 0 33.333%;
  }
}
@media (max-width: 767px) {
  .target-details .colum-style {
    flex: 0 0 100%;
  }
}
/*** FILTER ***/
.filter-div {
  position: fixed;
  background: #061838;
  z-index: 13;
  top: 0;
  right: -280px;
  height: 100%;
  bottom: 0;
  width: 280px;
  overflow-y: auto;
  padding-bottom: 15px;
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  -ms-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  padding: 0;
}
.filter-div h4 {
  color: #fff;
}
.filter-div .el-button {
  padding: 12px;
}
.filter-div .el-radio__label {
  color: #fff;
}
.filter-div .el-radio__input.is-checked + .el-radio__label {
  color: #fff !important;
}
.filter-div.width {
  right: 0;
}
.filter-div.width:before {
  opacity: 1;
  display: block;
}
.filter-div .el-input__inner {
  height: 38px !important;
  line-height: 38px !important;
  -webkit-border-radius: 4px !important;
  -moz-border-radius: 4px !important;
  -ms-border-radius: 4px !important;
  border-radius: 4px !important;
  padding: 0 12px !important;
  background: #fff !important;
}
.filter-div .el-input__inner::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
}
.filter-div .el-date-editor .el-range-input::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
}
.filter-div .ps {
  height: calc(100% - 120px);
}
.filter-div.width350 {
  width: 350px;
  right: -350px;
}
.filter-div.width350.width {
  right: 0;
}

.filter-close {
  color: #fff !important;
  font-size: 16px !important;
  margin: 16px 15px 0 0;
}

.filter-head {
  height: 50px;
}

.filter-footer {
  height: 60px;
  padding-top: 10px;
}

.filter-head {
  margin-bottom: 10px;
  color: #fff;
  padding-left: 15px;
}

.input-item {
  margin-bottom: 15px;
}

.filter-footer .el-button {
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  -ms-border-radius: 50px !important;
  border-radius: 50px !important;
}

/*** END FILTER ***/
.left-nav .ico {
  float: right;
  margin: 11px 10px 0 0;
  font-size: 11px;
}

.filter-items {
  float: left;
  background: #ebeef5;
  padding: 6px 10px;
  margin: 10px 10px 0 0;
  min-width: 100px;
  border: 1px solid #d7e0f1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.filter-items span {
  margin-top: 1px;
  margin-left: 5px;
}

.filter-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 12;
  display: none;
}

.addexpense-popup .icon-input .el-input__inner {
  background: transparent;
}
.addexpense-popup .special-approval label.el-checkbox {
  padding-left: 5px !important;
}
.addexpense-popup .popup-color-box {
  padding: 20px 15px 5px;
}

.expense-main .user-name {
  color: #000;
  margin-right: 10px;
}
.expense-main .user-id {
  color: #7b7b7b;
  font-size: 12px;
}

@media (min-width: 1280px) and (max-width: 1365px) {
  .expense.drawer-div {
    width: 75%;
  }
}
@media (max-width: 767px) {
  .total-count.expence {
    margin-left: 0;
  }
}
.location-main .active {
  background-color: white !important;
}
.location-main .activeLocation {
  background-color: #f3f9fd;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #cce4f5;
}
.location-main .location-filter {
  justify-content: flex-end;
  display: flex;
}
.location-main .google-map, .location-main .new-map {
  width: 100%;
  height: 360px;
  margin: 0 auto;
  background: gray;
}

.location .timeline-icon::after {
  background: #dcd9d9;
  content: "";
  height: 53px;
  left: 28px;
  top: 46px;
  position: absolute;
  width: 1px;
}

.timeline-centered .timeline-entry .timeline-entry-inner {
  position: relative;
  margin-left: -20px;
  display: block;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label {
  position: relative;
  padding: 15px 10px;
  min-height: 70px;
  margin-left: 60px;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label span.date-time {
  display: block;
  font-size: 13px;
  color: rgba(123, 123, 123, 0.8);
  margin-top: 4px;
}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon {
  background: #fff;
  color: #ed273f;
  display: block;
  width: 36px;
  height: 36px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
  text-align: center;
  border: solid 1px #dcd9d9;
  line-height: 35px;
  font-size: 18px;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}

.timeline-label.activeLocation {
  background: #fff !important;
  border-color: #ed273f !important;
}

.location-map {
  padding: 10px;
  background: #f7f7f7;
  outline: 1px solid #e8e8e8;
}

.location-list-main {
  overflow-y: auto;
  max-height: 392px;
}

@media (min-width: 768px) {
  .location-main .custom-datepicker {
    margin-left: 15px;
  }
}
@media (min-width: 992px) {
  .location-left-main {
    padding-right: 50px;
  }
}
@media (max-width: 767px) {
  .location-main .location-filter {
    flex-direction: column;
    margin-top: 15px;
  }
  .location-main .location-filter .select-round {
    width: 100%;
  }
  .location-main .location-filter .el-select {
    margin-bottom: 15px;
  }

  .timeline-centered .timeline-entry .timeline-entry-inner .timeline-label {
    margin-left: 52px;
  }
}
.location-tab a {
  float: left;
  position: relative;
  background: #fff;
  color: #848484;
  height: 60px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  width: 60px;
  margin-bottom: 10px;
  line-height: 62px;
  text-align: center;
  border: 1px solid #ccc;
}
.location-tab a.active {
  background: #ed273f !important;
  color: #fff;
  border-color: #e41931;
}
.location-tab a .icon-placeholder {
  font-size: 22px;
}
.location-tab a .icon-activity {
  font-size: 30px;
}
.location-tab a .icon-location {
  font-size: 28px;
}
.location-tab p {
  border-bottom: 1px solid #ddd;
  margin-bottom: 25px;
}

@media (min-width: 992px) {
  .location-tab {
    margin-top: 45px;
  }
  .location-tab a.active::after {
    content: "";
    border-left: 20px solid #ed273f !important;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    position: absolute;
    right: -8px;
    top: 9px;
  }
}
@media (max-width: 991px) {
  .location-tab {
    margin-top: 25px;
  }
  .location-tab a {
    margin-right: 15px;
  }
  .location-tab a.active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ed273f;
    margin: auto;
  }
}
.attendance-main .atte-location-icon {
  font-size: 18px;
}
.attendance-main .attendance-filter p {
  padding: 15px 30px 15px 0;
}
.attendance-main .attendence-col {
  -webkit-box-shadow: 5px 5px 12px 0px #f1f1f1;
  -moz-box-shadow: 5px 5px 12px 0px #f1f1f1;
  box-shadow: 5px 5px 12px 0px #f1f1f1;
  margin: 15px 0;
  min-height: 185px;
  position: relative;
  border: 1px solid #ececec;
  padding-top: 25px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.attendance-main .attendence-col .icon {
  width: 50px;
  display: inline-block;
  position: relative;
}
.attendance-main .attendence-col a {
  color: #ed273f;
}
.attendance-main .attendence-col-time {
  color: rgba(123, 123, 123, 0.7);
  font-size: 13px;
}
.attendance-main .user-status {
  top: 0px;
  border-width: 2px;
}
.attendance-main .attendance-status-color {
  display: flex;
}
.attendance-main .attendance-status-color .online-status,
.attendance-main .attendance-status-color .offline-status,
.attendance-main .attendance-status-color .auto-punched-out-status {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  width: 10px;
  height: 10px;
  margin: 2px 6px 0 0;
  float: left;
}

.attendance-location-map .google-map {
  width: 100%;
  height: 360px;
  margin: 0 auto;
  background: gray;
}
.attendance-location-map .punch-btn {
  color: #fff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  padding: 10px 12px;
  font-size: 13px;
}
.attendance-location-map .punch-out-btn {
  border: 1px solid #ed273f;
  color: #ed273f;
}
.attendance-location-map .punch-out-btn.active1 {
  background: #ed273f;
  color: #fff;
}
.attendance-location-map .punch-in-btn {
  border: 1px solid #83d000;
  color: #83d000;
}
.attendance-location-map .punch-in-btn.active1 {
  background: #83d000;
  color: #fff;
}
.attendance-location-map .punch-in-time b {
  color: #83d000;
}
.attendance-location-map .punch-out-time b {
  color: #ed273f;
}

@media (min-width: 992px) {
  .attendance-status-color {
    justify-content: flex-end;
    margin-top: 15px;
  }
  .attendance-status-color div {
    padding-left: 20px;
  }
}
@media (max-width: 991px) {
  .attendance-status-color {
    margin: 15px 0;
  }
  .attendance-status-color div {
    padding-right: 15px;
  }
}
@media (max-width: 639px) {
  .attendance-filter p {
    padding: 15px 30px 0 0;
  }

  .attendance-location-map .punch-btn {
    float: left;
    width: 100%;
    margin-bottom: 15px;
  }
}
.el-dialog__body {
  padding: 15px !important;
  width: 95% !important;
  margin: -20px auto 0 !important;
  background: #fff !important;
  -webkit-border-radius: 4px !important;
  -moz-border-radius: 4px !important;
  -ms-border-radius: 4px !important;
  border-radius: 4px !important;
  line-height: 22px !important;
}
.el-dialog__body .el-form-item__content label {
  color: #7b7b7b;
  font-size: 12px;
}

.el-dialog__header {
  padding: 33px 20px 45px !important;
  border-bottom: 1px solid #ddd8d8;
  -webkit-border-radius: 8px 8px 0 0 !important;
  -moz-border-radius: 8px 8px 0 0 !important;
  -ms-border-radius: 8px 8px 0 0 !important;
  border-radius: 8px 8px 0 0 !important;
  background: #061838;
  text-align: center;
}

.el-dialog__title {
  line-height: 22px !important;
  font-size: 22px !important;
  color: #fff !important;
}

.el-dialog {
  float: none !important;
  padding: 0 !important;
  -webkit-border-radius: 10px !important;
  -moz-border-radius: 10px !important;
  -ms-border-radius: 10px !important;
  border-radius: 10px !important;
}

.el-form-item {
  margin-bottom: 25px !important;
}

.el-button {
  padding: 12px 15px !important;
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  -ms-border-radius: 50px !important;
  border-radius: 50px !important;
  letter-spacing: 0.4px;
}
.el-button.download-excel:focus {
  background: inherit;
  color: #606266;
  border-color: #DCDFE6;
}

.el-checkbox__inner {
  width: 18px !important;
  height: 18px !important;
}

.el-form-item__content {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
  color: #000;
  line-height: 10px !important;
}

.el-pagination {
  padding: 0 !important;
  color: #000 !important;
  margin-top: 20px !important;
}

.el-pagination .el-select .el-input {
  width: 65px !important;
  margin: 0 !important;
}

.el-pagination .el-select .el-input .el-input__inner {
  height: 30px !important;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f4f4f5 !important;
  color: #000 !important;
}

.el-pagination.is-background .btn-next.disabled,
.el-pagination.is-background .btn-next:disabled,
.el-pagination.is-background .btn-prev.disabled,
.el-pagination.is-background .btn-prev:disabled,
.el-pagination.is-background .el-pager li.disabled {
  color: #C0C4CC !important;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background: #fff !important;
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  -ms-border-radius: 50px !important;
  border-radius: 50px !important;
  border: 1px dashed #dedede;
  min-width: 36px !important;
  height: 36px;
  color: #7b7b7b !important;
}

.el-pager li {
  height: 36px !important;
  line-height: 33px !important;
}

.el-pager,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev {
  color: #000 !important;
  border: 0;
}

.el-checkbox__inner:hover {
  border-color: #ed273f !important;
}

.el-button + .el-button {
  margin-left: 4px !important;
}

.el-table th {
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  background: #f8f8f8 !important;
  padding: 9px 0 !important;
}
.el-table th.is-leaf {
  border-bottom: 1px solid #ECECF1 !important;
}
.el-table td {
  padding: 9px 0 !important;
  border-bottom: 1px solid #ECECF1 !important;
}
.el-table tr th:first-child .cell {
  padding-left: 30px;
}
.el-table tr td:first-child .cell {
  padding-left: 30px;
}
.el-table tr th:last-child .cell {
  padding-right: 30px;
}
.el-table tr td:last-child .cell {
  padding-right: 30px;
}

.el-button--primary.is-disabled {
  color: #FFF;
  background-color: #f98492 !important;
  border-color: #f98492 !important;
}
.el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover {
  color: #FFF;
  background-color: #f98492 !important;
  border-color: #f98492 !important;
}

.el-radio__input.is-checked .el-radio__inner {
  background: #ed273f !important;
  border: 1px solid #ed273f !important;
}

.el-radio__input.is-checked + .el-radio__label {
  color: #000 !important;
}

.el-dialog__footer {
  border-top: 1px solid #eee !important;
  padding: 15px 20px 15px !important;
  overflow: hidden;
}

.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
  color: #909399 !important;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
  width: 6px !important;
}

.ps__rail-y {
  width: 0 !important;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y,
.ps__thumb-y {
  background-color: #385992 !important;
}

.el-button.download-btn,
.el-button.download-btn:hover,
.el-button.download-btn:focus {
  background: #409eff;
  border-color: #409eff;
  color: #fff;
  font-size: 16px;
  height: 40px;
}

.el-form-item__label {
  color: #000 !important;
}

.el-button {
  font-size: 13px !important;
}

.el-input {
  font-size: 13px !important;
}

.el-date-editor .el-range-input,
.el-date-editor .el-range-separator {
  font-size: 13px !important;
}
.el-date-editor.no-icon .el-icon-date {
  display: none;
}

.el-input__inner {
  border-width: 0 0 1px !important;
  border-color: #DCDFE6;
  padding: 0 !important;
  height: 34px !important;
  line-height: 34px !important;
  color: #000 !important;
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  -ms-border-radius: 0px !important;
  border-radius: 0px !important;
  border: 1px solid #dedede;
  background: transparent !important;
}

.el-button,
.el-table,
.el-form-item__content,
.el-input,
.el-dialog__body {
  font-size: 13px;
}

.el-radio__input.is-checked .el-radio__inner {
  background: #ed273f;
  border: 1px solid #ed273f;
}

.el-radio__inner {
  border: 1px solid #ed273f;
}
.el-radio__inner:hover {
  border-color: #ed273f !important;
}

.el-table__footer {
  font-size: 15px;
  font-weight: 500;
}

.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 100% !important;
}
.el-date-editor.no-icon .el-icon-time {
  display: none;
}

.el-textarea__inner {
  border-width: 0 0 1px !important;
  border-color: #DCDFE6;
  padding: 0 !important;
  color: var(--text-color) !important;
  border-radius: 0px !important;
  -webkit-border-radius: 0px !important;
}

.el-carousel .el-carousel__item {
  padding: 0 60px;
}
.el-carousel.one-item .el-carousel__item {
  padding: 0;
}

@media (max-width: 767px) {
  .el-date-range-picker__content {
    width: 100% !important;
  }

  .bottom-pagination .el-pagination {
    white-space: normal;
    display: flex;
  }
  .bottom-pagination .el-pagination li {
    margin-bottom: 6px !important;
  }
}
@media (max-width: 599px) {
  .el-dialog__title {
    line-height: 24px !important;
    font-size: 20px !important;
  }

  .el-date-range-picker .el-picker-panel__body {
    min-width: 100% !important;
  }

  .el-picker-panel {
    width: 82% !important;
    left: 15px !important;
    top: 11px !important;
    position: fixed !important;
  }
}
.battery-filter .period > div {
  margin-top: 12px;
}
.battery-filter .el-checkbox__label, .battery-filter .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #fff !important;
}

.battery-list-inner {
  -webkit-box-shadow: 5px 5px 12px 0px #f1f1f1;
  -moz-box-shadow: 5px 5px 12px 0px #f1f1f1;
  box-shadow: 5px 5px 12px 0px #f1f1f1;
  margin: 15px 0;
  border: 1px solid #f3f3f3;
  padding-top: 22px;
  min-height: 200px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px;
}
.battery-list-inner .avtar-user img {
  width: 42px;
  height: 42px;
  margin: 5px 0;
}

.battery-list-time {
  margin-top: 10px;
  color: rgba(123, 123, 123, 0.7);
}

.battery-charge-status {
  font-weight: 700;
}

@media (max-width: 767px) {
  .battery-main .select-round {
    margin-bottom: 15px;
    width: 100%;
  }
}
@media (max-width: 599px) {
  .battery-main .select-round {
    margin: 15px 0;
  }
}
@media (min-width: 992px) and (max-width: 1279px) {
  .battery-list-col:nth-child(3n+1) {
    clear: left;
  }
}
@media (min-width: 1280px) {
  .battery-list-col:nth-child(4n+1) {
    clear: left;
  }
}
@media (max-width: 991px) {
  .battery-list-col:nth-child(2n+1) {
    clear: left;
  }
}
.mail-main.mail-settings {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.mail-main.mail-settings .form-field {
  border: 1px solid #DCDFE6;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  padding: 30px 30px 25px;
  background: #fff;
}
.mail-main.mail-settings .form-field .head {
  border-bottom: 1px solid #DCDFE6;
  padding-bottom: 20px;
}
.mail-main.mail-settings .form-field .head .el-icon-message {
  float: left;
  height: 40px;
  width: 40px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background: #6898ef;
  text-align: center;
  color: #fff;
  font-size: 18px;
  margin: -7px 15px 0 0;
  line-height: 40px;
}
.mail-main.mail-settings label {
  font-size: 12px;
  color: #7b7b7b;
  margin-bottom: 5px;
}
.mail-main.mail-settings .el-input {
  width: 100%;
}
.mail-main .mail-tab {
  margin-top: 30px;
}

.mail-attachment {
  display: flex;
  flex-wrap: wrap;
}
.mail-attachment .colum {
  margin: 0 10px 10px 0;
  background: #f5f5f5;
  padding: 8px 8px 4px;
  border-radius: 50px;
}

.mail-box-content .profile-img {
  position: relative;
  border: 1px solid;
  height: 36px;
  width: 36px;
}
.mail-box-content .head {
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #e4e8f1;
}
.mail-box-content .head .profile-img {
  margin: 12px 10px 0 0;
}
.mail-box-content .head .profile-img .name {
  font-weight: 500;
  color: #7b7b7b;
}
.mail-box-content .head .right-icons {
  font-size: 18px;
}
.mail-box-content .head .right-icons .icon-delete-2 {
  font-size: 15px;
}
.mail-box-content .ck-content {
  height: 120px;
}

.mail-box-content-body .heading span {
  color: #7b7b7b;
  font-size: 12px;
}
.mail-box-content-body .heading h3 {
  color: #061838;
  margin: 8px 0 0;
  word-break: break-word;
  font-size: 20px;
}
.mail-box-content-body .top-area .right-icons a {
  color: #7b7b7b;
  font-size: 15px;
  position: relative;
  margin-left: 5px;
}
.mail-box-content-body .top-area .right-icons a.icon-back, .mail-box-content-body .top-area .right-icons a.icon-users-1 {
  font-size: 19px;
}
.mail-box-content-body .top-area .right-icons a.icon-forward {
  font-size: 14px;
  top: -3px;
}
.mail-box-content-body .top-area .right-icons a.el-icon-more {
  transform: rotate(90deg);
  top: -3px;
}
.mail-box-content-body .text-area {
  color: #7b7b7b;
  font-size: 13px;
  background: #f7f9fd;
  padding: 30px;
  line-height: 18px;
}
.mail-box-content-body .attachment {
  font-size: 12px;
}
.mail-box-content-body .attachment i {
  font-size: 16px;
  font-weight: 500;
  margin-top: -1px;
}
.mail-box-content-body .attachment span {
  color: #7b7b7b;
}
.mail-box-content-body .attachment a.download {
  color: #576bd4;
}
.mail-box-content-body div.gmail_quote {
  background: #F7F9FD;
  padding: 15px;
  color: #7b7b7b;
}

.mail-replay {
  font-size: 18px;
}

.icon-team1 item {
  font-size: 16px;
  margin: 0 0 0 15px;
  float: right;
}

.mail-box-middle {
  background: #fff;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  border-radius: 20px;
  position: relative;
  right: 15px;
  z-index: 1;
  border: 1px solid #ffffff;
}
.mail-box-middle .search-keyword .el-input__inner {
  background: #f5f6fa;
  border: 0;
  height: 40px !important;
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  -ms-border-radius: 50px !important;
  border-radius: 50px !important;
}
.mail-box-middle .search-keyword i {
  font-size: 18px;
}
.mail-box-middle .search-keyword a {
  width: 40px;
  line-height: 64px;
  font-size: 17px;
}
.mail-box-middle .search-keyword a.icon-filter1 {
  font-size: 26px;
  text-align: center;
  position: relative;
  top: 2px;
}
.mail-box-middle .search-keyword .el-input {
  width: calc(100% - 80px);
}
.mail-box-middle .search-keyword .el-input__prefix {
  right: 10px;
  left: auto;
}
.mail-box-middle .top-bar .left .el-icon-success {
  font-size: 22px;
  position: relative;
  top: 3px;
  margin-right: 5px;
}
.mail-box-middle .top-bar .left p {
  margin: 0 0 5px;
  color: #7b7b7b;
}
.mail-box-middle .top-bar .left p.readed .el-icon-success {
  color: #3BB530;
}
.mail-box-middle .top-bar .left p.unreaded .el-icon-success {
  color: rgba(123, 123, 123, 0.4);
}
.mail-box-middle .top-bar .left .profile-img {
  width: 56px;
  height: 56px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.mail-box-middle .top-bar .left .profile-content {
  width: calc(100% - 56px);
  padding: 10px 0 0 15px;
}
.mail-box-middle .top-bar .left .profile-content .name {
  font-weight: 600;
}

.mail-box-left {
  -webkit-border-radius: 20px 0 0 20px;
  -moz-border-radius: 20px 0 0 20px;
  -ms-border-radius: 20px 0 0 20px;
  border-radius: 20px 0 0 20px;
  padding: 25px 40px 25px 25px;
  z-index: 1;
  background: #F2F7FF;
}
.mail-box-left .head span {
  color: #ed273f;
}
.mail-box-left .block {
  margin-top: 40px;
}
.mail-box-left .block p {
  margin: 15px 0 0;
  color: #7b7b7b;
}
.mail-box-left .block p a {
  color: #7b7b7b;
}
.mail-box-left .block p a.active {
  color: #409EFF;
  background: none !important;
  font-weight: 600;
}
.mail-box-left .block .input-item {
  border: 1px solid rgba(6, 24, 56, 0.2);
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  padding-left: 15px;
}
.mail-box-left .block .el-range-editor .el-range-input {
  background: transparent;
}
.mail-box-left .block .el-input__inner {
  border: 0;
}

.mail-box-left-body .top a {
  height: 45px;
  line-height: 45px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #000;
}
.mail-box-left-body .top a.active {
  background: #fff !important;
  color: #000;
  -webkit-box-shadow: 0 5px 6px 0 rgba(6, 24, 56, 0.05);
  -moz-box-shadow: 0 5px 6px 0 rgba(6, 24, 56, 0.05);
  box-shadow: 0 5px 6px 0 rgba(6, 24, 56, 0.05);
}
.mail-box-left-body .top a i {
  display: inline-block;
  width: 26px;
  position: relative;
  top: 2px;
  font-size: 20px;
  float: left;
  color: #7b7b7b;
  margin-right: 8px;
}
.mail-box-left-body .top a i.el-icon-s-promotion {
  font-size: 23px;
  margin-top: 8px;
}
.mail-box-left-body .top a span {
  background: #C7DCFF;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  min-width: 30px;
  height: 30px;
  line-height: 30px;
  margin-top: 8px;
  text-align: center;
  color: #1E63DE;
  padding: 0 5px;
  font-size: 12px;
}
.mail-box-left-body blockquote {
  font-size: 13px !important;
}

.mail-box-middle-body {
  overflow-y: auto;
}
.mail-box-middle-body .list {
  background: #F2F7FF;
  padding: 12px;
  position: relative;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  margin-top: 15px;
}
.mail-box-middle-body .list .read-info-icon {
  font-size: 22px;
  padding-top: 16px;
  color: rgba(123, 123, 123, 0.3);
}
.mail-box-middle-body .list.readed .read-info-icon {
  color: #3BB530;
}
.mail-box-middle-body .list .subject {
  padding: 0 15px;
  width: calc(100% - 62px);
}
.mail-box-middle-body .list .subject h5 {
  color: #7b7b7b;
  font-weight: 500;
  text-transform: capitalize;
  margin: 5px 0 0 0;
}
.mail-box-middle-body .list .subject h4 {
  color: #061838;
  font-weight: 500;
  word-break: break-word;
  margin: 0 0 3px;
  font-size: 16px;
}
.mail-box-middle-body .list .subject p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}
.mail-box-middle-body .list .subject .text {
  width: calc(100% - 150px);
  color: #7b7b7b;
}
.mail-box-middle-body .list .profile-img {
  position: relative;
  border: 1px solid;
  height: 36px;
  width: 36px;
}
.mail-box-middle-body .list .right {
  width: 150px;
  text-align: right;
  color: #000;
  font-weight: 500;
}
.mail-box-middle-body .list .right .el-icon-more {
  font-size: 22px;
}
.mail-box-middle-body .profile-img .img-circle {
  display: inline-block;
  position: absolute;
  border: 2px solid #fff;
  right: 0;
  top: 0;
  width: 12px;
  height: 12px;
}
.mail-box-middle-body .profile-img .img-circle.online {
  background: #4cda64;
}
.mail-box-middle-body .profile-img .img-circle.offline {
  background: #96b8e2;
}
.mail-box-middle-body .el-tabs__item.is-active {
  color: #1E63DE;
}
.mail-box-middle-body .el-tabs__active-bar {
  background: #1E63DE;
}
.mail-box-middle-body .el-tabs__nav-wrap::after {
  height: 1px;
  background-color: #D8E3F6;
}

@media (min-width: 1024px) {
  .mail-box-middle-body {
    max-height: 74.6vh;
  }

  .mail-main {
    display: flex;
    margin-bottom: 20px;
  }
}
@media (max-width: 1279px) {
  .row-section {
    margin-left: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .mail-box-middle-body {
    max-height: 350px;
  }
  .mail-box-middle-body a {
    float: left;
    margin-right: 35px;
  }

  .mail-box-left-body .top a {
    float: left;
    margin-right: 35px;
  }

  .mail-box-left .block {
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  .mail-box-middle.mail-detail {
    padding: 20px;
  }
}
@media (max-width: 991px) {
  .mail-settings {
    padding: 30px 0;
  }

  .mail-box-left {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    border-radius: 20px;
  }
  .mail-box-left .block {
    float: left;
    margin-top: 20px;
  }

  .mail-box-middle {
    right: 0;
    margin-top: 15px;
  }
  .mail-box-middle .search-keyword {
    margin-top: 20px;
  }
}
@media (max-width: 767px) {
  .mail-box-middle {
    margin: 15px 0;
  }
  .mail-box-middle .search-keyword .el-input {
    width: 100%;
  }

  .mail-box-left {
    padding: 15px;
  }

  .mail-box-middle-body .list .subject .text {
    width: 100%;
  }
  .mail-box-middle-body .list .right {
    margin-top: 5px;
    text-align: left;
  }

  .mail-box-content-body .top-area .right-icons a {
    margin-left: 12px;
  }
  .mail-box-content-body img {
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  .mail-box-content-body .right-icons {
    margin-top: 10px;
  }
  .mail-box-content-body .heading h3 {
    font-size: 20px;
  }
}
.msg-add-user {
  width: 36px;
  height: 36px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  float: left;
}

.msg-head-content {
  width: calc(100% - 36px);
  float: right;
  padding-left: 10px;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .msg-head-content {
    padding-left: 10px;
  }
}
.msg-right-scroll.middle {
  height: 458px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .msg-right-scroll.middle {
    height: 490px;
  }

  .mail-box-left .block {
    width: 50%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .msg-right-scroll.middle {
    height: 490px;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .msg-right-scroll.middle {
    height: 458px;
  }
}
@media (max-width: 767px) {
  .msg-right-scroll.middle {
    padding: 0 15px;
  }
}
.compose-mail .el-dialog__header {
  padding: 0 !important;
  border: 0;
}
.compose-mail .head {
  border-bottom: 1px solid #E4E8F1;
  padding-bottom: 15px;
  margin: 0 -30px 40px;
}
.compose-mail .ck-content {
  height: 300px;
}
.compose-mail .el-form-item {
  margin-bottom: 5px !important;
}
.compose-mail .label-div {
  border: 1px solid #E4E8F1;
  padding: 25px 15px 15px;
  margin-bottom: 5px !important;
}
.compose-mail .label-div.cc {
  background: #EEEDFB;
}
.compose-mail .label-div .el-input {
  width: calc(100% - 40px);
  float: left;
  margin-top: -12px;
}
.compose-mail .label-div .el-input .el-input__inner {
  border: 0;
  background: transparent;
}
.compose-mail .label-div label {
  width: 40px;
  float: left;
}
.compose-mail .el-dialog__headerbtn .el-dialog__close {
  color: #ed273f;
  font-size: 26px;
}
.compose-mail .cc-mail {
  background: #f5f5f5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding: 4px 8px 4px 6px;
  border: 1px solid #d2d0d0;
  margin-right: 5px;
  font-size: 11px;
  float: left;
  align-items: center;
  display: flex;
}
.compose-mail .cc-mail .remove-item {
  float: right;
  width: 14px;
  height: 14px;
  line-height: 12px;
  text-align: center;
  margin-left: 10px;
  background: #d2d0d0;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  border-radius: 12px;
  cursor: pointer;
}

.mail-drawer .avatar {
  margin-top: -6px;
}
.mail-drawer .drawer-head h4 {
  margin: 3px 0 0;
  width: calc(100% - 55px);
  text-transform: capitalize;
}
.mail-drawer .text-area {
  background: #F2F7FF;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  padding: 15px;
}
.mail-drawer .text-area div,
.mail-drawer .text-area span {
  font-size: 13px !important;
  font-family: "Ubuntu", sans-serif !important;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.6);
}
.mail-drawer .drawer-head {
  height: auto;
  min-height: 70px;
}

@media (min-width: 768px) {
  .mail-main.mail-settings .form-field {
    width: 600px;
    margin-top: 40px;
  }
}
@media (max-width: 767px) {
  .compose-mail {
    width: 90% !important;
  }

  .mail-main.mail-settings .form-field {
    width: 350px;
  }
}
.mail-box-content-body .heading h3 {
  color: #061838;
  margin: 8px 0 0;
  word-break: break-word;
  font-size: 20px;
}

.message-main .msg-head-contact {
  border-top: 1px solid #dbe1ec;
  padding: 10px 15px;
  font-size: 12px;
}
.message-main .msg-head-contact p {
  float: left;
  width: 100%;
}
.message-main .msg-head-contact p:first-child {
  margin-bottom: 8px;
}
.message-main .msg-head-contact i {
  width: 18px;
  float: left;
  margin-top: 3px;
}
.message-main .msg-head-contact span {
  width: calc(100% - 18px);
  float: right;
}
.message-main .msg-info {
  max-height: 330px;
  overflow-y: auto;
}
.message-main .msg-info.delivered, .message-main .msg-info.read {
  padding: 15px;
  border-top: 1px solid #dbe1ec;
}
.message-main .msg-info.delivered span, .message-main .msg-info.read span {
  float: left;
  margin: 6px 5px 0 0;
  padding: 8px 6px 8px;
  font-size: 11px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  height: 30px;
}
.message-main .msg-info.delivered h4, .message-main .msg-info.read h4 {
  margin: 0 0 15px;
}
.message-main .msg-info h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}
.message-main .msg-info.delivered span {
  background: #eef4ff;
  border: 1px solid #cbdcfd;
}
.message-main .msg-info.delivered span .icon-success {
  color: #22be22;
  font-size: 12px;
  margin: 0 0 0 5px;
}
.message-main .msg-left {
  padding: 15px;
  background: #061838;
  height: 60px;
}
.message-main .msg-left h4 {
  font-size: 18px;
  margin: 0;
  color: #fff;
  display: inline-block;
}
.message-main .msg-left .btn-msg-composs {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  margin-top: -2px;
}
.message-main .msg-left .result {
  margin: 5px 0 0 3px;
  color: #fff;
  background: #1272c7;
  display: inline-block;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
  line-height: 24px;
  padding: 0 5px;
  font-size: 12px;
  min-width: 24px;
}
.message-main .msg-left .icon-filter {
  background: #061838;
  color: #fff;
  border: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  line-height: 34px;
  margin-right: 15px;
  font-size: 14px;
}
.message-main body {
  background: #fff;
}
.message-main .ellipsis {
  display: inline-block;
  width: 180px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}
.message-main .msg-add-user {
  width: 36px;
  height: 36px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  float: left;
}
.message-main .msg-add-user .avatar {
  background: #979ba3;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
  width: 36px;
  height: 36px;
  position: relative;
  margin-top: 6px;
}
.message-main .msg-head-content {
  width: calc(100% - 36px);
  float: right;
  padding-left: 10px;
}
.message-main .msg-head-content span {
  display: block;
  color: #7b7b7b;
  margin-bottom: 5px;
  font-size: 12px;
}
.message-main .msg-head-content p {
  font-size: 13px;
  margin-bottom: 0;
}
.message-main .msg-head-content h5 {
  color: #061838;
  font-weight: 800;
  margin: 5px 0 3px;
  font-size: 13px;
  text-transform: lowercase;
}
.message-main .msg-send-time {
  color: #7b7b7b;
  font-size: 11px;
  text-align: right;
  margin-top: 3px;
  display: inline-block;
}
.message-main .msg-send-time .icon-double-tick {
  font-size: 13px;
  margin: 0 0 0 2px;
  position: relative;
  top: 3px;
}
.message-main .msg-send-time .icon-double-tick.complete {
  color: #22be22;
}
.message-main .msg-send-time p {
  display: inline-block;
  margin: 0 0 0 5px;
  background: #ff9100;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  color: #fff;
  padding: 2px 5px;
  font-size: 12px;
}
.message-main .msg-row {
  border-bottom: 1px solid #dbe1ec;
}
.message-main .msg-row.read {
  background: #f2f6fe;
}
.message-main .msg-row .icon-user-1 {
  font-size: 32px;
  color: #7b7b7b;
}
.message-main .msg-row:hover {
  background: #f2f6fe;
}
.message-main .data-bg {
  padding: 0;
}
.message-main .msg-left-main {
  background: #fff;
}
.message-main .msg-right-main .head .chat-user-avatar .user-status {
  width: 14px;
  height: 14px;
  bottom: 0;
  top: auto;
  right: -2px;
}
.message-main .btn-msg-composs {
  float: right;
}
.message-main .chat-user-avatar {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
  width: 36px;
  height: 36px;
  position: absolute;
  left: -45px;
  top: -8px;
}
.message-main .message-main {
  background: #fff;
}
.message-main .msg-right-main {
  background: #eaeef3;
  position: relative;
}
.message-main .msg-right-main .head {
  background: #eaeef3;
  height: 70px;
  padding: 12px 30px;
  border-bottom: 1px solid #e8e8e8;
}
.message-main .msg-right-main .head h5 {
  font-weight: 600;
  margin: 0 0 2px 0;
  font-size: 18px;
}
.message-main .msg-right-main .head .right {
  text-align: right;
}
.message-main .msg-right-main .head .chat-user-avatar {
  top: 0;
  position: relative;
  left: 0;
}
.message-main .msg-right-main .name {
  padding-left: 3%;
}
.message-main .msg-right-main .name span {
  color: #7b7b7b;
  font-size: 13px;
}
.message-main .msg-filter {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 15px;
}
.message-main .msg-filter .el-date-editor .el-range-separator {
  width: 20%;
}
.message-main .msg-send-btn {
  width: 42px;
  height: 42px;
  font-size: 16px !important;
  margin: 6px 15px 0 0;
  padding: 0 !important;
}
.message-main .msg-right-scroll {
  height: 415px;
  overflow-y: auto;
  float: left;
  width: 100%;
}
.message-main .read-info {
  position: absolute !important;
  background: #fff;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1;
  padding: 20px;
  display: none;
}
.message-main .info-close {
  font-size: 22px;
}
.message-main .msg-right-side {
  background: #fff;
}
.message-main .msg-right-side .top {
  padding: 15px 15px 0;
}
.message-main .msg-right-side .head .top h5 {
  margin: 15px 0 3px;
}
.message-main .msg-right-side .head .top span {
  color: #7b7b7b;
  margin-bottom: 20px;
  display: inline-block;
  font-size: 13px;
}
.message-main .chat-owner-avatar .icon-user-1 {
  color: #7b7b7b;
  font-size: 80px;
  margin-bottom: 0;
  height: 80px;
  margin-top: 5px;
}
.message-main .chat-row {
  background: #fff;
  position: relative;
  float: left;
  padding: 6px 12px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  line-height: 20px;
  margin: 25px 0 0 14%;
  font-weight: 100;
}
.message-main .chat-row .user-name {
  padding-right: 12px;
}
.message-main .chat-row .icon-user-1 {
  font-size: 32px;
  color: #7b7b7b;
}
.message-main .chat-row.admin {
  border: 1px solid #1272c7;
  background: #1e88e5;
  -webkit-border-radius: 0 8px 8px 8px;
  -moz-border-radius: 0 8px 8px 8px;
  -ms-border-radius: 0 8px 8px 8px;
  border-radius: 0 8px 8px 8px;
  color: #fff;
}
.message-main .chat-row.admin .msg-send-time {
  color: #9ecdf7;
}
.message-main .chat-row.user {
  background: #fff;
  border: 1px solid #e6e5e5;
  -webkit-border-radius: 8px 0 8px 8px;
  -moz-border-radius: 8px 0 8px 8px;
  -ms-border-radius: 8px 0 8px 8px;
  border-radius: 8px 0 8px 8px;
}
.message-main .chat-row.user .chat-user-avatar {
  right: -45px;
  left: auto;
}
.message-main .msg-right-main {
  background: #dfeaf7;
}
.message-main .msg-right-scroll.middle {
  height: 452px;
}

@media (min-width: 992px) {
  .msg-left {
    padding: 10px 15px;
  }

  .msg-filter .text-search {
    margin-bottom: 15px;
  }

  .msg-row {
    padding: 6px 15px;
  }

  .chat-row.admin {
    max-width: 80%;
    min-width: 25%;
  }
  .chat-row.user {
    max-width: 80%;
    float: right;
    margin-right: 13%;
    text-align: right;
  }

  .msg-textarea {
    padding: 10px;
    background: #fff;
    margin-top: 30px;
  }

  .msg-left {
    -webkit-border-radius: 6px 0 0 0;
    -moz-border-radius: 6px 0 0 0;
    -ms-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
  }

  .msg-textarea .msg-btn {
    padding-left: 10px;
  }

  .msg-left-main {
    border-right: 1px solid #e8e8e8;
  }

  .message-main,
.msg-left-main,
.msg-right-main,
.msg-right-side {
    height: 550px;
  }
}
@media (max-width: 991px) {
  .msg-left,
.msg-filter,
.msg-row {
    padding: 15px;
  }

  .msg-filter .text-search {
    margin-bottom: 15px;
  }

  .chat-row.admin {
    max-width: 82%;
  }
  .chat-row.user {
    max-width: 100%;
    text-align: right;
  }

  .msg-head-right {
    padding: 20px 0 0 8%;
  }

  .msg-left-main .el-pagination {
    white-space: normal;
  }
  .msg-left-main .el-pager li {
    margin-bottom: 15px !important;
  }
  .msg-left-main .btn-prev,
.msg-left-main .btn-next {
    float: left;
    margin-bottom: 15px !important;
  }

  .msg-right-side {
    margin-bottom: 15px;
  }

  .msg-textarea {
    padding: 10px;
  }
  .msg-textarea textarea {
    padding: 5px !important;
    height: 70px !important;
  }

  .message-main .msg-send-btn {
    margin: 0;
  }
}
.msg-textarea textarea {
  border: 0 !important;
}

.msg-filter .el-date-editor .el-range-separator {
  width: 10%;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .msg-right-main.lap-screen,
.msg-left-main.lap-screen,
.msg-right-side.lap-screen {
    width: 100%;
  }

  .msg-right-side.lap-screen {
    margin: 20px 0;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .msg-head-content {
    padding-left: 10px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .msg-right-scroll.middle {
    height: 490px;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .msg-right-scroll.middle {
    height: 458px;
  }
}
@media (max-width: 767px) {
  .msg-right-scroll.middle {
    padding: 0 15px;
  }
}
/* width */
::-webkit-scrollbar {
  width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #ddd;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ddd;
}

@media (max-width: 767px) {
  .documents-main .common-search {
    width: 100%;
    margin-top: 15px;
  }
}
.view-doc .download-doc-link {
  color: #ed273f;
}
.view-doc .img-doc {
  min-height: 80px;
  width: 100%;
}
.view-doc object, .view-doc .img-doc-img {
  object-fit: fill;
  height: 370px;
  width: 100%;
}
.view-doc object img, .view-doc .img-doc-img img {
  width: 100%;
  height: 100%;
}

@media (min-width: 767px) {
  .product-cat-drawer {
    width: 400px;
  }
}
@media (max-width: 767px) {
  .master-campaign.main,
.master-xs-mt-none.main {
    padding-top: 0;
    margin-top: 0 !important;
  }
}
.additional-activity-main .search-keyword {
  margin-right: 4px;
}

.daily-gram-rate-main .daily-gram-rate {
  font-size: 14px;
  color: #7b7b7b;
  border-top: 1px solid #ececf1;
  padding-top: 20px;
}
.daily-gram-rate-main .daily-gram-rate h4 {
  margin: -2px 0 0 8px;
}
.daily-gram-rate-main .daily-gram-rate .inner {
  padding: 0 15px;
}
.daily-gram-rate-main .daily-gram-rate .inner.first h4 {
  color: #1565c0;
}
.daily-gram-rate-main .daily-gram-rate .inner.second h4 {
  color: #ff6f00;
}
.daily-gram-rate-main .daily-gram-rate .inner .third h4 {
  color: #00c6f3;
}
.daily-gram-rate-main .daily-gram-rate.daily-gram-rate .inner, .daily-gram-rate-main .daily-gram-rate.daily-gram-rate .inner.second, .daily-gram-rate-main .daily-gram-rate.daily-gram-rate .inner.third {
  margin-top: 8px;
}
.daily-gram-rate-main .deactive {
  color: #ccc;
}
.daily-gram-rate-main .user-overview .inner {
  background: #fff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.daily-gram-rate-main .top-info-col.total span {
  color: #1565c0;
}
.daily-gram-rate-main .top-info-col.bde span {
  color: #ff6f00;
}
.daily-gram-rate-main .top-info-col.asm span {
  color: #651fff;
}
.daily-gram-rate-main .top-info-col.rsm span {
  color: #00c6f3;
}
.daily-gram-rate-main .top-info-col.online span {
  color: green;
}
.daily-gram-rate-main .top-info-col.online .top-info-col.offline span {
  color: #ed4c4c;
}

@media (min-width: 600px) {
  .daily-gram-rate-main .user-overview {
    display: flex;
  }
  .daily-gram-rate-main .user-overview > div {
    flex: 1;
    padding: 0 15px;
  }

  .product-subcate-drawer {
    width: 380px;
  }
}
@media (max-width: 599px) {
  .daily-gram-rate-main .user-overview > div {
    width: 50%;
    float: left;
    padding: 0 15px;
  }

  .daily-gram-rate .inner {
    padding-bottom: 15px;
  }

  .product-subcate-drawer {
    width: 100%;
  }
}
.master-vdo-view .vjs_video_3-dimensions {
  width: 100% !important;
}
.master-vdo-view .video-js {
  width: 100% !important;
}

.master-lead-source .enable-textbox {
  padding-left: 60px !important;
}

.product-subcate-drawer {
  padding: 0 15px 0 15px;
}

.lead-report-main .input-item > div {
  margin: 0;
}
.lead-report-main .lead-report-top {
  background: #fff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.lead-report-main .lead-report-top .status-col {
  font-size: 15px;
  margin-top: 25px;
}
.lead-report-main .lead-report-top .status-col h4 {
  color: #061838;
}
.lead-report-main .lead-report-top .status-col .progress {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  height: 10px;
  -webkit-box-shadow: 0 0 0 0px #f1f1f1;
  -moz-box-shadow: 0 0 0 0px #f1f1f1;
  box-shadow: 0 0 0 0px #f1f1f1;
  width: 100%;
  margin: 5px 0 0;
}
.lead-report-main .lead-report-top .status-col.hot {
  color: #eb2f3f;
}
.lead-report-main .lead-report-top .status-col.hot .progress-bar {
  background-color: #f44e4e;
}
.lead-report-main .lead-report-top .status-col.warm {
  color: #ffb20d;
}
.lead-report-main .lead-report-top .status-col.warm .progress-bar {
  background-color: #ffe09e;
}
.lead-report-main .lead-report-top .status-col.cold {
  color: #0ad4f9;
}
.lead-report-main .lead-report-top .status-col.cold .progress-bar {
  background-color: #9deefd;
}
.lead-report-main .lead-report-top span {
  display: inline-block;
  margin-top: 2px;
}
.lead-report-main .lead-report-top .total {
  color: #7b7b7b;
}
.lead-report-main .lead-report-top h2 {
  margin-bottom: 0;
}
.lead-report-main .lead-report-top .status-col.hot .progress-striped .progress-bar,
.lead-report-main .lead-report-top .status-col.hot .progress-bar-striped {
  background-image: -webkit- linear-gradient(45deg, rgba(251, 184, 184, 0.15) 25%, transparent 25%, transparent 50%, #fbb8b8 50%, #fbb8b8 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, #fbb8b8 25%, transparent 25%, transparent 50%, #fbb8b8 50%, #fbb8b8 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, #fbb8b8 25%, transparent 25%, transparent 50%, #fbb8b8 50%, #fbb8b8 75%, transparent 75%, transparent);
}
.lead-report-main .lead-report-top .status-col.warm .progress-striped .progress-bar,
.lead-report-main .lead-report-top .status-col.warm .progress-bar-striped {
  background-image: -webkit- linear-gradient(45deg, rgba(255, 178, 42, 0.15) 25%, transparent 25%, transparent 50%, #ffb22a 50%, #fbb22a 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, #ffb22a 25%, transparent 25%, transparent 50%, #ffb22a 50%, #fbb22a 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, #ffb22a 25%, transparent 25%, transparent 50%, #ffb22a 50%, #fbb22a 75%, transparent 75%, transparent);
}
.lead-report-main .lead-report-top .status-col.cold .progress-striped .progress-bar,
.lead-report-main .lead-report-top .status-col.cold .progress-bar-striped {
  background-image: -webkit- linear-gradient(45deg, rgba(59, 221, 250, 0.15) 25%, transparent 25%, transparent 50%, #3bddfa 50%, #3bddfa 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, #3bddfa 25%, transparent 25%, transparent 50%, #3bddfa 50%, #fbddfa 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, #3bddfa 25%, transparent 25%, transparent 50%, #3bddfa 50%, #3bddfa 75%, transparent 75%, transparent);
}
.lead-report-main .lead-status-bottom {
  background: #576bd4;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  -ms-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  padding: 15px;
  margin-top: 24px;
}
.lead-report-main .lead-status-bottom .colum {
  font-size: 13px;
  margin: 10px 0;
  padding: 0 15px;
  color: #fff;
}
.lead-report-main .lead-status-bottom .colum h3 {
  margin: 0;
  color: #a5b3ff;
}

.forcast-lead-report .sales-forcast-row {
  display: flex;
}
.forcast-lead-report .sales-forcast-row .col {
  padding: 0 15px;
}
.forcast-lead-report .sales-forcast-row .col h5 {
  margin: 0;
  font-size: 13px;
}
.forcast-lead-report .sales-forcast-row .col span {
  font-weight: 800;
  font-size: 16px;
  margin: 5px 0 2px;
  display: inline-block;
}
.forcast-lead-report .sales-forcast-row .col.hot span {
  color: #e50817;
}
.forcast-lead-report .sales-forcast-row .col.warm span {
  color: #fca31d;
}
.forcast-lead-report .sales-forcast-row p {
  color: #7b7b7b;
  word-break: break-word;
  font-size: 12px;
}

@media (min-width: 1024px) {
  .lead-report-top .status-col {
    position: relative;
    top: 6px;
  }
}
@media (max-width: 991px) {
  .lead-status-bottom .colum {
    font-size: 13px;
  }
  .lead-status-bottom .colum h3 {
    margin-bottom: 4px;
    font-size: 18px;
  }
}
@media (min-width: 600px) {
  .lead-status-bottom {
    display: flex;
  }
  .lead-status-bottom .colum {
    flex: 1;
  }
}
@media (max-width: 599px) {
  .lead-status-bottom .colum {
    float: left;
    width: 50%;
  }
}
.converted-lead-report .search-keyword.width {
  width: 265px !important;
}

.activity-report .activity-icon {
  float: left;
  margin-right: 8px;
}
.activity-report .activity-icon.icon-visit {
  font-size: 14px;
}
.activity-report .activity-icon.icon-followup {
  margin-top: 2px;
  font-size: 12px;
}
.activity-report .icon-visit.activity-icon {
  margin-top: 2px;
}
.activity-report .activity-icon.el-icon-phone-outline,
.activity-report .el-icon-message.activity-icon {
  margin-top: 4px;
}
.activity-report .el-icon-chat-square.activity-icon {
  margin-top: 5px;
  font-size: 14px;
}
.activity-report .filter-div .input-item {
  margin-bottom: 20px;
}
.activity-report .el-radio.activity-filter {
  margin: 15px 0 5px;
}
.activity-report .activity-filter-bottom {
  border-top: 1px solid #112954;
  padding-top: 5px;
}

.targer-report .custom-top-filter-date.month {
  width: 160px;
}
@media (min-width: 768px) and (max-width: 991px) {
  .targer-report .search-keyword {
    width: auto;
  }
  .targer-report .head-icons {
    text-align: left;
  }
}
@media (max-width: 767px) {
  .targer-report .search-keyword,
.targer-report .custom-top-filter-date.month {
    width: 100%;
  }
  .targer-report .custom-top-filter-date {
    margin-right: 0;
  }
  .targer-report .custom-top-filter-date.year {
    width: 100%;
    margin: 15px 0;
  }
}

.expense-report .expense-list .el-table__footer .cell {
  font-weight: bold;
}

.user-report .filter-div {
  width: 340px;
  right: -340px;
}
.user-report .filter-div .el-radio {
  font-weight: 400;
  font-size: 13px;
}
.user-report .filter-div .lbl {
  margin: 18px 0;
  color: #4d87ed;
  font-weight: 500;
  display: block;
  font-size: 15px;
}
.user-report .filter-div.width {
  right: 0;
}

.user-daily-report .followup-leades .cell,
.user-daily-report .employee-leades .cell {
  color: #000;
}

.dailry-report-left .inner {
  background: #f5f5f5;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  padding: 0 20px;
}
.dailry-report-left span {
  font-size: 12px;
  color: #7b7b7b;
}
.dailry-report-left h5 {
  color: #061838;
  margin: 5px 0 20px;
  font-weight: 600;
}

.dailry-report-right ul li {
  padding: 0 30px 0 0;
}
.dailry-report-right ul li h3 {
  font-size: 20px;
}
.dailry-report-right ul li:first-child h3 {
  color: #7121eb;
}
.dailry-report-right ul li:nth-child(2) h3 {
  color: #21dcdc;
}
.dailry-report-right ul li:nth-child(3) h3 {
  color: #e5c808;
}
.dailry-report-right ul li:nth-child(4) h3 {
  color: #4cda64;
}
.dailry-report-right ul li:nth-child(5) h3 {
  color: #0680e0;
}
.dailry-report-right ul li:nth-child(6) {
  padding-right: 0;
}
.dailry-report-right ul li:nth-child(6) h3 {
  color: #eb2179;
}
.dailry-report-right p {
  color: #7b7b7b;
}

@media (min-width: 1024px) {
  .dailyReportWrapper {
    display: flex;
    align-items: center;
  }
}
@media (min-width: 768px) and (max-width: 1365px) {
  .daily-report .head-icons {
    margin-bottom: 15px;
  }

  .dailry-report-left {
    margin-bottom: 30px;
  }
  .dailry-report-left .block {
    padding-right: 30px;
  }

  .dailry-report-right ul {
    flex-wrap: wrap;
  }
  .dailry-report-right ul li {
    flex: 0 0 33.333%;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .block-cover {
    display: flex;
  }

  .block {
    padding-right: 30px;
  }
}
@media (min-width: 768px) {
  .dailry-report-left {
    margin-top: 20px;
  }

  .dailry-report-right ul {
    display: flex;
  }
}
@media (max-width: 767px) {
  .daily-report .head-icons {
    padding: 0 15px 10px;
  }
  .daily-report .head-icons .row {
    margin: 0;
  }
  .daily-report .head-icons .el-select {
    margin: 6px 0 10px;
    width: 100%;
  }
}
.custom-btn {
  color: #061838;
  height: 38px !important;
  width: 38px;
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  -ms-border-radius: 50px !important;
  border-radius: 50px !important;
  vertical-align: middle;
  padding: 0 !important;
  border-color: #ececec !important;
  background-color: #f5f5f5 !important;
  cursor: pointer;
}
.custom-btn.add-btn {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background: #f36e7e !important;
  color: #fff !important;
  width: 38px;
  text-align: center;
  padding: 0 !important;
  border: 1px solid rgba(237, 39, 63, 0.25) !important;
}
.custom-btn.add-btn:hover {
  background: #ed273f;
}
.custom-btn.add-btn.activity {
  width: auto;
  padding: 0 15px !important;
  margin-right: 15px;
}
.custom-btn.text-btn {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background: #f36e7e !important;
  color: #fff !important;
  width: auto;
  text-align: center;
  padding: 0 15px !important;
  border: 1px solid rgba(237, 39, 63, 0.25) !important;
}
.custom-btn.btn-assign {
  font-size: 14px !important;
}
.custom-btn.delete-btn,
.custom-btn .el-icon-download {
  font-size: 15px !important;
}
.custom-btn.is-disabled {
  opacity: 0.7;
}
.custom-btn.delete-btn, .custom-btn.btn-assign, .custom-btn.btn-doc-download {
  padding: 0 !important;
  width: 38px;
}
.custom-btn.btn-doc-download {
  font-size: 16px !important;
}
.custom-btn.green {
  color: #ff0000 !important;
  background: #ffcdcd;
}
.custom-btn.location {
  font-size: 16px;
}
.custom-btn.image {
  font-size: 17px;
  color: #4a9e4f !important;
  background: #d1f1d2;
}
.custom-btn.import-xl {
  line-height: 2.5;
}
.custom-btn.import-xl .icon-xls {
  font-size: 16.2px;
}
.custom-btn .el-icon-refresh-right {
  font-size: 16px;
}

.el-button.el-button--primary {
  background: #ed273f;
  border-color: #ed273f;
  color: #fff;
}
.el-button.el-button--primary:hover, .el-button.el-button--primary:focus {
  background: #ed273f;
  border-color: #ed273f;
  color: #fff;
}
.el-button.filter-btn {
  padding: 0 12px 0 30px !important;
  width: auto;
  position: relative;
}
.el-button .custom-icon {
  cursor: pointer;
}
.el-button.details-icon {
  padding: 0 !important;
  border: 0;
}
.el-button.details-icon:hover {
  background: #efd9f3;
}
.el-button.add-second-btn {
  background: #061838;
  color: #fff;
  -webkit-border-radius: 6px !important;
  -moz-border-radius: 6px !important;
  -ms-border-radius: 6px !important;
  border-radius: 6px !important;
  height: 34px;
  padding: 0 12px !important;
  border-color: #3a62a9;
}
.el-button.add-second-btn .el-icon-plus {
  font-size: 12px;
}
.el-button.clear-second-btn {
  -webkit-border-radius: 6px !important;
  -moz-border-radius: 6px !important;
  -ms-border-radius: 6px !important;
  border-radius: 6px !important;
  height: 34px;
  padding: 0 12px !important;
}
.el-button.el-icon-plus {
  font-weight: 600;
}
.el-button .add-btn-icon {
  background: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  border: 0;
  font-size: 22px;
  padding: 0 !important;
  color: #ed273f;
}

.filter-btn .icon-filter {
  font-size: 12px;
  top: 13px;
}

.btn-primary {
  color: #fff;
  background-color: #ed273f;
  border-color: #ed273f;
}
.btn-primary.text-btn {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  background: #f36e7e !important;
  color: #fff !important;
  width: 38px;
  text-align: center;
  padding: 0 !important;
  border: 1px solid rgba(237, 39, 63, 0.25) !important;
  width: auto;
  height: 38px;
  line-height: 36px;
  padding: 0 15px !important;
  font-size: 14px;
}
.btn-primary.text-btn.activity {
  width: auto;
  padding: 0 15px !important;
  margin-right: 15px;
}

.add-btn.btn {
  padding: 8px 12px;
}

.btn-icon {
  position: absolute;
  left: 10px;
}

a.el-icon-edit, a.el-icon-edit-outline, a.el-icon-delete, a.el-icon-close, a.el-icon-view, a.el-icon-time, a.el-icon-download {
  color: #000;
  font-size: 14px;
}
a i.el-icon-edit, a i.el-icon-delete {
  color: #000;
  font-size: 14px;
}
a.el-icon-refresh {
  font-size: 15.4px;
}
a.icon1-ip {
  font-size: 15px;
}

.add-btn-small .el-button {
  padding: 0 !important;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  font-size: 18px !important;
  color: #36b206;
  float: right;
}
.add-btn-small .btn-close {
  color: #ed273f;
  margin-left: 2px;
}

.download-text-btn {
  border: 1px solid #061838;
  color: #061838;
  padding: 6px;
  border-radius: 4px;
  font-size: 13px;
}

.btn-assign .el-icon-sort {
  font-size: 14px;
  top: 12px;
  transform: rotate(40deg);
}

.back-text-btn {
  color: #ed273f;
  font-weight: 600;
}
.back-text-btn i {
  font-weight: 800;
  font-size: 16px;
  position: relative;
  top: 2px;
}

.drawer-bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11;
}

.drawer-div {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  height: 100%;
  z-index: 12;
}
.drawer-div .el-input__inner {
  background-color: inherit !important;
}
.drawer-div .el-date-editor--time .el-icon-time {
  display: none;
}

.drawer-footer {
  height: 50px;
}
.drawer-footer .el-button {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
}

.drawer-head {
  border-bottom: 1px solid #ddd;
  margin: 0 -15px 30px;
  height: 70px;
  padding: 20px 30px;
}
.drawer-head h4 {
  font-size: 20px;
  margin: 0;
  color: #061838;
}

.drawer-close-btn {
  cursor: pointer;
  font-size: 15px;
  background-color: transparent;
  width: 26px;
  height: 26px;
  float: right;
  border: 2px solid #ed273f;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  text-align: center;
  color: #ed273f;
  line-height: 22px;
  font-weight: 600;
}

.icon-input .input-icon {
  background: #e6697e;
  width: 28px;
  height: 28px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  text-align: center;
  color: #fff;
  line-height: 28px !important;
  float: left;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-input .input-icon.icon-tax-1 {
  font-size: 9px;
  line-height: 30px !important;
}
.icon-input .input-icon.icon-lead {
  font-size: 16px;
  line-height: 32px !important;
}
.icon-input .input-icon.icon-visit {
  font-size: 15px;
  padding-top: 3px;
}
.icon-input .input-icon.icon-calendar-1, .icon-input .input-icon.icon-product, .icon-input .input-icon.icon-campian {
  font-size: 13px;
  padding-top: 1px;
}
.icon-input .input-icon.icon-pincode {
  font-size: 15px;
  padding-top: 2px;
}
.icon-input .input-icon.icon-rupee {
  font-size: 11px;
  padding-top: 2px;
}
.icon-input .input-icon.icon-module {
  font-size: 11px;
  padding-top: 1px;
}
.icon-input .input-icon.icon-reason {
  font-size: 10px;
  padding-top: 2px;
}
.icon-input .input-icon.icon-gold {
  font-size: 16px;
  padding-top: 1px;
}
.icon-input .input-icon.icon-title {
  font-size: 15px;
  padding-top: 3px;
}
.icon-input .input-icon.el-icon-document {
  font-size: 15px;
}
.icon-input .input-icon.icon-gender {
  font-size: 17px;
}
.icon-input .input-icon.icon-reference {
  font-size: 13px;
}
.icon-input .input-icon.icon-birthday {
  font-size: 18px;
}
.icon-input.add .el-input {
  width: calc(100% - 95px) !important;
  float: left;
  margin-left: 45px;
}
.icon-input.add .add-btn-small {
  position: absolute;
  top: 30px;
  right: 0;
}
.icon-input .help-block,
.icon-input .error {
  float: left;
  width: 100%;
  padding-left: 45px;
}
.icon-input .el-input,
.icon-input .el-textarea,
.icon-input .el-date-editor {
  width: calc(100% - 45px) !important;
  float: right;
}
.icon-input .el-input__icon {
  display: none;
}
.icon-input label {
  font-size: 12px !important;
  color: #7b7b7b;
  padding-left: 45px;
}
.icon-input .el-textarea {
  margin-top: 5px;
}
.icon-input .el-date-editor .el-range-input,
.icon-input .el-date-editor .el-range-separator {
  text-align: left !important;
}
.icon-input.multi-select .el-input__inner {
  height: auto !important;
  line-height: 30px !important;
  border-radius: 0px !important;
}
.icon-input .el-select__tags {
  padding-left: 38px;
}

.drawer-transition-enter-active {
  transition: all 0.4s ease;
}

.drawer-transition-leave-active {
  transition: all 0.4s ease;
}

.drawer-transition-enter,
.drawer-transition-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

.drawer-top-info .colum-cover {
  background: #ebf2ff;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  flex-wrap: wrap;
  display: flex;
  padding: 18px 0 3px;
  width: calc(100% - 50px);
  margin: 0 0 30px 50px;
}
.drawer-top-info .colum-cover .colum-style {
  padding: 0 15px 0;
  font-size: 12px;
}
.drawer-top-info .colum-cover .colum-style h5 {
  color: #061838;
  margin-top: 6px;
  font-weight: 600;
}

.three-colum-drawer .colum-cover {
  display: flex;
  flex-wrap: wrap;
}
.three-colum-drawer .colum-cover .colum {
  padding: 0 15px;
  margin-bottom: 25px;
}
.three-colum-drawer .colum-cover .colum.comment {
  flex: 1;
}

@media (min-width: 768px) {
  .three-colum-drawer .colum {
    flex: 0 0 33.333%;
  }
}
@media (max-width: 767px) {
  .three-colum-drawer .colum {
    flex: 0 0 100%;
  }

  .drawer-top-info .colum-style {
    flex: 0 0 100%;
  }
}
#right-pane {
  background: #fff;
  padding: 0;
  position: fixed;
  right: 0;
  top: 0;
  padding-top: 55px;
  z-index: 5;
  height: 100%;
  -webkit-transition: width 0.3s;
  transition: width 0.3s;
}

.side-minimize {
  background: #061838;
  position: fixed;
  right: 0;
  text-align: center;
  bottom: 30px;
  margin: auto;
  font-size: 14px;
  width: 30px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  -webkit-border-radius: 40px 0 0 40px;
  -moz-border-radius: 40px 0 0 40px;
  -ms-border-radius: 40px 0 0 40px;
  border-radius: 40px 0 0 40px;
  -webkit-transition: width 0.3s ease 0s;
  transition: width 0.3s ease 0s;
  z-index: 3;
}
.side-minimize:hover {
  width: 40px;
}
.side-minimize .el-icon-caret-left {
  margin-left: 5px;
}

.right-pane-titile {
  background: #1f3866;
  color: #fff;
  font-size: 14px;
  position: relative;
  letter-spacing: 0.7px;
  padding: 22px 15px 18px;
  cursor: pointer;
}

.side-toggle-ico {
  font-size: 9px;
  margin-left: 5px;
}

.recent-activity-sidebar-li {
  padding: 8px 10px 2px;
  border-bottom: 1px solid #f2f4f8;
  margin: 0;
}
.recent-activity-sidebar-li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.recent-activity-sidebar-li .media-left img {
  width: 36px;
}

.user-not-active {
  color: #ed273f;
}

.users-status-col {
  padding: 15px 5px;
  background: #f4f6f9;
  font-size: 11px;
}

.sidebar-users-status .media-body {
  padding-top: 3px;
}
.sidebar-users-status a {
  position: relative;
}

.users-statistics h3 {
  font-size: 20px;
  font-weight: 800;
}

#right-pane li.sidebar-users-status {
  padding: 8px 10px;
  border-bottom: 1px solid #f2f4f8;
}

#right-pane li.sidebar-users-status:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.sidebar-users-status a .user-status {
  width: 12px;
  height: 12px;
  bottom: -13px;
  right: -1px;
  border: 2px solid #fff;
  top: auto;
}

.users-status-col.online h3 {
  color: #60c04c;
}

.users-status-col.offline h3 {
  color: #ed2940;
}

.users-status-col.leave h3 {
  color: #17b5ff;
}

.users-status-col.deactive h3,
.users-status-col.deactive span {
  opacity: 0.3;
}

.side-bar .ps {
  height: 100%;
}
.side-bar .animated {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
  0% {
    right: -265px;
  }
  to {
    right: 0;
  }
}
@keyframes fadeIn {
  0% {
    right: -265px;
  }
  to {
    right: 0;
  }
}
.side-bar .fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeOut {
  0% {
    right: 0;
  }
  to {
    right: -265px;
  }
}
@keyframes fadeOut {
  0% {
    right: 0;
  }
  to {
    right: -265px;
  }
}
.side-bar .fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

.recent-activity {
  /* always present */
  /* .expand-enter defines the starting state for entering */
  /* .expand-leave defines the ending state for leaving */
}
.recent-activity .no-data-available {
  margin: 30px 0;
  position: static;
  height: auto;
  width: auto;
}
.recent-activity .expand-transition {
  transition: all 0.3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}
.recent-activity .expand-enter,
.recent-activity .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

.users-online-refresh span {
  color: #fff;
  font-size: 11px;
  position: relative;
  top: -2px;
  margin-right: 5px;
}

.online-last-time {
  font-size: 11px;
}

.sidebar-users-status p {
  margin-bottom: 0;
}

.recent-sec {
  padding-top: 3px;
}
.recent-sec .added {
  font-size: 11px;
}

.login-html {
  overflow: hidden;
}

.login-container {
  padding: 50px 70px 50px 100px;
  height: 100vh;
}
.login-container .web-url {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
}
.login-container .web-url a {
  color: #ed273f;
  font-size: 12px;
  letter-spacing: 0.8px;
}

.login-field {
  position: relative;
  z-index: 1;
}

.login-html,
.login-body,
.login-left,
.login-right {
  height: 100%;
}

.login-left {
  background: #fff;
  padding: 0 70px;
  height: 100%;
  position: relative;
  -webkit-border-radius: 50px 0 0 50px;
  -moz-border-radius: 50px 0 0 50px;
  -ms-border-radius: 50px 0 0 50px;
  border-radius: 50px 0 0 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-left:after {
  content: "";
  background: url(../images/dot-bg.svg);
  position: absolute;
  right: 50px;
  top: 24px;
  height: 140px;
  width: 135px;
}
.login-left:before {
  content: "";
  background: url(../images/dot-bg.svg);
  position: absolute;
  left: 24px;
  bottom: 30px;
  height: 160px;
  width: 145px;
}
.login-left .login-img {
  margin-top: 30px;
}
.login-left h1 {
  font-size: 30px;
  position: relative;
  margin: 30px 0 5px;
}
.login-left h5 {
  margin-top: 14px;
  line-height: 22px;
  word-break: break-word;
  text-align: justify;
  font-weight: 400;
  font-size: 14px;
}

.login-right {
  background: #061838;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  -webkit-border-radius: 50px 0 50px 0;
  -moz-border-radius: 50px 0 50px 0;
  -ms-border-radius: 50px 0 50px 0;
  border-radius: 50px 0 50px 0;
  padding: 0;
  position: relative;
  right: 34px;
}
.login-right:after {
  content: "";
  background: url(../images/login-bg-1.svg);
  position: absolute;
  right: 0;
  top: 0;
  height: 530px;
  width: 800px;
}
.login-right:before {
  content: "";
  background: url(../images/login-bg-2.svg);
  position: absolute;
  left: 0;
  bottom: 0;
  height: 288px;
  width: 504px;
}
.login-right h3 {
  color: #6c9bef;
  font-size: 34px;
  text-transform: uppercase;
  font-size: 26px;
  margin: 130px 0 26px;
}

.login-field-inner, .signup-field-inner {
  width: 330px;
}
.login-field-inner input, .signup-field-inner input {
  height: 42px;
  border-color: #6c9bef;
  border-width: 0 0 1px;
  background: transparent !important;
  width: 100%;
  color: #6c9bef !important;
}
.login-field-inner input::placeholder, .signup-field-inner input::placeholder {
  color: #6c9bef;
}
.login-field-inner input:-webkit-autofill, .signup-field-inner input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #061838 inset !important;
  -webkit-text-fill-color: #6c9bef !important;
}
.login-field-inner input:hover:-webkit-autofill, .signup-field-inner input:hover:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #061838 inset !important;
  -webkit-text-fill-color: #6c9bef !important;
}
.login-field-inner .el-form-item, .signup-field-inner .el-form-item {
  margin-bottom: 26px !important;
}

.login-btn {
  background: #ed273f;
  border: 0;
  width: 46%;
  height: 40px;
  color: #fff;
  font-size: 14px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  display: block;
  margin: 36px auto 0;
  text-transform: uppercase;
}
.login-btn.reset-pass {
  width: 52%;
}

.forgot-password {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #6c9bef;
  display: inline-block;
}
.forgot-password.active {
  background: none !important;
}

.login-social-media {
  margin-top: 30px;
  -webkit-border-radius: 50px 0 50px 0;
  -moz-border-radius: 50px 0 50px 0;
  -ms-border-radius: 50px 0 50px 0;
  border-radius: 50px 0 50px 0;
  background: #001E54;
  width: 200px;
  height: 50px;
  display: flex;
  align-items: center;
  align-self: flex-end;
  position: relative;
  z-index: 1;
}
.login-social-media a {
  color: #6c9bef;
  font-size: 15px;
  display: inline-block;
  margin-left: 15px;
}
.login-social-media a:hover {
  color: #ed273f;
  border-color: rgba(237, 39, 63, 0.6);
}

@media (max-width: 1279px) {
  .login-left h5 br {
    display: none;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .login-container {
    padding: 50px 20px 50px 30px;
  }
}
@media (max-width: 991px) {
  .login-container {
    padding: 0;
  }

  .login-field-inner {
    width: 100%;
    position: static;
  }

  .login-right {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    border-radius: 20px;
    overflow: hidden;
    right: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
  }

  .login-social-media {
    right: -20px;
  }

  .login-social-media {
    -webkit-border-radius: 50px 0 0 0;
    -moz-border-radius: 50px 0 0 0;
    -ms-border-radius: 50px 0 0 0;
    border-radius: 50px 0 0 0;
  }
}
.reset-password-right input[type=submit].login-btn {
  background: #ed273f !important;
  border: 0;
  width: 46%;
  height: 42px;
  color: #fff !important;
  font-size: 15px !important;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  margin: 0 auto;
  display: block;
  font-weight: 400;
  margin-top: 40px;
}
.reset-password-right .sign-in {
  font-weight: 600;
  text-decoration: underline;
  color: #6c9bef;
}

/*** Sign up****/
.signup-field-inner .form-control {
  height: 42px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  border-color: rgba(6, 24, 56, 0.1);
  padding: 3px 15px;
  -webkit-box-shadow: 0 0 0 0 #f1f1f1;
  -moz-box-shadow: 0 0 0 0 #f1f1f1;
  box-shadow: 0 0 0 0 #f1f1f1;
}
.signup-field-inner .form-control:hover, .signup-field-inner .form-control:focus {
  border-color: rgba(6, 24, 56, 0.5);
  font-weight: 600;
}
.signup-field-inner .el-button.login-btn {
  background: #ed273f;
  border: 0;
  width: 46%;
  height: 42px;
  color: #fff;
  font-size: 15px !important;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  margin: 30px auto 0;
  display: block;
  font-weight: 400;
}

.signup-btn,
.signin-brn {
  text-decoration: underline;
  font-weight: 700;
  color: #6c9bef;
}

.signup-bottom span.or {
  font-size: 15px;
  margin: 20px 0 15px;
  color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 991px) {
  .login-container .web-url a {
    color: #6c9bef;
  }
}
@media (min-width: 768px) {
  .update-leave-info .update-leave-col:nth-child(3n+1) {
    clear: left;
  }
}
@media (max-width: 767px) {
  .update-leave-info .update-leave-col:nth-child(2n+1) {
    clear: left;
  }
}
.leave-main .user-name {
  color: #000;
  margin-right: 10px;
}
.leave-main .user-id {
  color: #7b7b7b;
  font-size: 12px;
}

.leave-details-popup .img-doc {
  border: 0;
  padding: 0;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.leave-details-popup .img-doc img {
  padding: 5px;
  border: 1px solid rgba(6, 24, 56, 0.15);
}
.leave-details-popup .el-icon-refresh,
.leave-details-popup .el-icon-download {
  font-size: 16px;
}

.settings-main {
  /*  --- New Styles - Dated May-07-2019 --- */
}
.settings-main .mrglft {
  margin-left: 10px;
  /* border:  */
}
.settings-main .el-row:last-child {
  margin-bottom: 0;
}
.settings-main .info-txt-blue {
  color: #00a1de;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.settings-main .text {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
}
.settings-main .item {
  padding: 18px 0;
}
.settings-main .box-card {
  width: 100%;
  min-height: 140px;
}
.settings-main .el-col {
  border-radius: 4px;
}
.settings-main .bg-purple-dark {
  background: #99a9bf;
}
.settings-main .bg-purple {
  background: #d3dce6;
}
.settings-main .bg-purple-light {
  background: #e5e9f2;
}
.settings-main .grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.settings-main .settingsPage .highlighted {
  padding: 20px 0;
  transition: all 0.2s ease-out;
  box-shadow: none;
  margin: 10px 0 15px 0;
}
.settings-main .settingsPage .highlighted:hover {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
  transform: scale(1.05);
}
.settings-main .settingsPage .highlighted figure {
  display: inline-block;
  width: 68px;
  height: 68px;
  margin-right: 10px;
  border-radius: 100%;
  background: #fff;
  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.08);
}
.settings-main .settingsPage .highlighted figcaption {
  width: calc(100% - 78px);
  float: right;
  display: inline-block;
}
.settings-main .form-sub-section-block {
  width: 100%;
  display: inline-block;
}
.settings-main .hd-row {
  width: 100%;
  margin: 15px 0;
}
.settings-main .title {
  display: inline-block;
  width: calc(100% - 85px);
}
.settings-main .hd-row::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #e6e3e3;
}
.settings-main .btnspace {
  display: inline-block;
  width: 85px;
  float: right;
  padding-bottom: 2px;
}
.settings-main .text-item {
  font-size: 16px;
  font-weight: bold;
  text-transform: none;
  text-align: right;
}
.settings-main .result-item {
  font-size: 28px;
  font-weight: bold;
  text-align: right;
  display: block;
  min-height: 30px;
}
.settings-main .f-size-24 {
  font-size: 22px !important;
}
.settings-main .bg1 {
  background: #f9e6e6;
  border: 1px solid #eea0ac;
}
.settings-main .color1 {
  color: #e62d4b;
}
.settings-main .bg2 {
  background: #f0f9e6;
  border: 1px solid #c6de90;
}
.settings-main .color2 {
  color: #589e0b;
}
.settings-main .bg3 {
  background: #e9fbfb;
  border: 1px solid #6ed7d7;
}
.settings-main .color3 {
  color: #0aa6a6;
}
.settings-main .bg4 {
  background: #eaeffb;
  border: 1px solid #8ba6e2;
}
.settings-main .color4 {
  color: #4b68d3;
}
.settings-main .no-padding-shadow {
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}
.settings-main .dataBody {
  padding-top: 0;
}

.settingsPage label {
  color: #7b7b7b;
  font-size: 12px;
  margin-bottom: 6px;
}
.settingsPage .image-preview .dragndrop {
  width: 100% !important;
}
.settingsPage .image-preview .dragndrop span {
  padding: 0;
}
.settingsPage .image-preview .alert-info {
  width: auto !important;
}

@media (min-width: 992px) {
  .settingsPage .colum-wrapper {
    flex-wrap: wrap;
  }
  .settingsPage .colum {
    flex: 0 0 25%;
  }
}
@media (max-width: 768px) {
  .settingsPage .dragndrop {
    padding: 15px;
  }
}
.update-sales-popup .el-textarea.is-disabled .el-textarea__inner {
  background-color: #fff;
}
.update-sales-popup .el-form-item__label {
  color: #7b7b7b !important;
  font-size: 12px;
}
.update-sales-popup .colum-style {
  margin-bottom: 5px;
  float: left;
  width: 100%;
}
.update-sales-popup .colum-style h5 {
  font-size: 13px;
}
.update-sales-popup .colum-style span {
  padding: 0;
}
.update-sales-popup .colum-style .approved-sales-img {
  width: 140px;
  display: table;
}
.update-sales-popup .colum-style .approved-sales-img > div {
  height: 140px;
  width: 100%;
  display: table-cell;
}
.update-sales-popup .approved-sales-main {
  background: #f5f5f5;
  padding: 15px;
  color: #000;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  margin-bottom: 15px;
}

@media (max-width: 599px) {
  .update-sales-popup .approved-sales-main .colum-style h5 {
    padding-left: 0;
    margin-bottom: 8px;
  }
}
.product-details .colum-cover {
  display: flex;
  flex-wrap: wrap;
}
.product-details .colum-style {
  padding: 0 15px;
}

@media (min-width: 768px) {
  .product-details .colum-style {
    flex: 0 0 33.333%;
  }
  .product-details .colum-style.comment {
    flex: 0 0 100%;
  }
}
@media (max-width: 767px) {
  .product-details .colum-style {
    flex: 0 0 100%;
  }
}
.edit-campaign-target .colum-cover {
  display: flex;
  flex-wrap: wrap;
}

.campaign-target-drawer .cart {
  display: flex;
  flex-wrap: wrap;
}
.campaign-target-drawer .cart .colum {
  padding: 0 15px;
  margin-top: 15px;
}
.campaign-target-drawer .cart .colum label {
  font-size: 12px;
}

.campaign-target-details .page-title .status-head {
  margin: 5px 0 0 5px;
}
.campaign-target-details .page-title p.total-count {
  margin-left: 0;
}

@media (min-width: 768px) {
  .edit-campaign-target .colum-style {
    padding: 0 35px 0 15px;
  }

  .campaign-target-drawer .colum {
    flex: 1;
  }
}
@media (max-width: 767px) {
  .campaign-target-details .total-count {
    margin: 8px 20px 0 0;
  }

  .edit-campaign-target .colum-style {
    padding: 0 15px;
    flex: 0 0 100%;
  }
}
.hollow-dots-spinner,
.hollow-dots-spinner * {
  box-sizing: border-box;
}

.hollow-dots-spinner {
  height: 15px;
  width: calc(30px * 3);
}

.hollow-dots-spinner .dot {
  width: 15px;
  height: 15px;
  margin: 0 calc(15px / 2);
  border: calc(15px / 5) solid #ff1d5e;
  border-radius: 50%;
  float: left;
  transform: scale(0);
  animation: hollow-dots-spinner-animation 1000ms ease infinite 0ms;
}

.hollow-dots-spinner .dot:nth-child(1) {
  animation-delay: calc(300ms * 1);
}

.hollow-dots-spinner .dot:nth-child(2) {
  animation-delay: calc(300ms * 2);
}

.hollow-dots-spinner .dot:nth-child(3) {
  animation-delay: calc(300ms * 3);
}

@keyframes hollow-dots-spinner-animation {
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.bottom-pagination .el-pagination {
  padding: 0;
  white-space: normal;
  font-weight: 100;
}
.bottom-pagination .el-pagination .btn-prev,
.bottom-pagination .el-pagination el-pager li {
  margin-right: 10px;
}
.bottom-pagination .el-pagination .el-select {
  float: right;
  width: 100%;
}
.bottom-pagination .el-pagination .el-input--suffix .el-input__inner {
  height: 30px;
}
.bottom-pagination .el-pagination .el-input__icon {
  line-height: 30px;
  text-align: center;
}

@media (min-width: 992px) {
  .pagination > li > span {
    padding: 2px 6px !important;
  }
}
@media (min-width: 600px) {
  .bottom-pagination .el-pagination .el-select .el-input {
    float: right;
  }
}
@media (max-width: 599px) {
  .bottom-pagination .el-pagination .el-select .el-input {
    width: 100% !important;
  }
  .bottom-pagination .el-pager li {
    margin-bottom: 10px !important;
  }
  .bottom-pagination .right {
    width: 100px !important;
    float: right;
  }
  .bottom-pagination .btn-prev,
.bottom-pagination .el-pager {
    float: left;
  }
}
.role-management-main .role-manage-col {
  margin-top: 20px;
}
.role-management-main .role-manage-col h5 {
  font-weight: 600;
  margin: 0;
  background: #f2f6fe;
  padding: 15px 12px;
  border-radius: 4px;
  color: #061838;
}
.role-management-main .role-manage-col h5 + div {
  background: #061838;
  padding: 10px 15px 0 15px;
  border-radius: 0 0 4px 4px;
  margin-top: -1px;
  display: none;
  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  -o-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
  color: #fff;
}
.role-management-main .role-manage-col .swich-col {
  margin: 0 15px 20px 0;
}
.role-management-main .displayAll {
  display: block !important;
}
@media (min-width: 768px) {
  .role-management-main .role-management-main .head-icons {
    display: flex;
  }
  .role-management-main .role-management-main .head-icons .el-select {
    width: 100%;
  }
}
@media (min-width: 1280px) {
  .role-management-main .role-manage-col:nth-child(4n+1) {
    clear: left;
  }
}
@media (min-width: 992px) and (max-width: 1279px) {
  .role-management-main .role-manage-col:nth-child(3n+1) {
    clear: left;
  }
}
@media (max-width: 991px) {
  .role-management-main .role-manage-col:nth-child(2n+1) {
    clear: left;
  }
}

.collection-details .icon-schedule-meeting {
  font-size: 16px;
  position: relative;
  top: 3px;
}
.collection-details .test-result-tab .icon {
  width: 32px;
}
.collection-details .test-result-tab .text {
  width: calc(100% - 32px);
  padding-left: 15px;
}
.collection-details .test-result-tab .text p {
  color: #7b7b7b;
  font-size: 12px;
}
.collection-details .test-result-tab .text h5 {
  font-weight: 500;
  margin: 6px 0 0 0;
}
.collection-details .test-result-tab .action a {
  width: 42px;
  height: 42px;
  font-size: 20px;
  color: #061838;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E7E6EF;
}
.collection-details .basic-info-tab .block .left {
  color: #7b7b7b;
  position: relative;
}
.collection-details .basic-info-tab .block .right {
  font-weight: 600;
}
.collection-details .basic-info-tab .content-box {
  margin-top: 30px;
}
.collection-details .basic-info-tab .attachment-section .inner {
  background: #F5F4FD;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  padding: 30px;
  min-height: 230px;
}
.collection-details .basic-info-tab .attachment-section .block {
  align-items: center;
  margin: 5px 0 0;
}
.collection-details .basic-info-tab .attachment-section i {
  width: 18px;
}
.collection-details .basic-info-tab .attachment-section span {
  width: calc(100% - 18px);
  padding-left: 5px;
}
.collection-details .basic-info-tab .attachment-section p {
  color: #7b7b7b;
}

.customer-details-info {
  background: #F5F4FD;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.16);
  -moz-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.16);
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.16);
  display: flex;
  padding: 32px 25px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  color: #7b7b7b;
}
.customer-details-info h5 {
  margin: 3px 0 0;
}
.customer-details-info p {
  font-size: 12px;
}
.customer-details-info p.age {
  color: #E04F66;
  margin: 3px 0;
}
.customer-details-info .col {
  flex-direction: row;
  align-items: center;
  display: flex;
}
.customer-details-info .icon {
  width: 42px;
  height: 42px;
}
.customer-details-info .text {
  width: calc(100% -42px);
  padding-left: 15px;
}

.customer-details-top {
  position: relative;
  align-items: baseline;
  color: #7b7b7b;
}
.customer-details-top span {
  font-weight: 600;
  padding-left: 6px;
}
.customer-details-top .id span {
  color: #5E5CB9;
}
.customer-details-top .created span {
  color: #061838;
}
.customer-details-top .last-date span {
  font-weight: 600;
}
.customer-details-top .colum {
  margin-bottom: 10px;
}
.customer-details-top .left {
  align-items: center;
}

.customer-details-tab-section {
  background: #fff;
  padding-bottom: 20px;
  float: left;
  width: 100%;
}
.customer-details-tab-section .el-tabs__content {
  padding: 0 15px;
}
.customer-details-tab-section .el-tabs__item {
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0 30px;
}
.customer-details-tab-section .el-tabs__item:hover, .customer-details-tab-section .el-tabs__item.is-active {
  color: #A4A2DE;
}
.customer-details-tab-section .el-tabs__nav-wrap::after {
  background: transparent;
}
.customer-details-tab-section .el-tabs__header {
  padding: 10px 0 12px 35px;
  background: #5E5CB9;
}
.customer-details-tab-section .el-tabs__active-bar {
  display: none;
}
.customer-details-tab-section .el-collapse-item__header {
  background: #E6E5EF;
  border: 0;
}
.customer-details-tab-section .el-collapse-item {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px;
  padding: 8px 20px;
  background: #E6E5EF;
  margin-top: 15px;
  -webkit-box-shadow: 0px 4px 4px 0 rgba(5, 24, 55, 0.2);
  -moz-box-shadow: 0px 4px 4px 0 rgba(5, 24, 55, 0.2);
  box-shadow: 0px 4px 4px 0 rgba(5, 24, 55, 0.2);
}
.customer-details-tab-section .el-collapse-item .top {
  color: #7b7b7b;
}
.customer-details-tab-section .el-collapse-item .top .attachment-icon {
  color: #000;
  margin-top: 8px;
}
.customer-details-tab-section .el-collapse-item.payment-details h5 {
  top: 0;
}
.customer-details-tab-section .el-collapse-item__wrap {
  padding: 20px;
  margin-bottom: 16px;
}
.customer-details-tab-section .el-collapse-item__content {
  padding-bottom: 0;
}
.customer-details-tab-section .el-collapse-item__content .head h5 {
  font-weight: 600;
}
.customer-details-tab-section .el-collapse-item__content .head span {
  color: #00A9C3;
  margin: -5px 0 0 20px;
}
.customer-details-tab-section .el-collapse-item__content .right {
  color: #7b7b7b;
  font-size: 10.5px;
  justify-content: flex-end;
  text-align: right;
}
.customer-details-tab-section .el-collapse-item__content .right .colum {
  padding-left: 40px;
}
.customer-details-tab-section .el-collapse-item__content .right h5 {
  margin: 0;
}
.customer-details-tab-section .el-collapse-item__content .block {
  margin-bottom: 10px;
  padding-right: 15px;
}
.customer-details-tab-section .el-collapse-item__content .block h5 {
  word-break: break-word;
}
.customer-details-tab-section .el-collapse-item__content .block .inner {
  align-items: center;
  background: #F5F4FD;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  margin-left: 0px;
  padding: 12px;
  margin-bottom: 1px;
  flex-wrap: wrap;
}
.customer-details-tab-section .el-collapse-item__content .top .box {
  padding-right: 80px;
  color: #000;
}
.customer-details-tab-section .el-collapse-item__content .top .box h5 {
  position: relative;
  top: 3px;
}
.customer-details-tab-section .el-collapse-item__content .top .box:last-child {
  padding-right: 0;
}
.customer-details-tab-section .el-collapse-item__content .top .box:last-child span {
  font-weight: 600;
}
.customer-details-tab-section .el-collapse-item__content .top .box.id {
  color: #7b7b7b;
}
.customer-details-tab-section .el-collapse-item__content .top .box.amount {
  color: #000;
}
.customer-details-tab-section .el-collapse-item__content .top .box.amount h5 {
  color: #EB2179;
  font-size: 16px;
}
.customer-details-tab-section .el-collapse-item__content .top .box .icon-success {
  float: left;
  font-size: 18px;
  margin-right: 5px;
  color: #00C892;
  margin-top: -2px;
}
.customer-details-tab-section .el-collapse-item__content .top .status {
  color: #00C892;
  border: 1px solid #00C892;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  height: 26px;
  line-height: 24px;
  font-size: 14px;
  padding: 0 15px;
  background: #fff;
}
.customer-details-tab-section .el-collapse-item__content .top .left {
  align-items: center;
  flex-wrap: wrap;
}
.customer-details-tab-section .el-collapse-item__content .top .status-paid {
  border: 1px solid #00C69F;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
  height: 24px;
  display: inline-block;
  background: #fff;
  color: #00C69F;
  position: relative;
  padding: 0 10px 0 30px;
  font-size: 12px;
}
.customer-details-tab-section .el-collapse-item__content .top .status-paid .icon-success {
  position: absolute;
  left: -1px;
  font-size: 24px;
  top: -6px;
}
.customer-details-tab-section .el-collapse-item__content .updated-date {
  color: #7b7b7b;
}
.customer-details-tab-section .el-collapse {
  border: 0;
}
.customer-details-tab-section .el-collapse-item__arrow {
  font-weight: 600;
  font-size: 18px;
}

.customer-details-tab-section .payment-tab .top {
  background: #F5F4FD;
  padding: 15px 10px;
  margin-top: 15px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.customer-details-tab-section .payment-tab .top .box {
  padding-right: 80px;
  color: #000;
}
.customer-details-tab-section .payment-tab .top .box h5 {
  position: relative;
  top: 3px;
}
.customer-details-tab-section .payment-tab .top .box:last-child {
  padding-right: 0;
}
.customer-details-tab-section .payment-tab .top .box:last-child span {
  font-weight: 600;
}
.customer-details-tab-section .payment-tab .top .box.id {
  color: #7b7b7b;
}
.customer-details-tab-section .payment-tab .top .box.amount {
  color: #000;
}
.customer-details-tab-section .payment-tab .top .box.amount h5 {
  color: #EB2179;
  font-size: 16px;
}
.customer-details-tab-section .payment-tab .top .box .icon-success {
  float: left;
  font-size: 18px;
  margin-right: 5px;
  color: #00C892;
  margin-top: -2px;
}
.customer-details-tab-section .payment-tab .top .status {
  color: #00C892;
  border: 1px solid #00C892;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  height: 26px;
  line-height: 24px;
  font-size: 14px;
  padding: 0 15px;
  background: #fff;
}
.customer-details-tab-section .payment-tab .top .left {
  align-items: center;
}
.customer-details-tab-section .payment-tab .top .status-paid {
  border: 1px solid #00C69F;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
  height: 24px;
  display: inline-block;
  background: #fff;
  color: #00C69F;
  position: relative;
  padding: 0 10px 0 30px;
  font-size: 12px;
}
.customer-details-tab-section .payment-tab .top .status-paid .icon-success {
  position: absolute;
  left: -1px;
  font-size: 24px;
  top: -6px;
}

.customer-details-tab-wrapper {
  background: #5E5CB9;
  width: calc(100% + 30px);
  right: 15px;
  position: relative;
  top: -59px;
  padding-top: 60px;
  height: 120px;
}

.update-payment-status .colum-style h5 {
  color: #ed273f;
  font-size: 16px;
}

.payment-img-attachment {
  align-items: center;
  color: #7b7b7b;
}

.view-payment-image .image {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1024px) {
  .customer-details-info .col {
    padding-right: 80px;
  }
  .customer-details-info .col:last-child {
    padding-right: 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .customer-details-info .col {
    padding-right: 20px;
  }
}
@media (min-width: 768px) {
  .customer-details-top .colum {
    padding-right: 15px;
  }

  .basic-info-tab .block {
    float: left;
    margin-top: 16px;
    width: 100%;
  }
  .basic-info-tab .block .left {
    width: 140px;
  }
  .basic-info-tab .block .left:after {
    content: ":";
    position: absolute;
    right: 0;
    top: 0;
  }
  .basic-info-tab .block .right {
    width: calc(100% - 140px);
    padding-left: 20px;
  }

  .drawer-top-info.collection-edit .colum-style {
    min-width: 25%;
    max-width: 50%;
  }
}
@media (max-width: 767px) {
  .customer-details-info .col {
    margin-bottom: 20px;
    padding-right: 0;
  }

  .customer-details-tab-section .payment-tab .top {
    padding: 15px 0;
  }
  .customer-details-tab-section .payment-tab .top .box {
    width: 100%;
    margin-bottom: 10px;
    padding-right: 0;
  }
  .customer-details-tab-section .el-collapse-item__content .right {
    justify-content: flex-start;
  }
  .customer-details-tab-section .el-collapse-item__content .right .colum {
    padding-left: 0;
  }

  .collection-details .basic-info-tab .block .left {
    float: left;
    width: 100%;
    margin-bottom: 10px;
  }
  .collection-details .basic-info-tab .block .right {
    margin-top: 3px;
  }

  .customer-details-tab-section .el-collapse-item__content .top .box {
    padding-right: 0;
    margin-bottom: 10px;
    width: 100%;
  }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .customer-details-tab-section .payment-tab .top .box {
    padding-right: 30px;
  }
}
.data-bg.dashboard-container {
  margin-bottom: 30px;
}

.dashboard-select1.year .el-input__inner {
  width: 65px;
}

.dashboard-users-info .inner {
  background: #d0fbf6;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  padding: 15px;
  height: 100%;
}
.dashboard-users-info .icon-users-1 {
  color: #60bbb0;
  font-size: 48px;
  background: #aaefe7;
  line-height: 90px;
  width: 84px;
  height: 84px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.dashboard-users-info .status-col {
  padding: 0;
}
.dashboard-users-info .status-col p {
  color: #7b7b7b;
}
.dashboard-users-info .status-col span {
  margin-right: 3px;
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  top: 2px;
}
.dashboard-users-info .status-col.online span {
  background: #07d183;
}
.dashboard-users-info .status-col.offline span {
  background: #ed2940;
}
.dashboard-users-info .status-col.leave span {
  background: #3298fc;
}

.dashboard-select2 .el-input__inner::placeholder,
.dash-board-target .dashboard-select1 .el-input__inner::placeholder,
.dashboard-select1 .el-input__inner {
  color: #7b7b7b !important;
}

.dashboard-select1 .el-input__inner {
  border: 0;
  width: 100px;
  background: none;
}

.dashboard-target-col.disb .inner,
.dashboard-expected-sales .inner {
  margin-top: 8px;
}

.dahboard-leads {
  background: #809fde;
  border-radius: 6px;
  padding-bottom: 15px;
  height: 100%;
}
.dahboard-leads .progress-bar {
  background-size: 5px 5px;
}

.dashboard-total-lead .icon {
  display: inline-block;
  width: 84px;
  height: 84px;
  text-align: center;
  background: #e0ebf8;
  border-radius: 50%;
  line-height: 76px;
  float: left;
  color: #1447af;
}

.dashboard-lead-count {
  margin: 15px 0 0 20px;
}

.lead-right-bottom {
  background: #fff;
  float: left;
  width: 100%;
  padding: 15px 0;
  margin-top: 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.lead-right-bottom .progress {
  height: 10px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  margin: 8px 0 5px;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.lead-right-bottom .status-text p {
  font-weight: 500;
  color: #7b7b7b;
}
.lead-right-bottom .status-text.hot .progress-bar {
  background-color: #fa4a46;
}
.lead-right-bottom .status-text.warm .progress-bar {
  background-color: #ffa40d;
}
.lead-right-bottom .status-text.cold .progress-bar {
  background-color: #03a9f4;
}
.lead-right-bottom .status-text.completed .progress-bar {
  background-color: #14a149;
}

.dashboard-lead-head h4 {
  color: #fff;
  margin-top: 15px;
}

.dahboard-leads .dashboard-select1 .el-input__inner::placeholder,
.dahboard-leads .dashboard-select1 .el-input__inner {
  color: #fff !important;
}

.dashboard-select1 .el-select__caret,
.dashboard-select2 .el-select__caret {
  color: #35435f !important;
}

.dashboard-select1 .el-input__icon {
  line-height: 32px;
}

.dahboard-leads .el-input {
  margin-left: 12px;
}

.dashboard-select1.year .el-input__inner {
  width: 65px;
}
.dashboard-select1.dash-all {
  width: 60px;
}

.dashboard-box .icon {
  width: 62px;
  height: 62px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  font-size: 26px;
}
.dashboard-box span {
  color: #7b7b7b;
  font-size: 12px;
}
.dashboard-box .content {
  width: calc(100% - 62px);
  padding-left: 25px;
}
.dashboard-box.payment .icon {
  background-color: #fff1da;
  color: #ffa40d;
  text-align: center;
  line-height: 68px;
}
.dashboard-box.payment .count {
  color: #ffa40d;
}
.dashboard-box.customers .icon {
  background-color: #c2f9d7;
  color: #14a149;
  text-align: center;
  line-height: 70px;
}
.dashboard-box.customers .count {
  color: #14a149;
}
.dashboard-box .count {
  margin: 2px 0 0;
}

@media (min-width: 1024px) {
  .dashboard-lead-right {
    justify-content: flex-end;
    display: flex;
    width: 50%;
  }
}
@media (max-width: 1023px) {
  .dashboard-container {
    margin-top: 72px;
  }

  .dashboard-users-info .inner {
    margin-bottom: 20px;
  }

  .dashboard-select2 {
    height: 36px;
  }
  .dashboard-select2 .el-input__inner,
.dashboard-select2 .el-input {
    height: 100%;
  }

  .lead-right-bottom .status-text {
    margin-top: 20px;
  }
}
@media (min-width: 768px) {
  .dashboard-lead-head {
    display: flex;
  }

  .dashboard-box.customers {
    margin-top: 20px;
  }
}
body,
html {
  font-family: "Ubuntu", sans-serif;
  background: #ebeff5 !important;
  font-weight: 400;
  color: #000;
  font-size: 13px;
  letter-spacing: 0.4px;
  overflow-y: auto;
}

body.el-popup-parent--hidden {
  height: auto;
}

*,
input[type=button] {
  outline: none;
}

/* Scrollbar Styling */
body::-webkit-scrollbar {
  width: 5px;
  transition: all 200ms ease;
}

body::-webkit-scrollbar-track {
  background-color: #ebebeb;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

body::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: #BDC3C7;
}

a {
  color: #061838;
  text-decoration: none;
  cursor: pointer;
}

b,
strong {
  font-weight: 700;
}

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

a:hover {
  text-decoration: none;
}

.pointer {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: #000;
}

.offline-status {
  background: #f13b3b;
}

.online-status {
  background: green;
}

.auto-punched-out-status {
  background: #ff861f;
}

.m-0 {
  margin: 0 !important;
}

.w-100 {
  width: 100% !important;
}

.w-37 {
  width: 37%;
}

.mb-15 {
  margin-bottom: 15px;
}

.mt-15 {
  margin-top: 15px;
}

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

.ml-0 {
  margin-left: 0 !important;
}

.mr-5 {
  margin-right: 5px !important;
}

.mt-5 {
  margin-top: 5px;
}

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

.mb-5 {
  margin-bottom: 5px;
}

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

.mr-20 {
  margin-right: 20px;
}

.mr-15 {
  margin-right: 15px !important;
}

.mb-20 {
  margin-bottom: 20px;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-30 {
  margin-top: 30px;
}

.pr-15 {
  padding-right: 15px !important;
}

.pl-15 {
  padding-left: 15px !important;
}

.pr-15 {
  padding-right: 15px;
}

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

.float-none {
  float: none;
}

.m-auto {
  margin: auto;
}

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

.mb-0 {
  margin-bottom: 0 !important;
}

.ml-10 {
  margin-left: 10px !important;
}

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

.pt-0 {
  padding-top: 0 !important;
}

.pr-0 {
  padding-right: 0 !important;
}

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

.p-15 {
  padding: 15px !important;
}

.pt-15 {
  padding-top: 15px !important;
}

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

.d-block {
  display: block;
}

.position-relative {
  position: relative;
}

.style-unset {
  list-style: unset;
}

.word-break {
  word-break: break-word;
}

.d-flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-items-center {
  align-items: center;
}

.bg-color-none {
  background-color: none !important;
}

.popup-color-box {
  padding: 15px;
  background: #f3f3f3;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
}
.popup-color-box .el-input__inner,
.popup-color-box .el-textarea__inner {
  background: transparent;
}

.el-form-item__label {
  text-align: left !important;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #000 !important;
}

.el-form-item__label {
  line-height: 24px !important;
}

.el-checkbox__inner {
  border: 1px solid #dedede !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #ed273f !important;
  border-color: #ed273f !important;
}

.el-checkbox__inner::after {
  left: 6px !important;
  top: 3px !important;
}

.app-main,
.main-wrapper {
  height: 100%;
}

.data-bg {
  margin-bottom: 20px;
  padding: 20px 15px 30px !important;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 22px 0 rgba(136, 190, 243, 0.1);
  -moz-box-shadow: 0 0 22px 0 rgba(136, 190, 243, 0.1);
  box-shadow: 0 0 22px 0 rgba(136, 190, 243, 0.1);
}

.user-status {
  display: inline-block;
  width: 12px;
  height: 12px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  position: absolute;
  top: -3px;
  right: 4px;
  border: 3px solid #fff;
}

.popup-top-info {
  font-size: 16px;
  color: #000;
  margin-bottom: 10px;
}
.popup-top-info span {
  display: block;
  font-size: 13px;
  color: #828181;
}

.popup-top-info.sm {
  font-size: 15px;
}

.expense-list .el-table__footer .cell {
  font-weight: bold;
}

.colum-style {
  margin-bottom: 15px;
  color: #7b7b7b;
  font-size: 13px;
}
.colum-style h5 {
  margin: 3px 0 0;
}

.back-btn {
  font-size: 22px;
  margin: 5px 0 0 12px;
  color: #212121;
}

.total-count {
  color: #061838;
  margin: 8px 0 0 20px;
}
.total-count span {
  color: #ed273f;
  font-weight: 600;
  font-size: 15px;
}

.icon-reference.small {
  font-size: 12px;
  margin-right: 8px;
}

.search-keyword {
  right: -5px;
}
.search-keyword .el-input__inner {
  background: #f5f5f5 !important;
  border: 0;
  -webkit-border-radius: 50px 0 0 50px !important;
  -moz-border-radius: 50px 0 0 50px !important;
  -ms-border-radius: 50px 0 0 50px !important;
  border-radius: 50px 0 0 50px !important;
  height: 38px !important;
  padding: 0 30px 0 15px !important;
}

.page-head {
  margin: 5px 0 0;
  font-weight: 700;
  font-size: 20px;
}

.common-search {
  display: inline-block;
  position: relative;
  margin-right: 5px;
}
.common-search .el-input {
  width: calc(100% - 40px) !important;
  float: left;
  left: 0px;
}
.common-search .el-button {
  background: #e9e9e9;
  height: 38px;
  width: 40px;
  padding: 0 4px 0 0 !important;
  -webkit-border-radius: 0 50px 50px 0 !important;
  -moz-border-radius: 0 50px 50px 0 !important;
  -ms-border-radius: 0 50px 50px 0 !important;
  border-radius: 0 50px 50px 0 !important;
  border: 0;
  font-size: 12px !important;
}

@media (max-width: 991px) {
  .popup-sm {
    width: 90% !important;
  }
}
@media (max-width: 767px) {
  .popup-xs {
    width: 90% !important;
  }
}
.required-star,
.required {
  color: #cc1313;
}

.no-data-available {
  margin: 100px 0;
}

.show-date {
  margin-bottom: 15px;
}
.show-date span {
  color: #000;
  font-weight: var(--font-bold-primary);
  padding: 2px 5px;
  background: #f2f2f2;
  display: inline-block;
  margin: 0 5px;
}

.custom-top-filter-date {
  margin-right: 10px;
}
.custom-top-filter-date.year {
  width: 100px;
}
.custom-top-filter-date .el-input__inner {
  background: #f5f5f5;
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  -ms-border-radius: 50px !important;
  border-radius: 50px !important;
  border: 0;
  padding: 0 12px !important;
  height: 38px !important;
}

/**** CSS LICENSE EXPIRING POPUP ***/
.popup-bg {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 11;
}

.expiry-reminder {
  background: #fff;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
  height: 520px;
  margin: auto;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  padding: 20px 0 0;
}
.expiry-reminder h3 {
  color: #061838;
}
.expiry-reminder .el-icon-close {
  color: #ed273f;
  position: absolute;
  right: 25px;
  top: 30px;
  font-size: 22px;
}
.expiry-reminder .day {
  color: #ed273f;
  font-weight: 600;
  font-size: 92px;
  margin-top: 50px;
}
.expiry-reminder .remaining-day {
  color: #061838;
  font-size: 20px;
}
.expiry-reminder .expity-date {
  background: #eaf2ff;
  padding: 25px 0;
  margin: 20px auto 50px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  border-radius: 6px;
  font-size: 22px;
}
.expiry-reminder .renew-license p {
  color: #a1a1a1;
  font-size: 16px;
}
.expiry-reminder .renew-license h4 {
  margin: 4px 0 0;
  color: #061838;
}
.expiry-reminder .renew-license .text {
  padding-left: 15px;
}
.expiry-reminder .renew-license .mail span {
  color: #ea9e0c;
}
.expiry-reminder .renew-license .phone span {
  color: #13e88a;
}
.expiry-reminder .renew-license .col {
  margin-top: 15px;
}

@media (min-width: 1024px) {
  .expiry-reminder {
    width: 800px;
  }
  .expiry-reminder .renew-license-row {
    width: 70%;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .main {
    padding: 72px 15px 20px;
  }

  .expiry-reminder {
    width: 670px;
  }
  .expiry-reminder .renew-license-row {
    width: 85%;
  }
}
@media (min-width: 768px) {
  .expiry-reminder .renew-license-row {
    display: flex;
    margin: auto;
  }
  .expiry-reminder .remaining-day {
    margin-top: -10px;
  }
  .expiry-reminder .expity-date {
    width: 560px;
  }
  .expiry-reminder .renew-license .mail {
    padding-left: 50px;
  }
  .expiry-reminder .renew-license .mail .icon {
    margin-top: -5px;
  }
}
@media (max-width: 767px) {
  .expiry-reminder {
    width: 85%;
  }
  .expiry-reminder h3 {
    font-size: 16px;
    margin-top: 50px;
  }
  .expiry-reminder .day {
    font-size: 40px;
    margin: 0;
  }
  .expiry-reminder .remaining-day {
    font-size: 16px;
  }
  .expiry-reminder .expity-date {
    width: 88%;
    font-size: 15px;
    padding: 25px 15px;
    margin-bottom: 30px;
  }
  .expiry-reminder .expity-date b {
    display: block;
    margin-top: 5px;
  }
  .expiry-reminder .renew-license .col {
    float: left;
    width: 100%;
    padding: 0 20px;
  }
  .expiry-reminder .renew-license .col img {
    width: 32px;
  }
  .expiry-reminder .renew-license h4 {
    font-size: 16px;
  }
}
/**** END CSS LICENSE EXPIRING POPUP ***/
.popup-scroll {
  height: calc(100% - 180px);
  overflow-y: auto;
  overflow-x: hidden;
}

.avtar-user img {
  width: 34px;
  height: 34px;
  position: relative;
}

.avtar-user-name {
  margin: 8px 0 0 5px;
}

.dragndrop {
  border: dashed 1px #df7082;
  text-align: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  margin-bottom: 15px;
  position: relative;
  padding: 25px 0;
  line-height: 22px;
  float: left;
  width: 100%;
  margin-top: 10px;
  color: var(--label-color);
}
.dragndrop .file-uploder {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: #fff;
  opacity: 0;
  cursor: pointer;
}

/** ADD OR DROP IMAGE **/
.image-preview .icon-warning {
  position: relative;
  top: 3px;
  margin-right: 4px;
  font-size: 16px;
  color: #4ccef5;
}
.image-preview .alert-info {
  padding: 6px 10px 8px;
  width: calc(100% - 45px) !important;
  line-height: 18px;
}
.image-preview .alert-info.w-100 {
  width: 100% !important;
  float: left;
}
.image-preview .dragndrop {
  width: calc(100% - 45px) !important;
  float: right;
}
.image-preview .dragndrop span {
  padding: 0 15px;
}
.image-preview .dragndrop span i {
  color: #df7082;
  font-style: normal;
}
.image-preview .dragndrop.w-100 {
  width: 100% !important;
  float: left;
}

/** END ADD OR DROP IMAGE **/
.datepicker-custom {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  border-radius: 50px;
  padding: 0 6px 0 15px;
  background: #f5f5f5;
  height: 36px;
}
.datepicker-custom .el-date-editor .el-range__icon {
  margin-left: 0;
  left: -2px;
  position: relative;
  top: 1px;
}
.datepicker-custom .el-date-editor .el-range-input {
  background: #f5f5f5;
}
.datepicker-custom .el-date-editor {
  background: transparent;
  border: 0;
}

.custom-datepicker {
  width: 292px;
}

.select-round .el-input__inner,
.select-round .el-range-input {
  background: #f5f5f5 !important;
  -webkit-border-radius: 50px !important;
  -moz-border-radius: 50px !important;
  -ms-border-radius: 50px !important;
  border-radius: 50px !important;
  border: 0;
  height: 38px !important;
  padding: 0 15px !important;
}

.page-title {
  float: left;
}

.head-icons {
  float: right;
}

/* clear left n colum */
.two-colum-clear > div:nth-child(2n+1),
.two-colum-clear > el-form-item:nth-child(2n+1) {
  clear: left;
}

.table-wrapper {
  overflow-x: auto;
  white-space: nowrap;
}

.total-show .el-table__footer {
  font-weight: 500;
  font-size: 15px;
}

.bg-tarnsparent {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
}

.pdd-60 > .el-input input {
  padding-right: 60px !important;
}

.import-text {
  color: crimson;
}

.img-doc {
  display: inline-block;
  border: 1px solid #dedbdb;
  padding: 5px;
}

.timeline-label {
  margin-bottom: 15px;
}

.user-action {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.no-data-available.custom {
  position: static;
  margin-top: 100px;
  width: 100%;
}

.action.icon-expense2 {
  position: relative;
  top: 2px;
}

.el-table td.username-id .user-name {
  color: #000;
  margin-right: 6px;
}
.el-table td.username-id .user-id {
  color: #7b7b7b;
  font-size: 12px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
  background-color: #fff !important;
  color: #555 !important;
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: #555555 !important;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.el-loading-mask {
  z-index: 20001 !important;
}

/* always present */
.expand-transition {
  transition: all 0.3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}

/* .expand-enter defines the starting state for entering */
/* .expand-leave defines the ending state for leaving */
.expand-enter,
.expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .main-wrapper {
    padding-left: 20px;
  }
}
@media (max-width: 1279px) {
  .max1279-mt-15 {
    margin-top: 15px;
  }
}
@media (max-width: 991px) {
  .max991-pr-0 {
    padding-right: 0 !important;
  }

  .max991-pl-0 {
    padding-left: 0 !important;
  }

  .max991-mt-15 {
    margin-top: 15px;
  }

  .search-keyword {
    margin-bottom: 15px;
  }
}
@media (min-width: 768px) {
  .datepicker-custom {
    width: 200px !important;
    display: inline-block;
    margin-right: 5px;
  }
  .datepicker-custom .el-date-editor {
    background: transparent;
    border: 0;
  }
}
@media (min-width: 768px) {
  .min768-pr-0 {
    padding-right: 0 !important;
  }

  .min768-text-right {
    text-align: right;
  }
}
@media (max-width: 767px) {
  .datepicker-custom {
    margin: 15px 0;
  }

  .page-head {
    font-size: 20px;
  }

  .common-search {
    width: 100%;
    margin-top: 15px;
  }
  .common-search .el-input {
    width: calc(100% - 40px);
    float: left;
  }

  .max767-w-100 {
    width: 100% !important;
  }

  .max767-mb-15 {
    margin-bottom: 15px !important;
  }
}
@media (min-width: 600px) {
  .min600-text-right {
    text-align: right;
  }
}
@media (max-width: 599px) {
  .max599-pl-0 {
    padding-left: 0 !important;
  }

  .max599-w-100 {
    width: 100% !important;
  }

  .max599-mt-15 {
    margin-top: 15px !important;
  }

  .max599-mb-15 {
    margin-bottom: 15px !important;
  }

  .max599-p-0 {
    padding: 0;
  }

  .max599-text-right {
    text-align: right;
  }
}
@media (max-width: 480px) {
  .xs-lg-fullwidth,
.max480-fullwidth {
    width: 100%;
  }

  .max480-mt-15 {
    margin-top: 15px;
  }
}
@media (min-width: 768px) {
  .search-keyword.report .el-input__inner {
    width: 272px;
  }

  .search-keyword.sales .el-input__inner {
    width: 268px;
  }
}
@media (max-width: 991px) {
  .page-head {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .xs-mt-15 {
    margin-top: 15px !important;
  }

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

  .xs-mt-20 {
    margin-top: 20px;
  }

  .xs-mt-15 {
    margin-top: 15px;
  }

  .max767-mt-15 {
    margin-top: 15px;
  }

  .max767-mt-10 {
    margin-top: 10px;
  }

  .main {
    padding-top: 75px;
  }

  .dash-from-to-date {
    font-size: 12px;
  }

  .dashboard-head {
    font-size: 18px;
  }

  .image-preview .dragndrop {
    font-size: 13px;
  }
  .image-preview .dragndrop span {
    display: block;
  }
}
@media (min-width: 992px) {
  .main {
    margin: 80px 0 0 6%;
    padding: 0;
    -webkit-transition: width 0.3s;
    transition: width 0.3s;
  }

  .search-keyword {
    width: auto !important;
  }

  .head-main .colum {
    width: auto !important;
  }
}
@media (min-width: 1280px) {
  .main.width {
    width: 92%;
  }

  .top-welcome-text {
    padding-left: 5%;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }

  .data-bg {
    min-height: 530px;
  }

  .top-welcome-text.welcome-menu-pinned {
    padding-left: 19%;
  }
}
.velmld-overlay {
  z-index: 9 !important;
}

.booking-visit-map {
  height: 400px;
}

/*# sourceMappingURL=main.css.map */