/*!
 * 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{ 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: 16px;}
.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-stock.nav-icon{ top: 4px;}
.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}
.ico-data-collection.nav-icon{ font-size: 21px; top: 5px;}
.icon-report.nav-icon, .ico-feedback.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.el-icon-tickets { font-size: 18px; top: 2px;}
.nav-icon.icon-dealer-1 { font-size: 16px; top: 3px;}
.nav-icon.icon-reference { font-size: 15px; top: 3px; left: 1px;}
.nav-icon.icon-fingerprint-2 { font-size: 15px; 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;}
    .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(213,39,181); border: 1px solid rgb(213,39,181);}
.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: 10px 30px 0 0; margin-bottom: 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; position: absolute; top: -9px; min-width: 24px; height: 24px; background:#F56C6C; 
    border: 4px solid #fff; right: -12px; z-index: 1; color: #fff; font-size: 9px; line-height: 16px; font-family: 'Ubuntu', sans-serif;}
.head-notification.one{ position: relative; top: 1px;}
.head-notification.two{ position: relative; top: 2px;}

.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: var(--secondary-color); 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; display: none !important}
.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: 20px;}
.notification-div .head .notification-signal{ min-width: 20px; height: 20px; top: -7px; background: #3cb6f1; border: 0; line-height: 18px; 
    font-size: 10px; right: -20px;}


.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;}
.input-icon.icon-title{ font-size: 14px; padding-top: 2px;}
.input-icon.icon-category-icon{ font-size: 15px; padding-top: 2px;}
.input-icon.icon-dealer-1{ font-size: 13px; padding-top: 1px;}

/** END INPUT ICONS **/

.filter-div .el-input__inner::placeholder{ color: rgba(0,0,0,0.4)}



@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;}
    .popup-xs{
        width: 95% !important;
    }
    .merchandising-data-details-images li{

    }
}

@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: none !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; 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;}
.icon-input .el-select__tags{ left: 38px !important}



