/*Start Common Css */
:root {
    --black: #281713;
    --white: #FFFFFF;
    --lightRed: #FE0B0B;
    --lightRed: #FF0B0B94;
    --gray: #28171387;
    --lighGray: #263238;
    --lighterGray: #7E7471;
}

ul {
    margin: 0;
    padding: 0;
}

.content-common {
    padding: 0 25px;
    height: calc(100vh - 132px);
}

p {
    margin: 0 !important;
    padding: 0;
}

.dFlex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.heading28 {
    font-size: 28px;
    font-weight: 600;
    color: var(--black);
}

.heading14 {
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
}

.heading16 {
    font-size: 16px;
    color: var(--black);
    font-weight: 500;
}

.headingGray14 {
    font-size: 14px;
    color: var(--gray);
    font-weight: 500;
}

.heading18 {
    font-size: 18px;
    font-weight: 500;
    color: var(--black);
}

.heading20 {
    font-size: 20px;
    font-weight: 500;
    color: var(--black);
}

.textGray12 {
    font-size: 12px;
    color: var(--gray);
    font-weight: 500;
}

.textLighterGray12 {
    font-size: 12px;
    color: var(--lighterGray);
    font-weight: 500;
}

.textBlack12 {
    font-size: 12px;
    color: var(--black);
    font-weight: 500;
}

.textLightGray12 {
    font-size: 12px;
    color: var(--lighGray);
    font-weight: 500;
}

.textRed12 {
    font-size: 12px;
    color: var(--lightRed);
    font-weight: 500;
}

.textLightGray14 {
    font-size: 14px;
    color: var(--lighterGray);
    font-weight: 600;
}

a {
    text-decoration: none !important;
}

/*End Common Css */
/* Start Scrollbar Css */
/* width */
::-webkit-scrollbar {
    width: 5px;
}

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

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--lightRed);
}

/* End Scrollbar Css */
/* Start Dashboard Css */
.sidebarLogo {
    text-align: center;
    margin-bottom: 25px;
}

.vertical-tab {
    padding: 10px 11px;
    width: 283px !important;
    height: 100% !important;
    position: fixed;
    z-index: 2;
    height: calc(100% - 70px);
    padding-bottom: 30px;
    background: var(--lightRed);
}

.content_areas {
    width: 100%;
    margin-left: 283px;
    /* padding: 0 9px 5px 9px; */
    position: relative;
    width: auto;
    width: calc(100% - 283px);
    transition: all 0.3s;
    max-height: calc(100vh - 10px);
    overflow: auto;
    overflow-x: hidden;
    padding: 0px !important;
}

.stickyHead {
    position: sticky !important;
    top: 0;
    background: #FFFFFF;
    z-index: 99;
}

.openbtn2 {
    display: none;
}

.closebtn2 i {
    display: none;
}

/* Start Sidebar Css */
.sidebarList {
    margin: 0;
    padding: 0;
}

