/*!
 * SF v3 (http://salesfokuz.com)
 * Copyright Trinitymascot pvt ltd.
 * http://salesfokuz.com v3 UI design-nidhin
 * Copyright Trinitymascot pvt ltd.
 * @author: nidhin
 * @address: nidhinndl@gmail.com
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */


/*! main css v3 | nidhinndl@gmail.com */
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700');

:root {
  --text-color: #000;
  --primary-color: #ed273f; 
  --font-bold-primary:700;
  --secondary-color:#061838;
  --third-color:#097cf7;
  --input-text-color:#878788;
  --input-border-color:#dedede;
  --font-size:13px;
  --primary-btn:#ed273f;
  --shadow: 5px 5px 12px 0 #f1f1f1;
  --label-color:#7b7b7b
}

body,
html {
    font-family: 'Ubuntu', sans-serif;
    background: #ebeff5 !important;
    font-weight: 400;
    color: var(--text-color);
    font-size: var(--font-size);
    letter-spacing: 0.4px;
    overflow-y: auto;
}

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

*,
input[type="button"] { outline: none;}
a{ color: var(--secondary-color); text-decoration: none; cursor: pointer}
b,strong{ font-weight: 700}

ul { padding-left: 0; list-style: none;}
a:hover { text-decoration: none;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text-color);}
.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;}
.mb-20{ margin-bottom: 20px;}
.mt-0{ margin-top: 0 !important}
.mt-30{ margin-top: 30px;}
.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}


.custom-icon, .el-button .custom-icon{ cursor: pointer}

