.map-overlay { padding: 27px;
    box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03); }

.map-overlay .submenuremov { right: 6px; top: 10px; }
.map-overlay { padding: 40px 10px 22px; }

.map-overlay .card { border: 1px solid rgba(26, 54, 126, 0.125) !important; }

.map-overlay .geofence-card-view-scroll { -webkit-mask-position: left top; }

.map-overlay .task-card-name { width: 65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

input[class*="select"] {
    height: 100px;
    background-color: #0a6ebd;
}

.new-rule-ui { height: auto !important; }

#pageLoader, #process-page-loader {
    height: 100%;
    width: 100%;
    text-align: center;
    top: 0;
    position: fixed;
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
}

#pageLoader .loader-box, #process-page-loader .loader-box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 25px;
}

.login_user_profile_image {
    width: 4.125rem;
    height: 4.125rem;
    display: block;
    margin: 0 auto;
}

.login_user_card_text {
    display: block;
    vertical-align: middle;
    font-weight: 500;
    line-height: 1.35;
    margin-top: 0;
}

/*Over Map Button*/
.wrapper-over-map {
    top: 43px;
    display: inline-block;
    right: 51px;
    position: absolute;
    border-radius: 4px;
    overflow: hidden;
}

.over-map {
    background: white;
    padding: 20px 25px;
    box-shadow: 1px 1px 9px -2px #0000007d;
    display: none;
}

.over-map > div {
    padding-top: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid #0000001a;
}

.over-map.active {
    display: block;
}

.over-map input {
    margin-right: 10px;
}

.wrapper-btn {
    display: flex;
    align-items: center;
}


.status-btn {
    text-align: left;
    flex: 1;
    margin-left: 16px;
    padding: 3px 8px;
}

.status-btn:active {
    box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #ffffff !important;
}

.status-btn:focus {
    box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #ffffff !important;
}


.status-btn.btn-active {
    box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #ffffff !important;
}


.wrapper-btn .status-btn:first-child {
    margin-left: 0;
}

.status-btn img {
    margin-right: 9px;
}

.all-status-btn {
    color: #fff !important;
}

.on-duty-status-btn {
    color: #fff !important;
    background-color: #63be77 !important;
    border-color: #63be77 !important;
}

.unreachable-status-btn {
    color: #fff !important;
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
}

.off-duty-status-btn {
    color: #fff !important;
    background-color: #ee6464 !important;
    border-color: #ee6464 !important;
}

.new-status-btn {
    color: #fff !important;
    background-color: #aaa !important;
    border-color: #aaa !important;
}

.wrapper-filter {
    background: white;
    padding: 5px 16px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset !important;
    /*height: calc(1em + 1rem + 2px);*/
}

.wrapper-select {
    display: flex;
    align-items: center;
}

.history-back-btn {
    color: #fff !important;
    background-color: #ee6464 !important;
    border-color: #ee6464 !important;
}

.table-card-view {
    background-color: transparent;
}

.table-card-view tbody tr {
    float: left;
    margin: 10px;
    border: 1px solid #aaa;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.25);
    background-color: white;
}

.table-card-view tbody td {
    display: block;
    width: 270px;
    overflow: hidden;
    text-align: left;
}

.hide {
    display: none;
}

.custom-form-config-scroll {
    margin-bottom: 15px;
    border-radius: 5px;
    /* box-shadow: 0px 0px 4px 3px #f5f5f5; */
    padding: 10px 10px;
    border: solid 2px #dee2e6;
    background-color: #fbfbfb;
}

.ui-sortable-helper {
    border: solid 1px #6da8ff;
    background: #dee2e6;
}

.table-card-view tbody label {
    color: #808080;
}

.table a {
    color: #2296f3;
    text-decoration: none;
}

.table a:hover {
    text-decoration: underline !important;
    color: #2296f3;
}

table.dataTable.table-bordered td.selected {
    box-shadow: none;
    background: #ddd;
}

.table td {
    color: black;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    padding: 0.2rem 1.50rem;
    vertical-align: middle;
}

.table th {
    font-size: 12px;
    vertical-align: middle;
}

.dataTables_empty {
    color: var(--theme-primary);
}

table.DTFC_Cloned tr {
    background-color: transparent;
    margin-bottom: 0;
}

.bg-new-state {
    display: inline-block;
    height: 13px;
    width: 13px;
    border-radius: 50%;
    margin-right: 10px;
    background: darkgrey;
}

.bg-on-duty-state {
    display: inline-block;
    height: 13px;
    width: 13px;
    border-radius: 50%;
    background: #63be77;
    margin-right: 10px;
}

.bg-off-duty-state {
    display: inline-block;
    height: 13px;
    width: 13px;
    border-radius: 50%;
    background: #ee6463;
    margin-right: 10px;
}

.bg-unreachable-state {
    display: inline-block;
    height: 13px;
    width: 13px;
    border-radius: 50%;
    background: #2296f3;
    margin-right: 10px;
}

.gm-style-iw-c > button {
    padding-right: 45px !important;
    padding-top: 5px !important;
}

.gm-style-iw.gm-style-iw-c {
    padding: 0 !important;
}

.gm-style-iw-d {
    overflow: auto !important;
    max-height: 300px !important
}

.iw-text {
    width: 250px;
    display: inline-block;
    overflow-wrap: break-word;
}

.gm-style-iw-d i {
    vertical-align: top;
    width: 22px;
    font-style: normal;
}

.info-w-content {
    overflow-y: auto !important;
    max-height: 160px;
    padding-bottom: 12px;
    width: max-content;
}

.nav-bottom-username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-card-body {
    padding-bottom: 0;
    padding-right: 0;
}

.footerDrawer {
    width: 32%;
    position: fixed;
    bottom: 0;
    z-index: 7;
}

/*PopUp Header*/
.popup_header {
    background: white;
    padding: 12px 15px;
    border-top: 3px solid !important;
    border-bottom: 1px solid !important;
    border-color: var(--theme-primary) !important;
}

.popup_header #nav-bottom-username {
    color: black !important;
    font-weight: 600 !important;
}

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

.aline-left {
    text-align: left;
}

.aline-center {
    text-align: center;
}

.aline-right {
    text-align: right;
}

.wrapper_over-map {
    top: 50px;
    display: inline-block;
    right: 18px;
    position: absolute;
}

.history-setting-wrapper-panel.wrapper_over-map {
    top: 185px;
    transition-duration: .5s;
    transition-timing-function: ease-in;
}

.history-setting-wrapper-panel.wrapper_over-map.active {
    right: 330px;
}

.history-setting-wrapper {
    top: 44px;
    transition-duration: .5s;
    transition-timing-function: ease-in;
}

/*.history-setting-wrapper.active {
    right: 318px;
}*/

.his-right-wrapper {
    background: white;
    top: 100px;
    width: 319px;
    text-align: center;
    bottom: 0;
    right: -319px;
    transition-duration: .5s;
    transition-timing-function: ease-in;
}

.his-right-wrapper.active {
    right: 0;
}

.his-right-arrow {
    position: absolute;
    z-index: 11;
    border-radius: 33px 0 0 33px;
    display: inline-block;
    overflow: hidden;
    top: 0;
    left: -55px;
}

.his-right-arrow i {
    font-weight: 900;
    padding: 11px 22px;
    color: white;
}

.his-right-data {
    position: relative;
    background: white;
    color: black;
    height: 84%;
    overflow-y: scroll;
}

.tpr-packets-ul {
    background: #ccc;
}

.stoppage-packets-ul{
    background: #ccc;
}

.hig, hig:hover {
    background-color: #081B67;
    color: white !important;
}


.tpr-packets {
    padding: 5px;
    border-bottom: 2px solid white;
}


.tpr-packets a .tpr-header-content {
    width: 100%;
    font-weight: 600;
    display: block;
    padding: 0 0 5px 0;
    color: white;
}

.tpr-packets a .tpr-header-title {
    display: inline-block;
    text-align: left;
    width: 49%;
}

.tpr-packets a .tpr-header-title.pull-right {
    display: inline-block;
    width: 49%;
    text-align: right;
    padding-right: 10px;
}

.tpr-packets a .tpr-content {
    display: block;
    padding: 5px 10px;
    background: white;
    color: black;
}

.tpr-packets a .tpr-address-data, .tpr-aclSensorData-data, .tpr-gyrSensorData-data, .tpr-mgnSensorData-data {
    display: block;
    text-align: left;
    margin-bottom: 2px;
    margin-top: 2px;
}

.tpr-packets a .tpr-address-data span:first-child {
    vertical-align: top;
    display: inline-block;
}

.tpr-packets a .tpr-address-data span:last-child {
    display: inline-block;
    width: calc(100% - 40px);
}

.tpr-packets a .tpr-date-time {
    display: block;
    text-align: left;
}

.tpr-packets a .tpr-date-time {
    display: inline-block;
    width: 39%;
}


.tpr-packets a span img {
    height: 24px;
    margin-right: 10px;
}

.li-active {
    background: var(--theme-primary);
}

.transform_icon {
    transform: rotate(180deg);
}

.tpr-packet-content-center {
    width: 100%;
    text-align: center;
}

/*MEDIA QUERY */
@media screen and (max-width: 414px) {
    .status-btn {
        margin-left: 4px;
    }
}

@media screen and (max-width: 320px) {
    .status-btn span {
        font-size: 11px;
    }
}

@media screen and (max-width: 414px) {
    .wrapper-filter {
        padding: 9px;
        /* height: calc(1em + 1rem + 2px);*/
    }
}

@media screen and (max-width: 424px) {
    .status-btn img {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .footerDrawer {
        width: calc(100% - 280px);
    }
}

@media screen and (max-width: 768px) {
    .footerDrawer {
        width: 100%;
    }




}

.geofence-card-view-scroll {
    border-style: solid;
    border-width: 0px;
    border-color: #cea0ae;
}

.geofence-card-view-scroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.geofence-card-view-scroll::-webkit-scrollbar-thumb {
    background: #1d2b6e;
    border-radius: 1px;
}

.geofence-card-view-scroll::-webkit-scrollbar-thumb {
    background: #1d2b6e;
    border-radius: 1px;
}


.field-icon {
    font-size: 15px;
    float: right;
    margin-right: 5px;
    margin-top: -25px;
}

/*/////////////////////*/
.tabs.smaller-tab {
    margin-bottom: 8px;
}

.tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: solid 1px #e0eaf1;
    background-color: #ffffff;
    z-index: 1;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.back-to-dash-container {
    position: absolute;
    z-index: 11;
    border-radius: 33px 0px 0px 33px;
    overflow: hidden;
    top: 60px;
    right: 0;
    cursor: pointer;
}

.back-to-dash-container i {
    font-weight: 900;
    padding: 11px 22px;
    color: white;
}

.dashboard-table-map-view {
    position: absolute;
    left: 33%;
    padding: 7px 5px;
}

#toggle-dashboard-table {
    top: 35%;
}

/*#toggle-dashboard-map-view {*/
/*    left: 33%;*/
/*    top: 36%;*/
/*}*/

/*#toggle-dashboard-card-view {*/
/*    left: 33%;*/
/*    top: 42%;*/
/*}*/

.dashboard-table-view {
    left: 98.7% !important;
}

.dashboard-map-view {
    left: 0 !important;
}

.dashboard-card-view {
    left: 0 !important;
}

.s3-image-preview {
    display: block;
    max-width: 50%;
    margin-bottom: 15px;
}

#fullscreen-image-preview {
    display: block;
    max-width: 1212px;
    width: auto;
    height: auto;
}

/*left panel form details*/
.his-left-wrapper {
    background: white;
    top: 110px;
    width: 319px;
    text-align: center;
    bottom: 0;
    left: -319px;
    transition-duration: .5s;
    transition-timing-function: ease-in;
}

.his-left-wrapper.active {
    left: 0;
}