.nav_link {
    color: var(--white) !important;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.nav_item.active {
    box-shadow: 0px 4px 12px 0px #FFFFFF1F;
    background: #FFFFFF4D;
    border-radius: 26px;
    padding: 15px 11px;
}

.nav_item {
    margin-bottom: 5px;
    padding: 12px;
}

.sidebar_icon {
    margin-right: 4px;
}

.navLogout {
    position: absolute;
    background: #fd0119;
    bottom: -5px;
    left: 0;
    right: 0;
    padding-left: 25px;
}

/* End Sidebar Css */
.text-danger {
    color: #dc3545 !important;
    font-size: 15px;
}

/* Start Header Css */
.welcomeText {
    font-size: 24px;
    font-weight: 500;
    color: var(--black);
    word-break: break-all;
}

.navbar {
    padding: 15px 32px !important;
    box-shadow: 0px 4px 12px 0px rgba(254, 11, 11, 0.12);
}

.notification {
    width: 48px;
    height: 48px;
    border-radius: 30px;
    border: 1px solid rgba(255, 11, 11, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

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

.profileImg {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    object-fit: cover;
}

.profileDropdown {
    background: rgba(255, 245, 241, 1);
    padding: 9px 15px;
    border-radius: 40px;
}

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

.profileDropdown .dropdown .dropdown-toggle {
    padding: 0;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

.profileDropdown .dropdown-menu.show {
    min-width: 130px !important;
}

.profileName {
    font-size: 16px;
    color: var(--black);
    font-weight: 500;
}

/* End Header Css */
.dashCard {
    background: rgba(255, 255, 255, 1);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0px 5px 40px 0px rgba(254, 11, 11, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.totalQty {
    font-size: 40px;
    font-weight: 700;
    color: var(--black);
}

.totalOrders {
    font-size: 18px;
    font-weight: 500;
    color: var(--gray);
}

.graphImg {
    width: 100%;
    box-shadow: 0px 5px 40px 0px #FE0B0B1F;
}

.dashIcon {
    width: 52px;
    height: 52px;
    background: #FFF5F1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashLeft {
    border-left: 6px solid red;
    padding-left: 30px;
}

.review {
    box-shadow: 0px 5px 40px 0px #FE0B0B1F;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    max-height: 590px;
    height: 100%;
}

.viewAllBtn {
    font-size: 20px;
    font-weight: 500;
    color: var(--lightRed) !important;
}

.tableHeading {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--gray);
    border-bottom: 0;
    border-bottom: 2px solid #d1d1d14f !important;
    padding: 15px 14px !important;
}

.status_heading {
    /* text-align: center; */
    /* padding-left: 0px !important;
    padding-right: 75px !IMPORTANT; */
}

.status_headings {
    /* text-align: center; */
    /* padding-right: 12% !important; */
}

.user-satus-heading {
    /* text-align: center; */
    padding-right: 81px !important;
}

.tableData {
    font-size: 14px;
    font-weight: 500;
    color: var(--black);
    vertical-align: middle;
    border-bottom: 0;
    padding: 26px 20px !important;
}

.menu-items .tableData:first-child {
    border-radius: 17px 0 0 17px !important;
}

.menu-items .tableData:last-child {
    border-radius: 0 17px 17px 0 !important;
}

.productTable {
    border-collapse: separate;
    border-spacing: 0px 10px;
}

.menu-items {
    background: transparent !important;
    box-shadow: 0px 1px 16px 0px #DE3B3B1A !important;
    border-radius: 20px;
}

.switch {
    display: inline-block;
    height: 31px;
    position: relative;
    width: 55px;
}

.switch input {
    display: none;
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
}

.slider:before {
    background-color: #fff;
    bottom: 3px;
    content: "";
    height: 25px;
    left: 1px;
    position: absolute;
    transition: .4s;
    width: 25px;
}

input:checked+.slider {
    background-color: #27AE60;
}

input:checked+.slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.gallons {
    color: var(--lightRed);
}

/* End Dashboard Css */
/* Start Order Managment Page Css */
.orderReq {
    box-shadow: 0px 7px 15px 0px #FF0B0B1A;
    padding: 27px;
    border-radius: 20px;
}

.orderNumber {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray);
}

.orderName {
    color: var(--lightRed) !important;
}

.reqGallen {
    background: rgba(255, 218, 209, 0.5);
    padding: 8px 10px;
    border-radius: 8px;
}

.acceptBtn {
    border: none;
    background: var(--lightRed);
    font-size: 16px;
    font-weight: 600;
    color: var(--white) !important;
    border-radius: 57px;
    padding: 14px 41px;
}

.rejectBtn {
    border: 2px solid var(--lightRed);
    background: var(--white);
    font-size: 16px;
    font-weight: 600;
    color: var(--lightRed);
    border-radius: 57px;
    padding: 12px 15px
}

/* End Order Managment Page Css */
.searchBarCon {
    background: #FF46460D;
    padding: 10px;
    border-radius: 18px;
}

.inventarySearch {
    border: none;
    background: #fff;
    padding: 13px 100px 13px 44px;
    border-radius: 17px;
    outline: none !important;
}

.searchIcon {
    position: absolute;
    left: 13px;
    top: 13px;
}

/* Start Accepted Order Managment Css */
.orderHeader {
    padding: 6px 10px;
    background: #FF0B0B0D;
    border-radius: 20px;
}

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

.deliveryLocation {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FF46461A;
    border-radius: 10px;
}

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

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

.deliveryType {
    display: flex !important;
    border: 1px solid #FF0B0B;
    padding: 8px 15px;
    border-radius: 20px;
    box-shadow: 0px 2px 11px 0px #FF464629;
}

.orderDetals .orderNumber {
    font-size: 14px;
}

.orderDetals {
    box-shadow: 0px 5px 40px 0px #FF0B0B33;
    padding: 30px 23px;
    border-radius: 12px;
}

.orderData li {
    display: inline-block;
    width: 50%;
}

.hrColor {
    background-color: var(--lightRed);
}

.deriverImage {
    width: 55px;
    height: 55px;
    border-radius: 30px;
    border: 1px solid var(--lightRed);
    display: flex;
}

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

/* End Accepted Order Managment Css */
/* Start Assign Driver Modal */
.backArrowModal {
    position: absolute;
    left: 20px;
}

#editGasStation .backArrowModal {
    position: absolute;
    left: 20px;
    top: 15px;
}

#assignDriver .modal-header {
    justify-content: center;
    border-bottom: 0;
}

#assignDriver .modal-content {
    max-width: 447px;
}

.modal-content {
    border-radius: 20px !important;
    background-color: var(--white) !important;
}

.modal-body {
    padding: 10px 27px !important;
}

.selectDriverCon {
    border-bottom: 1px solid #FFDAD1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.deiverImage {
    width: 40px;
    height: 40px;
    border-radius: 38px;
    background: #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.deiverImage {
    margin-right: 7px;
}

.selectDriverRight .acceptBtn {
    font-size: 14px;
    padding: 12px 28px;
}

/* End Assign Driver Modal */
/*Start Otp Pickup Modal */
#otpPickup .modal-content {
    max-width: 375px;
}