.el-button.details-icon{ padding: 0 !important; border: 0}
.el-button.details-icon:hover{ background: #efd9f3}


.assign-loaction{ background: #f7e5c5; color: #ff6d00 !important; font-size: 16px;}

.custom-icon.green{ color: #ff0000 !important; background: #ffcdcd;}
.custom-icon.location{ font-size: 16px;}
.custom-icon.image{ font-size: 17px; color: #4a9e4f !important; background: #d1f1d2;}

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

.overview-board-1, .overview-board-total{ background: #e6f1fd; color: #1565C0;}
.overview-board-2{background: #fff1e5; color: #FF6F00;}
.overview-board-3{ background: #efe9ff; color: #651FFF;}
.overview-board-4, .overview-board-online{ background: #e4ffe4; color: green; }
.overview-board-5, .overview-board-offline{ background: #fbefef; color: #ed4c4c;}

header { background: #ffffff none repeat scroll 0 0; box-shadow: 0 1px 12px 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;
}

.top-info-col .inner{ border-radius: 4px; padding: 15px;}
.top-info-col .inner h4{ margin: 0 0 3px; font-size: 15px;}
.top-info-col span{ font-size: 18px; font-weight: 700; } 


.top-info-col1{ border-radius: 4px; background: #fff; padding: 20px; box-shadow:  5px 5px 12px 0 #f1f1f1}
.top-info-col1 h4{ margin: 0 0 3px; font-size: 14px; color: #969696}
.top-info-col1{ font-size: 18px; } 


.popup-top-info{ font-size: 16px; color: var(--text-color); margin-bottom: 10px; }
.popup-top-info span{ display: block; font-size: 13px; color: #828181;}
.popup-top-info.sm{ font-size: 15px;}

.required-star, .required{ color: #cc1313}
.side-minimize { background:var(--secondary-color); position: fixed; right: 0; text-align: center; bottom: 30px; margin:auto; font-size: 14px; width: 30px; height: 40px; line-height: 40px; color:#fff; 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;}

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

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

   .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;}
    .icon-route.nav-icon{ top: 5px;}

.table-wrapper {  overflow-x: auto; white-space: nowrap;}
.navi .active a .nav-icon {  color: var(--primary-color);}
.btn-primary { color: #fff; background-color: var(--primary-btn); border-color: var(--primary-btn);}

.status{ border-radius: 4px; -webkit-border-radius: 4px; color: #fff; display: inline-block; min-width: 50px; height: 26px; line-height: 24px;  text-align: center; padding: 0 6px;}


/** Stage style **/

.stage{ border-radius: 4px; -webkit-border-radius: 4px; color: #fff; display: inline-block; min-width: 50px; height: 20px; line-height: 18px; font-size: 12px;  text-align: center; padding: 0 6px;}
.stage.new { background: rgba(255,114,59,0.2); color: rgb(255,114,59); border: 1px solid rgba(255,114,59,0.3);}
.stage.proposal { background: rgba(102,51,204,0.2); color: rgb(102,51,204); border: 1px solid rgba(102,51,204,0.3);}
.stage.completed { background: rgba(88,197,34,0.2); color: rgb(88,197,34); border: 1px solid rgba(88,197,34,0.3);}
.stage.failed { background: rgba(246,41,94,0.2); color: rgb(246,41,94); border: 1px solid rgba(246,41,94,0.3);}
.stage.inprogress { background: rgba(23,128,225,0.2); color: rgb(23,128,225); border: 1px solid rgba(23,128,225,0.3);}
.stage.invoice-sent { background: rgba(182,24,185,0.2); color: rgb(182,24,185); border: 1px solid rgba(182,24,185,0.3);}
.stage.followup{ background: rgba(0,148,217,0.2); color: rgb(0,148,217); border: 1px solid rgba(0,148,217,0.3);}
.stage.negotiation{ background: rgba(0,204,204,0.2); color: rgb(0,204,204); border: 1px solid rgba(0,204,204,0.3);}


/**End Stage style **/


/** Status style **/

.status{ border-radius: 4px; -webkit-border-radius: 4px; background: #fff; display: inline-block; min-width: 50px; height: 20px; line-height: 18px; font-size: 12px; }
.status.warm{ color: rgb(245,150,34); border: 1px solid rgba(245,150,34);}
.status.hot{ color: rgb(233,39,63); border: 1px solid rgba(233,39,63);}
.status.cold{ color: rgb(13,191,239); border: 1px solid rgba(13,191,239);}

.status.new { color: rgb(255,116,8); border: 1px solid rgb(255,116,8);}
.status.complete, .status.approved {color: rgb(88,197,34); border: 1px solid rgb(88,197,34);}
.status.cancel {color: rgb(234,76,88); border: 1px solid rgb(234,76,88);}
.status.reschedule {color: rgb(105,133,215); border: 1px solid rgb(105,133,215);}
.status.punchin {color: rgb(0,189,122); border: 1px solid rgb(0,189,122);}
.status.punchout {color: rgb(47,72,88); border: 1px solid rgb(47,72,88);}
.status.pending { color: rgb(255,116,8); border: 1px solid rgb(255,116,8);}
.status.reschedule { color: rgb(0,204,204); border: 1px solid rgb(0,204,204);}
.status.followup { color: rgb(0,148,217); border: 1px solid rgb(0,148,217);}
.status.upcoming { color: rgb(19,178,231); border: 1px solid rgba(19,178,231);}
.status.rejected { color: rgb(251,41,41); border: 1px solid rgba(251,41,41);}

/**End Status style **/

/** Status Color style **/

.status-approved {color: rgb(88,197,34);}
.status-pending { color: rgb(255,116,8);}
.status-rejected { color: rgb(251,41,41);}


/** Status Color style **/

.m-0{ margin: 0 !important}
.popup-color-box{ padding: 15px; background: #f3f3f3}
.el-button.add-btn-icon{ background: none; box-shadow: none; -webkit-box-shadow: none; border: 0; font-size: 22px; padding: 0 !important;
    color: var(--primary-color);}
.el-button.el-button--primary, .el-button.el-button--primary:hover, .el-button.el-button--primary:focus{ background: var(--primary-color); border-color: var(--primary-color); color: #fff}
.el-dialog__header { padding: 33px 20px 45px !important; border-bottom: 1px solid #ddd8d8; border-radius:8px 8px 0 0 !important; -webkit-border-radius: 8px 8px 0 0 !important; background: var(--secondary-color); text-align: center}
.el-date-editor.el-input, .el-date-editor.el-input__inner{ width: 100% !important}
.settings-col label, .el-form-item__content{ display: block !important; margin: 0 !important; width: 100% !important; 
color: var(--text-color);}
.el-button, .el-table, .el-form-item__content, .el-input, .el-dialog__body{ font-size: var(--font-size)}
.el-input__inner{ color:var(--input-text-color); border: 1px solid var(--input-border-color)}
.el-dialog__body{ font-size: var(--font-size); color: var(--text-color)}
.el-radio__input.is-checked .el-radio__inner {background: var(--primary-color); 
border: 1px solid var(--primary-color) ;}

.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover { color: #fff; background-color: var(--primary-btn); border-color: var(--primary-btn)}
.el-radio__inner { border: 1px solid var(--primary-color;)}
.page-head { margin:5px 0 0; font-weight: 700; font-size: 20px;}
.add-btn.btn { padding: 8px 12px;}
.userlist-filetr .inner { background: var(--light-bg); font-size: 13px; padding: 18px 0 12px; overflow: hidden}

.sf-user-listing{ margin: 10px 5px;border: solid 1px #ddd;}
.userlist-filetr .el-radio{ margin-right: 30px;}
.sf-user-detail .media-body, .sf-user-detail { overflow: visible;}
.sf-user-detail .sf-user-name-main { font-size: 16px; font-weight: 400;  margin-bottom: 10px; padding: 10px 10px 5px; color: #333; position: relative; border-bottom: 1px solid #ddd;}
.sf-user-edit .md-button.md-icon-button {  padding: 0;  margin: 0; height: auto; width: auto; line-height: normal;}
.userlist-filetr .el-radio__inner{ border: 1px solid #c3c2c2;}
.show-date span { color: var(--text-color); font-weight:var(--font-bold-primary); padding: 2px 5px; background: #f2f2f2; display: inline-block; margin: 0 5px;}
.show-date{ margin-bottom: 15px;}

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

.battery-list-filter label { font-weight: normal; margin-top:15px;}
.battery-filter h4{ font-weight: 700}



.battery-list-legend i{ width: 18px; height: 18px; float: left; border-radius: 2px; -webkit-border-radius: 2px; margin-right: 15px;}
.sf-resolved-legend i{ background: #00af4d;}
.sf-Average-legend i { background: #ff9155;}
.sf-unresolved-legend i { background: #ec503b;}
.battery-list-legend div{ margin-bottom:20px;}
.el-table th{ color: var(--text-color); font-weight: var(--font-bold-primary); text-transform: uppercase; font-size: 13px;}
.battery-list-inner{ box-shadow: var(--shadow); margin: 15px 0; border: 1px solid #ececec; padding-top: 22px; min-height: 180px;}
.battery-list-time{ margin-top: 10px; color: #989898}
.battery-charge-status{ font-weight: 700}
.attendance-filter p{     padding: 15px 30px 15px 0; }
.attendence-col { box-shadow: var(--shadow); margin: 15px 0; min-height: 185px; position: relative; border: 1px solid #ececec; padding-top: 25px}
.attendence-col .icon{ width: 50px; display: inline-block; position: relative}
.user-status { display: inline-block; width: 14px; height: 14px; border-radius: 50px; position: absolute; top: -3px; right: 4px; border: 3px solid #fff;}
.offline-status{ background: #f13b3b;}
.online-status{ background: green;}
.attendence-col-time{ color: #989898; font-size: 13px;}
a.el-icon-edit, a.el-icon-edit-outline, a.el-icon-delete, a.el-icon-close, a i.el-icon-edit, a i.el-icon-delete, a.el-icon-view, 
a.el-icon-time, a.el-icon-download, a.el-icon-download { color: var(--text-color); font-size: 14px;}
.back-btn { font-size: 22px; margin: 5px 0 0 12px; color: #212121;}
.total-count{ color: var(--secondary-color); margin: 8px 0 0 20px;}
.total-count span{ color: var(--primary-color); font-weight: 600; font-size: 15px;}

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


.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; border-radius: 4px; -webkit-border-radius: 4px;}
.logo{ padding-top: 12px; text-align: center;}
.side-nav{ position: fixed; left: 0; padding: 0; z-index: 6; top: 0; bottom: 0; background: var(--secondary-color); height: 100%; -webkit-transition: width 0.3s; transition: width 0.3s;}

.location-tab a { float: left; position: relative; background: #fff; color:#848484;  height: 60px;
    border-radius:4px; width:60px; margin-bottom: 10px; line-height: 62px; text-align: center; border: 1px solid #ccc;}

.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 a.active{ background:var(--primary-color) !important; color: #fff; border-color: #e41931;}  
.location-tab p{ border-bottom: 1px solid #ddd; margin-bottom: 25px;}
.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: #868585;     margin-top: 4px;}
.timeline-label.activeLocation[data-v-5fa65fd1]{ background: #fff !important; border-color: var(--primary-color) !important;}
.location .timeline-icon::after { background: #dcd9d9; content: ""; height: 53px; left: 28px; top: 46px; position: absolute; width: 1px;}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon {  background: #fff; color: var(--primary-color); display: block; width: 36px; height: 36px; border-radius: 20px; text-align: center; border: solid 1px #dcd9d9; line-height: 35px; font-size: 18px;float: left; margin-top: 10px; margin-left: 10px;}
.location-map{padding: 10px; background: #f7f7f7; outline: 1px solid #e8e8e8;}

.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; border-radius: 50%; -webkit-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}
.userlist-status { display:inline-block; padding-left: 30px; }
.navi a{ position: relative; color: #fff}
.left-nav{ background: var(--secondary-color); transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; }
.hidden-menu li.active{ background:#fff !important}
.hidden-menu .nav-icon{ display: none}
.hidden-menu{ position: fixed; width: 120px; z-index:2; left: 54px;top: 65px; background: var(--secondary-color); bottom: 0; }
.hidden-menu a{ color: #fff; display: block;}
.hidden-menu a.user{ padding-top: 15px;}
.hidden-menu a.target{ padding-top: 15px;}
.hidden-menu a.order{ padding-top: 20px;}
.hidden-menu a.dealer{ padding-top: 25px;}
.hidden-menu a.inventory{padding-top: 30px;}
.hidden-menu a.product{padding-top: 25px;}
.hidden-menu a.route{padding-top: 25px;}
.hidden-menu a.battery{padding-top: 20px;}
.hidden-menu a.attendance{padding-top: 22px;}
.hidden-menu a.activity{padding-top: 25px;}
.hidden-menu a.location{padding-top: 22px;}
.hidden-menu a.master{padding-top: 22px;}
.hidden-menu a.leave{padding-top: 22px;}
.hidden-menu a.expense{padding-top: 20px;}

.quick-add{ background: #fff; position: absolute; width: 380px; right: 0; border-radius: 4px; -webkit-border-radius: 4px; padding: 12px; 
    box-shadow: 0px 0px 15px 0 #e8e8e8; -webkit-box-shadow: 0px 0px 15px 0 #e8e8e8; top: 50px;}
.quick-add-btn{ position: relative; display: inline-block}
.quick-add a{ color: var(--text-color); display: block; padding: 12px 0; border: 1px solid #e6e6e6; width: 110px; font-size: 12px; text-align: center; border-radius:4px;}


.quick-add li{ display: inline-block; margin: 0 6px 10px 0;}
.quick-add li span{ display: block; color: var(--primary-color)}
.adduser-select-type .el-radio-group{ margin-top: 18px;}

.route-dlr-list-col{ min-width: 250px; min-height: 95px; padding-right: 30px; margin-left: 15px; color:}
.dragndrop {  color: var(--primary-text-color); background-color: var(--light-bg); border: dashed 1px #df7082; text-align: center;
    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;}
.user-list-btn{ position: relative; z-index: 1;}
.userlist-edit-delete{ position: absolute; padding: 0; right: 15px; width: 120px; background: #fff; z-index:999;  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); }
.userlist-edit-delete a{ border-bottom: 1px solid #ddd; cursor: pointer; display: block; padding:10px; color: var(--text-color)}
.userlist-edit-delete a:last-child { border: 0 none;}
.userlist-edit-delete a:hover{background-color:#f5f5f5;}
.user-list-btn a{ color:var(--text-color) }
#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; }  
.online-last-time{ font-size: 11px;}


.sidebar-users-status p{ margin-bottom: 0;}
.side-toggle-ico { font-size: 9px; margin-left: 5px;}

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

.head-notification{ position: relative; display: inline-block}
.header.el-popover{ padding: 0; margin-right: 20px}
.blink{ animation: blink 1s linear infinite;}
.head-notification .el-badge__content{ min-width: 24px; height: 24px; padding: 0; border: 4px solid #fff; top: 2px !important;
    right: 14px !important; border-radius: 50%; font-size: 9px; line-height: 16px;}

@keyframes blink{ 0%{opacity: 0;}  50%{opacity: .5;} 100%{opacity: 1;}}

/**LOGIN**/
.login-html{ overflow: hidden}
.login-html, .login-body, .login-left, .login-right{ height: 100%}
.login-left{ background: #fff; padding: 35px 100px 0;}
.login-right{ background: #061738; height: 100%;}
.login-left .login-img{ margin-top: 30px;}
.login-left h5{ padding-left: 60px; margin-top: 10px; line-height: 22px; word-break: break-word; text-align: justify;}
.login-field{ display: table; height: 100%;}
.login-field-inner{ display:table-cell; vertical-align: middle;}
.login-field-inner .form-control{ height: 38px;}
.login-btn { background: var(--primary-color); border: 0; width: 100%; height: 40px; color: #fff; font-size: 15px; border-radius: 4px;  -webkit-border-radius: 4px; margin-bottom: 20px; box-shadow: 2px 2px 1px #000; -webkit-box-shadow: 2px 2px 1px #000;}
.forgot-password{ font-size: 12px; letter-spacing: 0.5px;}

.login-social-media a{ color: #fff; font-size: 15px; display: block; text-align: center; line-height: 28px;}


.login-social-media { position: absolute; right: -20px; margin: auto; width: 40px; top: 0; bottom: 0; background: var(--primary-color); z-index: 1; border-radius: 50px; text-align: center; padding: 10px 0; height: 158px; border: 3px solid #fff;}


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;}

.pointer{ cursor: pointer}
.filter-btn{ color: #061838 !important; background-color: #fff !important; border-color: #e5e5e5 !important; position: relative; padding-left: 30px; font-size: 13px; width: auto}
.filter-btn .icon-filter{ font-size: 12px; top: 13px;}
.avtar-user{ position: relative; display: inline-block; width: 36px; height: 36px;}

.timeline-label{ margin-bottom: 15px;}
.user-action{ -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);}
.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 a{ color: var(--secondary)}
.recent-sec, .sidebar-users-status .media-body{ padding-top: 3px;}

/*** FILTER ***/

.filter-div { position: fixed; background: var(--secondary-color); border: 1px solid #efebeb; z-index: 6; top: 0; right: -280px; 
    height: 100%; bottom: 0; width: 280px; overflow-y: auto; padding-bottom: 15px; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;
    padding: 0}
.filter-head h4{ color: #fff; padding: 15px 15px 5px; margin: 0}
.filter-div .el-button{ padding: 12px}  
.filter-close { color: #fff !important; font-size: 16px !important; margin: 16px 15px 0 0;}
.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 .el-input__inner{ height: 38px !important; line-height: 38px !important; border-radius: 4px !important; -webkit-border-radius: 4px !important; padding: 0 12px !important;}
.filter-head, .filter-footer{ height: 50px;}
.filter-head{ margin-bottom: 10px;}
.filter-div .ps{ height: calc(100% - 115px)}
.input-item{ margin-bottom: 15px;}
.filter-footer .el-button{ border-radius: 50px !important; -webkit-border-radius: 50px !important;}

/*** END FILTER ***/


.user-list-dropdown a{ color: var(--text-color)}
.user-list-dropdown .custom-icon{ margin-right: 10px;}
.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;
 border-radius: 4px;}
.filter-items span{ margin-top: 1px; margin-left: 5px;}
.location-list-main{ overflow-y: auto; max-height: 392px;}

.img-doc { display: inline-block; border: 1px solid #dedbdb; padding: 5px;}
.app-main, .main-wrapper{ height: 100%}
.side-nav .ps__rail-x{ display: none !important}

.nav-submenu{ max-height: 0; transition: max-height 0.40s ease-out; overflow: hidden; padding-left: 40px;}
.nav-ul li.height .nav-submenu{ max-height: 600px; transition: max-height 0.40s ease-in;}
.navi li .nav-submenu a{ font-size: 11px;  display: inline-block; width: 100%;}
.navi li .nav-submenu a:hover{ background: none; }
.navi li .nav-submenu a:hover, .navi li .nav-submenu a.active{ color: #3d6dc1; background: none !important;}
.nav-sub-arrow{ margin: 10px; position: absolute; right: 0; font-size: 11px;}
.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; }
.nav-submenu li:last-child a:after { background: none;}


.user-filter p{ color: #fff;}
.user-filter .el-radio{ font-weight: 400}
.user-filter{ padding: 15px}

.notification-div { background:#fff; border-radius: 4px; 
    -webkit-border-radius: 4px; z-index: 3}
.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; 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 .icon{ font-size: 18px;}
.notification-div ul{ background: #f7f7f7; padding-top: 10px; }
.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}
.notification-item .image span{ width: 36px; height: 36px; display: inline-block; border-radius: 50%; -webkit-border-radius: 50%; background: #ccc; }
.notification-item .content{ position: relative; }
.notification-item{ margin-top: 20px}
.notification-div .see-all{background: #f7f7f7; padding: 15px; font-size: 11px; font-weight: 600; border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;}
.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-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;}

.user-list .user-status{ top: 0; right:-1px; width: 12px; height: 12px; border-width: 2px;}
.el-button.el-icon-plus{ font-weight: 600}
.el-button.btn-assign, .el-button.filter-btn{ padding-left: 30px; position: relative;}
.btn-icon{ position: absolute; left: 10px;}
.btn-assign .el-icon-sort{ font-size: 14px; top: 12px; transform: rotate(40deg);}
.attendance-location{ position: absolute; bottom: 15px; left: 0; right: 0;}


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

.avtar-user img{ width: 34px; height: 34px; position: relative; }
.avtar-user-name{ margin: 8px 0 0 5px}
.el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover { color: #FFF; background-color: ##f19ba6 !important; border-color: ##f19ba6 !important;}

.assign-users-list li{ font-size: 12px; background: #f4f4f5; display: inline-block; border-radius: 4px; -webkit-border-radius: 4px; 
    padding: 0 5px; border: 1px solid #e9e9eb; float: left; margin:0 10px 10px 0;}
.assign-users-list li a{ margin-left: 5px;}
.order-by { color: #fff; margin-left: 10px; display: inline-block; width: 22px; height: 22px; background: #50a951; border-radius: 50%; font-size: 11px; text-align: center; line-height: 24px;}
.recent-sec .added {font-size: 11px;}
.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}

/** 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 .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}
 .dragndrop span i{ color: #df7082; font-style: normal;}

/** END ADD OR DROP IMAGE **/



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

/** INPUT ICONS **/

.input-icon.icon-calendar-1, .input-icon.icon-product, .input-icon.icon-campian{ font-size: 13px; padding-top: 1px;}
.input-icon.icon-pincode{ font-size: 15px; padding-top: 2px;}
.input-icon.icon-rupee{ font-size: 11px; padding-top: 2px;}
.input-icon.icon-module{ font-size: 11px; padding-top: 1px;}
.input-icon.icon-reason{ font-size: 10px; padding-top: 2px;}
.input-icon.icon-gold{ font-size: 16px; padding-top: 1px;}

/** END INPUT ICONS **/

@media(min-width:768px){
    .main { padding: 100px 30px 20px;}
    .update-leave-info .update-leave-col:nth-child(3n+1){ clear: left}
    .min768-text-right{ text-align: right}
}

@media(max-width:767px){
    .main { padding-top: 75px;}  
}

@media (min-width: 992px) {
    .main {margin:90px 0 0 6%; padding:0;  -webkit-transition: width 0.3s; transition: width 0.3s;}
    .pagination>li>span { padding: 2px 6px !important; }
    .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}
    .forgot-password{ color: #fff; }
    .nav-icon{ padding-left: 0; width: 35px; display: inline-block; position: relative}
    .left-nav{ padding-top: 5px; background: var(--secondary-color); margin-top: 13px; height: 100%; }
    .navi li:hover > a{ background: #09224e; border-radius: 50px;}
    .sidebar.width-0{ width: 0}
    .location-left-main{ padding-right: 50px;}
 
}

@media (max-width:991px) {
.login-field-inner-mob { background: #fff; padding: 20px; overflow: hidden; border-radius: 4px; -webkit-border-radius: 4px;  }
    .login-btn{ box-shadow: 2px 2px 1px #a7a3a3; -webkit-box-shadow: 2px 2px 1px #a7a3a3;}
    .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 a:after { height: 44px; left: -11px; top: 21px;}  
    .nav-sub-arrow{ display: block !important}
    .max991-pr-0{ padding-right: 0 !important}
    .max991-pl-0{ padding-left: 0 !important}
}



@media (max-width:639px) {
   .attendance-filter p { padding: 15px 30px 0 0;}
}

@media (max-width:567px) {
.max567-fullwidth{ width: 100%;}
.max567-mt-15{ margin-top: 15px;}
}

@media (max-width:480px) {
.xs-lg-fullwidth, .max480-fullwidth{ width: 100%;}
.max480-mt-15{ margin-top: 15px;}
}

@media (min-width: 1280px) {  
    .side-nav { width: 4%} 
    .main {margin:80px 0 0 6%; padding:0;  -webkit-transition: all 0.3s; transition: all 0.3s;}
    .main.width {width: 92%;}
    .side-nav.width-menu, .side-nav.width { width: 18%; transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s;}
    .top-welcome-text{ padding-left: 5%; -webkit-transition: all 0.3s; transition: all 0.3s;}
    .data-bg{ min-height: 530px}
    
    .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: 991px) and (max-width:1279px) {     
    .side-nav{ width: 5%}
    .side-nav.width-menu, .side-nav.width { width: 20%; transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s;}
    .side-nav .logo-large{ width: 140px}
}

@media (min-width: 1024px) {  
    .navi li .nav-submenu a{ line-height: 26px; font-size: 11px; padding-left: 30px;}
    .nav-submenu li a:before, .nav-submenu li a:after { content: ""; position: absolute;  background: #3d6dc1; top: 13px; left: 17px;}
}



.report-listmain a{ color: var(--secondary-color);}

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

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

@media (max-width: 992px) {
    .page-head {
        font-size: 18px;
    }
    .nav-sub-arrow{ display: block !important}
}


@media (max-width: 768px) {
    .page-head { font-size: 20px;}
    .xs-mt-15{ margin-top: 15px !important;}
    .xs-p-0{ padding:0 !important}
}

.aging-report-tab-inner.active{ background-color: #ffdce0 !important; padding: 10px;}
.aging-report-tab-inner{ line-height: 20px;}



/* ========== New Styles - Started Date 7th May 2019  ========== */

/* Settings Page ----------------------------  */
.no-padding-shadow .el-card__body{ padding: 0 !important; }



/* 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; 
  }

  .mainBody { padding: 0; }
  .mainWrapper .main  { margin-top: 10px !important;}
  .mainWrapper .data-bg.data-section  { padding:0px !important;}
  .dataHead { 
    padding:20px 30px !important; vertical-align: middle;
    width: 100%;
    display: inline-block;
  }
  .dataBody{padding: 30px;}
  .no-data_av { margin: 100px 0;}


.el-button.filter-btn{ padding: 0 12px 0 30px !important; width: auto;}
.popup-add-section{ background: #f3f3f3; padding: 15px; border: 1px solid #e6e6e6;}
.pr-15{ padding-right: 15px !important}
.pl-15{ padding-left: 15px !important}

/***ui element***/
.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;; border-radius: 10px !important;;}
.el-dialog__body { padding: 15px !important; width: 95% !important;; margin: -20px auto 0 !important; background: #fff !important; border-radius: 4px !important; line-height: 22px !important;}
.el-form-item { margin-bottom: 25px !important;}
.el-button{ padding: 12px 15px !important; border-radius: 50px !important; -webkit-border-radius: 50px !important; letter-spacing: 0.4px;}
.el-checkbox__inner{ width: 18px !important; height: 18px !important;}
.el-form-item__content{ 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; 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{ border: 1px solid var(--input-border-color) !important}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important}
.el-checkbox__inner::after{ left: 6px !important; top: 3px !important}
.el-checkbox__inner:hover { border-color: var(--primary-color) !important}
.el-button + .el-button{ margin-left: 4px !important}
.el-table th{ background: #f8f8f8 !important; }
.el-button--primary.is-disabled, .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: var(--primary-color) !important; border: 1px solid var(--primary-color) !important;}
.el-radio__inner:hover { border-color: var(--primary-color) !important;}
.el-radio__input.is-checked+.el-radio__label { color: var(--text-color) !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;}
.el-radio__inner{ border: 1px solid #bebebf !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-form-item__label{text-align: left !important}
.el-checkbox__input.is-checked + .el-checkbox__label{ color: var(--text-color) !important;}

.el-form-item__label{ line-height: 24px !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: var(--text-color) !important;}
.el-button{ font-size: var(--font-size) !important;}
.el-table td, .el-table th { padding: 9px 0 !important;}
.el-input, .el-date-editor .el-range-input, .el-date-editor .el-range-separator{ font-size: var(--font-size) !important; }
.el-table td, .el-table th.is-leaf { border-bottom: 1px solid #ECECF1 !important;}
.el-table th.is-leaf { border-top: 1px solid #ECECF1 !important;}
.el-date-editor .el-range-input{ width: 80% !important; }

/***END ui element***/

.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.open{ border: 1px solid #f39090; }
.status-select.new{ border: 1px solid #90d6f9; }
.status-select.closed{ border: 1px solid #9ad69a;}

.status-select.open input[type="text"]{ color: #a90e0e}
.status-select.new input[type="text"]{ color: #00a0ef}
.status-select.closed input[type="text"]{ color: #0e8c0e }

.status-select .el-input__suffix{ top: 8px;}
.status-select .is-focus .el-input__suffix{ top: -8px;}

.status-select.large .el-input__suffix{ top: 5px;}
.status-select.large .is-focus .el-input__suffix{ top: -5px;}

.status-select .el-input .el-select__caret{ font-size: 12px !important}

.status-select.large .el-input .el-select__caret { font-size: 14px !important;}


.status-select.open .el-input .el-select__caret{  color: #a90e0e}
.status-select.new .el-input .el-select__caret{  color: #00a0ef}
.status-select.closed .el-input .el-select__caret{  color: #0e8c0e}
.complaint-img{ font-size: 18px;}


.status-select-box.open input[type="text"]::placeholder{ color: #a90e0e}
.status-select-box.closed input[type="text"]::placeholder{ color: #0e8c0e }

.status-select-box.open .el-input__inner{ border-color: #a90e0e}
.status-select-box.closed .el-input__inner{ border-color: #0e8c0e}

.leave-popup-info .box-inner{ padding: 10px; border-radius: 4px; -webkit-border-radius: 4px; }
.leave-popup-info .box-inner span{ font-size: 20px; display: block;}

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

.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-input--suffix .el-input__inner{ height: 30px}
.bottom-pagination .el-input__icon{ line-height: 30px; text-align: center;}

.customMarker { position: absolute; cursor: pointer; background: #fff; width: 50px; height: 50px; margin-left: -50px; margin-top: -110px;border-radius: 50%; padding: 3px;}
.customMarker:after { content: ""; position: absolute; bottom: -5px; left: 19px; border-width: 7px 7px 0;border-style: solid; border-color: #fff transparent; display: block;width: 0;}
.customMarker img { width: 100%; height: 100%; border-radius: 50%; max-width: 100%; max-height: 100%;}
.customMarker span { position: absolute; top: -24px; background: #b32828; color: #fff; padding: 3px 5px; border-radius: 4px; left: 0;
    white-space: nowrap;}
.msg-textarea textarea{ border: 0 !important}
.msg-filter .el-date-editor .el-range-separator { width: 10% }
.download-text-btn { border: 1px solid var(--secondary-color); color: var(--secondary-color); padding: 6px; border-radius: 4px; font-size: 13px;}

/*INPUT STYLE */

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

.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; }

.icon-input label { font-size: 12px !important; color: #7b7b7b; 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-textarea{ margin-top: 5px;}
.icon-input .input-icon { background: #e6697e; width: 28px; height: 28px; border-radius: 50%; text-align: center; color: #fff;  line-height: 28px !important; float: left; position: absolute; left: 0; top: 0;}

.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-icon-date{ display: none}
.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.multi-select .el-select__tags {left: 40px;}
.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:var(--label-color); margin-left: 2px;}



.popup-scroll{height: calc(100% - 180px) ; overflow-y: auto; overflow-x: hidden}
.drawer-div{ position: fixed; top: 0; bottom: 0; right: 0; background: #fff; height: 100%; z-index: 11}
.drawer-footer{ height: 50px;}
.drawer-head{ border-bottom: 1px solid #ddd; margin: 0 -15px 30px; height: 70px; padding: 20px 30px; }
.drawer-close-btn { cursor: pointer; font-size: 15px; background-color: transparent; width: 26px; height: 26px; float: right; border: 2px solid var(--primary-color); border-radius: 50%; -webkit-border-radius: 50%; text-align: center; color: var(--primary-color);
    line-height: 22px; font-weight: 600;}
.drawer-head h4{ margin:5px 0 0; color: var(--secondary-color);}
.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: 10}


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

.custom-btn{ color: var(--secondary-color); height: 38px !important; width: 38px; border-radius: 50px !important; vertical-align: middle;
padding: 0 !important; border-color: #ececec !important; background-color: #f5f5f5 !important;}
.custom-btn.add-btn{ border-radius: 50%; -webkit-border-radius: 50%; background:#D8596E !important; color: #fff !important; width: 38px; text-align: center; padding: 0 !important; border: 1px solid #f98e9d !important;}
.custom-btn.is-disabled{ opacity: 0.7}
.custom-btn.add-btn:hover{ background: var(--primary-color); }
.custom-btn.delete-btn{ font-size: 15px !important; }
.custom-btn.delete-btn, .custom-btn.btn-assign, .custom-btn.btn-doc-download{ padding: 0 !important; width: 38px;}
.custom-btn.btn-assign{ font-size: 14px !important;}
.custom-btn.btn-doc-download{ font-size: 16px !important;}


.search-keyword .el-input__inner{ border: 0; background:#f5f5f5 url(../images/ico/search-icon.svg) no-repeat; background-position: left; background-size: 12px; padding-left: 38px !important; border-radius: 50px !important; -wekit-border-radius: 50px !important; height: 38px !important; background-position: 15px center} 

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

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

.page-title{ float: left;}
.head-icons{ float: right}

@media(max-width:1279px){
    .max1279-mt-15{ margin-top: 15px;}
}

@media(min-width:1024px) and (max-width:1279px){
    .top-welcome-text{ padding-left: 5%; margin: 0;}
    .main.main-menu-pinned { width: 76%; margin-left: 22%;}
    .main.all-menu-pinned{ width: 51%}
    .top-welcome-text.welcome-menu-pinned { padding-left: 13%;}
    .user-overview>div{ padding: 0 10px;}
    
}

@media(min-width:992px){
    .battery-list-col:nth-child(3n+1){ clear: left}
    .location-tab a.active::after{ content: ''; border-left: 20px solid var(--primary-color) !important; border-top: 20px solid transparent;  border-bottom: 20px solid transparent; position: absolute; right: -8px; top: 9px;}
    .battery-page .bottom-pagination .left{ width: 84%}
    .battery-page .bottom-pagination .right{ width: 16%}
    .search-keyword { width: auto !important; margin-right: 10px;}
    .head-main .colum { width: auto !important;}
}

@media(min-width:1280px){
     .battery-page .bottom-pagination .left{ width: 88%}
     .battery-page .bottom-pagination .right{ width: 12%}
}


@media(max-width:991px){
    .battery-list-col:nth-child(2n+1){ clear: left}
    .navi a{ padding: 15px 12px; width: 100%; display: inline-block;}
    .login-field-inner-mob .el-form{ margin-top: 20px;}
    .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 var(--primary-color); margin: auto;}
    .location-tab a{ margin-right: 15px;}
    .battery-page .bottom-pagination .left{ width: 100%}
    .battery-page .bottom-pagination .right{ display: none}
    .max991-mt-15{ margin-top: 15px;}
    .search-keyword{ margin-bottom: 15px;}
}

@media(min-width:768px){
    .feedback-dtl-col:nth-child(3n+1){ clear: left}
    .update-leave-info .update-leave-col:nth-child(3n+1){ clear: left}
    .min768-pr-0{ padding-right: 0 !important}
   
}
@media (max-width:767px){
  
    .top-info-col.user{ margin-bottom: 10px;}
    .top-info-col.user .inner{ padding: 10px;}
     .feedback-dtl-col:nth-child(2n+1){ clear: left}
    .xs-mt-20{ margin-top: 20px;}
    .update-leave-info .update-leave-col:nth-child(2n+1){ clear: left}
   
    .xs-mt-15{ margin-top: 15px}
/*    .data-bg { padding:8px 0 15px !important;}*/
    .el-date-range-picker__content{ width: 100% !important;}
    .max767-mt-15{ margin-top: 15px;}
    .max767-mt-10{ margin-top: 10px;}
    
   
}

@media(min-width:768px) and (max-width:767px){
.feedback-dtl-col:nth-child(2n+1){ clear: left}
}

@media (min-width: 600px) {
    .min600-text-right{ text-align: right}
    .bottom-pagination .el-pagination .el-select .el-input{  float: right}
}

@media (max-width: 599px) {
    .max599-w-100{ width: 100% !important}
    .max599-mt-15{ margin-top: 15px !important}
    .max599-mb-15{ margin-bottom: 15px !important}
    .el-dialog__title { line-height: 24px !important; font-size: 18px !important;}
    .max599-p-0{ padding: 0}
    .bottom-pagination .el-pagination .el-select .el-input{ width: 100% !important}
    .max599-text-right{ text-align: right}
    .bottom-pagination .el-pager li{ margin-bottom: 5px !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;}
    .bottom-pagination .right{ display: none}   
    .bottom-pagination .btn-prev, .bottom-pagination .el-pager{ float: left}

    
}


/* DASHBOARD */
   
    .dashboard-border-box.target { background: #fff; }
    .dashboard-target-col h4 { margin: 6px 0 0; }
    .dashboard-target-col .achieved-target h4 { color: #007bff; }
    .dashboard-target-col h6{ color: #7b7b7b; margin:4px 0 0; font-size: 13px;}
    .dashboard-target-col .total-target, .dashboard-target-col .achived-target{ margin-bottom: 12px;}
    .dashboard-target-col p { font-size: 12px; margin: 0 0 15px;}
    .dashboard-target-col h5{ text-transform: uppercase; margin: 15px 0 10px; font-weight: 600;}
    .dashboard-top-left p b{ color: #333}
    .expect-sales-price p {font-size: 12px; }
    .expect-sales-price h4 { color: #ed2c6b}

    .dashboard-sales-row { border-bottom: 1px solid #e2e2e2; padding-bottom: 30px;}
    .bg-white { background: #fff;}
    .dashboard-activity-status a { display: inline-block; border-radius: 50px; -webkit-border-radius: 50px; font-size: 12px; padding: 4px 10px; border: 1px solid var(--secondary-color) }
    .dashboard-activity-status a.active { background: var(--secondary-color) !important; color: #fff }
    .activity-status-row { margin-top: 10px; }
    .activity-status-row .status-col h4 { margin: 0 0 5px; font-size: 20px; color: #a0bcec; float: left; width: 100%;}
    .activity-status-row .status-col span.ongoing { color: #afafaf; float: left; width: 100%; }
    .activity-ongoing span { display: inline-block; width: 62px; height: 62px; border-radius: 50%; background: #1ccde2; text-align: center; padding-top: 15px; color: #fff; font-size: 32px;}
    .activity-ongoing .inner { background: #b8eff6; padding: 25px; border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; height: 165px;}
    .activity-ongoing-right span { width: 30px;}
    .activity-ongoing-right .meeting span {color: #1ccde2; font-size: 20px;}
    .dashboard-sales-row .title h4{ line-height: 24px;}
    .customer-activity-status .col h4{ margin: 0 0 5px; font-size: 20px;}
    .customer-activity-status .col{ border-right: 1px solid #e0dfdf; margin-top: 30px;}
    .customer-activity-status .col:last-child{ border-right: 0}

    .customer-activity-status .col.meeting p{ color: #f1646c; }
    .customer-activity-status .col.call p{ color: #1ecab8; }
    .customer-activity-status .col.email p{ color: #4ac7ec; }
    .customer-activity-status .col.chat p{ color: #ecaf08; }
    .dashboard-lead-status .status-text h4{ font-size: 20px;}
    .activity-ongoing-right .call span { color: #1ec111; font-size: 13px; }
    .activity-ongoing-right .mail span { color: #fa9340; font-size: 15px; }
    .activity-ongoing-right .chat span { color: #609af2; font-size: 18px;}
    .activity-ongoing-right .block { margin-bottom: 10px; }
    .activity-ongoing-right .block:first-child { margin-bottom: 3px; }
    .activity-ongoing-right { background: #effbfa;height: 165px; border-radius: 0 4px 4px 0; -webkit-border-radius: 4px 0 0 4px; padding: 35px;}
    .dashboard-block .el-input__inner { border: 0; background: #fff; height: 30px;  line-height: 25px; border-radius: 50px !important; -webkit-border-radius: 50px !important; font-size: 13px; padding: 0 15px !important; border: 1px solid #f0ecef;}
    .dashboard-block .el-select { width: 110px;}
    .dashboard-block .el-select input[type="text"]::placeholder { color: #a1a1a1 }
    .dashboard-block .el-select .el-input .el-select__caret { color: #333; font-size: 12px; }
    .dashboard-block .el-input__icon { line-height: 25px; }
    .dashboard-lead-status p { font-size: 13px;}
    .dashboard-target-graph { margin-top: 28px;}
    .target-bar b { color: var(--text-color)}
    .dashboard-top-right .border { border-right: 1px solid #e2e2e2 }
    .table-style .today_highlate span { background: #65d05b; color: #fff; cursor: pointer;  display: inline-block; width: 38px; height: 38px; border-radius: 50%; text-align: center; line-height: 38px; }
    .table-style .today span {  background: #1dcee2; color: #fff; cursor: pointer; display: inline-block; width: 38px; height: 38px; border-radius: 50%; text-align: center; line-height: 38px; }
    .target-color-row .el-progress-bar__inner { background-color: #1875df !important; }
    .target-color-row .el-progress-bar__outer { background-color: #e9f1fb !important; }
    .activity-status-row .status-col-inner { height: 100px; background: #fff; padding: 15px; border: 1px solid #e8e8e8;}
    .activity-status-row .status-col-inner p { color: #fff; float: left }
    .activity-status-row .status-col-inner .meeting p { background: #1ccde2; font-size: 13px; margin-top: 15px }
    .activity-status-row .status-col-inner .call p { background: #31c625 }
    .activity-status-row .status-col-inner .email p { background: #fa9340 }
    .activity-status-row .status-col-inner .chat p { background: #609af2 }
    .status-col.meeting p { color: #f1646c;}
    .status-col.call p { color: #1ecab8;}
    .status-col.email p { color: #4ac7ec; }
    .status-col.chat p { color: #ecaf08; }
    .activity-status-row .status-col span.icon { position: absolute; right: 30px; }
    .activity-status-row .status-col .icon-meeting { font-size: 26px; }
    .activity-status-row .status-col .icon-call { font-size: 18px; }
    .activity-status-row .status-col .icon-mail-1 { font-size: 20px; }
    .activity-status-row .status-col .icon-chat { font-size: 25px; }
    .dashboard-target-col .progress { height: 6px; box-shadow: none; -webkit-box-shadow: none; float: left; width:calc(100% - 30px);  margin: 2px 0 8px 15px; background-color: #fff;}

    .dashboard-target-col .progress-bar { background-color: #f9943a }

    .expect-sales-price span { font-size: 16px; }
    .expect-sales-price span.el-icon-caret-bottom { color: #cc0c0c }
    .expect-sales-price span.el-icon-caret-top { color: green}
    .targrt-cat-row { margin: 20px 0 0 46px;}
    .targrt-cat-row:first-child { margin-top: 30px}
    .targrt-cat-row span {  width: 8px; height: 8px; margin: 5px 10px 0 0;}
    .targrt-cat-row.one span { background: #007bff }
    .targrt-cat-row.two span { background: #28a745 }
    .targrt-cat-row.three span { background: #17a2b8 }
    .targrt-cat-row.four span { background: #ffc107 }
    .targrt-cat-row.five span { background: #dc3545 }

    .dashboard-customer-col{ float: left; padding: 0 15px; font-size: 13px;}
    .dashboard-customer-col span{ margin-right: 15px;}
    .dashboard-customer-col.meeting span{ color: #f1646c; font-size: 18px;}
    .dashboard-customer-col.call span{ color: #1ecab8;}
    .dashboard-customer-col.email span{ color: #4ac7ec; font-size: 15px;}
    .dashboard-customer-col.chat span{ color: #ecaf08; font-size: 18px;}
    .dashboard-customer-col.ongoing span{ border-radius: 50%; -webkit-border-radius: 50%; width: 40px; height: 40px; color: #fff;
    line-height: 44px; text-align: center; font-size: 18px; background: #f1646c}
    .dashboard-customer-col.ongoing h4{ color: #f1646c; }
    .dashboard-activity-status.top{ background: #f3f9fe;}


    .activity-status-row .icon-meeting{ color: #f1646c;}
    .activity-status-row .icon-call{ color: #1ecab8;}
    .activity-status-row .icon-mail-1{ color: #4ac7ec;}
    .activity-status-row .icon-chat{ color: #ecaf08;}
    .dashboard-select .selec-bg-none .el-input__inner, .selec-bg-none .el-input__inner{ background: transparent; border-width: 0 !important; width: 100px;}




.dash-board-target .inner{ border-radius: 6px; float: left; width: 100%}
.dashboard-row{ border-radius: 10px;}


.dashboard-target-col.disb .inner{ background: #ffe7e7}
.dashboard-target-col.disb .achived-target h4{ color: #fe4a4d}
.dashboard-target-col.disb .progress-bar{ background-color: #fe4a4d }

.dashboard-target-col.nctb .inner{ background: #ebfce9}
.dashboard-target-col.nctb .achived-target h4{ color: #37c926}
.dashboard-target-col.nctb .progress-bar{ background-color: #37c926 }

.dashboard-target-col.cross-sell .inner{ background: #fff0e1}
.dashboard-target-col.cross-sell .achived-target h4{ color: #ff9521}
.dashboard-target-col.cross-sell .progress-bar{ background-color: #ff9521 }

.dashboard-target-col.net-growth .inner{ background: #e0f5fa}
.dashboard-target-col.net-growth .achived-target h4{ color: #30d4f0}
.dashboard-target-col.net-growth .progress-bar{ background-color: #30d4f0 }

.dashboard-target-col.retail-loan .inner { background: #e9e8ff;}
.dashboard-target-col.retail-loan .achived-target h4 { color: #726cef;}
.dashboard-target-col.retail-loan .progress-bar { background: #726cef;}


.dashboard-top-right .el-select { background: none; border: 0}
.dahboard-leads{ background: #fff; border-radius: 6px;}
.dahboard-leads-left{ background: #7aa5ea; color: #fff; border-radius: 6px 0 0 6px; padding: 20px 15px 42px}
.dahboard-leads-left .icon-lead { color: #000; font-size: 50px; margin: 20px 0 15px; display: inline-block; width: 100px; height: 100px; background: #fff; line-height: 110px;  border-radius: 50% }
.dahboard-leads-left h4, .dahboard-leads-left h3{ color: #fff; margin-top: 20px;}

.lead-right-top{ margin-top: 20px;}
.lead-right-top p{ margin-top: 2px;}
.lead-right-top .inprogress, .lead-right-top .inprogress h3 { color: #1278e4}
.lead-right-top .converted, .lead-right-top .converted h3 { color: #29b91b}
.lead-right-top .failed, .lead-right-top .failed h3 { color: #dd75e6}


.lead-right-bottom{ background: #dbe6f3; float: left; width: 100%;  padding: 15px 0 24px 0; margin-top: 50px; border-radius: 0 0 6px 0 ;}

.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 .progress-bar{ border-radius: 10px; -webkit-border-radius: 10px; box-shadow:none; -webkit-box-shadow:none}

.lead-right-bottom .status-text.hot { color: #fa4a46 }
.lead-right-bottom .status-text.warm { color: #ffb20d}
.lead-right-bottom .status-text.cold { color: #0cd2f9 }

.leadiactivity-top a{ border-radius: 50px; background: #fff; border: 1px solid #f3eaed; color:#061638; display: inline-block; padding: 5px; width: 72px; text-align: center; opacity: 0.6;}
.leadiactivity-top a.active{ background: #fff !important; opacity:1;}
.leadiactivity-top .el-input__inner{ height: 26px !important}

.lead-activities-col{ background: #fff; border-radius: 6px; -webkit-border-radius: 6px; padding: 30px 15px 12px 15px;
border-right: 8px solid #f3f7fa; margin-top: 8px;}

.lead-activities-col h3{ margin-top: 8px;}
.lead-activities-col h5{ margin: 0 0 2px; font-weight: 600;}
.lead-activities-col p{ color: #7b7b7b; font-size: 12px;}
.lead-activities-col p.ongoing{ color: #ef2a46}
.lead-activities-col span{ display: inline-block; height: 60px; width: 60px; border-radius: 50%; color: #fff; line-height: 62px;
    margin-top: 5px;}

.lead-activities-col.meetng .ico{ background: #3cd1fb; font-size: 23px; line-height: 65px;}
.lead-activities-col.meetng h5{ color: #3cd1fb }

.lead-activities-col.call .ico{ background: #55ca46; font-size: 17px;}
.lead-activities-col.call h5{ color: #55ca46 }

.lead-activities-col.mail .ico{ background: #fdad00; font-size: 18px;}
.lead-activities-col.mail h5{ color: #fdad00 }

.lead-activities-col.chat .ico{ background: #fe6fb1; font-size: 22px; line-height: 64px;}
.lead-activities-col.chat h5{ color: #fe6fb1 }
.lead-right-bottom .status-text{ margin-top: 12px;}
.lead-right-bottom .status-text p{ font-weight: 500}

.status-text.hot .progress-bar{ background-color: #fbb8b8;}
.status-text.warm .progress-bar { background-color: #ffe09e;}
.status-text.cold .progress-bar { background-color: #9deefd;}

.status-text .progress-striped .progress-bar, .progress-bar-striped { -webkit-background-size: 5px 5px; background-size: 5px 5px}

.status-text.hot .progress-striped .progress-bar, .status-text.hot .progress-bar-striped {
    background-image: -webkit- linear-gradient(45deg, rgba(235, 47, 63, 0.15) 25%, transparent 25%, transparent 50%, rgba(244, 78, 78) 50%, rgba(244, 78, 78) 75%, transparent 75%, transparent);
    
    background-image: -o-linear-gradient(45deg, rgba(244, 78, 78) 25%, transparent 25%, transparent 50%, rgba(244, 78, 78) 50%, rgba(255, 244, 78, 78) 75%, transparent 75%, transparent);

    
    background-image: linear-gradient(45deg, rgba(244, 78, 78) 25%, transparent 25%, transparent 50%, rgba(244, 78, 78) 50%, rgba(244, 78, 78) 75%, transparent 75%, transparent);}



.status-text.warm .progress-striped .progress-bar, .status-text.warm .progress-bar-striped {
    background-image: -webkit- linear-gradient(45deg, rgba(255, 178, 13) 25%, transparent 25%, transparent 50%, rgba(255, 178, 13) 50%, rgba(255, 178, 13) 75%, transparent 75%, transparent);
    
    background-image: -o-linear-gradient(45deg, rgba(255, 178, 13) 25%, transparent 25%, transparent 50%, rgba(255, 178, 13) 50%, rgba(255, 255, 178, 13) 75%, transparent 75%, transparent);

    
    background-image: linear-gradient(45deg, rgba(255, 178, 13) 25%, transparent 25%, transparent 50%, rgba(255, 178, 13) 50%, 
        rgba(255, 178, 13) 75%, transparent 75%, transparent);}


.status-text.cold .progress-striped .progress-bar, .status-text.cold .progress-bar-striped {
    background-image: -webkit- linear-gradient(45deg, rgba(10, 212, 249) 25%, transparent 25%, transparent 50%, rgba(10, 212, 249) 50%, rgba(10, 212, 249) 75%, transparent 75%, transparent);
    
    background-image: -o-linear-gradient(45deg, rgba(10, 212, 249) 25%, transparent 25%, transparent 50%, rgba(10, 212, 249) 50%, rgba(10, 212, 249) 75%, transparent 75%, transparent);

    
    background-image: linear-gradient(45deg, rgba(10, 212, 249) 25%, transparent 25%, transparent 50%, rgba(10, 212, 249) 50%, 
        rgba(10, 212, 249) 75%, transparent 75%, transparent);}


.dashboard-expected-sales{ background: #f9e6ee; border-radius: 6px; padding-bottom: 15px;}
.dashboard-expected-sales h3{ color: #f63a85}
.dashboard-expected-sales .arrow.up{ color: #07d183}
.dashboard-expected-sales .icon-sales-1{ font-size: 48px; color: #efb5cb; margin-top: 20px; display: inline-block}

.dashboard-users-info{ background: #deeeec; border-radius: 6px; padding-bottom: 15px; margin-top: 10px;}
.dashboard-users-info .status-col span{ margin-right: 3px; display: inline-block; width: 12px; height: 12px; border: 2px solid #fff; 
    border-radius: 50%; position: relative; top: 2px;}
.dashboard-users-info .icon-users{ color: #aedbd1; font-size: 74px;}
.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-users-info .status-col p{ color: #7b7b7b}
.dashboard-users-info .status-col h4{ margin-top: 0}
.dashboard-users-info .status-col{ margin-top: -10px;}
.dashboard-target-main{ border-radius: 10px 10px 0 0; background: #fff; float: left; width: 100%; padding: 8px 0 20px;}

.dashboard-select1 .el-input__inner{ border: 0; width: 100px; background: none;}
.dashboard-select1 .el-input__icon{ line-height: 32px;}
.dashboard-select2 {border: 1px solid #e8e8e8; border-radius: 50px !important; }
.dashboard-select2 .el-input__inner{ background: #fff; border-radius: 50px !important; border: 0; width: 110px; 
    padding: 0 15px !important; }
.dashboard-select2 .el-input__icon{ line-height: 34px;}
.dashboard-middle-section{ background: #f8f9f9; padding: 15px 15px 25px; border-radius:0 0 10px 10px}
.dashboard-main{ box-shadow:0 0px 22px rgba(136,190,243,0.1); float: left; width: 100%;}
.users-online-refresh span{ color: #fff; font-size: 11px; position: relative; top: -2px; margin-right: 5px;}

.datepicker-custom .el-date-editor .el-range__icon{ margin-left: 0; left: -2px; position: relative; top: 1px;}
 .datepicker-custom{ border-radius: 50px; padding:0 6px 0 15px; background: #f5f5f5; height: 36px;}
.datepicker-custom .el-date-editor{ background: transparent; border: 0;}
.datepicker-custom .el-range-editor .el-range-input{ background: #f5f5f5}

@media(max-width:1279px){
    .dashboard-expected-sales{ padding-bottom: 32px; margin-top: 10px}
}

 @media(min-width:992px) {
     .dashboard-customer-col.ongoing{ margin-top: 32px;}
     .dashboard-customer-col{ margin: 50px 0 20px;}
     .upcoming-activities-inner, .activity-calandaer-inner{ height: 450px;}
}

 @media(max-width:991px) {
     .dashboard-activity-status{ margin-top: 30px;}
     .dashboard-customer-col{ margin: 20px 0 0}
     .dashboard-customer-col.ongoing{ margin-top: -1px}
     .customer-activity-status .col{ margin-bottom: 30px;}
}


@media(min-width:768px) {
  .lead-activities-col{ height: 138px;}
    .dashboard-target-col{  margin-top: 8px; padding:  0 16px 0 0}
    .dashboard-target-col:last-child{ padding-right: 0}

    .datepicker-custom{ width: 200px !important; display: inline-block; margin-right: 5px;}
    .datepicker-custom .el-date-editor{ background: transparent; border: 0;}
}

@media(max-width:767px) {
    .dashboard-target-col {margin-top: 12px; float: left; width: 100%;}
    .dashboard-activity-status { margin-top: 15px }
    .activity-status-row .status-col{ margin-bottom: 15px;}
    .customer-activity-status h4, .dashboard-activity-status h4{ margin-bottom: 15px;}
    .dashboard-activity-status a{ margin-bottom: 10px;}
    .dashboard-customer-col{ margin: 0 0 15px}
    .dashboard-customer-col.ongoing{ margin-top: 25px;}
    .lead-activities-col{ height: 180px;}
    .datepicker-custom{ margin: 15px 0}
    .daily-gram-rate .inner{ padding-bottom: 15px;}
}

@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: -50px;
    margin: auto;
    left: 0;
    right: 0;}
}

@media(max-width:599px) {
    .target-color-row .achieved-target { padding-left: 0 }
    .activity-ongoing-right { padding: 20px 12px 5px; height: auto; }
    .dashboard-activity-status a { width: 75px; }
    .max599-pl-0 { padding-left: 0 !important }
    .home-data-table .table-main {  white-space: nowrap; max-width: 100%; overflow-x: auto; }
    .dashboard-top-right .el-select{ margin-top: 5px;}
    .lead-right-top .col{ margin-top: 15px;}
}

@media (min-width: 1600px) {  
    .side-nav { width: 3.2%} 
}

@media (min-width: 1920px) {  
    .side-nav { width: 2.9%} 
}
@media (min-width: 1500px) and (max-width:1600px){  
    .side-nav { width: 3.2%} 
}

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