.his-left-data {
    position: relative;
    background: white;
    color: black;
    height: 95%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.map-zoom-control > a {
    color: black !important;
    background: white !important;
    margin: 10px;
    border: 2px solid #aaaaaad4;
    display: block;
}

/*
.column {
    border: 1px solid #ccc;
    width: 70px;
    height: 80px;
    !*padding: 5px;*!
}
*/
.wrapper-input-button {
    display: flex;
}

.wrapper-input-field {
    flex: 1;
}

.wrapper_filter {
    padding: 5px 0px !important;
    /*border: 1px solid rgba(0, 0, 0, 0.09);*/
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset !important;*/
}

.shortcut-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

a.iconsize {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.all-card-status-filter {
    border-radius: 50px;
    width: 22px;
    height: 22px;
    font-size: 11px;
    color: white;
    background: #961be5;
    border: 1px solid black;
    margin-right: 5px;
    line-height: 22px;
    text-align: center;
}

.onDuty-card-status-filter {
    border-radius: 50px;
    width: 22px;
    height: 22px;
    font-size: 11px;
    color: white;
    background: #03ce7f;
    border: 1px solid black;
    margin-right: 5px;
    line-height: 22px;
    text-align: center;
}

.offDuty-card-status-filter {
    border-radius: 50px;
    width: 22px;
    height: 22px;
    font-size: 11px;
    color: white;
    background: #fe6055;
    border: 1px solid black;
    margin-right: 5px;
    line-height: 22px;
    text-align: center;
}

.unreachable-card-status-filter {
    border-radius: 50px;
    width: 22px;
    height: 22px;
    font-size: 11px;
    color: white;
    background: #476afc;
    border: 1px solid black;
    margin-right: 5px;
    line-height: 22px;
    text-align: center;
}

.new-card-status-filter {
    border-radius: 50px;
    width: 22px;
    height: 22px;
    font-size: 11px;
    color: white;
    background: #b1aca6;
    border: 1px solid black;
    margin-right: 5px;
    line-height: 22px;
    text-align: center;
}

.inactive-card-status-filter {
    border-radius: 50px;
    width: 22px;
    height: 22px;
    font-size: 11px;
    color: white;
    background: #FFD34F;
    border: 1px solid black;
    margin-right: 5px;
    line-height: 22px;
    text-align: center;
}

.page-header {
    height: 3.125rem;
    padding: 0 1rem;
}

.page-header-text {
    font-size: 15px;
    margin: 0px 0px 0px 10px;
    font-weight: 400;
    color: #605f5f;
}

.nav-menu li a > [class*='fa-'], .nav-menu li a > .ni {
    color: #f5f5f5 !important;
}

.nav-function-top .nav-menu li a > [class*='fa-']:not(.fa-thumbtack), .nav-menu li a > .ni {
    color: var(--theme-primary) !important;
}

.nav-menu li a > .aside-pined {
    color: rgba(204, 170, 0, 1) !important
}

.nav-function-top .page-header-text {
    color: white !important;
}

.nav-function-top.nav-function-minify .page-sidebar .primary-nav .nav-menu > li > a > .nav-link-text {
    display: block;
}

textarea {
    resize: none;
}

.att-green {
    color: #008000 !important;
}

.att-red {
    color: #FF0000 !important;
}

.att-blue {
    color: #0014a8 !important;
}

.att-orange {
    color: #fd5800 !important;
}

.att-magenta {
    color: #FF00FF !important;
}

.att-yellow {
    color: #e7c930 !important;
}

.search-downline-btn {
    left: 9px;
    top: -1px;
}

#attendance-overview-table a {
    text-decoration: none !important;
}

.treeSelector-container {
    width: 100% !important;
}

.treeSelector-container .treeSelector-input-box {
    height: calc(1rem + 1rem + 2px) !important;
    padding-left: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    overflow: hidden;
    padding-top: 0;
    display: flex;
    overflow-x: hidden;
    line-height: calc(1rem + 1rem + 2px) !important;
}


.treeSelector-container .treeSelector-wrapper.visible {
    display: block;
    position: absolute;
    left: 0;
    max-height: 200px;
    overflow: auto;
    width: 100%;
    padding-left: 4px;
    background: #fff;
    border: 1px solid #e8dce4;
    z-index: 999;
}

.treeSelector-container .treeSelector-input-box .title-item {
    display: flex;
    line-height: 2.1;
    padding: 4px 5px;
    align-items: center;
    white-space: nowrap;
}

.treeSelector-container.no-options .treeSelector-input-box {
    /*padding-top: 8px;*/
    padding-left: 10px;
    color: #7d7676;
    user-select: none;
}

.chat-image-preview {
    display: block;
    max-height: 220px;
    max-width: 220px;
    height: auto;
    width: auto;
}

.msgr-list {
    width: 15.563rem !important;
}

.profile-image {
    width: 2.125rem;
    height: 2.125rem;
    background-size: cover !important;
    background: #f0f0f0;
}

.daterangepicker table tr td, .daterangepicker table tr th {
    width: 33px !important;
    height: 15px !important;
}

.expense-limit-category-table tr td {
    height: 40px;
    font-size: 18px;
}

.expense-limit-category-table thead th {
    height: 70px;
    font-size: 22px;
}

td.details-control {
    background: url('/resources/img/default/open.png') no-repeat center center !important;
    cursor: pointer;
}

tr.shown td.details-control {
    background: url('/resources/img/default/close.png') no-repeat center center !important;
}


.status:before {
    top: 2px !important;
    right: -3px !important;
    background: #505050;
    border-radius: 50%;
    border: 1px solid #fff !important;
    width: 10px;
    height: 10px;
}


/************************ Durgesh ***************************************/

.batsymb {
    display: flex;
    align-items: center
}

.page-content {
    padding: 0 16px 0 16px;
    background-color: #f4f5f7;
}

.card-header {
    padding: 0.4rem 1rem;
    background-color: transparent;
    border: none;
    width: 100%;
    text-align: left !important;
}

.card-body {
    padding: 0.2rem 1rem;
}

.attendancestat {
    border-bottom: solid 1px #dee2e6;
    border-top: solid 1px #dee2e6;
    width: 100%;
}

.attendancestat .card-text .card-text {
    font-size: 1rem
}

.attenddate {
    background-color: #f8f8f8;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 14px;
}

.card {
    font-weight: 500;
    flex-direction: inherit;
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.headiheadi {
    font-weight: 500;
    font-size: 0.9rem;
    color: #212d38;
    text-transform: capitalize;
}

ul.headingtitlis {
    display: flex;
    margin-bottom: 0;
    list-style: none;
    padding-inline-start: 0px
}

ul.headingtitlis li {
    position: relative;
    background: #f1f1f1;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    line-height: 27px;
    text-align: center;
}


.history-btn-das {
    background-color: #5a22cb;
    color: white;
    padding: 8px 14px;
    border: none;
    box-shadow: none;
}


.all-executive-count {
    /*background-color: #8c37ff;*/
    color: #8c37ff;
    border-color: #8c37ff;
    border-width: 2px;
    font-weight: 500;
    /*border: none;*/
    /*box-shadow: 0px 9px 13px 2px #8c37ff45;*/
}

.onDuty-executive-count {
    color: #00db6c;
    border-color: #00db6c;
    border-width: 2px;
    font-weight: 500;
    /*box-shadow: 0px 9px 13px 2px #00db6c45;*/
}

.offDuty-executive-count {
    color: #ff6260;
    border-color: #ff6260;
    border-width: 2px;
    font-weight: 500;
    /*box-shadow: 0px 9px 13px 2px #ff626045;*/
}

.unreachable-executive-count {
    color: #496aff;
    border-color: #496aff;
    border-width: 2px;
    font-weight: 500;
    /*box-shadow: 0px 9px 13px 2px #496aff45;*/
}

.new-executive-count {
    color: #F9B425;
    border-color: #F9B425;
    border-width: 2px;
    font-weight: 500;
    /*box-shadow: 0px 9px 13px 2px #50505045;*/
}

.today, .lastupdated, .locationtext, .addresstext {
    font-size: 1rem;
}

.today:before {
    content: " ";
    width: 18px;
    height: 2px;
    background-color: #00dc86;
    position: absolute;
    top: 22px;
}

.lastupdated:before {
    content: " ";
    width: 18px;
    height: 2px;
    background-color: #dc8100;
    position: absolute;
    top: 22px;
}

.locationtext:before {
    content: " ";
    width: 18px;
    height: 2px;
    background-color: #dc0053;
    position: absolute;
    top: 22px;
}

.addresstext:before {
    content: " ";
    width: 18px;
    height: 2px;
    background-color: #8100dc;
    position: absolute;
    top: 22px;
}

/*thead.btn-primary{*/
/*    color: #fff;*/
/*    font-family: arial;*/
/*    box-shadow: none !important;*/
/*    width: 100% !important;*/
/*}*/
/*.dataTables_scrollHeadInner{*/
/*    width: 100% !important;*/
/*}*/

.tbody {
    background: #fff;
}


/*thead.btn-primary:hover{*/
/*       background: #464d5c !important;*/
/*}*/

thead.btn-primary th, .table td {
    padding: 0.5rem 0.7rem;
}

thead.btn-primary th:after, thead.btn-primary th:before {
    bottom: 1em !important;
    display: none;
    font-size: 10px !important;
}


thead.btn-primary th, thead.btn-primary td {
    border: 0px solid #e9e9e9 !important;
}


.btn-outline-primary {
    color: #868e96;
    border-color: #dee2e6;
}

.arrowdas {
    position: absolute;
    bottom: 0;
    right: -6px;
    display: flex;
    align-items: center;
    z-index: 999;
    flex-direction: column;
    top: 50%;
}

.arrowdas .mainclass {
    background-color: #0a6ebd;
    display: flex;
}

.arrowdas .mainclass button {
    background-color: transparent;
    border: none;
}

/*.btn.btn-primary{*/
/*    background-color: #464d5c;*/
/*    border: none;*/
/*}*/


/*table .btn.btn-primary{*/
/*    background-color: #464d5c;*/
/*    color: #fff;*/
/*    border: none ;*/
/*    box-shadow: none;*/
/*}*/

.cardnum {
    font-size: 14px;
    color: #464d5c;
}


td.status-data {
    text-align: center;
}

.modal-header {
    padding: 1rem 1.25rem;
    color: #fff;
    box-shadow: none;
}

/*.modal-header.btn-primary:hover, .modal-header.btn-primary:active, .modal-header.btn-primary:focus{*/
/*    background-color: #464d5c !important;*/
/*}*/

.modal-header .close {
    text-shadow: none;
    opacity: 1;
    color: #fff;
}


.modal-footer {
    padding: 0rem 1.25rem;
}


.btn-info:hover, .btn-info:active, .btn-info:focus {
    color: #ffffff !important;
    background-color: #3d1294 !important;
    border: none !important;
    box-shadow: none !important;
}

.filter-select > .select2-container .select2-selection--single {
    height: calc(1em + 1rem + 8px);
}

.form-control:disabled, .form-control[readonly] {
    background-color: #ffffff;
    opacity: 1;
}


.attend-info.col-2.d-flex {
    margin-top: 5px;
}

.dataTables_wrapper .row:nth-child(1) *, .dataTables_wrapper .row:nth-child(3) * {
    padding: 0;
    margin: 0;
}


.dataTables_wrapper .row:nth-child(3), .dataTables_wrapper .row:nth-child(1), .dataTables_wrapper select * {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 5px !important;
    margin: 0 !important;
    background-color: #fff;
}


.dataTables_wrapper .row:nth-child(1) {
    padding: 0px 0px 12px 0px !important
}

.dataTables_wrapper .row:nth-child(3) {
    padding: 14px 0 0 20px !important
}


.dataTables_wrapper .row:nth-child(1) button.btn, .dataTables_wrapper .row:nth-child(1) input {
    padding: 8px 10px;
    margin: 0 !important;
    border: solid 1px #dfdfe0;

}

.dataTables_wrapper .row:nth-child(1) .btn.btn-primary.btn-sm.waves-effect.waves-themed.mr-2 {
    color: #fff;
}

.position-absolute.pos-top.pos-left.margin-top.mt-3 {
    background-color: #ffffffbd;
    border-radius: 0 0px 10px 10px;
    margin: 0 35% !important;
    display: flex;
    top: 5px;
    left: 35% !important;
}

.position-absolute.pos-top.pos-left.margin-top.mt-3.for-task {
    background-color: #ffffffbd;
    border-radius: 0 0px 10px 10px;
    margin: 0 35% !important;
    display: flex;
    top: 5px;
    left : 3% !important;
}


.geofence-card-view-scroll, table {
    overflow-y: scroll;
    mask-image: linear-gradient(to top, transparent, black),
    linear-gradient(to left, transparent 17px, black 17px);
    mask-size: 100% 20000px;
    mask-position: left bottom;
    -webkit-mask-image: linear-gradient(to top, transparent, black), linear-gradient(to left, transparent 7px, black 7px);
    -webkit-mask-size: 100% 20000px;
    -webkit-mask-position: left bottom;
    transition: mask-position 0.3s, -webkit-mask-position 0.3s;
}

.geofence-card-view-scroll:hover, table:hover {
    -webkit-mask-position: left top;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    background-color: transparent;
    border: none;
}

.nav-tabs .nav-item {
    position: relative;
    z-index: 9;
    margin: 0 3px !important;
    flex: inherit;
}


.nav-tabs .nav-item:last-child {
    margin-right: 0 !important;
}

.nav-tabs .nav-item:first-child {
    margin-left: 0 !important;
}

.nav-tabs .nav-link {
    background: #dee2e6;
    right: 0;
    top: 0;
    z-index: -1;
    border: none !important;
    border-radius: 6px 22px 0 0;
}

.nav-tabs .nav-link:hover {
    border: none;
    top: -1;
}


.nav-tabs .nav-link.active {
    background: #080568;
    margin: 0 13px;
    border-radius: 24px 0px 0 0;
    color: #fff !important;
}


.nav-tabs .nav-link.active:before {
    content: " ";
    background: #080568;
    position: absolute;
    width: 35px;
    height: 100%;
    top: 0;
    left: 7px;
    border-radius: 10px 0px 0px 0px;
    transform: skewX(354deg);
    z-index: -1;
}

.nav-tabs .nav-link.active:after {
    content: " ";
    background: #080568;
    position: absolute;
    width: 35px;
    height: 100%;
    top: 0;
    right: 0px;
    border-radius: 0px 10px 0px 0px;
    transform: skewX(6deg);
    z-index: -1;
}

.nav-tabs .nav-link:after {
    content: " ";
    background: #dee2e6;
    position: absolute;
    width: 35px;
    height: 100%;
    top: 0;
    right: 0;
    border-radius: 0px 7px 0px 0px;
    transform: skewX(15deg);
    z-index: -1;
}


.nav-tabs {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#company-tab {
    margin-top: 10px;
}

#company-tab .panel-content .tab-content {
    background-color: #ffffff;
    border: none;
    padding: 10px;
}


#company-tab .panel-content {
    padding: 0 !important;
}

@keyframes background {
    from {
        background: pink;
    }
    to {
        background: #c0d6ff;
    }
}

table.table {
    background-color: #fff;
}

.panel {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none;
}

div.dt-button-collection.dropdown-menu .dt-button {
    border-radius: 0;
    padding: 5px 4px;
    border-bottom: solid 1px #d2c9cf;
    display: block;
    width: 100%;
    padding: 0.75rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.mainaa .nav.nav-tabs {
    background-color: #000;
}


.modal-content {
    border: none !important;
}

.text-danger {
    color: #b10202 !important;
}

.dropdown-multilevel.dropdown-multilevel-left .dropdown-menu {
    display: none !important;
}

.dropdown-multilevel.dropdown-multilevel-left:hover .dropdown-menu {
    display: block !important;
}


/*.custom-field-data {
    border-top: solid 8px #ccc;
    margin-top: 14px;
}*/

.nav-link {
    padding: 0.8rem 1.125rem;
}

.gm-style-iw-d .p-2.btn-primary *, .gm-style-iw-d .p-2.btn-primary, .gm-style-iw-d .p-2.btn-primary:focus, .gm-style-iw-d .p-2.btn-primary:active {
    color: #292828 !important;
    background-color: #ffffff;
    border-color: #ffffff;
    box-shadow: none !important;
    font-weight: bold;
    text-transform: capitalize;

}

.gm-style-iw-d .p-2.btn-primary * {
    padding: 0px !important;
}

.info-w-content * {
    font-weight: bold;
    color: #999;

}

.info-w-content .pt-2.pl-2 i {
    width: 24px;
    height: 24px;
    background-color: #f5f5f5;
    border-radius: 50px;
    text-align: center;
    line-height: 24px;
    font-size: 10px;
}

.info-w-content .pt-2.pl-2 span {
    margin-left: 6px;
}


#leave-tab .panel-content {
    padding: 0 !important;
    margin-top: 12px;
}

#leave-tab .panel-content .tab-content {
    background-color: #fff;
    padding: 10px;
}


.custocheckb {
    display: flex;
    align-items: center;
}

.ni.ni-menu {
    line-height: inherit;
}


.bs-actionsbox .btn-group.btn-group-sm.btn-block button {
    white-space: nowrap;
}

.listcards{
    /*flex: 0 0 500px;*/
    /*max-width: 500px;*/

    flex: 0 0 500px;
    max-width: 500px;
    width: auto;
    display: flex;
    margin-left: 0px;
}

.arrowmap {
    position: absolute;
    left: 500px;
    top: 50%;
    display: flex;
    flex-direction: column;
}


.headbattry {
    position: absolute;
    text-align: center;
    top: -13px;
    right: 0px;
    padding: 2px 3px 0px 3px;
    line-height: 1.8;
    display: none;
    font-size: 8px;
    font-weight: 900;
    width: 31px;
    height: 20px;
}


.battersim:hover .headbattry {
    display: block;
    background: #f5f5f5;
    border-radius: 4px;
    border: 2px solid #333;
}


#crumbs {
    overflow-x: hidden;
    margin-top: 2px;
}

#crumbs h1 {
    padding: 0 0 30px;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01rem;
    color: #8093A7;
}

#crumbs ul {
    list-style: none;
    display: flex;
    width: 100%;
    margin: 0 !important;
    padding: 0;
}

#crumbs ul li {
    display: inline;
}

#crumbs ul li a:first-child {
    padding: 0 10px 0 14px;
    white-space: nowrap;
}

#crumbs ul li a {
    display: block;
    float: left;
    background: #081b67;
    text-align: center;
    padding: 0 20px;
    position: relative;
    margin: 0 10px 0 0;
    font-size: 14px;
    text-decoration: none;
    color: #ffffff;
    line-height: 30px;
}


#crumbs ul li a:after {
    content: "";
    border-top: 16px solid transparent;
    border-bottom: 16px solid #ffffff00;
    border-left: 16px solid #081b67;
    position: absolute;
    right: -16px;
    top: 0;
    z-index: 1;
}

#crumbs ul li a:before {
    content: "";
    border-top: 15px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 16px solid #fff;
    position: absolute;
    left: -5px;
    top: 0;
    background-color: #081b67;
}

#crumbs ul li a:focus {
    background-color: #000 !important;
}


span.tag {
    background-color: #ffffff40;
    margin-left: -5px;
    border-radius: 3px;
    padding: 2px 6px;
    margin-right: 1px;
    font-size: 10px;
}

#crumbs ul li:first-child a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    white-space: nowrap;
}

#crumbs ul li:first-child a:before {
    display: none;
}

#crumbs ul li:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

#crumbs ul li:last-child a:after {
    display: none;
}

.currentblacktext {
    flex: 0 0 100px;
}

.currentblack {
    font-weight: 500;
    color: #6e6e6e;
}

table .badge {
    width: 70px;
    padding: 5px 0;
}

.downline-username-data .badge {
    width: auto;
    padding: 5px 8px;
}

table .executive-status-data-btn button.btn {
    width: 80px;
}

.d-flex.align-items-center.gridsys {
    overflow: hidden;
}

.textnamemm {
    overflow: hidden;
    text-overflow: ellipsis;
}

.card.mb-3.gridLayout {
    width: 32.2%;
}


/*.btn.btn-primary, .menu-item, label.menu-open-button, .page-sidebar.list-filter-active, .page-logo, .geofence-card-view-scroll::-webkit-scrollbar-thumb, .nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav:hover .nav-menu > li:hover > a, .nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a + ul{*/
/*background-color: #080568 !important;*/
/*color: #fff !important;*/
/*border: none !important;*/
/*box-shadow: none !important;*/
/*}*/

/*.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a + ul:before{*/
/*    color: #080568 !important;*/
/*}*/


/********************************** Color Code *********************************************************/

.status.card-status-unr:before {
    background: #496aff;
}

.status.card-status-on:before {
    background: #00db6c;
}

.status.card-status-off:before {
    background: #ff6260;
}

.status.card-status-new:before {
    background: #F9B425;
}


#append-data-row-to-update label,
#apped-pair-data-row label,
/*#add-executive-form label,*/
/*#add-manager-form label,*/
/*#add-team-form label,*/
/*#add-hr-form label,*/
#downline-edit-user-form label,
#add-reseller-form label,
#add-role-form label,
#append-custom-task-data-row label,
#append-custom-user-data-row label,
#append-custom-manager-data-row label,
#append-custom-hr-data-row label,
#append-custom-expense-data-row label,
#append-custom-conveyance-data-row label,
#append-pair-data-row label ,
#add-emailTemplate-modal label,
#add-scheduleReport-modal label,
.wrapper_filter.margin-bottom.pl-2.pr-2.pt-2.mb-1.mt-2 * label,
.wrapper_filter.margin-bottom.pl-2.pr-2.pt-2.mb-1 * label,
.wrapper_filter.margin-bottom row.wrapper_select * label,
.custom-site-data-pair.custom-form-config-scroll.h-45 label,
#add-reseller-form label,
#add-role-form label,
#append-custom-task-data-row label,
#append-custom-product-data-row label,
#append-pair-data-row label ,
#add-emailTemplate-modal label,
#add-scheduleReport-modal label{
    display: none;
}