.modal-header {
    border-bottom: 0 !important;
    align-items: flex-start !important;
}

#otpPickup .modal-header {
    justify-content: center;
    padding-top: 22px !important;
}

.footerBtn {
    background-color: var(--lightRed);
    box-shadow: none !important;
}

/*End Otp Pickup Modal */
/*Start Add Gas Type Modal */
#addGasType .inputBox {
    padding-inline: 19px;
}

#addGasType .modal-body {
    padding: 10px 20px !important;
}

.fileUpload {
    background: #FFF5F1;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    color: var(--lightRed);
    font-size: 14px;
    margin: 1.25em auto;
    overflow: hidden;
    padding: 22px 0;
    position: relative;
    text-align: center;
    border: 2px dashed #FF0B0B;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

#staticimage {
    width: 30px;
    height: 30px;
    text-align: center;
    margin: 0px auto;
}

.fileUpload:hover,
.fileUpload:active,
.fileUpload:focus {
    /* background: var(--lightRed); */
    cursor: pointer;
}

.editInput {
    padding: 15px 20px !important;
}

.input_space {
    padding-left: 20px !IMPORTANT;
}

.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    width: 100%;
    height: 100%;
    cursor: pointer;
}

input[type="file"] {
    position: fixed;
    right: 100%;
    bottom: 100%;
}

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

.fileUpload:hover span,
.fileUpload:active span,
.fileUpload:focus span {
    /* color: var(--white); */
}

.rating {
    background: #FFA0001A;
    display: inline-block;
    padding: 8px;
    border-radius: 8px;
}

/*End Add Gas Type Modal */
/* Start Driver Profile page  */
.driverProfile {
    box-shadow: 0px 5px 40px 0px #FF464633;
    /* height: 100% !important; */
    padding: 21px;
    border-radius: 20px;
}

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

.driverProfileHeading {
    font-size: 14px;
    font-weight: 500;
    color: var(--lighterGray);
    width: 100%;
    max-width: 30%;
    text-transform: uppercase;
}

.driverProfileData {
    font-size: 14px;
    font-weight: 500;
    color: var(--black);
}

#editDriver .modal-dialog {
    max-width: 447px;
}

.telImg {
    position: absolute;
    right: 20px;
    top: 11px;
}

/* End Driver Profile Page Css */
/* Start Notification Page Css */
.markAll {
    font-size: 14px;
    font-weight: 500;
    color: var(--lightRed) !important;
}

.dot {
    width: 14px;
    height: 14px;
    background-color: var(--lightRed);
    border-radius: 20px;
}

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

.notificationImg {
    margin-right: 15px;
}

.notificationCon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}

