/*!
 * 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:14px;
  --primary-btn:#ed273f;
  --shadow: 5px 5px 12px 0 #f1f1f1;
}

body,
html { font-family: 'Ubuntu', sans-serif; background: #f3f3f3; font-weight:400; color: var(--text-color); font-size: var(--font-size); letter-spacing: 0.4px; height: 100%; overflow-y: 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;}
.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;}

.d-block{ display: block}
.position-relative{ position: relative}


.custom-icon, .el-button .custom-icon{ width: 26px; height: 26px; text-align: center; display: inline-block; border-radius: 4px; 
    color: #fff !important; line-height: 26px !important; cursor: pointer}

.edit-icon{ background: #dbe6f9; color: #2c6ada !important;}
.delete-icon{ background: #f7cdcd; color: #d81717 !important;}
.recent-icon, .details-icon, .el-button.details-icon { background: #efd9f3; color: #d04fe6 !important;}
.el-button.details-icon{ padding: 0 !important; border: 0}
.el-button.details-icon:hover{ background: #efd9f3}
.remove-icon { background: #f7e5c5; color: #ff6d00 !important;}
.download-icon  { background: #d7f0fb; color: #01579b !important;}
.save-icon{ background: #bdf3bd; color: #2bbd2b !important;}

.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;}
.colum-style h5{ margin: 0; font-size: 15px;}

.overview-board-1, .overview-board-total{ background: #daebff; border: 1px solid #7ab5f9; color: #1565C0;}
.overview-board-2{ border: 1px solid #fba665; background: #fbe6d5; color: #FF6F00;}
.overview-board-3{ background: #e7dffb; border: 1px solid #b595fb; color: #651FFF;}
.overview-board-4, .overview-board-online{  color: green; border: 1px solid #7fd648; background: #e9ffe9;}
.overview-board-5, .overview-board-offline{ background: #fbe7e7; border: 1px solid #f9a5a5; 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: 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: 20px;}
.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; }
.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:23px;}
.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-diatance.nav-icon { font-size: 18px; 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: 20px; color: #fff; display: inline-block; font-size: 10px; min-width: 60px; height: 18px; line-height: 18px; 
    text-align: center; padding: 0 6px;}
.status.approved { background: #0e8c0e;}
.status.pending{ background: #ff9b00}
.status.rejected{ background: #d40c0c}
.status.cancelled{ background: #00a0ef}
.status.dispatched{ background: #1976D2}
.status.delivered{ background: #00B8D4}
.status.settled{ background: #4fbb0a}

.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;}
.add-btn.btn { padding: 8px 12px;}
.head-top-icons{ margin-top: 5px;}
.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: 4px; background-color: #fff;}
.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) }
.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: 30px 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{ margin:8px 0 10px 2px; font-size: 15px; color: #848484; float: left; width: 100%; font-weight: 500;}

.right-pane-titile { background: var(--secondary-color); color: #fff; font-size: 14px; position: relative; letter-spacing: 0.7px; padding: 10px; cursor: pointer;}
.users-statistics h3 { font-size: 24px; margin: 0 0 2px;}

.users-statistics div.sf-user-statistics:first-child h3 { color: #00af4d}
.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; /* border: 1px solid #f9f9f9 ; background: #f9f9f9 ;  box-shadow:0px 2px 16px 0px #e0dfdf; -webkit-box-shadow:0px 2px 16px 0px #e0dfdf; */   }
.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;}
.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;}
.addleave-select-type .el-radio-group { margin-top: 10px;}
.route-dlr-list-col{ min-width: 250px; min-height: 95px; padding-right: 30px; margin-left: 15px;}
.dragndrop {  color: var(--primary-text-color); background-color: var(--light-bg); border: dashed 1px #d8d6d6; text-align: center; min-height: 100px; border-radius: 4px; margin-bottom: 15px; position: relative; padding: 15px 0; line-height: 22px; float: left; width: 100%;}

.dragndrop .file-uploder { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; background: #fff; opacity: 0;}
.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: 65px; z-index: 5; height: 100%; -webkit-transition: width 0.3s; transition: width 0.3s; }  
.online-last-time{ font-size: 11px;}

.users-statistics div.sf-user-statistics > div { padding: 12px 2px;}
.users-statistics div span {font-size: 12px; font-style: normal; letter-spacing: 0.4px;}
.users-statistics div.sf-user-statistics:first-child h3 { color: #00a047;}
.users-statistics h3 { font-size: 24px; margin: 0 0 2px;}

#right-pane li.sidebar-users-status { padding:6px 10px; border-bottom: 1px solid #ececec;}
#right-pane li.sidebar-users-status:last-child{ border-bottom: 0; padding-bottom: 0}
.users-statistics div.sf-user-statistics { width: 50%; float: left; border-bottom: 1px solid #dcdcdc;}
.users-statistics div.sf-user-statistics:first-child { border-right: 1px solid #dcdcdc;}
.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;}

@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: #fff !important; background-color: #061838 !important; border-color: #232323 !important; position: relative; padding-left: 30px;}
.filter-btn .icon-filter{ font-size: 13px; 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:6px 10px; border-bottom: 1px solid #ececec; 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-div { position: fixed; background: var(--secondary-color); border: 1px solid #efebeb; z-index: 6; width: 100%; 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;}
.filter-head{ color: #fff; padding: 15px 15px 5px; margin: 0}
.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-div .el-input__inner{ height: 38px;}
.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}
.nav-ul{ height: 100%}
/*.nav-scroll.ps { height: auto !important}*/
.filter-items{ float: left; background: #ebeef5; padding:8px 10px; margin: 10px 10px 0 0; min-width: 100px; border: 1px solid #d7e0f1}
.filter-items span{ margin-top: 1px; margin-left: 5px;}
.location-list-main{ overflow-y: auto; max-height: 392px;}
/*.location .timeline-entry:last-child .timeline-icon::after{ background: none}*/  


.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: 16px; 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%;}
.el-button.btn-assign{ padding: 12px 12px 12px 30px !important}
.avtar-user img{ width: 36px; height: 36px;}
.avtar-user-name{ margin: 10px 0 0 10px}
.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}



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

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


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

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

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

@media (max-width: 1279px) {  

}

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

.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: 12px 12px 12px 30px !important;}
#company-name h5{ font-size: 16px}
.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: 18px !important;}
.el-button{ padding: 12px 15px !important; border-radius: 4px; box-shadow: inset 0 1px 0 hsla(0,0%,100%,.15), 0 1px 1px rgba(0,0,0,.075); letter-spacing: 0.4px;}
.el-checkbox__inner{ width: 18px !important; height: 18px !important;}
.el-form-item__content{ line-height: 26px !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: var(--secondary-color) !important; color: #FFF;}
.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: #f1f4f9 !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-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-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;}

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



@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%}
}

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

@media(min-width:768px){
    .top-info-col.user{ width: 20%}
    .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;}
    
   
}

@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}
    .bottom-pagination .el-pager{ margin-top: 10px;}
    
}