.table thead th {
    vertical-align: bottom;
    border-bottom: 1px solid #d7d8dd;
}

.table-bordered th, .table-bordered td {
    border: 1px solid #d7d8dd;
}

.table-bordered {
    border: 1px solid #dee2e6;
    border-top: none;
}

#add-task, #append-data-row-to-update .update-custom-control-label, #append-pair-data-row .update-custom-control-label {
    display: block;
}

.page-content .panel {
    margin-bottom: 0rem;
}


.dropdown-menu .dropdown-menu {
    opacity: 1;
    visibility: visible;
}


.page-logo, .page-sidebar, .nav-footer, .bg-brand-gradient {
    background-image: none !important;
    background-image: none !important;
}

/*.page-content {*/
/*    background-color: #ececec;*/
/*}*/


.btn-light {
    border-color: inherit !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option[aria-selected=true], .dt-button.dropdown-item.buttons-columnVisibility.active, .dt-button.dropdown-item.button-page-length.active {
    background-color: #2a276e;
    color: #fff;
}


/********************************** End Color Code *********************************************************/

@media only screen and (min-width: 768px) and (max-width: 1280px) {
    .justify-content-between.card-header.d-flex {
        flex-wrap: wrap;
    }
}


@media screen and (max-width: 768px) {
    .col-sm-12.col-md-5.d-flex.align-items-center.justify-content-center.justify-content-md-start {
        margin-bottom: 10px;
        width: 100%;
    }

    .card {
        font-size: 0.8rem;
    }

    .history-btn-das {
        display: none;
    }

    .filterbtn {
        margin-top: 10px;
        display: flex;
    }

    .filterbtn button {
        width: 100%;
        white-space: nowrap;
        margin: 0 2px !important;
        padding: 8px 0;
        font-size: 9px;
    }

    #dashboardMapDiv {
        display: none;
    }

    #dashboard-header-content .row.mt-3.mb-3.pb-3 {
        margin-top: 0px !important;
    }

    #dashboardCardViewDiv {
        padding-right: 14px !important;

    }


    .page-wrapper .page-content {
        padding: 4px !important;
    }

    .geofence-card-view-scroll {
        -webkit-mask-image: linear-gradient(to top, transparent, black), linear-gradient(to left, transparent 0px, black 0px);
    }

    .mainaa {
        display: flex;
        overflow: scroll;
        width: 100%;
        white-space: nowrap;
        flex-wrap: nowrap;
    }

    .listcards {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }


    /* .search-downline-btn {
          position: inherit;
          left: 0;
          line-height: inherit;
     }*/
    .arrowmap {
        display: none;
    }

}

.deleteCustomRowIcon {
    padding: 8px;
    color: #ff324f;
    margin-left: -2px;
    border-radius: 100px;
    border: none;
    background-color: #fdefef;
}


/*******************************  New Update **********************************/

.dataTables_wrapper {
    padding: 10px 10px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: none !important;
    position: relative;
}

.dt-buttons .btn-group {
    padding-right: 4px !important;
}

.table.dataTable td:first-child {
    width: 16px;
}

.DTFC_LeftBodyWrapper {
    background: #fcfcfc;

}


span.tb-badge-success {
    color: #09ad95;
    background-color: transparent;
    box-shadow: none;
    padding: 1px 6px;
    border-radius: 4px;
}

span.tb-badge-success:hover {
    box-shadow: none;
}


.tb-badge-success {
    color: #09ad95;
    background-color: rgba(0, 230, 130, 0.1);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%);
    padding: 1px 6px;
    border-radius: 4px;
}


.tb-badge-success:hover {
    color: #09ad95;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%), 0 1px 1px rgb(0 0 0 / 8%);
}

span.resetbtn {
    background-color: transparent;
    box-shadow: inherit;
}

.resetbtn {
    color: #e82646;
    background-color: rgba(255, 56, 43, 0.1);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%);
    padding: 1px 10px;
    border-radius: 4px;
    border: none;

}

.resetbtn:hover {
    color: #7e061b;
}

.waringbtn {
    color: #b98416;
    background-color: rgba(255, 162, 43, 0.1);
    border: none;
}

.waringbtn:hover {
    color: #724c05;
}


span.badge.badge-primary {
    color: #e0a72c;
    background: transparent;
}

.custom-picker span.badge.badge-primary {
    color: #0a0d18;
    background: transparent;
}

span.badge.badge-warning {
    color: #ffc241;
    background: transparent;
}

span.badge.badge-danger {
    color: #FC1349;
    background: transparent;
}


span.badge.badge-none {
    color: #2196F3;
    background: transparent;
}


span.badge.badge-success {
    color: #1dc9b7;
    background: transparent;
}

.set-yes {
    margin-left:3px;
}

span.badge.badge-success {
    color: #1dc9b7;
    background: transparent;
}

span.badge.badge-info {
    color: #09ad95;
    background: transparent;
}

span.badge.badge-paidOut{
    color: #185CC1;
    background: transparent;
}


.deletebtn {
    padding: 8px;
    color: #ff324f;
    margin-left: -2px;
    border-radius: 100px;
    border: none;
    background-color: #fdefef;
}


.successnne {
    color: #09ad95;
    background-color: #09ad9538;
    border: none;
    border-radius: 2px;
}

.table-hover tbody tr:hover {
    color: #212529;
    background-color: #f2f2f2;
}

.editbtn {
    font-size: x-small;
    color: #322f74;
    background: transparent;
    border: none;
    box-shadow: none;
}


::-webkit-scrollbar {
    width: 18px;
}

::-webkit-scrollbar-thumb {
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 9999px;
    background-color: #dbdbdf;
}


.DTFC_LeftBodyWrapper:before, .DTFC_LeftHeadWrapper:before {
    box-shadow: -6px 0 12px rgb(0 0 0 / 72%) !important;
    background: none !important;
}


.paginate_button.page-item.previous.disabled a, .paginate_button.page-item.next.disabled a, .paginate_button.page-item.previous a, .paginate_button.page-item.next a {
    color: #333333;
    pointer-events: none;
    cursor: auto;
    background-color: transparent !important;
    border-color: #dee2e6;
}


.btn.btn-outline-default.dropdown-toggle.dropdown-toggle-split.waves-effect.waves-themed {
    background: #fff;
}


.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option[aria-selected=true], .dt-button.dropdown-item.buttons-columnVisibility.active, .dt-button.dropdown-item.button-page-length.active {
    background-color: #f3f3f3;
    color: #333;
}

.wrapper_filter .btn-primary, .btn-filter {
    height: 35px;
    border: none;
}


select.form-control.custom-select {
    padding: 0 30px 0px 7px !important;
}

.btn.dropdown-toggle.btn-light.bs-placeholder:focus {
    box-shadow: none !important;
    outline: 0px auto -webkit-focus-ring-color !important
}

table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > td.sorting_asc, table.dataTable thead > tr > td.sorting_desc, table.dataTable thead > tr > td.sorting {
    white-space: pre;
}

.remove-option-row {
    padding: 12px;
    background: #fdefef;
    color: #ff324f;
    margin-left: -3px;
    border-radius: 0 4px 4px 0px;
}

.help-block {
    font-size: x-small !important;
}

.select2-container {
    z-index: inherit !important;
}

.earning-components-div .select2-container {
    z-index: inherit !important;
}

.modal-footer .btn.btn-secondary {
    color: #2c2f3d;
    background-color: #dae0e5;
    border-color: #b2c0cc;
}

.header-btn {
    border: 1px solid #929292;
    color: #1d2b6e !important;
    font-size: 22px;
}

.header-btn:hover {
    color: #fff !important;
}

.table-hover tbody tr:hover {
    -webkit-box-shadow: inherit;
    box-shadow: inherit;
    z-index: 1;
}

.dropdown-menu .dropdown-item:first-child, .dropdown-menu .dropdown-item:last-child {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.bootstrap-select .dropdown-menu li a {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dropdown-menu .dropdown-item {
    font-weight: 400;
    cursor: pointer;
}

.dropdown-menu {
    transform: inherit !important;
}

.bootstrap-select .dropdown-menu li.selected {
    background-color: #eee !important;
}


.row.wrapper_select {
    padding: 0 10px;
}

.row.wrapper_select > div {
    padding: 4px;
}

.row.wrapper_select > div:first-child {
    padding-l: 0px;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    overflow: scroll !important;
}

.modal-backdrop.show {
    opacity: 0.2;
    z-index: 9999;
}

#pageLoader, #process-page-loader {
    z-index: 99999;
}

.daterangepicker.show-calendar {
    z-index: 99999;
}

.panel .panel-container .panel-content {
    padding: 1rem 0rem;
}


.btn.btn-primary.btn-sm.waves-effect.waves-themed.shift-template-btn.ml-3 {
    color: #fff;
}

.btn.buttons-collection:hover {
    color: #fff !important;

}

.header-btn[data-class='mobile-nav-on'] {
    border-color: inherit !important;
    background-color: inherit !important;
    background-image: inherit !important;
    background-image: inherit !important;
    color: inherit !important;
}


.btn-light {
    border: solid 1px #e8e8e8 !important;
    box-shadow: inherit !important;
}

.treeSelector-container {
    margin-top: inherit;
}

.username-data.sorting_1 {
    text-align: center !important;
}

.table.dataTable td.username-data.sorting_1:first-child, .table.dataTable td.userText-data:first-child {
    text-align: left !important;
    width: 40px;
}

.btn-light:hover {
    background-color: #fff !important;
}

.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active, .show > .btn-light.dropdown-toggle {
    color: #212529;
    background-color: #fff !important;
    border-color: #dfdfdf;
    box-shadow: none !important;
}

.changepasswoooo {
    width: 100%;
    height: 90vh;
}

.changepapanel {
    width: 400px;
    box-shadow: 0px 14px 20px 1px #b3b3b366 !important;
    border: solid 1px #cbccd1;
    border-radius: 9px;
    background: #fff !important;
}

.chaformpp {
    padding: 10px 20px 10px 20px;
}

.custom-file-input ~ .custom-file-label::after {
    width: 100%;
    background-image: url("/resources/img/file-upload.jpg") !important;
    width: 100%;
    height: 220px;
    content: " " !important;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #fff;
    border: none;
}

.fileupload {
    height: 220px;
    width: 100%;
}

.custom-file {
    height: inherit;
    border: none;
}

.custom-file-label {
    border: none;
}


#imageEditDiv .panel {
    border: none !important;
}


.dropdown-item.active, .dropdown-item:active {
    color: #010208;
    text-decoration: none;
    background-color: #e9e9e9;
}


td.today:before {
    display: none;
}

.daterangepicker .in-range.available {
    background-color: #bfcbff;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
    background-color: #1d2b6e;
    color: #fff;
}

.btn-secondary:focus, .btn-secondary.focus {
    box-shadow: inherit !important;
}

.treeSelector-li-title-box {
    display: flex;
    padding-bottom: 5px;
    padding-top: 5px;
    width: 100%;
    float: left;
}

.treeSelector-li-title-box input {
    margin-right: 10px;
    margin-left: 5px;
}

td.today:before {
    display: none;
}

.btn-primary {
    box-shadow: inherit !important;
}

div[data-change-pswrd-div="rtl"] {
    width: 100%;
}

div[data-change-pswrd-div="rtl"] button {
    margin-bottom: 23px;
}

.dropdown-toggle.disabled:after {
    display: none;
}

.loginfl .select2-results {
    padding: 0;
}

.custom-field-data h4 {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.expenseTabl tbody b {
    width: 100%;
    text-align: left;
    float: left;
    padding: 10px 10px !important;
    font-size: 16px;
    color: #3c4043;
}

#expense-table, #travel-conveyance-table tbody + tr {
    padding: 0px;
}


.geofence-card-view-scroll:hover, table:hover {
    -webkit-mask-position: inherit !important;
}

.expenseTabl > td {
    padding: 0;
}


.expenseTabl > td table td {
    font-weight: bold;
    color: #25292d;
}


#expense-table tbody .shown *, #travel-conveyance-table tbody .shown *, #device-approval-list-table tbody .shown * {
    color: #fff !important;
}

.fullwidthhh {

}

#expense-category-list-table_wrapper {
    padding: 0;
}


.travel-con-action div, .approval-action div {
    display: flex;
    flex-wrap: nowrap;
}

.custom_flag_class .select2-selection__arrow {
    width: 100% !important;
}

.flag-icon {
    margin-left: 7px !important
}


.fas fa-compress, .fas fa-edit {
    padding: 8px;
    margin-left: -2px;
    border-radius: 100px;
    border: none;
}

.tab-content .tab-content {
    padding: 10px 0 !important;
}

.tab-content .nav.nav-tabs li.nav-item .nav-link {
    background-color: transparent;
    border-radius: 0;
}

.tab-content .nav.nav-tabs li.nav-item .nav-link:after {
    display: none;
}

.tab-content .nav.nav-tabs li.nav-item .nav-link:before {
    display: none;
}

.tab-content .nav.nav-tabs li.nav-item .nav-link.active {
    border-bottom: #080568 solid 3px !important;
    margin: 0 0px;
    border-radius: 0;
    color: #080568 !important;
    background-color: #f4f5f7;
}


.emptyclass {
    padding: 6px;
    color: #000000;
    border-radius: 100px;
    border: none;
    background-color: #f4f5f7;
    margin: -2px -5px;
    float: left;
    width: 32px;
    text-align: center;
    height: 32px;
}


.listingmaiiii #expense-limit-category-list-table_wrapper {
    padding: 0 !important;
    margin-right: 10px;
}


i.fas.fa-compress {
    padding: 7px;
}


#expense-limit-category-list-table thead th {
    height: 52px !important;
    border-bottom: none;
}

#expense-limit-level {
    margin-bottom: 0.5rem;
}

#expense-limit-list-table_wrapper {
    padding: 10px 0px;
}

.emptyclass {
    padding: 6px;
    color: #000000;
    border-radius: 100px;
    border: none;
    background-color: #f4f5f7;
    margin: -2px -5px;
    float: left;
    width: 32px;
    text-align: center;
    height: 32px;
}

.select2-modal > .select2-container--open {
    position: fixed !important;
    width: 125.656px !important;
}


/*
//////////////////////////////////////////////*/

.autocomplete-input-container {
    position: absolute;
    z-index: 1;
    width: 100%;
}

.autocomplete-input {
    text-align: center;
}

#my-input-autocomplete {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    font-size: 15px;
    border-radius: 3px;
    border: 0;
    width: 318px;
    height: 40px;
    text-overflow: ellipsis;
    padding: 0 1em;
}
#geofence-type-div {
    font-size: 15px;
    border-radius: 3px;
    border: 0;
    width: 300px;
    height: 40px;
    text-overflow: ellipsis;
    margin-right: 5px;
}

@media(max-width:1400px){
    .geo-searching #geofence-type-div, .geo-searching input {
        width: 250px !important;
    }

    .map-overlay { padding: 45px 10px 22px; }

    .map-overlay .card-text.other { font-size: 14px !important; }
}

#my-input-autocomplete:focus {
    outline: none;
}

.autocomplete-results {
    margin: 0 auto;
    right: 18px;
    position: absolute;
    display: none;
    background-color: white;
    width: 570px;
    padding: 0;
    list-style-type: none;
    margin: 0 auto;
    border: 1px solid #d2d2d2;
    border-top: 0;
    box-sizing: border-box;
    top: 47px;
}
.autocomplete-map-modal{
    right: 0;
    width: 318px;
    padding: 0;
    top: 40px;
}

.autocomplete-item {
    padding: 5px 5px 5px 35px;
    height: 35px;
    line-height: 26px;
    border-top: 1px solid #d9d9d9;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 100%;
}

.autocomplete-icon {
    display: block;
    position: absolute;
    top: 7px;
    bottom: 0;
    left: 8px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
}