/* End Notification Page Css */
/* Start Profile Page Css */
.profileCon {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #FFDAD1;
    padding-bottom: 23px;
    margin-bottom: 20px;
}

.profileImg_ {
    margin-right: 15px;
}

.profileCon {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.driverProfile input:checked+.slider {
    background-color: var(--lightRed);
}

/* End Profile Page Css */
/* Start Privacy Policy Css */
.privacyText {
    font-size: 12px;
    color: var(--lighterGray);
    line-height: 18px;
}

/* End Privacy Policy Css */
/* Start Edit Profile Page Css */
/* .profileImg_ {
    width: 80px;
    height: 80px;
    border-radius: 40px;
} */

.profileImg_ {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    object-fit: cover;
}

.driverProfile .fileUpload {
    background: #FFF5F1;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    color: var(--lightRed);
    font-size: 16px;
    margin: 0;
    /* overflow: hidden; */
    /* padding: 33px 0 36px 0; */
    /* position: relative; */
    /* text-align: center; */
    border: none;
    cursor: pointer;
    /* display: flex; */
    border: 2px solid #FF0B0B;
    font-weight: 600;
    display: inline-block;
    height: 47px;
    display: flex;
    align-items: center;
    /* border-radius: 47%; */
    background: transparent;
    border-radius: 57px;
    padding: 12px 15px;
    color: var(--lightRed) !important;
    cursor: pointer;
}

.driverProfile .fileUpload:hover span {
    color: var(--lightRed) !important;
}

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

.editProfileCon img {
    margin-right: 16px;
}

.gasStation .heading14 {
    font-weight: 500;
}

.availabilityCon {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.availabilityCon li {
    display: inline-block;
}

.availabilityCon .heading14 {
    font-weight: 400;
}

.availabilityCon li:first-child {
    margin-right: 36px;
}

.clock_icon {
    padding-right: 8px;
    margin-top: -2px;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(14%) sepia(65%) saturate(4863%) hue-rotate(353deg) brightness(119%) contrast(109%);
}

.clock_input {
    border: none;
    background: #FFDAD1;
    border-radius: 8px;
    padding: 5px 4px;
    flex-direction: row-reverse;
    outline: none !important;
    color: #7E7471;
}

.timingCon {
    background: #FFDAD180;
    box-shadow: 0px 4px 20px 0px #0000000A;
    padding: 9px;
    border-radius: 8px;
    color: var(--lighterGray);
    display: flex;
    align-items: center;
    width: 120px;
}

.availabilityCon .textLighterGray12 {
    width: 60px;
}

/* End Edit Profile Page Css */
/* Start Edit Gas Station Name */
#editGasStation .modal-dialog {
    max-width: 447px;
}

#editGasAddress .inputBox {
    padding: 19px 21px;
    border-radius: 40px;
}

#editGasStation .inputBox {
    padding: 19px 21px;
    border-radius: 40px;
}

/* End Edit Gas Station Name */
/* Start Edit Availability Modal */
.daysItem {
    font-size: 12px;
    font-weight: 500;
    color: var(--black);

}

.daysList li {
    display: inline-block;
    padding: 15px 10px;
    margin-right: 10px;
}

.daysList {
    padding: 0 !important;
}

.daysList li {
    display: inline-block;
    padding: 15px 10px;
    margin-right: 7px;
}

.daysList li:last-child {
    margin-right: 0;
}

.daysItem.active {
    background-color: var(--lightRed);
    color: var(--white);
    display: inline-block;
    padding: 15px 10px;
    border-radius: 10px;
}

.daysAvailableCon {
    box-shadow: 0px 3px 15px 0px #FF0B0B29;
    border-radius: 20px;
    padding: 25px;
}

.daysAvailableCon h1 {
    font-size: 16px;
    color: var(--black);
    font-weight: 500;
}

#editAvailability .modal-content {
    max-width: 447px;
}

#editAvailability .modal-body {
    margin: 4px 15px !important;
    /* padding-inline:0 !important; */
}

#editAvailability .availabilityCon li {
    padding-block: 12px;
}

#editAvailability .availabilityCon li:first-child {
    margin-right: 4px;
}

#editAvailability .availabilityCon li:nth-child(2) {
    padding-right: 17px;
    border-right: 1px solid var(--lightRed);
}

.invalid-feedback {
    display: block !important;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #ff0000;
}