.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 NEW */
.dashboard-select1 .el-input__inner { border: 0; background: none;}
.dashboard-target-main{ background: #253f99; border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0;}
.dashboard-target-main h4{ color: #fff;}
.dashboard-target-main .inner{ background: #fff; border-radius:6px;  padding: 30px; float: left; width: 100%; margin-top: 8px;
    box-shadow: 0 0px 30px rgba(37,63,153,0.1); -webkit-box-shadow: 0 0px 30px rgba(37,63,153,0.1);}
}
.dashboard-target-main .inner .colum{ flex: 1}
.dashboard-target-main .inner .colum h3{ margin: 0}


.dashboard-target .total-target h3{ color: #ed2940}
.dashboard-target .achieved-target h3{ color: #33d3a8}
.dashboard-target .progress{ height: 5px; box-shadow:none; -webkit-box-shadow:none; margin: 20px 0 6px;}
.dashboard-target .progress-bar{ background: #33d3a8}
.dashboard-target .percentage{ color: #7b7b7b}
.dashboard-target .percentage b{ font-size: 16px; color: #000}

.dashboard-col .icon-div{ width:100px; height: 100px; border-radius: 50%; -webkit-border-radius: 50%;}
.dashboard-col .text-div{ width: calc(100% - 90px;); }
.dashboard-col.distributors .text-div{ padding:28px 0 0 20px}
.dashboard-col.distributors .icon-div{ background: #ff8069; padding-top: 20px;}
.dashboard-col.retailer .icon-div{ background: #ffbb59; padding-top: 30px;}
.dashboard-col.retailer .text-div{padding:10px 0 0 20px}
.dashboard-col .text-div h4{ color: #000; font-size: 20px;}
.dashboard-col .text-div span{ color: #7b7b7b}

.dashboard-target .el-input__inner, .dashboard-target .el-input__inner::placeholder { color: #d1dbef !important;}
.dashboard-target .el-input__icon{ line-height: 30px;}

.dashboard-users-info .inner{ background: #fff; float: left; width: 100%; border-radius: 6px; -webkit-border-radius: 6px;
 box-shadow: 0 0px 30px rgba(37,63,153,0.1); -webkit-box-shadow: 0 0px 30px rgba(37,63,153,0.1);}

.dashboard-users-info-col .icon-users{ width: 64px; height: 64px; border-radius: 50%; -webkit-border-radius: 50%; float: left;
border-width: 1px; border-style: solid; line-height: 68px; font-size: 30px;}
.dashboard-users-info-col .text{ float: left; padding:12px 0 0 15px; width: calc(100% - 64px);}
.dashboard-users-info-col.online .icon-users{ color: #07d183; background: #e6faf2}
.dashboard-users-info-col.offline .icon-users{ color: #ed2940;  background: #fde9ec}
.dashboard-users-info-col.leave .icon-users{ color: #3298fc;  background: #eaf4ff}
.dashboard-users-info-col{ margin-top: 20px;}
.dashboard-users-info-col span{ margin-top: 1px;display: block;}

.dashboard-users-info-col.online span{ color: #07d183}
.dashboard-users-info-col.offline span{ color: #ed2940;}
.dashboard-users-info-col.leave span{ color: #3298fc;}

.dashboard-block{ border-radius:10px; -webkit-border-radius: 10px; background: #f3f6fc; padding-bottom: 25px; 
    box-shadow: 0 0px 35px rgba(37,63,153,0.2); -webkit-box-shadow: 0 0px 35px rgba(37,63,153,0.1);}
.dashboard-block-bottom{ background: #fff; margin-bottom: 20px; border-radius:10px; -webkit-border-radius: 10px; 
    box-shadow: 0 0px 35px rgba(37,63,153,0.2); -webkit-box-shadow: 0 0px 35px rgba(37,63,153,0.2);}

.dashboard-block-bottom .table-col{ border-radius: 10px; border: 1px solid #f0f3f8; overflow: hidden;}
.dashboard-block-bottom .el-input__inner, .dashboard-block-bottom .el-input__inner::placeholder, 
.dashboard-sales-graph  .el-input__inner, .dashboard-sales-graph .el-input__inner::placeholder{ color: #a1a1a1 !important;}

.dashboard-block-bottom .el-table th{ background: #e4e9f3 !important; text-transform: none !important}
.dashboard-block-bottom .el-input__icon, .dashboard-sales-graph .el-input__icon{line-height: 32px;}
.dashboard-block-bottom .el-select .el-input .el-select__caret,
.dashboard-sales-graph .el-select .el-input .el-select__caret{ color: var(--secondary-color)}
.dashboard-block-bottom .el-input__suffix{ right: 0}
.dashboard-block-bottom h4{ color: var(--secondary-color)}

.dashboard-sales-graph .bottom span{ display: inline-block; width: 16px; height: 16px; background: #e35285; border-radius: 50%; 
-webkit-border-radius: 50%; margin-right: 3px; position: relative; top: 2px;}
.dashboard-sales-graph .bottom{ color: #7b7b7b}
.dashboard-block-bottom .el-select{ background:#f2f2f2; border-radius: 50px; -webkit-border-radius: 50px; padding: 0 5px 0 15px; 
margin-right: 5px;}
.dashboard-block-bottom .el-select .el-input__inner, .dashboard-block-bottom .el-select .el-input__inner::placeholder
{ color: #333 !important;}
.dashboard-col.retailer .pending{ color: #ed2940}
.dashboard-target .el-select{ margin-left: 10px;}
.dashboard-target .el-select.cate, .dashboard-target .el-select.year{ width: 70px;}
.dashboard-target .el-select.month{ width: 100px;}
.dashboard-block-bottom .el-select.year{ width: 80px;}
.dashboard-block-bottom .el-select.month{ width: 115px;}
.dashboard-block-bottom .el-select.zone, .dashboard-block-bottom .el-select.branch{ width: 150px;}
.dashboard-sales-graph .el-select{ width: 125px;}

@media(min-width:1280px){
    .dashboard-target-main{height: 140px;} 
    .dashboard-col.distributors, .dashboard-col.retailer{ padding-left: 0}
    .dashboard-users-info{ margin-top: 15px; padding: 0 10px 0 2px;}
    .dashboard-sales-graph{ padding: 20px 40px 0 ;}
    .dashboard-users-info .inner{ padding: 30px 15px;}
}

@media(max-width:1279px){
    .dashboard-col{ margin-top: 15px;}
    .dashboard-users-info{ margin-top: 20px;}
    .dashboard-users-info .inner{ padding: 15px;}
    .dashboard-sales-graph{ margin-top: 20px;}
}

@media(min-width:768px) and (max-width:1279px){
    .dashboard-target-main{height: 360px;}   
}

@media(min-width:768px) {
    .dashboard-target-main .target-status{ display: flex;}
    .dashboard-target-main{ padding: 25px;}
    .dashboard-block-bottom .colum{ padding: 20px 30px 30px;}
    .target-status .colum{ flex: 1}
    .dashboard-block-bottom .filter{ padding-right: 25px;}
    .dashboard-target-main .inner{ height: 162px;}
}

@media(max-width:767px) {
    .dashboard-target-main .inner .colum{ margin-bottom: 20px;}
    .dashboard-target-main{ height: 650px;}
    .dashboard-target-main{ padding: 20px;}
    .dashboard-block-bottom .colum{ padding: 15px;}
    .dashboard-target .percentage, .dashboard-target .percentage b{ font-size: 12px;}
    .dashboard-block-bottom .el-select{ margin-bottom: 15px;}
    .dashboard-target .el-select{ margin-left: 6px;}
}

@media(max-width:599px) {
    .dashboard-block-bottom .el-select.year, .dashboard-block-bottom .el-select.month, .dashboard-block-bottom .el-select.zone, 
    .dashboard-block-bottom .el-select.branch{ width: 132px;}
}


/* END DASHBOARD NEW */


.navi.width li.sub > a::after {
    content: "\e6df";
    font-family: element-icons !important; position: absolute; right: 15px; opacity: 0; transition: opacity .6s;
}

.navi.width li.height > a::after, .navi.width li.sub > a::after {
    opacity: 1; 
}


.merchandising-data-details-images .el-icon-download{
    color: #217AE1;
    width: 15%;
    text-align: right;
    font-weight: 600;
    font-size: 15px;
}
.merchandising-data-details-images li{
    width: 45%;
    float: left;
    padding-right: 30px;
}
.merchandising-data-details-images li p{
    color: #7b7b7b;
    width: 85%;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    text-decoration: underline;
}
.users-online-refresh{ color: #fff;}
@media(max-width:767px){

    .merchandising-data-details-images li{
        width: 100%;
    padding:0;
    }
}