.autocomplete-icon.icon-localities {
    background-image: url(https://images.woosmap.com/icons/locality.svg);
}

.autocomplete-item:hover .autocomplete-icon.icon-localities {
    background-image: url(https://images.woosmap.com/icons/locality-selected.svg);
}

.autocomplete-item:hover {
    background-color: #f2f2f2;
    cursor: pointer;
    display: inline-block;
}

.autocomplete-results::after {
    content: "";
    padding: 1px 1px 1px 0;
    /*height: 18px;*/
    box-sizing: border-box;
    text-align: right;
    display: block;
    /*background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png);*/
    background-position: right;
    background-repeat: no-repeat;
    background-size: 120px 14px
}

#geofenceMap .gm-style-iw-d > div {
    display: flex;
    padding: 14px 36px 14px 14px;
    flex-wrap: wrap;
}

.rounded-border {
    border-radius: 8px !important;
}

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    margin: 8px 0px;
}

.hr-sect:before,
.hr-sect:after {
    content: "";
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.35);
    height: 1px;
    font-size: 0px;
    line-height: 0px;
    margin: 0px 8px;
}


.page-inner.bg-brand-gradient {
    background: #fff !important;
}

.card-columns .parent-ul-list .dropdown-menu {
    min-width: 85px !important;
}

.swal2-container {
    z-index: 999999 !important;
}

#swal2-content {
    font-size: 22px !important;
    margin-top: 5px;
    margin-bottom: 5px;
}

#swal2-title {
    font-size: 26px !important;
}

.disable-lbl {
    margin-left: -4px;
}

.login-lang-select2 .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 1.5rem;
}

/*
///////existing changes/////////*/


.his-detail-wrapper {
    background: white;
    top: 100px;
    bottom: 0;
    left: -360px;
    transition-duration: .5s;
    transition-timing-function: ease-in;
}

.his-detail-wrapper.active {
    left: 0;
    width: 100%;
}

.detail-history-arrow {
    position: absolute;
    z-index: 11;
    display: inline-block;
    overflow: hidden;
    top: 0;
    right: -55px;
}

.detail-history-arrow i {
    font-weight: 900;
    padding: 11px 22px;
    color: white;
}

body {
    background-color: #eee
}

.mt-70 {
    margin-top: 70px
}

.mb-70 {
    margin-bottom: 70px
}

.card {
    box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
    border-width: 0;
    transition: all .2s
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(26, 54, 126, 0.125);
    border-radius: .25rem
}

.geo{
    flex-direction: initial;
}

.card-body {
    flex: 1 1 auto;
    padding: 1.25rem
}

.vertical-timeline {
    width: 100%;
    position: relative;
    /*padding: 1.5rem 0 1rem*/
}

.vertical-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 67px;
    height: 100%;
    width: 4px;
    background: #e9ecef;
    border-radius: .25rem
}

.vertical-timeline-element {
    position: relative;
    margin: 0 0 1rem
}

.vertical-timeline--animate .vertical-timeline-element-icon.bounce-in {
    visibility: visible;
    animation: cd-bounce-1 .8s
}

.vertical-timeline-element-icon {
    position: absolute;
    top: 0;
    left: 60px
}

.vertical-timeline-element-icon .badge-dot-xl {
    box-shadow: 0 0 0 5px #fff
}

.badge-dot-xl {
    width: 18px;
    height: 18px;
    position: relative
}

.badge:empty {
    display: none
}

.badge-dot-xl::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: .25rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -5px 0 0 -5px;
    background: #fff
}

.vertical-timeline-element-content {
    position: relative;
    margin-left: 90px;
    font-size: .8rem
}

.vertical-timeline-element-content .timeline-title {
    font-size: .8rem;
    text-transform: uppercase;
    margin: 0 0 .5rem;
    padding: 2px 0 0;
    font-weight: bold
}

.vertical-timeline-element-content .vertical-timeline-element-date {
    display: block;
    position: absolute;
    left: -90px;
    top: 0;
    padding-right: 10px;
    text-align: right;
    color: #adb5bd;
    font-size: .7619rem;
    white-space: nowrap
}

.vertical-timeline-element-content:after {
    content: "";
    display: table;
    clear: both
}

.timeline-image-view {
    display: flex;
    max-width: 75px;
}

.textnamemm.maintit {
    margin-left: 20px;
}

.textnamemm.maintit h5{
    display: block;
    font-weight: bold;
    font-size: 20px;
}


.card-header.innner{
    padding: 20px 11px;
}

.mainnn{
    width: 50px;
    height: 50px;
    padding: 0px;
    text-align: center;
    background: #f5f5f5;
    line-height: 50px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 60px;
    flex: 0 0 50px;
}

.mainimg{
    height: 20px !important;
    border-radius: 4px;
    width: 20px !important;
}

.timlinnn{
    border-left: solid 3px #dce3e9;
    position: relative;
    padding-left: 40px;
    margin-left: 40px;
    margin-right: 10px;
    font-weight: 500;
}

.timlinnn li{
    margin: 15px 0;
    list-style: none;
    left: 0;
    padding: 5px 15px;
    background: #67d3a9;;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #fff;
}

.timlinnn li h3{
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    width: 100%;
    color: #fff;
}

.timlinnn li.history_date{
    margin-left: -70px;
    border: solid 1px #dce3e9;
    padding: 8px 0px;
    background: #fff;
    width: 143px;
    border-radius: 100px;
    text-align: center;
    font-size: 14px;
    font-weight: 900;
    height: 35px;
    line-height: 17px;
    justify-content: center;
    color: #000;
}

.timlinnn li.history_date:after{
    display: none;
}

.timlinnn li.attend_in{
    background: transparent;
    padding: 0px 0;
    box-shadow:inherit;
    color: #000;
}

.timlinnn li.attend_in h3{
    font-weight: bold;
    color: #67d3a9;
    display: block;
    width: 100%;
    margin: 0;
    font-size: 14px;
}

.timlinnn li.select{
    background-color: #0061d8;
    color: #fff;
    box-shadow:inherit;
}

.timlinnn li.select:after{
    background-color: #0061d8;
    content: url( 'data:font/opentype;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAlklEQVQokZXPsQ4BQRSF4Vts7wEoSERQSKiU3oh3UWrUOrXn8A6biEQUhOZT2InNItZJbjLJmX/+O4H4Y2bYop1F/YwjYhcRWUQ06poGuHnmjGkdaIJrAR3QQ/yCRrgX0BGt1KUL/S+mSwGd0C33gUVRripQMuXoVB8ObLwyx7AEndD89I10WHtPXl3vExhYlkz7b6Y0D8PGnGhIOeK9AAAAAElFTkSuQmCC');
}

.timlinnn li.select:before{
    position: absolute;
    left: 32px;
    content: url( 'data:font/opentype;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAUElEQVQImYXOsQmAMABE0ZeQrGDlCi5iZR+brOBmTmLrLjY2ERQUf3Nw/IML6u6FDgVzupUZI2rLDAlDK0tbPohN+iRiw4IeE1YclxB+TtYTXBwJe/oLSLEAAAAASUVORK5CYII=');
}






.timlinnn li.attend_in:after{
    width: 25px;
    height: 25px;
    content: url( 'data:font/opentype;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAACXBIWXMAAAsTAAALEwEAmpwYAAABXElEQVQokZXTvy9eURgH8M+9XpU0YpBYpYtIukgJ/oBKhEHCQCPpIDQkulbQNhUkbyxiIWIwyBtNO3Ri0KWr0Bq1g8VgqDIQFvpruOcmNzevwbOck++P5znPc86JolJRLubQhWr8RYwr7OB1Vhhn9s04RQ820YfH6EUJ3ThDa978BN+wjiYs4hDT+I6loFnFXpqgEMxfUQziNB5hFp/wI2Bv8DskqIgxj585I9ziCDc5fAYnWIgxGKreJ+bQn/a8XUZwIpnJgzLcDurjcLzTMoLnaMCvOxKPx6hEXY7sxQYGcJ7BO1ERCq6kx+4Oa4RRyYQH8TFjfI8J/EmBAj5gCsuhv0mMBDFUSe7/GV5hKBS5jaJSMZI8w1m8K9NfDS7wD2uSBxLhuhDANsnFx3ibM1+iBbs4xlhKpD3vox3jOMBLNOJh4A/CsDqyWbMfYw+1+IxhbOFFhv+Cp1nzfwCBSmnw5q3dAAAAAElFTkSuQmCC');
    background: #f5f5f5;
    left: -14px;
    position: absolute;
    border-radius: 100px;
    text-align: center;
    padding: 5px;
}

.timlinnn li.attend_out:after{
    width: 25px;
    height: 25px;
    content: url( 'data:font/opentype;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAACXBIWXMAAAsTAAALEwEAmpwYAAABV0lEQVQokZXSPUiVURgH8N/73mtCBuJ4B0GhSQS5kA2CUyH4DkJCDoEKRVPhEgjloKAgBYXgIg0tgpAKTYLQ2CCYNFZDBEENRTSIBhp6Hd4jHA7XoWc6z//j4fk4WaNWSGIew7iCU+Q4xDZmYmEevev4hRGsYRQ9uIVVFPiN/tRcxwe8Qh9e4COe4BOWgmYFu+cFstD2CZ7hcdRJF76gF58jfA6zqORYwM/ECP+C+TjB5/ADT3PcwaL/i3mM5ejG2yaCFlTwvQm3haMcU/jaRPAHVzF5AXecY1k5V46hSLCvPNdLjCXmDlyK73yKR9iIsDe4jdd4gCzgBVqzRq0YD/M1QsXnWMcEjoJ4XLmkHvzFN2xmjVrxDm3BvId7ykW1h9bTmFGet1rFYERMhyLXLzDOKu88gJNqQt4M87wP+WV04gbuKrc/gB1IzUNJfh8PcaD8C9di8gxGyEtyS2YovQAAAABJRU5ErkJggg==');
    background: #f5f5f5;
    left: -14px;
    position: absolute;
    border-radius: 100px;
    text-align: center;
    padding: 5px;
}

.timlinnn li.attend_out{
    background: transparent;
    padding: 0px 0;
    box-shadow:inherit;
    color: #000;
}

.timlinnn li.attend_out h3{
    font-weight: bold;
    color: #ff194a;
    display: block;
    width: 100%;
    margin: 0;
    font-size: 14px;
}

.timlinnn li:after {
    width: 25px;
    height: 25px;
    content: url( 'data:font/opentype;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAACXBIWXMAAAsTAAALEwEAmpwYAAAArklEQVQokZXQoWpCYRgG4GdyJix5G1oE3UDQYlqzmgwGu67tMhbWTF6HWfAC3AbjxBkEEcRoMfgdOIwj6p/+Lzz/+37/w2tv4I7TxRvGyR2ogTkSVEo3ohqWgQ54vyWxiQXK2KKD32uwHkmP2EXdP8iqVi8kZWiPVoYyOMEPpgXoCZtISvOvJmjHfYSV88/lk56x/l+nhD5mMX/gK9AGL0Uov+MQnzjG/B1JaYEBJ5McIM7YBb4sAAAAAElFTkSuQmCC');
    background: #f5f5f5;
    left: -14px;
    position: absolute;
    border-radius: 100px;
    text-align: center;
    padding: 8px 5px;
}

/*.sublistcardslist:after {
    width: 25px;
    height: 25px;
    content: url( 'data:font/opentype;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAACXBIWXMAAAsTAAALEwEAmpwYAAAArklEQVQokZXQoWpCYRgG4GdyJix5G1oE3UDQYlqzmgwGu67tMhbWTF6HWfAC3AbjxBkEEcRoMfgdOIwj6p/+Lzz/+37/w2tv4I7TxRvGyR2ogTkSVEo3ohqWgQ54vyWxiQXK2KKD32uwHkmP2EXdP8iqVi8kZWiPVoYyOMEPpgXoCZtISvOvJmjHfYSV88/lk56x/l+nhD5mMX/gK9AGL0Uov+MQnzjG/B1JaYEBJ5McIM7YBb4sAAAAAElFTkSuQmCC');
    background: #f5f5f5;
    left: -14px;
    position: absolute;
    border-radius: 100px;
    text-align: center;
    padding: 8px 5px;
    top: 50%;
    bottom: 50%;
    align-items: center;
}*/

.timeline-data-container-div{
    height: calc(100vh - 270px);
    overflow: hidden;
    overflow-y: scroll;
}

.sublistcard{
    flex: 0 0 800px !important;
    max-width: 800px !important;
}

.sublistcardslist{
    margin: 27px;
    margin-bottom: 0;
    height: calc(100vh - 80px);
}

.textnamemm.mainsutit h5{
    color: #464d5c !important;
    font-size: 16px;
}

.titletog{
    border: none;
    box-shadow: none;
    border-top: solid 1px #e8e8e8;
    border-radius: 0;
    padding: 12px 30px 12px 70px;
}

.titletog button{
    display: flex;
    justify-content: space-between;
    text-decoration: none;
    color: #464d5c !important;
    font-size: 16px;
    font-weight: 600;
    padding: 3px 0;
}


.titletog button span{
    word-break: break-all;
    text-align: left;
}


.titletog button:hover, .titletog button:active, .titletog button:focus{
    text-decoration: none;
    color: #868e96;
    box-shadow: none;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}


i.arrowsublistr{
    border: solid 1px #e0e0e0;
    padding: 6px 0px;
    border-radius: 7px;
    width: 25px;
    height: 25px;
    color: #4992ff;
    font-size: 13px;
}

.listingdata{
    list-style: none;
    padding: 0;
    margin-right: 30px;
    float: left !important;
    width: 100% !important;
    margin-bottom: 0;
}

.listingdata li{
    border-bottom: dashed 1px #e1e1e1;
    margin: 0 0 10px 0;
    padding: 0px 0 5px 0;
    display: flex;
    justify-content: space-between;
    font-size: 16px;

}

.listingdata li .tstvalu{
    color: #39a0ff;
    text-align: left;
}

.listingdata li .valuedata{
    text-align: right;
}

.listingdata li span{
    width: 0;
    flex: 0 0 48%;
}


.card-body.card-bodylisting{
    padding: 0;
    padding-top: 10px;
}

.imagelist{
    padding: 0;
    margin: 0;
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    justify-content: space-between;
}

.imagelist li{
    width: 104px;
    float: left;
    border-radius: 4px;
    background-color: #efefef;
    height: 90px;
    margin-bottom: 10px !important;
    margin: 0;
    flex: 0 0 104px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.imagelist li image{
    height: 100%;
}

.profile-imageimfons{
    width: 20px !important;
}


.bacbbabbutt{
    position: absolute;
    right: 10px;
    top: 20px;
    border-radius: 100px;
    width: 50px;
    height: 50px;
    text-align: center;
    padding: 0;
    color: #fff;
    border: none;
}

.bacbtntex{
    width: 100% !important;
    float: left;
}



.submenuremov{
    position: absolute;
    right: 0px;
    padding: 10px;
    background: #efefef;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 11px;
    top: 10px;
    color: #464d5c;
}

.fullmapbutton{
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    display: flex;
    cursor: pointer;
    text-align: center;
    align-items: center;
    z-index: 9;
}

.fullmapbuttonchnage{
    transform: scale(-1);
    left: 0px !important;
}


.fullmapbuttonchnage .arrowbutt{
    padding-left: 0;
}

.arrowbutt{
    padding: 15px;
    border-radius: 50px;
    margin-right: -24px;
    z-index: 99;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}


#dashboardMap{
    /*height: calc(100vh - 50px);*/
}
.tsk_cmp:hover{
    background-color: #0061d8;
    color: #fff;
    box-shadow: inherit;
}

.tsk_cmp:hover:after{


    background-color: #0061d8;
    content: url(data:font/opentype;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAKCAYAAACE2W/HAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAlklEQVQokZXPsQ4BQRSF4Vts7wEoSERQSKiU3oh3UWrUOrXn8A6biEQUhOZT2InNItZJbjLJmX/+O4H4Y2bYop1F/YwjYhcRWUQ06poGuHnmjGkdaIJrAR3QQ/yCRrgX0BGt1KUL/S+mSwGd0C33gUVRripQMuXoVB8ObLwyx7AEndD89I10WHtPXl3vExhYlkz7b6Y0D8PGnGhIOeK9AAAAAElFTkSuQmCC);



}

.tsk_cmp:hover:before{
    position: absolute;
    left: 32px;
    content: url(data:font/opentype;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAUElEQVQImYXOsQmAMABE0ZeQrGDlCi5iZR+brOBmTmLrLjY2ERQUf3Nw/IML6u6FDgVzupUZI2rLDAlDK0tbPohN+iRiw4IeE1YclxB+TtYTXBwJe/oLSLEAAAAASUVORK5CYII=);
}

@media only screen and (max-width: 1366px) {

    .his-right-data {
        position: relative;
        background: white;
        color: black;
        height: 73% !important;
        overflow-y: scroll;
    }
}