.password-toggle-icon {
    color: #c3000091;
    font-size: 18px;
}

.password-toggle-icons {
    color: #c3000091;
    font-size: 18px;
}

.users-table .tableData {
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid #d1d1d14f !important;
    color: var(--black);
    vertical-align: middle;
    border-bottom: 0;
    padding: 14px 13px !important;
}

.resetSearchButton {
    display: none;
    border: none;
    background: unset;
    color: #ff0b0bc7;
    font-size: 26px;
    position: absolute;
    bottom: 0px;
    font-weight: normal;
    right: 23px;
}

.profile_field .profileImg_ {
    width: auto;
    height: auto;
    border-radius: 40px;
}

/* new css */
.loction_address {
    padding-left: 8px;
}

.update_btn {
    padding: 14px 66px;
}

.fontW-500 {
    font-weight: 500;
}

.edit_back_icon {
    position: absolute;
    left: 38px;
    margin-top: 10px;
}

.loction_address .textLighterGray12 {
    padding-top: 8px;
    word-break: break-all;
}

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

.dash-status {
    padding-left: 70px !important;
}


/* new css */
.menu-items .tableData #activatebtn {
    background: red;
    border: none;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    outline: none !important;
    box-shadow: none !important;
    width: 117px;
}


.page-link {
    color: #ff4646;
    border: none !important;
    font-size: 16px;
    font-weight: 600;
}

.page-link:hover {
    color: #ff4646;
    border: none !important;
    font-size: 16px;
    font-weight: 600;
}

.page-item.active .page-link {
    background-color: #fd0013;
    border-radius: 9px;
    padding: 4px 14px;
}

.page-item.disabled .page-link {
    color: #ff4646;
}

.mainModalPopup .modal-dialog .modal-content {
    height: auto;
    overflow: auto;
}

.imagepreview {
    width: 40%;
    margin: 0px auto;
    height: 100px;
}

.submenu-icon {
    margin-left: 33px;
    float: right;
}


/* responsive css */
@media screen and (max-width: 1366px) {
.rejectBtn {
    font-size: 14px;
}
.acceptBtn {
    font-size: 14px;
}
.orderReq {
    padding: 18px;
}
}

@media screen and (max-width: 1280px) {
    .inventarySearch {
        padding: 13px 30px 13px 44px;
        width: 100%;
    }

    .acceptBtn {
        font-size: 14px;
        padding: 13px 5px !important;
        width: 100%;
        max-width: 140px;
    }

    .addnew_div {
        margin-right: 10px !important;
    }
    .rejectBtn {
        font-size: 13px;
        padding: 10px 10px;
    }
    .acceptBtn {
        font-size: 13px;
        padding: 13px 5px !important;
        width: 100%;
        max-width: 120px;
    }


}
@media screen and (max-width: 1180px) {
    .acceptBtn {
        max-width: 89px;
    }
    .rejectBtn {
        font-size: 12px;
        padding: 10px 6px;
    }
}



@media screen and (max-width: 991px) {
.acceptBtn {
    max-width: 120px;
    font-size: 14px;
}
.rejectBtn {
    font-size: 14px;
    padding: 10px 15px;
}

}
@media screen and (max-width: 767px) {
    .notify_div {
        justify-content: flex-start !important;
        padding-left: 10px;
        margin-top: 15px;
    }
    .dashCard {
        margin-bottom: 10px;
    }
    .smallHeading {
        margin: 10px auto !important;
        font-size: 16px !important;
    }
    .formOuter {
        margin-top: 60px;
    }
    .horizontal {
        padding: 0 20px !important;
    }
}






.view_detail {
    width: 100%;
}   

.sidebar_menu {
    height: calc(100vh - 153px);
    overflow: auto;
}

.sidebar_menu::-webkit-scrollbar-track{
    background-color:#ff4646;
}
#deleteUser .textLightGray14 {
    margin-top: 20px !IMPORTANT;
}
#deleteUser .modal-body {
    display: none;
}
#deleteStationUser .textLightGray14 {
    margin-top: 20px !IMPORTANT;
}
#deleteStationUser .modal-body {
    display: none;
}
#deleteGasType .textLightGray14 {
    margin-top: 20px !IMPORTANT;
}
#deleteGasType .modal-body {
    display: none;
}