@media only screen and (max-width: 767px) {
    .mapmobile{
        flex-wrap: wrap !important;
    }
    #dashboardCardViewDiv {
        padding-right: 14px !important;
        order: 1;
    }
    #dashboardMapDiv{
        display: block;
    }

    .mapmobile #dashboardMap{
        height: calc(100vh - 75vh) !important;
    }

    .his-detail-wrapper.active {
        left: 0;
        width: 100%;
        position: absolute;
        top: 0;
        margin: 0;
        height: 70vh;
    }


    #dashboardCardViewDiv{
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }


    .mainnn {
        width: initial;
        height: initial;
        flex: initial;
    }
    .titletog {
        padding: 12px 10px 12px 40px;
    }


    .page-content-wrapper {
        background-color: #fff !important;
    }

    .row.ml-1.mt-3.formdata{
        overflow-x: scroll;
    }

    .row.ml-1.mt-3.formdata input, .row.ml-1.mt-3.formdata .select2{
        width: 150px;
    }

}

span.task-completed-activity {
    background-color: transparent;
    box-shadow: inherit;
}

.task-completed-activity {
    color: #4680c7;
    background-color: rgba(255, 56, 43, 0.1);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 15%);
    padding: 1px 10px;
    border-radius: 4px;
    border: none;

}

.task-completed-activity:hover {
    color: #fff !important;
}

.custom-control-label-block{
    display: block !important;
}

#distance-report-table tbody .shown *, #order-list-table tbody .shown *, #request-table tbody .shown *, #history-table tbody .shown *, #geofenceInOut-report-table tbody .shown *{
    color: #fff !important;
}

#activity-timeline-report-table tbody .shown *, #order-list-table tbody .shown *, #request-table tbody .shown *, #history-table tbody .shown *{
    color: #fff !important;
}

#notification-log-table tbody .shown *, #order-list-table tbody .shown *, #request-table tbody .shown *, #history-table tbody .shown * {
    color: #fff !important;
}

#overtime-benefit-table tbody .shown *, #order-list-table tbody .shown *, #request-table tbody .shown *, #history-table tbody .shown * {
    color: #fff !important;
}

#overtime-request-table tbody .shown *, #order-list-table tbody .shown *, #request-table tbody .shown *, #history-table tbody .shown * {
    color: #fff !important;
}

#leave-report-table tbody .shown *, #order-list-table tbody .shown *, #request-table tbody .shown *, #history-table tbody .shown * {
    color: #fff !important;
}

#customer-approval-list-table tbody .shown *, #order-list-table tbody .shown *, #request-table tbody .shown *, #history-table tbody .shown * {
    color: #fff !important;
}

.textOverflow{
    text-overflow: ellipsis;
    overflow: hidden;
    width: 40px;
    height: 1.2em;
    white-space: nowrap;
    text-decoration: none !important;
}

.dataadd{width: 100% !important;}


.imagelist.poplistdoc{
    width: inherit;
    justify-content: normal;
}


.imagelist.poplistdoc.pdfexldoc li{ padding: 0 20px;}
.imagelist.poplistdoc.pdfexldoc li a{width: inherit}

.imagelist.poplistdoc li{
    margin: 0 6px;
    width: calc(20% - 6px);
    flex: inherit;
}

/*Vipin css*/
.imagelist.poplistdoc li .icon-download { position: absolute; max-width: 30px; right: -14px; top: -14px; z-index: 99999;}
.imagelist.poplistdoc li .icon-download img { max-width: 100%; }
.panel-content .form-control:focus{ border: #e5e5e5 solid 1px !important; }

.tasklistdata .collapse{
    float: left !important;
    width: 100% !important;
    min-height: 100px !important;
}




.row.ml-1.mt-3.formdata{
    flex-wrap: nowrap !important;
}

.row.ml-1.mt-3.formdata div{
width: 100%;
}



.inpuboxspace{
    margin: 0 2px;
}

.headerbuttn button{
    margin: 0 2px;
}

/**** Mukesh css 22-04-2022 *******/
.hSroll{  display: flex; flex-shrink: 0; position: relative;
    scrollbar-width: thin;
    scrollbar-color: #fff #ccc; mask-image: linear-gradient(to top, transparent, black),
linear-gradient(to left, transparent 6px, black 6px);
    mask-size: 100% 20000px;
    mask-position: left bottom;

    -webkit-mask-size: 100% 20000px;
    -webkit-mask-position: left bottom;
    transition: mask-position 0.3s, -webkit-mask-position 0.3s;
}

/*.hSroll:hover{-webkit-mask-position: left top;}*/
.hSroll::-webkit-scrollbar {
    width: 6px;
}
.hSroll::-webkit-scrollbar-track {
    background: #fff;
}
.hSroll::-webkit-scrollbar-thumb {
    background-color: #ccc ;
    border-radius: 6px;
}
.hSroll:hover{-webkit-mask-position: left top;}


.vehicleCol{ display: flex; flex-direction: column; overflow-x:hidden; display: flex; height:calc(100vh - 140px); }
.vehicleCard{background: #fff; box-shadow: 0 0 7px rgba(0,0,0,0.1); border-radius: 5px; margin: 5px; width:490px; padding:20px 15px 14px 15px; transition: all 0.5s ease 0s;}
.vehicleCard:hover{cursor: pointer; transform: scale(1) }
.cardHead{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px}
.cardHead .cardName{display: flex; justify-content: space-between; align-items: center;}
.cardHead .vehThumb { width: 55px; margin:0px 10px 0px 10px; text-align: center}
.cardHead .vehThumb img{ max-width: 100%; display: block}
.cardHead .cardName h3{font-size: 20px; line-height: 28px; color:#424242; font-weight: 600; margin: 0; word-break: break-all;}
.cardHead .cardName h3 span{ font-size: 14px; line-height: 18px; font-weight: 500; color: #848f9a; display: block}
.cardHead .indicater { list-style: none; display: flex;}
.cardHead .indicater li{ width: 34px; height: 34px;  border-radius: 50%; background: #f6f6f6; margin: 0 0 0 5px;     display: flex;	align-items: center;	justify-content: center;}
.vehicleCard .addressRow{display: flex; align-items: center; margin: 13px 0}
.vehicleCard .addressRow .icon{ width: 34px; margin: 0 5px 0 0; text-align: center;}
.vehicleCard .addressRow h4{font-size: 16px; line-height: 18px; color:#424242; font-weight: 500; margin: 0}
.vehicleCard .addressRow h4 span{ font-size: 14px; line-height: 18px; font-weight: 500; color: #848f9a; display: block}

.row.datagap {
    margin-top: -13px;
}


/*.cardDetail{ background: #fff; box-shadow: 0 0 7px rgba(0,0,0,0.1); border-radius: 5px; padding:20px 15px; margin: 10px 5px 0 0; position: sticky; top: 10px;}*/
.cardDetail{
    background: #fff;
    box-shadow: 0 0 7px rgb(0 0 0 / 10%);
    border-radius: 5px;
    padding: 20px 15px;
    margin: 4px 5px 0 0;
    position: absolute;
    z-index: 100;
    right: -316px;
    width: 306px;
}
.cardDetail .tabs{display: flex; justify-content: space-between;}
.cardDetail .tabs button{
    border: 1px solid #dee2e6;
    color: #212d38;
    font-weight: 500;
    background: none;
    padding: 7px 9px;
    border-radius: 5px;
    font-size: 12px;
    display: flex;
    align-items: center
}
.cardDetail .tabs button:first-child{ margin:0;}
.cardDetail .vehicleData{ margin: 10px 0 0;}
/*.cardDetail .vehicleData ul{ list-style: none; padding: 0; margin: 0;  overflow-x: auto;	height: calc(100vh - 250px); padding-right: 16px;}*/
.cardDetail .vehicleData ul{ list-style: none; padding: 0; margin: 0;  overflow-x: auto;	    max-height: calc(100vh - 250px);}
.cardDetail .vehicleData li{ display: flex; align-items: center; width: 100%; color: #848f9a; position: relative; margin: 0 0 10px; font-size: 14px; font-weight: 400;}
.cardDetail .vehicleData .icon{ width: 22px; display: block; margin: 0 8px 0 0;}
.cardDetail .vehicleData strong{ text-align: right; color: #424242; font-weight: 500; margin: 0 0 0 10px;     position: absolute; right: 10px; top:2px; width: 140px;}

.cardDetail button .fa.fa-chevron-down{
    font-size: 12px;
    margin-left: 10px;
}


#advDashboardMap{
    height:calc(100vh - 140px);
}

table.dataTable.nowrap th, table.dataTable.nowrap td {
    height: 30px;
}


@media (max-width:1399px) {
    .cardHead .cardName h3 {font-size: 14px;}
    .cardHead .cardName h3 span{ font-size: 12px;}
    .vehicleCard .addressRow{ margin: 10px 0;}
    .vehicleCard .addressRow h4{font-size: 14px;}
    .vehicleCard .addressRow h4 span{ font-size: 12px;}
    .cardDetail .tabs button{font-size: 14px}

    .vehicleCard {
        width: 440px;
    }
    .cardDetail {
        right: -316px;
    }

}


@media(max-width: 767px){
    .hSroll{ flex-shrink:2; flex-wrap: wrap; width: 100%; height: 50vh; order: 1;}
    .vehicleCol{  min-width: 100%;
        position: absolute;
        height: calc(100vh - 50vh); }
    #advDashboardMap{
        height:calc(100vh - 70vh);
    }

}

@media(max-width: 575px){
    .cardHead{ flex-wrap: wrap;}
    .cardHead ul{ margin: 10px 0;}
}


@media screen and (max-width: 767px) {
    .vehicleCard {
        width: 98% ;
        margin: 1%;
    }

    .cardHead .indicater {
        margin: 0;
        padding: 0;
        justify-content: space-around;
        width: 100%;
    }

    .filtermob {
        display: flex;
        flex-wrap: nowrap;
        padding-right: 11px;
    }

    .wrapper_filter.mobile{
        flex-direction: column !important;
    }

    .wrapper_filter.mobile .filtermob{
        margin-top: 10px;
        padding-right: 0;
    }


}

.dashboardvie .btn-primary{background-color: #fff; border: none !important;	box-shadow: none;}
.dashboardvie .btn-primary span{ color: #000 !important; }
.dashboardvie .btn-primary:hover{background-color:transparent !important; }
.advancenormal{padding: 0 17px !important;}


table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
    white-space: pre;
}


.sub-menu-right.bg-primary{
    background: rgba(0, 0, 0, 0.32) !important;
}
.tpm.btt img{
    height: 13px;
}

.vehicleIcon {
    max-width: 20px !important;
    max-height: 40px !important;
    margin-left: -8px;
    margin-top: -15px;
}

@media screen and (max-width: 767px) {
    .vehicleCard {
        width: 100%;
        margin: 0%;
    }

    .cardHead .indicater {
        margin: 0;
        padding: 0;
        justify-content: space-between;
        width: 80px;
        background: transparent !important;
        border-radius: 10px;
    }

    .cardHead .indicater li {
        width: 34px;
        height: 0px;
        border-radius: 50%;
        background: transparent !important;
        margin: 0px;
        margin-top: -10px;
    }

    .cardHead .vehThumb {
        flex: 1 0 55px;
    }


    .tpm img {
        height: 12px;
    }

    .tpm.btt img {
        height: 8px !important;
    }

    .vehicleCard {

        padding: 0;
    }

    .filtermob {
        display: flex;
        flex-wrap: nowrap;
        padding-right: 11px;
    }

    .wrapper_filter.mobile{
        flex-direction: column !important;
    }

    .wrapper_filter.mobile .filtermob{
        margin-top: 10px;
        padding-right: 0;
    }


    div.col-sm-12.col-md-7.mt-3.margin-bottom, .col-sm-12.col-md-5.mt-3.margin-bottom {
        margin: 0 !important;
        padding: 0 !important;
    }

    div.col-sm-12.col-md-7.mt-3.margin-bottom{
        margin-bottom: 3px !important;
    }

    .toggle-dashboard-table-map{
        display: none !important;
    }

    .footerDrawer .card-body{
        height: auto !important;
    }


    .newdashbo {
        top: 60px !important;
        right: 40px !important;
    }

    #search-nearby-location-modal .col-md-7 .row, #search-nearby-location-modal .col-md-12 .row{
        display: flex;
        flex-wrap: nowrap;
    }

    #search-nearby-location-modal .col-md-7 .row  .col-md-7 {
        width: 400px !important;
    }

    #search-nearby-location-modal .col-md-12 .row  .col-md-7{
        width: 400px !important;
        white-space: nowrap !important;
    }

    #search-nearby-location-modal .col-md-12 .row  .col-md-1.ml-6 , #search-nearby-location-modal .col-md-7 .row  .col-md-1.ml-6{
        width: 40px;
    }

    .row.nearby-location .col-md-7 {
        width: 150px !important;
    }

    modal-dialog[style="width: 60%; left: 0px; top: 0px;"]{
        width: 100% !important;
    }

    .over_more_options.shareLocationMenuOpened{
        margin-top: 61px !important;
        margin-right: 39px !important;
    }

    #search-nearby-location-modal .modal-dialog {
        width: 95% !important;
    }

    #vehicle-historical-location-modal .modal-dialog.modal-xl{
        width: 100% !important;
    }


    #back-to-dashboard{
        margin-top: 7px !important;
        margin-left: 13px !important;
    }

    #lock-unlock-modal .modal-dialog{
        width: 100% !important;
    }

    #dashboard-setting-modal li .row.mt-2{flex-wrap: nowrap !important;}

    .dashboardvie .btn-primary span button{
        white-space: nowrap;
    }

    .cardHead {
        flex-wrap: nowrap !important;
    }


    .row.datagap .addressRow{
        width: 50%;
        float: left;
    }

    .row.datagap .addressRow h4{
        font-size: 12px;
    }



    /*#pined-menu-item, .aside-pin{display: none !important}*/


    header.page-header, main.page-content {
        padding-left: 0.2rem !important;
        padding-right: 0.2rem !important;
    }


    .topfilt{
        display: flex !important;
        flex: 1 !important;
        flex-wrap: nowrap !important;
    }

    .topfilt .row.ml-0{
        width: 100%;
        flex: 1 0 100%;
        flex-wrap: nowrap;
        display: flex;
    }
    #dashboard-trip-header-div-hover button:first-child, #dashboard-status-header-div-hover button:first-child{
        margin-left: 0 !important;
    }


    .wrapper_filter.mobile .row.flex-column.addashboard#trip-status-filter-row {
        padding-left: 7px !important;
        padding-right: 10px !important;
    }

    .row.flex-column.addashboard#trip-status-filter-row{
        padding: 0 7px !important;
    }

    div#advDashboardMap.mapDashboard{
        height: calc(100vh - 66vh) !important;
    }

    .topfilt .row.ml-0 .search_bar{
        width: 40% !important;
    }

    .ml-3.mt-2.show-yearSelection-text{
        width: 100px !important;
    }
    .ml-2.show-yearSelection-select2-option{
        width: 163px !important;
    }
    .ml-2.mt-1.close-chart-on-vehicle-list-page{
        width: 16%;
        margin: 0 !important;
    }

    .ml-2.mt-1.close-chart-on-vehicle-list-page button{
        margin: 0;
        padding: 10px 0;
    }

    .modal-xl {
        max-width: 100% !important;
        margin-top: 10px !important;
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}

.tb-all, .on-trip-vehicles{
    color: #4eb4e1 !important;
    background-color: transparent !important;
    border-color: #4eb4e1 !important;
}

.tb-all:hover, .on-trip-vehicles:hover, .tb-all.btn-active, .on-trip-vehicles.btn-active{
    color: #fff !important;
    background-color: #4eb4e1 !important;
}


.tb-overspeed {
    color: #df6c1a !important;
    background-color: transparent !important;
    border-color: #df6c1a !important;
}

.tb-overspeed:hover, .tb-overspeed.btn-active {
    color: #fff !important;
    background-color: #df6c1a !important;
}


.tb-running, .intransit-trip-vehicles, .loaded-vehicles {
    color: #63be77 !important;
    background-color: transparent !important;
    border-color: #63be77 !important;
}
.tb-running:hover, .intransit-trip-vehicles:hover, .loaded-vehicles:hover, .tb-running.btn-active, .intransit-trip-vehicles.btn-active, .loaded-vehicles.btn-active{
    color: #fff !important;
    background-color: #63be77 !important;
}

.tb-idle {
    color: #ffb20e !important;
    background-color: transparent !important;
    border-color: #ffb20e !important;
}

.tb-idle:hover, .tb-idle.btn-active {
    color: #fff !important;
    background-color: #ffb20e !important;
    border-color: #ffb20e !important;
}



.tb-stopped, .not-on-trip-vehicles, .unloaded-vehicles {
    color: #ee6464 !important;
    background-color: transparent !important;
    border-color: #ee6464 !important;
}

.tb-stopped:hover, .not-on-trip-vehicles:hover, .unloaded-vehicles:hover, .tb-stopped.btn-active, .not-on-trip-vehicles.btn-active, .unloaded-vehicles.btn-active {
    color: #fff !important;
    background-color: #ee6464 !important;
    border-color: #ee6464 !important;
}



.tb-unreachable {
    color: #2196f3 !important;
    background-color: transparent !important;
    border-color: #2196f3 !important;
}


.tb-unreachable:hover, .tb-unreachable.btn-active {
    color: #fff !important;
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
}


.tb-new {
    color: #aaa !important;
    background-color: transparent !important;
    border-color: #aaa !important;
}

.tb-new:hover, .tb-new.btn-active {
    color: #fff !important;
    background-color: #aaa !important;
    border-color: #aaa !important;
}



.tb-inactive {
    color: #0d0d0d !important;
    background-color: transparent !important;
    border-color: #0d0d0d !important;
}


.tb-inactive:hover, .tb-inactive.btn-active {
    color: #fff !important;
    background-color: #0d0d0d !important;
    border-color: #0d0d0d !important;
}

.wrapper_filter.mobile .row.flex-column.addashboard#trip-status-filter-row {
    padding-left: 7px !important;
    padding-right: 10px !important;
}

.topfilt .row.ml-0 .search_bar{
    width: auto !important;
}

.topfilt .row.ml-0 .search_bar{
    width: 40% !important;
}

.addashboard #dashboard-status-header-div-hover, .addashboard #dashboard-trip-header-div-hover{
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    border: none;
    padding: 0;
}


.add-poi-button{
    box-shadow: none !important;
}

.add-poi-button:focus{
    box-shadow: none !important;
}

.dashboard_btn {
    width: inherit !important;
    font-weight: 500;
    padding: 7px 10px;
    font-size: 13px;
    white-space: nowrap;
    text-align: center;
    border-width: 2px;
}

.addashboard #dashboard-status-header-div-hover{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.topfilt .row.ml-0 .search_bar{
    width: 40% !important;
}

.topfilt .row.ml-0 .search_bar{
    width: auto !important;
}

.halt-loading-vehicles, .at-loading-location-vehicles, .route-deviated-vehicles {
    color: #aaa !important;
    background-color: transparent !important;
    border-color: #aaa !important;
}



.hide-by-filter{
    display: none;
}

.error-btn{
    color: #fff !important;
    background-color: #ee6464 !important;
    border-color: #ee6464 !important;
}

.tickets,.stoppage-tickets,.trip-tickets{
    list-style-type: none;
    width: 100%;
    padding: 0;
}

.ticket {
    background: #ccc; padding : 10px;
    border-bottom: 2px solid white;
}

.ticket a .tpr-header-content {
    width: 100%;
    font-weight: 600;
    display: block;
    padding: 0 0 5px 0;
    color: white;
}

.ticket a .tpr-header-title {
    display: inline-block;
    text-align: left;
    width: 49%;
}

.ticket a .tpr-header-title.pull-right {
    display: inline-block;
    text-align: left;
    width: 49%;
    padding-right: 10px;
}

.ticket a .tpr-content {
    display: block;
    padding: 5px 10px;
    background: white;
    color: black;
}

.ticket a .tpr-address-data {
    display: block;
    text-align: left;
    margin-bottom: 2px;
    margin-top: 2px;
}

.ticket a .tpr-address-data span:first-child {
    vertical-align: top;
    display: inline-block;
}

.ticket a .tpr-address-data span:last-child {
    display: inline-block;
    width: calc(100% - 40px);
}

.ticket a .tpr-date-time {
    display: block;
    text-align: left;
}

.ticket a .tpr-date-time .tpr-speed {
    display: block;
    width: 39%;
}

.ticket a .tpr-date-time .tpr-time {
    display: inline-block;
    width: 60%;
}

.ticket a span img {
    height: 24px;
    margin-right: 10px;
}
.li-active {
    background: var(--theme-primary);
}

.sliderDiv .slider-handle{
    position: absolute;
    top: -9px;
    width: 5px;
    height: 20px;
}
.slider.slider-horizontal .slider-handle{
    margin-left: -1px;
    margin-right: -4px;
}

.slider.slider-horizontal {
    width: 160px;
    height: 20px;
}

.slider-selection{
    background: #0a50f5f7;
}
#GC .slider-handle{
    background: #0a50f5f7;
}
.sliderDiv{
    padding-right: 2px;
    float:left;
    overflow: hidden;
    margin: 5px;
    display: inline;
}
#slider{
    width: 200px;
}
#vehicle-slider{
    width: 200px;
}
.slider.slider-horizontal .slider-track{
    height: 5px;
    margin-top: -3px;
    background: #ffffff;
}

#play_pause_btn .fas.fa-play {
    margin-left: 4px;
}

.slidermain{
    display: flex;
    width: 240px;
    position: absolute;
    margin-top: -70px !important;
    border-radius: 86px;
    left: 0;
    right: 0;
    margin: auto;
}


.slidermainwidth{
    width: 240px;
    transform: rotateY(360deg);
    background-color: #1d2b6e33;
    box-shadow: 3px 12px 14px 0px #ccc;
    border: solid 1px #1d2b6e59;
}


.slidermain     .slider-track-low{
    background: #000;
}

#GC .slider-handle {
    background: #1d2b6e !important;
}


.slidermain .btn.btn-primary.btn-md.btn-icon.rounded-circle.waves-effect.waves-themed{
    width: 50px !important;
    height: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1d2b6e !important;
    border-color: #1d2b6e !important;
    position: absolute !important;
}

.slidermain .btn.btn-primary.btn-md.btn-icon.rounded-circle.waves-effect.waves-themed i{
    font-size: 22px !important;
}


.slidermain .slider-selection{
    background-color: #1d2b6e !important;
}

.ntf-break {
    word-break: break-all !important;
    white-space: pre-wrap !important;
}

#calendar-view{
    height: 880px;
}

.event-circle {
    width: 34px;
    height: 34px;
}

.fc-daygrid-day-bottom{
    font-size: 12px !important;
}

.task-delete-button{
    padding: 8px;
    margin-left: -2px;
    border-radius: 100px;
    border: none;
}
.horizontal-row {
    border-bottom: solid 1px #dee2e6;
    border-top: solid 1px #dee2e6;
    width: 49%;
    text-align: left;
    margin-left: 42px;
}

.btn-view {
    background-color: #dee2e6;
}

.fc-more-popover {
    max-height: 35%;
    overflow-x: hidden;
    overflow-y: scroll;
}

.fc-more-popover .fc-popover-body {
    min-width: 100% !important;
    padding: 10px !important;
}

.fc-more-popover {
    width: 257px;
!important;
}

.fc-license-message {
    display: none;
!important;
}

.custom-field-label {
    word-break: break-all;
}

.task-view-icon {
    width: 18px;
    height: 17px;
}

.sch-btn{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a + ul > li > a {
    position: relative;
}
.nav-menu li > ul li a > [class*='fa-']{
    right: 0;
    position: absolute;
}

.nav-menu li.active:not(.open) > a:before {
    color: #24b3a4;
    right: 6px;
}

/*vehicle gps css*/
.toggle_container {
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:#e7e7e7 !important;
}

.aline-center {
    text-align: center;
}

.toggleBar {
    font-size: 15px;
    margin: 0 auto;
    display: inline-block;
    padding: 0 60px;
    background: #00000038;
    color: white;
}

.vehicle-his-data {
    background: #ffffff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.vehicle-his-data a {
    margin-bottom: 10px;
}

.vehicle-his-data div {
    margin-bottom: 10px;
}

@media screen and (max-width:525px) {
    .vehicle-his-data {
        padding-left: 20px;
    }
}

.btn-his {
    background: #e6e6e6;
    display: inline-block;
    padding: 0.25em 0.4em;
    font-weight: 500;
    /* line-height: 1; */
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 4px;
    margin-right: 15px;
}

.over_map {
    background: white;
    padding: 0;
    box-shadow: 1px 1px 9px -2px #0000007d;
    display: none;
    margin-right: 14px;}

.over_map .row{
    padding: 0;
    margin: 0;
}

.over_map .row button:hover{
    color: #fff;
}

.over_map>div {
    padding-top: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid #0000001a;
}

.over-map.active {
    display: block;
}

.over_map input {
    margin-right: 10px;
}

.over_mappop>div {
    padding-top: 0;
    margin-top: -3px;
    border-bottom: none;
}

.newdashbo .over_map.over_mappop.moreOptionMenuOpened{
    padding: 10px 0;
}

.newdashbo .over_map .row button {
    margin: 2px 11px;
}

.transform_icon {
    transform: rotate(180deg);
}

.speed-chart {
    height: 150px;
    width: 100%;
    text-align: center;
    bottom: 1%;
}

#vehicle-GC .slider-handle {
    background: #1d2b6e !important;
}

.measure_distance_tooltip {
    font-weight: 600;
    font-size: 11px;
    background: #b3b0b0;
    padding: 4px;
    color: white;
    margin-top: 5px;
}

.measure_distance_tooltip::before {
    content: '';
    position: absolute;
    border: 7px solid transparent;
    margin-top: 1px;
    margin-left: -18px;
    border-bottom-color: #b3b0b0;
    transform: rotate(270deg);
}

.name_tooltip {
    font-weight: 600;
    font-size: 11px;
    background: var(--theme-primary);
    padding: 4px;
    color: white;
    margin-top: 5px;
}

.customer_name_tooltip {
    font-size: 11px;
    background: var(--theme-primary);
    padding: 4px;
    color: white;
    margin-bottom: 65px;
}

div#geoMapDiv .geo-searching {
    background: transparent !important;
    margin: 0 !important;
    left: 50%;
    transform: translateX(-50%);
}
.name_tooltip::before {
    content: '';
    position: absolute;
    border: 7px solid transparent;
    margin-top: -18px;
    margin-left: -3px;
    border-bottom-color: var(--theme-primary);
}

.geofenceChecked::before{
    border-color: transparent !important;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    margin: 0;
}

.fileUpload-Small .fileupload, .fileUpload-Small label.custom-file-label::after {
    height: 80px;
    background-size: contain;
}
.taskImageList li.addImage { width: 14%; background: transparent;}
.taskImageList li {
      position: relative; padding: 0 10px !important;
}
.taskImageList li input[type='file'] {opacity: 0; position: absolute; left: 0;  width: 100%;height: 100%; z-index: 9;  cursor: pointer;}


.custom-upload-btn {
    font-size: 0;  outline: 0; position: absolute; width: 100%;  height: 100%;
    background: url(/resources/img/default/add_btn.jpg) no-repeat center center !important;
    border: 3px dashed #ddd;  top: 2px; cursor: pointer;
}
.taskImageList li > img { height: 42px;  margin-bottom: 6px; width: auto; max-width: 100%; }
.taskImageList li .textOverflow { font-weight: 500;  width: 88px; text-align: center}
/*.taskImageList li > img.show-task-image { cursor: pointer;}*/
.taskImageList .delete-button { height: 20px;  font-weight: bold;  top: -10px;  right: -6px;}

.btn-danger i.fal.fa-minus { font-weight: bold;}
/*.imagelist.poplistdoc.pdfexldoc.taskImageList li { padding: 0 2px;}*/

.dropdown-menu.show { z-index: 99999; }
.filter-option { z-index: 999; }



#cardDetailView .card-body { width: 100%; }
#add-rider-detail-modal .needs-validation .form-row .col-md-3, #edit-rider-detail-modal .needs-validation .form-row .col-md-3 { display: flex; align-content: flex-end; flex-wrap: wrap; }
.needs-validation .form-row input[type="password"] { padding-right: 27px; }
#append-shift-template .btn-primary { white-space: nowrap; }
.needs-validation .form-row input[type="password"][dir="rtl"] { padding-right: 10px; padding-left: 27px; }
.needs-validation .dropdown-menu.show { z-index: 99999; }
#append-shift-template .form-label { font-size: .75rem; }


@media screen and (max-width: 1899px) {
    .formdata .bootstrap-select .dropdown-menu { min-width: 270px; }
    .formdata .form-control, .formdata .btn { padding: 0.5rem; }
    .formdata .bootstrap-select.form-control { padding: 0; }
    .headerbuttn button i { margin-right: 5px; }
}

@media screen and (max-width: 1399px) {

}


/*vipin css*/
.signup-body-background .form-group { position: relative; }
.signup-body-background .help-block { position: absolute; right: 0; }
.signup-body-background .form-label { float: none !important; text-align: left; }
.signup-body-background .form-control { text-align: left; }
.signup-body-background .field-icon { float: right !important; }
.geofence-card-view-scroll .card-footer {  border: 0; }
.geofence-card-view-scroll .geoFence-card-name { width: 125px; overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap; }

@media screen and (max-width: 1399px) {
    .signup-body-background .form-group.mb-3 { margin-bottom: 0.7rem !important; }
    .signup-body-background .form-label { font-size: 13px !important; }
    .signup-body-background h3 { font-size: 20px; }
    .signup-body-background .specific-login-btn-color { margin-top: 0 !important; }
    .signup-body-background .login-img img { height: 70px; }
    .map-overlay .task-card-name { width: 60%; }
    .geofence-card-view-scroll .geoFence-card-added { font-size: 14px !important; }
}

@media screen and (max-width: 1279px) {
    .geofence-card-view-scroll .geoFence-card-added { font-size: 12px !important; }
    .map-overlay .task-card-name { width: 52%; }
}




@media screen and (max-width: 991px) {
    .imagelist.poplistdoc li { width: calc(19% - 6px); }
}

@media screen and (max-width: 576px) {
    #task-addimagePreview { height: auto !important; }
    .imagelist.poplistdoc li { width: calc(33% - 6px); }
    .taskImageList li.addImage { width: 82px; }
    .card .card-header { }
}

@media screen and (max-width: 389px) {
    .imagelist.poplistdoc li { width: calc(31% - 6px); }
}

.image-top-button { height: 21px; top: 3px; right: 5px;}
.taskImageList.download-task li img { height: 72px;}
.imagelist.poplistdoc.taskImageList.download-task li {  width: calc(23.6% - 6px);}

.model-images { padding-bottom: 35px; height: 686px;}
.model-images img { object-fit: contain; max-width: 100%; }

/**
    ORDER TIMELINE
 */
.fc .fc-toolbar-title {
    font-size: 1rem !important;
}

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0.1rem !important;
}
#calendar-view table {
    table-layout: fixed;
}
.color-picker-input {  padding: 2px 5px; width: 87px !important;  height: 40px;}


.form-white { padding: 15px; background: #fff; border-radius: 5px; border: 1px solid #ccc;
}

.custom-style .card-body { width: 100% }

.filter-option{
    left:10px;bottom: 52px;position:absolute;width: 22%;z-index: 9999;
}
.rangestopFilter.filter-option {
    min-width: 250px;
}

div.table-header{
    font-weight: 500;
    font-size: large;
}

#task-order-route-schedule-modal .modal-dialog { margin: 3.75rem auto; }
#schedule-route-form .bootstrap-select .dropdown-menu { max-width: 397px; }

.cardBox {
    background: #fff;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.09);
}

.form-white { padding: 15px; background: #fff; border-radius: 5px; border: 1px solid #ccc; }


.salary-slip-card {
    display: flex;
    padding: 30px;
   /* width: 100%;*/
    height: 100%;
    margin-left: 10px;
    overflow: scroll;
}
.selection-indicator {
    position: absolute;
    bottom: 12rem;
    left: 22px;
    display: none;
    color: blue;
    font-size: 20px;
}
.selection-indicator.show{display: block}
.salary-slip-img-class.selected-image .selection-indicator {
    display: block; /* Show the selection indicator when the image is selected */
}
.salary-child-card {margin-top: 1rem;padding: 6px;position: relative;display: inline-block;}
.salary-slip-img-class{
    width: calc(20% - 10px);
    box-shadow: 0 42px 60px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;}
.selected-image {border: 5px solid #28026f;}
.salary-slip-img-class:hover {transform: scale(1.4);}
.salary-slip-img-class{width: 332px;height: 22rem;}
.bottom-right {position: absolute;bottom: 8px;right: 16px;}
.salary-title{text-align: center;font-size: medium;}
.update-button{float: right;}
#elegant-template.payslip-content{
    font-size:12px;
    color:#000;
    padding:0px 15px;
    margin:2em 2em;
    box-sizing:border-box;
}
.salary-slip-card.salary-card-hover .selection-indicator {z-index: 4;}
.salary-slip-card.salary-card-hover .salary-slip-img-class:hover {position: relative;z-index: 5;}
#elegant-template.payslip-content .payslip-header{padding:0 10px;}
#elegant-template.payslip-content .font-xsmall,
#mini-template.payslip-content .font-xsmall{font-size:11px;}
#elegant-template.payslip-content .logo-content{margin-right:10px;}
#elegant-template.payslip-content .emp-detail-section{font-size:13px;padding:0px 0px 10px;margin:0px 0px 0px 10px;}
#elegant-template.payslip-content .emp-detail-section .employee-net-pay{text-align:left;border:1px solid #C4CBD4;border-radius:10px;}
#elegant-template.payslip-content .emp-detail-section .employee-net-pay .netpay-section{
    padding:20px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    background-color:#EDFCF1;
}
#elegant-template.payslip-content .emp-detail-section .employee-net-pay .days{padding:10px 0px;margin:0px 20px;border-top:1px dashed #C4CBD4;}
#elegant-template.payslip-content .emp-detail-section .employee-net-pay .days td{padding:5px 0px;}
#elegant-template.payslip-content .custom-field-border{border-top:1px dashed #C4CBD4;margin:0px 0 10px;}
#elegant-template.payslip-content .uppercase-bold{text-transform:uppercase;font-weight:bold;}
#elegant-template.payslip-content .emp-detail-section td{padding:10px 10px 4px 0px;}
#elegant-template.payslip-content .font-small,
#simple-template.payslip-content .font-small,
#simple-template.payslip-content .font-small{font-size:13px;}
#elegant-template.payslip-content .payslip-month,
#mini-template.payslip-content .font-medium{font-size:16px;padding-right:13px;}
#elegant-template.payslip-content .emp-details-table{width:100%;font-size:12px;}
#elegant-template.payslip-content .emp-details-table td.details-header{color:#666;width:32%;word-wrap:break-word;}
#elegant-template.payslip-content .emp-details-table td.details-value{width:50%;word-wrap:break-word;}
#elegant-template.payslip-content .emp-details-table td{padding:5px 10px 5px 0px;font-size:14px;}
#elegant-template.payslip-content .net-pay-large{font-size:2em;margin:0px 0px 10px 10px;line-height:25px;}
#elegant-template.payslip-content .employee-net-pay .text-employee-netpay{color:#658567;margin-left:10px;line-height:12px;}
#elegant-template.payslip-content .employee-net-pay .border-green{border-left:3px solid #5FD068;border-radius:3px;margin-right:5px;}
#elegant-template.payslip-content .payslip-table{width:100%;margin:0px auto;}
#elegant-template.payslip-content .payslip-table th{
    padding:15px 0px 10px;
    color:#333;
    border-bottom:1px dashed #C4CBD4;
}
#elegant-template.payslip-content .payslip-table td{padding:10px 0px;}
#elegant-template.payslip-content .emp-summary-header{font-size:12px;letter-spacing:1.1px;}
#elegant-template.payslip-content .payslip-table td.amount-field,
#elegant-template.payslip-content .payslip-table th.amount-field{text-align:right;padding-left:5px;padding-right: 13px;}
#elegant-template.payslip-content .earning-and-deductions-table,
#elegant-template.payslip-content .reimbursement-table-border,
#elegant-template.payslip-content .netpay-table{
    margin:30px -3px 15px;
    border:1px solid #D2D5DF;
    border-radius:10px;
}
#elegant-template.payslip-content .payslip-table th{text-transform:uppercase;}
#elegant-template.payslip-content .payslip-table td.compensation-amount{
    color:#000;
    font-weight:600;
    padding-left:0px;
    padding-right: 13px;
}
#elegant-template.payslip-content .payslip-table td.total-netpay{
    background:#EDFCF1;
    font-size:14px;
    text-align:center;
    border-bottom-right-radius:8px;
    border-top-right-radius:8px;
}
#elegant-template.payslip-content .net-pay-section{letter-spacing:0.5px;text-transform:uppercase;}
#elegant-template.payslip-content .amount-in-words{
    text-align:right;
    padding:10px 10px 15px;
    margin-bottom:10px;
    border-bottom:1px solid #D2D5DF;
}
#elegant-template.payslip-content .payslip-info{font-size:10px;padding-top:10px;}
#elegant-template.payslip-content .border-top{border-top:1px solid #C4CBD4;margin:0px 0 5px;}
#elegant-template.payslip-content .text-center{text-align:center;}
#elegant-template.payslip-content .text-muted{color:#666;}
#elegant-template.payslip-content h4{
    color:#333;
    font-size:20px;
    line-height:1em;
    margin:0px 0px 6px 0px;
}
#elegant-template.payslip-content h1{font-size:2.6em;}
#elegant-template.payslip-content p,
#mini-template.payslip-content p,
#simple-template.payslip-content p{margin:0px;}
#elegant-template.payslip-content .font-large,
#simple-template.payslip-content .font-medium{font-size:18px;}
#elegant-template.payslip-content .highlight-text{color:#333;font-weight:bold;background-color:#F8F8FB;}
#elegant-template.payslip-content .highlight-text.border-left-radius{border-bottom-left-radius:8px;}
#elegant-template.payslip-content .highlight-text.border-right-radius{border-bottom-right-radius:8px;}
#elegant-template.payslip-content .pleft-small{padding-left:5px!important;}
#simple-template.payslip-content {
    font-size: 12px;
    color: #000;
    margin: 2em 2em;
    box-sizing: border-box;
}
#simple-template.payslip-content.payslip-header{padding:0 10px 10px;border-bottom:1px solid #E3E3E3;}
#simple-template.payslip-content .font-xsmall{font-size:10px;}
#simple-template.payslip-content .payslip-month{font-size:16px;padding:15px 10px 0;}
#simple-template.payslip-content .emp-detail-section{padding:26px 10px;}
#simple-template.payslip-content .emp-detail-section td{padding:10px 3px 5px 0px;}
#simple-template.payslip-content .paid-days-details{margin-right:20px;margin-top:10px;}
#simple-template.payslip-content .paid-days-details td{padding:10px;}
#simple-template.payslip-content .paid-days-details .border-right{border-right:1px solid #ddd;}
#simple-template.payslip-content .paid-days-details .border-top{border-top:1px solid #ddd;}
#simple-template.payslip-content .paid-days-details .border-left{border-left:1px solid #ddd;}
#simple-template.payslip-content .paid-days-details .border-bottom{border-bottom:1px solid #ddd;}
#simple-template.payslip-content .payslip-table,
#mini-template.payslip-content .payslip-table{ width:100%; }
#simple-template.payslip-content .payslip-table th{
    padding:12px 10px;
    background:#ECF8F0;
    color:#0B2C15;
}
#simple-template.payslip-content .payslip-table td{padding:10px;}
#simple-template.payslip-content td.details-header{width:36%;word-wrap:break-word;}
#simple-template.payslip-content td.details-value{width:60%;word-wrap:break-word;}
#simple-template.payslip-content .amount-field{text-align:right;padding-left:5px;}
#simple-template.payslip-content .compensation-amount{color:#101010;font-weight:bold;}
#simple-template.payslip-content .total-netpay{
    border:2px dashed #5CBB76;
    padding:20px;
    border-radius:8px;
}
#simple-template.payslip-content .payslip-info{font-size:10px;padding-top:10px;}
#simple-template.payslip-content .border-right{border-right:1px solid #E3E3E3;}
#simple-template.payslip-content .border-top{border-top:1px solid #E3E3E3;}
#simple-template.payslip-content h4{
    color:#333;
    font-size:20px;
    line-height:1em;
    margin:0px 0px 8px 0px;
}
#simple-template.payslip-content h1{font-size:2.6em;}
#simple-template.payslip-content .uppercase{text-transform:uppercase;color:#362106;}
#simple-template.text-center{text-align:center;}
.clearfix::before,
.clearfix::after{
    content:' ';
    display:table;
    clear:both;
}
#mini-template.payslip-content {
    font-size: 12px;
    color: #000;
    padding-top: 10px;
    margin: 2em 2em;
    border: 1px solid #E3E3E3;
    box-sizing: border-box;
}
#mini-template.payslip-content .payslip-header{padding:0 10px 10px 10px;border-bottom:1px solid #E3E3E3;}
#mini-template.payslip-content .payslip-month{
    padding:5px;
    font-size:16px;
    text-align:center;
}
#mini-template.payslip-content .emp-detail-section{padding:5px 10px 0px;}
#mini-template.payslip-content .emp-detail-section td:first-child{padding:1px 0px 3px;}
#mini-template.payslip-content .emp-detail-section td{padding:1px 0px 3px 4px;}
#mini-template.payslip-content .payslip-table th{
    padding:5px 10px;
    background:#F5F5F5;
    border-top:1px solid #e3e3e3;
    border-bottom:1px solid #e3e3e3;
    height:28px;
}
#mini-template.payslip-content .payslip-table td{padding:4px 10px;height:28px;}
#mini-template.payslip-content .gross-table td{padding:5px 10px;}
#mini-template.payslip-content .empty-table th{border-bottom:0px;background:none;}
#mini-template.payslip-content td.details-header{width:35%;word-wrap:break-word;}
#mini-template.payslip-content td.details-value{width:60%;word-wrap:break-word;}
#mini-template.payslip-content .expense-reimbursement td,
#mini-template.payslip-content .reimbursement-table tr:first-child td{height:47px;}
#mini-template.payslip-content .amount-field{text-align:right;padding-left:5px;}
#mini-template.payslip-content .total-netpay{padding:5px;background:#F5F5F5;}
#mini-template.payslip-info{
    font-size:10px;
    padding-top:10px;
    color:#777;
}
#mini-template.payslip-content .border-right{border-right:1px solid #E3E3E3;}
#mini-template.payslip-content .border-top{border-top:1px solid #E3E3E3;}
#mini-template.payslip-content .border-bottom{border-bottom:1px solid #E3E3E3;}
#mini-template.payslip-content h4{
    color:#333;
    font-size:20px;
    line-height:1em;
    margin:0px 0px 8px 0px;
}
#mini-template.payslip-content h1{font-size:2.6em;}
#mini-template.payslip-content .text-muted{color:#777;}
#mini-template.payslip-content .uppercase{text-transform:uppercase;color:#362106;}
#mini-template.text-center {text-align: center;}
#standard-template.payslip-content {
    font-size: 12px;
    color: #000;
    padding: 0px 15px;
    margin: 2em 2em;
}
#standard-template.payslip-content .payslip-header {margin-bottom: 0.7em;padding-left: 5px;}
#standard-template.payslip-content .font-xsmall {font-size: 11px;}
#standard-template.payslip-content .emp-detail-section {
    border-top: 1px solid #e3e3e3;
    border-bottom: 1px solid #e3e3e3;
    font-size: 13px;
    padding: 12px 5px 15px;
    margin-bottom: 5px;
}
#standard-template.payslip-content .emp-detail-section td {padding: 4px 3px 4px 0px;}
#standard-template.payslip-content .emp-detail-section .employee-net-pay {
    text-align: center;
    padding: 10px;
    margin-left: 10px;
    border: 1px solid #e3e3e3;
}
#standard-template.payslip-content .payslip-table {width: 100%;margin-bottom: 1.2em;table-layout: fixed;}
#standard-template.payslip-content .payslip-table.no-bottom-gap {margin-bottom: 0;}
#standard-template.payslip-content .payslip-table thead th {background: #F5F5F5;padding: 8px 9px 5px 5px;}
#standard-template.payslip-content .payslip-table thead td.header-gap {border-bottom: 0;background: none;}
#standard-template.payslip-content .payslip-table td {padding: 8px 9px 5px 5px;}
#standard-template.payslip-content .payslip-table td.splitup-column {padding: 0;vertical-align: top;}
#standard-template.payslip-content .text-muted {color: #777;}
#standard-template.payslip-content .payslip-table .total-row td {border-top: 1px solid #e3e3e3;padding: 8px 5px;}
#standard-template.payslip-content td.details-header {width: 35%;word-wrap: break-word;}
#standard-template.payslip-content td.details-value {width: 60%;word-wrap: break-word;}
#standard-template.payslip-content .amount-field {text-align: right;padding-left: 5px;}
#standard-template.payslip-content .net-pay-band {
    background: #e9f7e7;
    margin: 0px -50px;
    padding: 14px 42px 14px;
    font-size: 16px;
}
#standard-template.payslip-content .font-small {font-size: 13px;color: #777;}
#standard-template.payslip-content .emp-summary-header {padding-bottom: 10px;font-weight: bold;}
#standard-template.payslip-content .net-pay-large {margin-top: 5px;margin-bottom: 7px;color: #029c10;}
#standard-template.payslip-content .netpay-line {color: #4EAD5B;font-weight: bolder;}
#standard-template.payslip-content .group {margin-bottom: 25px;}
#standard-template.payslip-content .uppercase {text-transform: uppercase;}
#standard-template.payslip-content h4 {
    color: #333;
    font-size: 20px;
    line-height: 1em;
    margin: 0px 0px 8px 0px;
}
#standard-template.payslip-content h1 {font-size: 2.6em;}
#standard-template.payslip-content .font-xs {font-size: 12px;}
#standard-template.payslip-content p {margin: 0px;}
#standard-template.payslip-content .text-center {text-align: center;}
#professional-template.payslip-content {
    font-size: 12px;
    color: #000;
    padding: 10px 20px 20px;
    margin: 2em 2em;
    box-sizing: border-box;
}
#professional-template.payslip-content .payslip-header {padding: 0 10px 10px;border-bottom: 1px solid #E3E3E3;}
#professional-template.payslip-content .font-xsmall {font-size: 10px;}
#professional-template.payslip-content .emp-detail-section {
    font-size: 13px;
    padding: 20px 10px;
    border-bottom: 1px solid #E3E3E3;
}
#professional-template.payslip-content .emp-detail-section .employee-detail {width: 54%;float: left;}
#professional-template.payslip-content .emp-detail-section td {padding: 10px 3px 4px 0px;}
.pull-right {float: right;}
#professional-template.payslip-content .font-small {font-size: 13px;}
#professional-template.payslip-content .emp-detail-section .employee-net-pay {width: 46%;}
#professional-template.payslip-content .payslip-month {font-size: 16px;padding-bottom: 25px;}
#professional-template.payslip-content .emp-details-table {width: 100%;font-size: 12px;}
#professional-template.payslip-content .emp-details-table td.details-header {color: #666;width: 35%;word-wrap: break-word;}
#professional-template.payslip-content .emp-details-table td.details-value {width: 60%;word-wrap: break-word;}
#professional-template.payslip-content .emp-details-table td {padding: 5px 10px 5px 0px;font-size: 14px;}
#professional-template.payslip-content .net-pay-large {margin: 5px 0px;}
#professional-template.payslip-content .payslip-table {width: 100%;}
#professional-template.payslip-content .payslip-table th {
    padding: 25px 10px 10px;
    color: #362106;
    font-style: italic;
    border-bottom: 1px solid #E3E3E3;
    height: 52px;
}
#professional-template.payslip-content .payslip-table td { padding: 10px; }
#professional-template.payslip-content .amount-field {text-align: right;padding-left: 5px;}
#professional-template.payslip-content .reimbursement-table th {border-top: 1px solid #E3E3E3;padding-top: 10px;}
#professional-template.payslip-content .compensation-amount { color: #000; font-weight: 600; }
#professional-template.payslip-content .total-netpay {background: #F4F8FF;padding: 15px;border-radius: 4px;}
#professional-template.payslip-content .payslip-info {font-size: 10px;padding-top: 10px;}
#professional-template.payslip-content .border-top {border-top: 1px solid #E3E3E3;}
#professional-template.payslip-content .text-center {text-align: center;}
#professional-template.payslip-content .text-muted {color: #666;}
#professional-template.payslip-content .clearfix::before,
#professional-template.payslip-content .clearfix::after {
    content: ' ';
    display: table;
    clear: both;
}
#professional-template.payslip-content h4 {
    color: #333;
    font-size: 20px;
    line-height: 1em;
    margin: 0px 0px 8px 0px;
}
#professional-template.payslip-content h1 {font-size: 2.6em;}
#professional-template.payslip-content p { margin: 0px; }
#professional-template.payslip-content .font-medium { font-size: 18px; }
#professional-template.payslip-content .uppercase { text-transform: uppercase; color: #362106; }
#professional-template,#mini-template,#simple-template.payslip-content .highlight-text { color: #222222;font-weight: bold; }
.text-right { text-align: right; }



.alert-custom-info {
    color: #0a6ebd;
    background-color: #e3f2fd;
    border-color: #82c4f8;
}

#Osm-Map{
    height: 50rem;
}
.icon-class {
    transition: all 1s;
}

#Osm-Map .leaflet-div-icon { background: transparent; border: 0; }

@media screen and (max-width: 1819px) {
    #Osm-Map { height: 34rem; }
}
@media screen and (max-height: 670px) {
    #Osm-Map { height: 34rem; }
}

.flip-card { height: 22px; width: 155px; }

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 1.2s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    -moz-backface-visibility: hidden;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    background-color: #dee2e687;
    padding: 4px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: #bbbbbb3b;
    color: black;
}

.flip-card-back {
    transform: rotateY(180deg);
}

#single-image-upload-edit, #single-image-upload{
    height: 142px;
}

.executive-addImage label.custom-file-label::after, li.executive-addImage .fileupload {
    height: 135px;
}

.imagelist.ffmUserImg li{
    width: calc(20% - 14px);
}

.imagelist .executive-actionBtn {
    top: -6px;
    right: -1px;
}

.image-download {
    margin-right: 3px;
}

/* Tooltip container */
.tooltip-container {
    display: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 3px;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    bottom: 100%;
    right: 4px;
}
.tooltip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: x-small;
}
.tooltip-table th {
    text-align: left;
    font-weight: bold;
    padding: 12px 10px;
    background-color: #f0f0f0;
}
.tooltip-table td,
.tooltip-table th {
    padding: 6px;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
}
.tooltip-table tr:last-child td {
    border-bottom: none;
}

.company-date-time-format:hover + .tooltip-container {
    display: block;
}
#form-info-msg, #add-form-info-msg, .tooltip-text{
    position: absolute;
    z-index: 99999;
    background-color: white;
    color: black;
    border: 1px solid black;
    padding: 10px;
    margin: 40px 210px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#buffer-time-info-msg, #add-buffer-time-info-msg {
    position: absolute;
    top:50%;
    left: 0;
    z-index: 99999;
    background-color: white;
    color: black;
    border: 1px solid black;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 500px;
}
.wrap-text {
    word-wrap: break-word;
    white-space: normal;
    display: inline-block;
    max-width: 100px;
}


#sales-order-settings-tab {
    margin-top: 10px;
}

#sales-order-settings-tab .panel-content .tab-content {
    background-color: #ffffff;
    border: none;
    padding: 10px;
}


#sales-order-settings-tab .panel-content {
    padding: 0 !important;
}

.customer-search-div  .select2-container {
    z-index: 999 !important;
}
.xyz1  .select2-container {
    z-index: 999 !important;
}

.btn-report-custom { border: 0 !important; padding: 0 !important; overflow: inherit; }
.btn-report-custom span { padding: 8px 10px !important; display: inline-block; border: solid 1px #dfdfe0; position: relative; }
.btn-report-custom span:after { margin-left: 0.255em; text-align: center;display: inline;border: 0 !important;font-family: 'Font Awesome 5 Pro';content: "\f107" !important;vertical-align: top !important;position: relative; }
.btn-report-custom .filter1-class { position: absolute; z-index: 999; }
.btn-report-custom .filter1-class li { border-radius: 0;
    display: block;
    width: 100%;
    padding: 0.75rem 1.5rem !important;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap; font-size: 0.8125rem; }

.btn-report-custom .filter1-class li.active { background-color: #f3f3f3;
    color: #333; }

.btn-report-custom .filter1-class.active { display: block; }

nav.shortcut-menu .exportToExcell.shortcut-menu-item.menu-item {
    -webkit-transition-duration: 550ms;
    transition-duration: 550ms;
    -webkit-transform: translate3d(0, -288px, 0);
    transform: translate3d(0, -288px, 0);
}

.nav-menu li > ul li a { padding-left: 1.375rem; }

.scroll_bar {
    max-height: 265px;
    overflow-y: auto;
    width: 210px;
}


.report_scroll_barscroll_bar:-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--theme-primary);
    box-shadow: inset 0 0 6px var(--theme-primary);
}


scroll_bar:-webkit-scrollbar {
    width: 6px;
}
.scroll_bar:-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    position: absolute;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    position: absolute;
}


::-webkit-scrollbar-thumb {
    background: #1a2763 !important;
    border-radius: 6px;
}

.scroll_bar::-webkit-scrollbar-thumb {
    background: #4c66e5 !important;
    border-radius: 6px;
}
.scroll_bar:-webkit-scrollbar-track {
    background: #fff;
    border-radius: 6px;
}
.scroll_bar:-webkit-scrollbar-track {
    border-radius: 6px;
}
::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: #fff;
}
::-webkit-scrollbar-track {
    border-radius: 6px;
    background-color: #f2f2f2;
}
::selection {
    background: #000;
    color: #fff;
}
::selection {
    background: #505050;
    color: #fff;
}
::selection {
    background: #505050;
    color: #fff;
}

.custom-number-icon div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: white; /* White text */
    font-size: 14px; /* Adjust font size */
    font-weight: bold; /* Bold text */
    pointer-events: none; /* Prevent interference with marker click */
}

.filter-div { width: 26%; position: fixed; right: -29%; bottom: 0; transition: all 0.3s ease; }
.filter-div.active { right: 0; }
.custom-class { width: 100%; transition: all 0.3s ease; }

.main-div-quick-filter div {
    padding: 5px;
}
.table-column {
    display: flex;
}

.table-column input[type="text"] {
    width: 85% !important;
    margin: 10px;
}

.column label, .column input {
    display: block;
    margin-bottom: 8px;
}

.scroll-height { max-height: 435px; overflow: auto; }

.blurred {
    filter: blur(5px); /* Adjust the blur value as needed */
    transition: filter 0.3s ease; /* Optional: Smooth transition */
}

.mainDashboard{
    height: calc(100vh - 105px);
}
.innerDashboard{
    height: calc(100vh - 50px);
}
.main-div-quick-filter { padding: 15px 5px 65px; height: calc(99vh - 184px); min-height: 753px; overflow: auto; position: relative; background-color: #fff; }
.filter-div .close { margin-right: 1px; color: #1d2b6e; border-radius: 50%; padding: 0; width: 28px; height: 28px; background: #fff; }
.filter-div .close:hover, .filter-div .close:focus { opacity: 1; color: #1d2b6e !important; }
.filter-div .modal-header { align-items: center;  }
.filter-div .search-bar { padding-left: 30px; border-color: #d4d4d4; color: #101010; }
.filter-div .search-bar::-moz-placeholder, .filter-div .search-bar::-webkit-input-placeholder, .search-barinput::placeholder { color: #101010; opacity: 1; }
.filter-div .search-top { margin-bottom: 10px; position: relative; }
.filter-div .search-top i { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); font-weight: 600; color: #101010; }
.filter-div .condition-label { margin-bottom: 8px; padding: 5px 8px 5px 12px; border-radius: 4px; color: #101010; font-weight: 500; background-color: #ededf5; }
.filter-div .condition-label span { color: #fc1820; }
.filter-div #dynamic-conditions-label { padding-bottom: 0; }
.filter-div .reset-filter { margin-bottom: 18px; }
.filter-div .reset-filter .reset-btn { color: #0162d4; font-size: 15px; font-weight: 500; }
.filter-div .reset-filter .reset-btn.quick-save { margin-left: 15px; }
.filter-div .table-column { align-items: flex-start; }
.filter-div .checkboxs { padding-left: 26px; position: relative; font-size: 0; cursor: pointer; }
.filter-div .checkboxs input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.filter-div .checkboxs .checkmark { position: absolute; top: 8px; left: 0; height: 18px; width: 18px; border: 2px solid #d3d4d7; border-radius: 4px; }
.filter-div .checkboxs .checkmark:after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px; display: none; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.filter-div .checkboxs input:checked ~ .checkmark:after { display: block; }
.filter-div  .checkboxs  input:checked ~ .checkmark { border-color: #0e5fd5; background-color: #0e5fd5; }
.filter-div .table-column .column { padding: 7px 16px;  width: 92%; border: 1px solid #f1f1f2; border-radius: 4px; }
.filter-div .radio-row { display: none }
.filter-div .table-column .column .title { margin-bottom: 0; color: #101010; font-weight: 500; cursor: pointer; }
.filter-div .btn { width: 50%; }
.filter-div .btn-secondary { color: #fff !important; background-color: #030615 !important; }
.filter-div .modal-footer { padding-top: 15px; padding-bottom: 17px; position: absolute; width: 100%; bottom: 0; z-index: 9999; background: #fff; }
.filter-div .radio-list { margin-bottom: 12px; position: relative; padding-left: 20px; cursor: pointer; color: #101010; font-weight: 500; }
.filter-div .radio-list input { position: absolute; opacity: 0; cursor: pointer; }
.filter-div .radio-list span { position: absolute; top: 0; left: 0; height: 15px; width: 15px; border: 2px solid #d3d4d7; border-radius: 50%; }
.filter-div .radio-list input:checked ~ span:after { display: block; }
.filter-div .radio-list span:after { content: ""; position: absolute; display: none; top: 2.85px; left: 2.85px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.filter-div .radio-list input:checked ~ span { border-color: #2196F3; background: #2196F3; }
.filter-div .task { margin-bottom: 16px; background: transparent; padding: 0; }
.filter-div .task:hover { box-shadow: inherit; }
.filter-div .task .form-control { width: 100% !important; margin: 0; background: #ecedf3; border-radius: 6px; border: 0; color: #101010; font-weight: 500; }
.filter-div .task .form-control::-moz-placeholder, .filter-div .task .form-control::-webkit-input-placeholder, .filter-div .task .form-control::placeholder { color: #101010 !important; opacity: 1; font-weight: 500; }
.filter-div .reset-down { display: flex; justify-content: flex-end; }
.filter-div .reset-down a { color: #0e5fd5; font-weight: 500; }
.filter-div .true-false { margin-left: 38px; width: 45px; height: 18px; position: relative; padding: 0; }
.filter-div .true-false input { position: absolute; top: 0; z-index: 2; width: 100%; height: 100%; background: #f00; margin: 0; padding: 0; cursor: pointer; opacity: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.filter-div .true-false label { margin-bottom: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-color: #edeef3; line-height: 1; color: #fff; transition: background-color 0.15s ease-out; border-radius: 15px; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.filter-div .true-false label::before { display: flex; align-items: center; justify-content: center; border-radius: 50%; position: absolute; top: 1px; left: 0; bottom: 4px; background-color: #b8bacd; content: attr(data-label-unchecked); transition: all 0.15s ease-out; min-width: 16px; height: 16px; }
.filter-div input:checked + label::before { background-color: #06ad65; content: attr(data-label-checked); left: calc(100% - 0px); transform: translateX(-100%); }
.filter-div .radio-row { margin-top: 6px; }
.filter-div .true-false span { position: relative; left: -35px; color: #a9a9bd; }
.filter-div .true-false strong { position: relative; right: -30px; color: #06ad65; }
#task-table .dataTables_empty { height: calc(100vh - 248px); }
.custom-class.task-table-for-filter { min-height: 745px; }
#task-list-view-div .active-width,#customer-list-view-div .active-width { width: 75%; }
.filter-div .dropdown-toggle, .filter-div .bootstrap-select { width: 100% !important; }
.filter-div .dropdown-toggle div { padding: 0; }
.filter-div .bottom-section { position: relative; }
.filter-div .condition-label a { margin-left: 5px; border: 0; }
.panel .panel-container, .panel .panel-container .panel-content { width: 100%; }

@media screen and (max-width: 1650px) {
    .main-div-quick-filter { min-height: 680px; }
    .custom-class.task-table-for-filter { min-height: 660px; }
}

@media screen and (max-width: 1550px) {
    .main-div-quick-filter { padding: 15px 0 65px; min-height: inherit; height: calc(100vh - 193px); }
    .filter-div .modal-footer { padding-bottom: 12px; }
    .custom-class.task-table-for-filter { min-height: inherit; }
    #task-table .dataTables_empty { height: calc(100vh - 230px); }
}

@media screen and (max-width: 767px) {
    #task-list-view-div .active-width, .filter-div,
    #customer-list-view-div .active-width, .filter-div { width: 100%; }
    .filter-div { right: -103%; }
}

a.remove-condition {
    margin-left: 5px;
    border: 1px solid #ffffff;
    padding: 2px;
    border-radius: 8px;
}

.dropdown-menu {
    min-width: 160px; /* Set a minimum width for the dropdown */
}

.dropdown-item {
    cursor: pointer; /* Change cursor to pointer for dropdown items */
}
#quickFilterDropdown {
    border: none !important; /* Removes border */
    box-shadow: none; /* Removes the shadow, if any */
}
button.btn.quickFilterDropdown {
    padding: 0px !important;
}

.dropdown-menu {
    min-width: 200px; /* Adjust as needed */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */
    border: none; /* No border */
    border-radius: 0.25rem; /* Rounded corners */
}

.btn-outline-primary {
    border: none; /* Remove border from button */
}

.text-content {
    display: inline-block; /* Ensures the text is treated as a block for wrapping */
    max-width: calc(100% - 30px); /* Adjusts max width to account for the delete icon */
    overflow: hidden; /* Prevents overflow */
    text-overflow: ellipsis; /* Adds ellipsis for overflow handling */
}


.assignToFilter {
    margin-left: 10rem;
}
.input-wrapper {
    position: relative; /* Positioning context for the clear button */
}

.clear-btn {
    position: absolute;
    right: 10px; /* Adjust as needed to position it well */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust to center properly */
    color: red; /* Red color for the cross */
    cursor: pointer;
    font-size: 1.2em; /* Adjust size as needed */
}

#task-table_processing{
    height: 50px;
}
.delete-icon {
    cursor: pointer;
    margin-left: 5px;
    color: red !important; /* Adjust color as needed */
}

.delete-icon:hover {
    color: darkred;
}
.reset-btn{
    margin-left: 4px;
    margin-right: 4px;
}
#switch-to-compliance {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#switch-to-compliance:hover {
    transform: scale(1.05);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.toggle-circle {
    width: 20px;
    height: 20px;
    background-color: #6495ED;
    border-radius: 50%;
    position: absolute;
    top: -5%;
    transition: left 0.3s ease-in-out;
}

.custom-assign-input .bootstrap-select { width: 100% !important; }


.w-auto {
    width: auto !important;
}

.remove-dropdown-icon .dropdown-menu {
    min-width: 120px;
}

.remove-dropdown-icon .dropdown-toggle::after, .remove-dropdown-icon .dropleft .dropdown-toggle::before {
    content: none !important;
}

.bulk_dropdown-space{
    min-width: 150px;
}

.non-editable-field, .non-editable-field:hover {
    background-color: #eee !important;
}

.tooltip {
    position: relative;
    cursor: pointer;
}

.tooltip:hover .tooltip-text {
    display: block; /* Show tooltip on hover */
}

.form-type {
    font-size: 11px;
    background-color: #01fc603b;
    border-radius: 21px;
    padding: 4px;
    margin-left: 10px;
}

.task-customs-css { max-width: 800px;  margin-top: 15px !important; margin: 0 auto; display: flex; justify-content: center; transition: all 0.5s !important; }
.custom-assign-input .bootstrap-select { width: 100% !important; }


.task-multi-form {
    max-width: 70%;
}

/*#form-modal {  animation: multirevFormAnimation 0.5; }*/
#form-modal .titletog { padding: 12px 15px 12px 18px; }
.task-single-loader ul { margin: 0; padding: 0; }
.task-single-loader ul li { padding: 0px 0 10px 0; margin: 0 0 15px 0; width: 100%; display: flex; justify-content: space-between; }
.task-single-loader ul li span { width: 47%; flex: inherit; height: 10px; display: inline-block; position: relative; background: rgb(204, 204, 204); overflow: hidden; border-radius: 6px; }
.task-single-loader.multi ul li:first-child span, .task-single-loader.multi ul li:last-child span { width: 20%; }
.task-single-loader.multi ul li span { width: 32%; }
.task-single-loader ul li span::after, .dummyEventMain .eventDmRow ul li strong::after {
    position: absolute; top: 0;display: block; width: 100%;height: 100%;
    content: "";background: linear-gradient(90deg, #e1dfdf73, #e1dfdf 50%, #e1dfdf73);
    transform: translateX(-100%); animation: eventListTxtLoad 1s infinite;will-change: transform;
}

@keyframes eventListTxtLoad{
    100%{transform: translateX(100%);}
}

.dropdown-toggle {
    z-index: 0;
}

#suggestions-div { position: absolute; width: calc(100% - 10px); }
#suggestions-div .suggestion-item { padding: 5px 15px;cursor: pointer;color: #010208; text-decoration: none;text-overflow: ellipsis;white-space: nowrap;width: 100%;overflow: hidden; }
#suggestions-div .suggestion-item:hover { background-color: #f8f9fa; }