@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
@font-face {
    font-family: "Poppins-Black";
    src: url('{{ asset("assets/fonts/Poppins-Black.ttf") }}') format("truetype");
    font-weight: normal;
    font-style: normal;
}

body {
    background: #f6f9ff;
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: "Poppins", sans-serif;
}

:root {
    --default-font: "Poppins", sans-serif;
    --heading-font: "Poppins", sans-serif;
    --nav-font: "Poppins", sans-serif;
}
.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
}

:root {
    scroll-behavior: smooth;
}

:root {
    --background-color: #ffffff;
    --default-color: #444444;
    --heading-color: #000000;
    --accent-color: #002f6c;
    --surface-color: #ffffff;
    --contrast-color: #ffffff;
    --highlight-color: #00c853;
}

:root {
    --nav-color: #124265;
    --nav-hover-color: #002f6c;
    --nav-mobile-background-color: #ffffff;
    --nav-dropdown-background-color: #ffffff;
    --nav-dropdown-color: #124265;
    --nav-dropdown-hover-color: #002f6c;
}
input[type="checkbox"] {
    accent-color: #002f6c;
}
.light-background {
    --background-color: #f6fafd;
    --surface-color: #ffffff;
}
.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgb(1 47 108) !important;
}
.fc-pri {
    color: #002f6c;
}
.fc-sec {
    color: #7d7d7d;
}
.dark-background {
    --background-color: #060606;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #252525;
    --contrast-color: #ffffff;
}

.accent-background {
    --background-color: #060606;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --accent-color: #ffffff;
    --surface-color: #060606;
    --contrast-color: #ffffff;
}
.yellowtheam-background {
    background-color: #fefaf0;
}
.modelSection {
    background-color: rgb(255, 255, 255);
    padding: 2% 5%;
}
.light-gray {
    font-size: 12px;
    color: #a29c9c;
}
a {
    color: var(--accent-color);
    text-decoration: none;
    transition: 0.3s;
}
a:hover {
    color: #064597;
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
    text-decoration: none;
}
a.linkFirst {
    color: var(--heading-color);
    text-decoration: none;
    transition: 0.3s;
}
a.linkFirst:hover {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
    text-decoration: none;
}
.form-control,
.form-select {
    padding: 0.575rem 0.75rem;
    font-size: 13px;
    color: #000000;
}
.m-form__group label {
    font-size: 14px;
    font-weight: 500;
}
.m-form__group .form-control {
    padding: 0.4rem 0.5rem;
}
.form-label {
    margin-bottom: 0.3rem;
    font-size: 12px;
    font-weight: 500;
}
div#inviteNewReceivers .form-group {
    display: block;
    justify-content: space-between;
    margin-bottom: 10px;
}
/* ::-webkit-scrollbar {
  display: none;
} */
/* .tableSec::-webkit-scrollbar {
  display: block!important;
} */
.flatpickr-innerContainer {
    padding-top: 17px;
}
.flatpickr-current-month {
    font-size: 15px !important;
}
.AddActionButton,
.deleteActionButton {
    border: 1px solid #e8e8e8;
    padding: 6px 11px;
    margin: 0px;
    border-radius: 4px;
}
.AddActionButton:hover,
.deleteActionButton:hover {
    background-color: #eae7e7;
    border: 1px solid #f4f4f4;
    color: #000000;
    padding: 6px 11px;
    margin: 0px;
    border-radius: 4px;
}
.AddActionButton {
    position: absolute;
    bottom: -45px;
    right: 0px;
    background: #f4f4f4;
    border-radius: 0 0 5px 5px;
}
.imgBoxThumbImg {
    background: none;
    cursor: pointer;
    height: 35px;
    margin-left: 5px;
    border: 1px solid lightgray;
    border-radius: 5px;
}
.imgBtn {
    border: 1px solid #e8e8e8;
    padding: 8px 8px;
    margin: 0px;
    border-radius: 4px;
}
.imgBtn:hover {
    background-color: #eae7e7;
    border: 1px solid #f4f4f4;
    color: #000000;
    padding: 8px 8px;
    margin: 0px;
    border-radius: 4px;
}
.deletekActionButton {
    border: 1px solid #e8e8e8;
    padding: 6px 8px;
    margin: 0px;
    border-radius: 4px;
}
.deletekActionButton:hover {
    background-color: #eae7e7;
    border: 1px solid #f4f4f4;
    color: #000000;
    padding: 6px 8px;
    margin: 0px;
    border-radius: 4px;
}
.add_CP_Action_Button {
    border: 1px solid lightgray;
    border-radius: 3px;
}
.add_CP_Action_Button:hover {
    border: 1px solid #00ac07;
    border-radius: 3px;
    background-color: #00ac07;
    color: #ffffff;
}
.delete_CP_Action_Button {
    border: 1px solid lightgray;
    border-radius: 3px;
}
.delete_CP_Action_Button:hover {
    border: 1px solid red;
    border-radius: 3px;
    background-color: red;
    color: #ffffff;
}
.action-class {
    display: flex;
    justify-content: center;
    align-items: center;
}
.action-class a {
    color: #000000;
    border: 1px solid lightgray;
    background: #f0f0f0;
    padding: 1px 6px;
    border-radius: 5px;
    cursor: pointer;
}
.action-class a i {
    font-size: 14px !important;
}
.action-section {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.action-section a {
    display: block;
    border-radius: 5px;
    padding: 2px 7px;
    color: #000000;
    border: 1px solid lightgray;
    background: #f0f0f0;
}
.action-section a:hover {
    display: block;
    border-radius: 5px;
    padding: 2px 7px;
    background-color: #d3d3d3;
    border: 1px solid #d3d3d3;
}
.createBidHeaderTopSec .form-control {
    font-size: 15px;
    color: #6f7074;
}
.createBidHeaderTopSec .form-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    flex-direction: column;
}
.createBidHeaderTopSec h2,
.createBidHeaderTopSec h3 {
    text-align: left !important;
}
.add-user-row {
    padding: 10px;
    background-color: #ffffff;
    box-shadow: rgb(121 119 119 / 10%) 0px 4px 12px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.error-message {
    color: red;
    margin-top: 3px;
    margin-bottom: 3px;
    font-size: 12px;
    padding: 0 0;
    font-weight: 400;
}
.pickUpandDropLocationSection .error-message {
    position: absolute;
    bottom: -19px;
    left: 23px;
    margin: 0;
    padding: 0;
}
.addRoleMarBtm .error-message {
    margin-bottom: 20px;
}
.createBidAction {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    position: relative;
    z-index: 9;
    background: white;
}
.__pageNation_Sec {
    font-size: 14px;
    vertical-align: middle;
}
.btn-primary {
    border: none;
    background-color: var(--highlight-color);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus-visible {
    font-size: 14px;
    font-weight: 500;
    border: none;
    background-color: #0a9c47;
    -webkit-box-shadow: 0px 5px 10px 2px rgb(201 249 221);
    -moz-box-shadow: 0px 5px 10px 2px rgb(201 249 221);
    box-shadow: 0px 5px 10px 2px rgb(201 249 221);
}
.btn-main {
    border: none;
    background-color: var(--accent-color);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}
.btn-main:hover,
.btn-main:active,
.btn-main:focus-visible {
    font-size: 14px;
    font-weight: 500;
    border: none;
    background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
    color: #ffffff;
    -webkit-box-shadow: 0px 5px 10px 2px rgb(216 229 246);
    -moz-box-shadow: 0px 5px 10px 2px rgb(216 229 246);
    box-shadow: 0px 5px 10px 2px rgb(216 229 246);
}
.btn-secondary {
    font-size: 14px;
    font-weight: 500;
    border: none;
}
.btn:first-child:active {
    border: none;
    background-color: #0a9c47;
    -webkit-box-shadow: 0px 5px 10px 2px rgb(201 249 221);
    -moz-box-shadow: 0px 5px 10px 2px rgb(201 249 221);
    box-shadow: 0px 5px 10px 2px rgb(201 249 221);
}
.btn-secondary-contact {
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 7px 15px;
  background-color: #ffffff;
  color: #002f6c;
  font-weight: 600;
}
.btn-secondary-contact:hover {
  border: none;
  padding: 7px 15px;
  background-color: #002f6c;
  color: #ffffff;
  font-weight: 600;
}
.submit-button {
    border: none;
    background-color: var(--highlight-color);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}
.submit-button:hover {
    font-size: 14px;
    font-weight: 500;
    border: none;
    color: #ffffff;
    background-color: #0a9c47;
    -webkit-box-shadow: 0px 5px 10px 2px rgb(201 249 221);
    -moz-box-shadow: 0px 5px 10px 2px rgb(201 249 221);
    box-shadow: 0px 5px 10px 2px rgb(201 249 221);
}
.reset-button {
    border: none;
    background-color: #6c757d;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}
.reset-button:hover {
    font-size: 14px;
    font-weight: 500;
    border: none;
    color: #ffffff;
    background-color: #707d89;
    -webkit-box-shadow: 0px 5px 10px 2px rgb(205 214 223);
    -moz-box-shadow: 0px 5px 10px 2px rgb(205 214 223);
    box-shadow: 0px 5px 10px 2px rgb(205 214 223);
    color: #ffffff;
}

form#addGst .dropdown-toggle {
    font-size: 13px;
    color: #000000;
    background: transparent;
    padding: 9px 14px;
    border: none;
}
form#addGst .dropdown-toggle:focus {
    border: none !important;
    outline: none !important;
}
form#addGst .dropdown-menu .dropdown-item {
    color: black;
    font-size: 12px;
    padding: 8px 14px;
}
form#addGst  .dropdown-item.active, .dropdown-item:active {
    text-decoration: none;
    background-color: #f3f3f3;
    font-size: 13px !important;
}
/* Dashboard start */
.__dashbord_Overview_Sec {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-between;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0;
}
.__Overview_item {
    display: flex;
    flex-direction: column;
    width: 24%;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
}
.__Overview_item_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
}
.__Overview_item_header h2 {
    font-size: 40px;
    font-weight: 700;
}
.__Overview_item_header p {
    font-size: 12px;
    font-weight: 500;
}
.__Overview_item_footer {
    display: flex;
    align-items: end;
}
.__Overview_item_footer p {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
}
.__quick_track_shipment {
    margin-top: 40px;
}
.__tracking_overview_sec {
    margin: 0;
}
.__quick_track_shipment, .__fleet_verview {
    margin-top: 40px;
    box-shadow: 0 0 5px lightgray;
    padding: 20px;
    border-radius: 5px;
    min-height: 536px;
    height: auto;
}
.__quick_track_shipment_header, .__fleet_verview_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.__quick_track_shipment_header h2, .__fleet_verview_header h2 {
    font-size: 19px;
    font-weight: 700;
}
.__quick_track_shipment_header p, .__fleet_verview_header p {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}


/* Chart start */

.chart-container {
    position: relative;
    width: 400px;
    height: 400px;
    margin-left: 14px;
    margin-top: 30px;
}

.chart-container h3 {
    position: absolute;
    left: 126px;
    top: 177px;
    font-size: 18px;
    font-weight: bold;
    color: #002F6C;
    z-index: 99;
    pointer-events: none;
}

.chart-container p {
    position: absolute;
    top: 154px;
    left: 161px;
    font-size: 14px;
    z-index: 99;
    pointer-events: none;
}

.center-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    z-index: 10;
    background: white;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    pointer-events: none;
}

.tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 0.9rem;
    min-width: 120px;
    text-align: center;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s;
}

.connector {
    position: absolute;
    height: 2px;
    transform-origin: 0 0;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.3s;
}

.connector::after {
    content: '';
    position: absolute;
    right: 0;
    top: -3px;
    width: 0;
    height: 0;
    border-left: 6px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}
/* Chart end */

/* Dashboard end */

.__pageNation_Sec a,
.__pageNation_Sec span {
    font-size: 14px;
    color: #000000;
}
.__pageNation_Sec .btn-primary {
    background-color: #e9ecef;
    border-color: #cfcfcf;
    cursor: pointer;
}
.__pageNation_Sec .active > .page-link,
.__pageNation_Sec .page-link.active {
    background-color: #002f6c;
    border-color: #cfcfcf;
    color: #ffffff;
}
.__pageNation_Sec .hover > .page-link,
.__pageNation_Sec .page-link.hover,
.__pageNation_Sec .btn-primary:hover {
    background-color: #002f6c;
    color: #ffffff;
    border-color: #cfcfcf;
}
.__pageNation_Sec .page-link {
    color: #000000;
}
li.page-item.active {
    color: #000000;
}
.px-6 {
    padding: 0 2.5em;
}
/* Home page Navbar start */
.navmenuhome {
    position: relative;
}
.navmenuhome ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
}
.navmenuhome ul li {
    margin: 0;
    padding: 0;
}
.navmenuhome ul li a,
.navmenuhome ul li a:focus {
    color: var(--nav-color);
    padding: 18px 30px;
    font-size: 18px;
    font-family: var(--nav-font);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
}
.mobile-nav-toggle {
    font-size: 24px;
    cursor: pointer;
    color: var(--nav-hover-color);
}
.mobile-nav-close {
    display: none;
}
.navmenuhome.open {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    padding: 20px;
    transition: left 0.4s ease-in-out;
    z-index: 99;
}
/* Home page Navbar end */

/*--------------------------------------------------------------
# Index Page start
--------------------------------------------------------------*/
.profileimg {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.532);
    border-radius: 50%;
    overflow: hidden;
}
.profileimg-inner {
    width: 40px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.profileimg-inner img {
    object-fit: cover;
    height: auto;
}

.yellowtheam-background {
    background-color: #fefaf0;
}
.modelSection {
    margin-top: 35px;
    background-color: rgb(255, 255, 255);
    padding: 2% 5%;
}
form#userForm p.error-message {
    font-size: 13px;
    margin-top: 0.5rem;
    color: #f58686;
    font-weight: 400;
}
/* Smooth scroll */
:root {
    scroll-behavior: smooth;
}
.form-control {
    padding: 0.575rem 0.75rem;
    border-radius: 3px;
}
/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
.resBidTable {
    position: relative;
    display: inline-table;
    overflow-x: scroll;
    height: auto;
    white-space: nowrap;
}

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
    width: 94px;
    height: 94px;
    background: radial-gradient(
        var(--accent-color) 50%,
        color-mix(in srgb, var(--accent-color), transparent 75%) 52%
    );
    border-radius: 50%;
    display: block;
    position: relative;
    overflow: hidden;
}

.pulsating-play-btn:before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    animation-delay: 0s;
    animation: pulsate-play-btn 2s;
    animation-direction: forwards;
    animation-iteration-count: infinite;
    animation-timing-function: steps;
    opacity: 1;
    border-radius: 50%;
    border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
    top: -15%;
    left: -15%;
    background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 100;
    transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-40%) translateY(-50%);
    width: 0;
    height: 0;
    border: none;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #fff;
    z-index: 200;
    animation: none;
    border-radius: 0;
}

.pulsating-play-btn:hover:after {
    border-left: 15px solid var(--accent-color);
    transform: scale(20);
}

@keyframes pulsate-play-btn {
    0% {
        transform: scale(0.6, 0.6);
        opacity: 1;
    }

    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}

/*--------------------------------------------------------------
# Login Page Start
---------------------------------------------------------------*/
.loginSec {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(97vh - 160px);
    overflow: hidden;
}
.SignUpSec {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: calc(125vh - 160px); */
    height: auto;
}
/*--------------------------------------------------------------
# Login Page End
---------------------------------------------------------------*/

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.headerInd {
    color: var(--default-color);
    background: #ffffff;
    padding: 10px 0;
    transition: all 0.5s;
    z-index: 997;
    border-bottom: 1px solid color-mix(in srgb, #002f6c, transparent 85%);
}

.headerInd .logo {
    line-height: 1;
}

.headerInd .logo img {
    max-height: 48px;
    margin-right: 8px;
}

.headerInd .logo h1 {
    font-size: 30px;
    margin: 0;
    font-weight: 300;
    color: var(--heading-color);
}

.headerInd .btn-getstarted,
.headerInd .btn-getstarted:focus {
    color: var(--contrast-color);
    background-color: #0a9c47;
    -webkit-box-shadow: 0px 5px 10px 2px rgb(201 249 221);
    -moz-box-shadow: 0px 5px 10px 2px rgb(201 249 221);
    box-shadow: 0px 5px 10px 2px rgb(201 249 221);
    font-size: 17px;
    padding: 8px 25px;
    margin: 0 0 0 80px;
    border-radius: 4px;
    transition: 0.3s;
    cursor: pointer;
    font-weight: 600;
}

.headerInd .btn-getstarted:hover,
.headerInd .btn-getstarted:focus:hover {
    color: var(--contrast-color);
    background: color-mix(in srgb, #0a9c47, transparent 15%);
    -webkit-box-shadow: 0px 5px 10px 2px rgb(153, 242, 190);
    -moz-box-shadow: 0px 5px 10px 2px rgb(153, 242, 190);
    box-shadow: 0px 5px 10px 2px rgb(153, 242, 190);
}

.btn-pri_1,
.btn-pri_1:focus {
    color: var(--contrast-color);
    background: var(--accent-color);
    font-size: 17px;
    padding: 8px 25px;
    border-radius: 4px;
    transition: 0.3s;
    border: none;
    outline: none;
    cursor: pointer;
}

.btn-pri_1:hover,
.btn-pri_1:focus:hover {
    color: var(--contrast-color);
    background: color-mix(in srgb, var(--accent-color), transparent 15%);
    outline: none;
    border: none;
    outline: none;
}

.m-aside-menu.m-aside-menu--skin-dark
    .m-menu__nav
    > .m-menu__item.m-menu__item--active
    > .m-menu__heading
    .m-menu__link-text,
.m-aside-menu.m-aside-menu--skin-dark
    .m-menu__nav
    > .m-menu__item.m-menu__item--active
    > .m-menu__link
    .m-menu__link-text {
    color: #498ce5;
}

/* Modal Apk download start */
.apkSec {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    text-align: center;
}
.apkSec p {
    font-size: 26px;
    color: #002f6c;
    font-weight: 400;
}
.apkSec p b {
    color: #00c853;
    font-weight: 600;
}

/* Modal Apk download end */

.bidDurationSec {
    font-size: 15px;
    font-weight: 500;
    color: gray;
    margin-bottom: 0;
}
.bidCurrentStatusSec {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.bidCurrentStatusSec p {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}
.saveEmpMb {
    margin-bottom: 10px;
}
/* OTP varification start */
.otp-verification {
    padding: 30px;
}
.otp-verification h2 {
    font-size: 30px;
    font-weight: 700;
    color: #00c853;
    margin-top: 10px;
    margin-bottom: 20px;
}
.otp-verification p {
    font-size: 17px;
    font-weight: 500;
    color: #000000;
    margin-bottom: 10px;
}
.otp-verification h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-color);
}
.otp-verification h4 {
    font-size: 19px;
    font-weight: 500;
    color: lightgray;
}
.otpVerifiSec {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}
.otp-verification button.sub-btn {
    padding: 8px 18px;
    border-radius: 5px;
    background-color: #00c853;
    color: #ffffff;
    font-weight: 600;
    border: none;
    outline: none;
    -webkit-box-shadow: 0px 5px 10px 2px rgb(201 249 221);
    -moz-box-shadow: 0px 5px 10px 2px rgb(201 249 221);
    box-shadow: 0px 5px 10px 2px rgb(201 249 221);
}
.otp-verification button.sub-btn:hover {
    background-color: #038f3d;
    color: #ffffff;
    font-weight: 600;
    -webkit-box-shadow: 0px 5px 10px 2px rgb(170, 235, 197);
    -moz-box-shadow: 0px 5px 10px 2px rgb(170, 235, 197);
    box-shadow: 0px 5px 10px 2px rgb(170, 235, 197);
}
button.resend-otp {
    padding: 8px 25px;
    border-radius: 5px;
    background-color: #8e8a8a;
    color: #ffffff;
    border: none;
    outline: none;
    -webkit-box-shadow: 0px 5px 10px 2px rgb(214 214 214);
    -moz-box-shadow: 0px 5px 10px 2px rgb(214 214 214);
    box-shadow: 0px 5px 10px 2px rgb(214 214 214);
}
button.resend-otp:hover {
    background-color: #1a1818;
    color: #ffffff;
    -webkit-box-shadow: 0px 5px 10px 2px rgb(212 212 212);
    -moz-box-shadow: 0px 5px 10px 2px rgb(212 212 212);
    box-shadow: 0px 5px 10px 2px rgb(212 212 212);
}
.otp-verification h5 {
    font-size: 19px;
    font-weight: 500;
    color: #8e8a8a;
    margin-top: 40px;
}

.otp-verification .form-control {
    -webkit-transition: none;
    transition: none;
    width: 42px;
    height: 42px;
    text-align: center;
}

.otp-verification .form-control:focus {
    color: #3f4254;
    background-color: #ffffff;
    border-color: #884377;
    outline: 0;
}
.otp-verification .form-control.form-control-solid {
    font-size: 17px;
    font-weight: 600;
    background-color: transparent;
    border-color: #002f6c;
    color: #3f4254;
    border: 3px solid;
    transition: color 0.15s ease, background-color 0.15s ease,
        border-color 0.15s ease, box-shadow 0.15s ease;
}

.otp-verification .form-control.form-control-solid:active,
.otp-verification .form-control.form-control-solid.active,
.otp-verification .form-control.form-control-solid:focus,
.otp-verification .form-control.form-control-solid.focus {
    background-color: #ebedf3;
    border-color: #ebedf3;
    color: #3f4254;
    transition: color 0.15s ease, background-color 0.15s ease,
        border-color 0.15s ease, box-shadow 0.15s ease;
}
.note-editable ul {
    padding-left: 0;
}
.note-editable ul li {
    font-size: 13px;
    font-weight: 400;
    color: rgb(49, 49, 49);
}
/* OTP Verification End */

div#summernote p {
    font-size: 13px;
    font-weight: 500;
    color: #595959;
}
a#profile_email {
    word-break: break-word;
    font-size: 14px;
}
/* Assign Trip start */
.trackingIconSec {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #00c853;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
}
.assignTripAction {
    font-size: 20px;
    background-color: #323131;
}
.assgnTripTableHeader table tr th:last-child {
    position: fixed;
    left: 0;
    top: 0;
}
.assgnTripTableBody table tr td:last-child {
    padding: 0;
    margin: 0;
    position: fixed;
    left: 0;
    top: 0;
    text-align: center;
}
.assgnTripTableBody table tr td:last-child .assignTripAction {
    height: 50px;
    text-align: center;
}
.assignTripAction a i {
    color: White;
}

/* Assign Trip end */


@media screen and (min-device-width: 1451px) and (max-device-width: 1475px)  {
    .picupAndDropSearchandAddSection {
        width: 100%!important;
    }
    .picupAndDropHeaderSection h2, .picupAndDropHeaderSection label {
        width: 100%;
    }
}
@media screen and (min-device-width: 1201px) and (max-device-width: 1450px)  {
    .picupAndDropSearchandAddSection {
        width: 100% !important;
    }
}
@media (max-width: 1200px) {
    .headerInd .logo {
        order: 1;
    }
    .headerInd .btn-getstarted {
        order: 2;
        margin: 0 15px 0 0;
    }
    .headerInd .navmenu {
        order: 3;
    }
    .picupAndDropSearchandAddSection {
        width: 100% !important;
    }
    .picupAndDropHeaderSection {
        display: flex;
        justify-content: start;
        row-gap: 7px;
        flex-wrap: wrap;
        align-items: center;
    }
}

.scrolled .headerInd {
    border-color: var(--contrast-color);
    box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------------------------
# NAVI START
--------------------------------------------------------------*/
.naviTopTabSec {
    display: flex;
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: 20px;
}
.naviTopTabItems {
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    box-shadow: 0 0 5px #c1c1c1;
    border-radius: 8px;
    height: auto;
}
.naviTopTabItem {
    display: flex;
    width: 25%;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    gap: 15px;
    height: 50px;
    color: #878787;
    font-weight: 500;
    border-right: 1px solid lightgray;
    cursor: pointer;
}
.naviTopTabItem:hover {
    background-color: #00c853;
    color: #ffffff;
}
.naviTopTabItems .naviTopTabItem:last-child {
    border-right: none;
}
.naviTopTabItems .naviTopTabItem:first-child:hover {
    border-radius: 5px 0 0 5px;
}
.naviTopTabItems .naviTopTabItem:last-child:hover {
    border-radius: 0 5px 5px 0;
}

.naviTopTabItemIcon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .allOrder {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 25H23.125C23.6223 25 24.0992 24.8025 24.4508 24.4508C24.8025 24.0992 25 23.6223 25 23.125V21.625C25 21.1277 24.8025 20.6508 24.4508 20.2992C24.0992 19.9475 23.6223 19.75 23.125 19.75H13V25ZM13 18.25H23.125C23.6223 18.25 24.0992 18.0525 24.4508 17.7008C24.8025 17.3492 25 16.8723 25 16.375V15.625C25 15.1277 24.8025 14.6508 24.4508 14.2992C24.0992 13.9475 23.6223 13.75 23.125 13.75H13V18.25ZM11.5 13.75V18.25H8.875C8.37772 18.25 7.90081 18.0525 7.54917 17.7008C7.19754 17.3492 7 16.8723 7 16.375V15.625C7 15.1277 7.19754 14.6508 7.54917 14.2992C7.90081 13.9475 8.37772 13.75 8.875 13.75H11.5ZM13 12.25H23.125C23.6223 12.25 24.0992 12.0525 24.4508 11.7008C24.8025 11.3492 25 10.8723 25 10.375V8.875C25 8.37772 24.8025 7.90081 24.4508 7.54917C24.0992 7.19754 23.6223 7 23.125 7H13V12.25ZM11.5 7V12.25H8.875C8.37772 12.25 7.90081 12.0525 7.54917 11.7008C7.19754 11.3492 7 10.8723 7 10.375V8.875C7 8.37772 7.19754 7.90081 7.54917 7.54917C7.90081 7.19754 8.37772 7 8.875 7H11.5ZM11.5 19.75V25H8.875C8.37772 25 7.90081 24.8025 7.54917 24.4508C7.19754 24.0992 7 23.6223 7 23.125V21.625C7 21.1277 7.19754 20.6508 7.54917 20.2992C7.90081 19.9475 8.37772 19.75 8.875 19.75H11.5Z' fill='%23878787'/%3E%3C/svg%3E");
  }
  .pendingTrip {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.7301 5.86645C14.7952 6.1541 14.7435 6.45583 14.5862 6.70532C14.4289 6.9548 14.179 7.13162 13.8914 7.19689C13.6731 7.24656 13.4568 7.30445 13.2428 7.37043C13.1033 7.41352 12.9565 7.4287 12.8111 7.4151C12.6656 7.4015 12.5243 7.35938 12.3951 7.29116C12.266 7.22293 12.1515 7.12993 12.0583 7.01746C11.965 6.90499 11.8949 6.77527 11.8518 6.63568C11.8087 6.4961 11.7935 6.3494 11.8071 6.20395C11.8207 6.0585 11.8628 5.91715 11.931 5.78798C11.9993 5.65881 12.0923 5.54434 12.2047 5.45111C12.3172 5.35788 12.4469 5.28771 12.5865 5.24461C12.8535 5.16155 13.1242 5.08925 13.3986 5.02769C13.5411 4.99529 13.6886 4.99128 13.8326 5.0159C13.9767 5.04051 14.1145 5.09328 14.2381 5.17117C14.3618 5.24906 14.4689 5.35056 14.5533 5.46986C14.6377 5.58916 14.6978 5.72392 14.7301 5.86645ZM17.0106 5.86645C17.0758 5.57884 17.2527 5.32892 17.5021 5.17163C17.7516 5.01435 18.0534 4.96258 18.341 5.02769C23.2957 6.15123 26.9955 10.5808 26.9955 15.8759C26.9955 22.0197 22.0142 27 15.8715 27C10.5753 27 6.14566 23.3012 5.02213 18.3466C4.96446 18.0618 5.02052 17.7657 5.17832 17.5217C5.33611 17.2777 5.58312 17.1051 5.86651 17.0409C6.14989 16.9767 6.44717 17.0259 6.69475 17.178C6.94233 17.3301 7.12056 17.5731 7.19133 17.8549C7.54532 19.4053 8.3083 20.8326 9.40091 21.9881C10.4935 23.1437 11.8758 23.9854 13.404 24.4256C14.9322 24.8658 16.5504 24.8884 18.0903 24.4912C19.6302 24.0939 21.0356 23.2913 22.1601 22.1668C23.2846 21.0422 24.0873 19.6369 24.4845 18.097C24.8818 16.5571 24.8591 14.9389 24.4189 13.4107C23.9787 11.8825 23.137 10.5002 21.9814 9.40758C20.8259 8.31498 19.3986 7.55199 17.8482 7.19801C17.5606 7.1325 17.3107 6.95541 17.1536 6.7057C16.9965 6.45599 16.9451 6.1541 17.0106 5.86645ZM9.87891 7.77757C9.97839 7.88468 10.0558 8.01036 10.1067 8.1474C10.1576 8.28445 10.1809 8.43018 10.1755 8.57626C10.17 8.72235 10.1358 8.86592 10.0748 8.99877C10.0138 9.13163 9.92718 9.25115 9.81995 9.35052C9.65532 9.50255 9.49698 9.66051 9.34495 9.8244C9.14287 10.0347 8.8663 10.1572 8.57479 10.1655C8.28328 10.1739 8.00014 10.0674 7.78634 9.86911C7.57254 9.67077 7.44518 9.3964 7.43168 9.10508C7.41818 8.81376 7.51962 8.52879 7.71416 8.31153C7.90327 8.10684 8.10054 7.90921 8.30596 7.71861C8.41308 7.61913 8.53875 7.54173 8.6758 7.49085C8.81284 7.43997 8.95857 7.41659 9.10466 7.42207C9.25074 7.42755 9.39431 7.46176 9.52717 7.52276C9.66002 7.58376 9.77954 7.67035 9.87891 7.77757ZM15.8703 9.20145C16.1654 9.20145 16.4483 9.31865 16.6569 9.52727C16.8656 9.73589 16.9828 10.0188 16.9828 10.3139V15.4154L19.994 18.4267C20.1967 18.6365 20.3088 18.9175 20.3063 19.2091C20.3037 19.5008 20.1867 19.7798 19.9805 19.9861C19.7742 20.1923 19.4952 20.3093 19.2036 20.3118C18.9119 20.3144 18.6309 20.2022 18.4211 19.9996L15.0839 16.6624C14.8752 16.4538 14.758 16.1709 14.7579 15.8759V10.3139C14.7579 10.0188 14.8751 9.73589 15.0838 9.52727C15.2924 9.31865 15.5753 9.20145 15.8703 9.20145ZM6.62956 11.8579C6.91144 11.9448 7.14725 12.1401 7.28514 12.4009C7.42303 12.6616 7.45171 12.9665 7.36487 13.2484C7.29888 13.4623 7.241 13.6786 7.19133 13.8969C7.12056 14.1788 6.94233 14.4217 6.69475 14.5738C6.44717 14.7259 6.14989 14.7751 5.86651 14.7109C5.58312 14.6467 5.33611 14.4741 5.17832 14.2301C5.02052 13.9861 4.96446 13.69 5.02213 13.4052C5.08443 13.1309 5.15673 12.8602 5.23905 12.5932C5.32597 12.3113 5.52129 12.0755 5.78205 11.9376C6.04281 11.7997 6.34766 11.771 6.62956 11.8579Z' fill='%23878787' stroke='%23878787' stroke-width='0.5'/%3E%3C/svg%3E");
  }
  .assignTrip {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.0599 25.7231H8.27693C6.49484 25.7231 5.04616 24.2744 5.04616 22.4923C5.04616 20.7102 6.49484 19.2615 8.27693 19.2615H17.3231C19.8172 19.2615 21.8462 17.2326 21.8462 14.7385C21.8462 12.2443 19.8172 10.2154 17.3231 10.2154H11.0412C10.5667 11.1458 9.97899 12.0139 9.29139 12.8H17.3231C18.3918 12.8 19.2615 13.6697 19.2615 14.7385C19.2615 15.8072 18.3918 16.6769 17.3231 16.6769H8.27693C5.07072 16.6769 2.46155 19.2861 2.46155 22.4923C2.46155 25.6985 5.07072 28.3077 8.27693 28.3077H20.674C20.0398 27.5101 19.4983 26.643 19.0599 25.7231ZM6.33847 2.46155C4.20099 2.46155 2.46155 4.20099 2.46155 6.33847C2.46155 10.4583 6.33847 12.8 6.33847 12.8C6.33847 12.8 10.2154 10.4571 10.2154 6.33847C10.2154 4.20099 8.47595 2.46155 6.33847 2.46155ZM6.33847 8.27693C6.08382 8.27685 5.83169 8.22661 5.59646 8.12908C5.36122 8.03155 5.14751 7.88865 4.9675 7.70852C4.7875 7.5284 4.64474 7.31459 4.54737 7.07929C4.45 6.844 4.39992 6.59183 4.40001 6.33718C4.40009 6.08253 4.45033 5.83039 4.54786 5.59516C4.64539 5.35993 4.78829 5.14621 4.96842 4.96621C5.14854 4.78621 5.36235 4.64345 5.59765 4.54608C5.83295 4.4487 6.08512 4.39863 6.33976 4.39872C6.85405 4.39889 7.3472 4.60335 7.71073 4.96713C8.07426 5.3309 8.2784 5.82419 8.27822 6.33847C8.27805 6.85275 8.07359 7.34591 7.70982 7.70944C7.34604 8.07297 6.85275 8.2771 6.33847 8.27693Z' fill='%23878787'/%3E%3Cpath d='M24.4308 17.9692C22.2933 17.9692 20.5539 19.7087 20.5539 21.8462C20.5539 25.966 24.4308 28.3077 24.4308 28.3077C24.4308 28.3077 28.3077 25.9647 28.3077 21.8462C28.3077 19.7087 26.5683 17.9692 24.4308 17.9692ZM24.4308 23.7846C24.1761 23.7845 23.924 23.7343 23.6888 23.6368C23.4535 23.5392 23.2398 23.3963 23.0598 23.2162C22.8798 23.0361 22.7371 22.8223 22.6397 22.587C22.5423 22.3517 22.4922 22.0995 22.4923 21.8449C22.4924 21.5902 22.5427 21.3381 22.6402 21.1029C22.7377 20.8676 22.8806 20.6539 23.0607 20.4739C23.2409 20.2939 23.4547 20.1511 23.69 20.0538C23.9253 19.9564 24.1774 19.9063 24.4321 19.9064C24.9464 19.9066 25.4395 20.111 25.803 20.4748C26.1666 20.8386 26.3707 21.3319 26.3705 21.8462C26.3704 22.3604 26.1659 22.8536 25.8021 23.2171C25.4384 23.5807 24.9451 23.7848 24.4308 23.7846Z' fill='%23878787'/%3E%3C/svg%3E");
  }
  .assignTrip {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.0599 25.7231H8.27693C6.49484 25.7231 5.04616 24.2744 5.04616 22.4923C5.04616 20.7102 6.49484 19.2615 8.27693 19.2615H17.3231C19.8172 19.2615 21.8462 17.2326 21.8462 14.7385C21.8462 12.2443 19.8172 10.2154 17.3231 10.2154H11.0412C10.5667 11.1458 9.97899 12.0139 9.29139 12.8H17.3231C18.3918 12.8 19.2615 13.6697 19.2615 14.7385C19.2615 15.8072 18.3918 16.6769 17.3231 16.6769H8.27693C5.07072 16.6769 2.46155 19.2861 2.46155 22.4923C2.46155 25.6985 5.07072 28.3077 8.27693 28.3077H20.674C20.0398 27.5101 19.4983 26.643 19.0599 25.7231ZM6.33847 2.46155C4.20099 2.46155 2.46155 4.20099 2.46155 6.33847C2.46155 10.4583 6.33847 12.8 6.33847 12.8C6.33847 12.8 10.2154 10.4571 10.2154 6.33847C10.2154 4.20099 8.47595 2.46155 6.33847 2.46155ZM6.33847 8.27693C6.08382 8.27685 5.83169 8.22661 5.59646 8.12908C5.36122 8.03155 5.14751 7.88865 4.9675 7.70852C4.7875 7.5284 4.64474 7.31459 4.54737 7.07929C4.45 6.844 4.39992 6.59183 4.40001 6.33718C4.40009 6.08253 4.45033 5.83039 4.54786 5.59516C4.64539 5.35993 4.78829 5.14621 4.96842 4.96621C5.14854 4.78621 5.36235 4.64345 5.59765 4.54608C5.83295 4.4487 6.08512 4.39863 6.33976 4.39872C6.85405 4.39889 7.3472 4.60335 7.71073 4.96713C8.07426 5.3309 8.2784 5.82419 8.27822 6.33847C8.27805 6.85275 8.07359 7.34591 7.70982 7.70944C7.34604 8.07297 6.85275 8.2771 6.33847 8.27693Z' fill='%23878787'/%3E%3Cpath d='M24.4308 17.9692C22.2933 17.9692 20.5539 19.7087 20.5539 21.8462C20.5539 25.966 24.4308 28.3077 24.4308 28.3077C24.4308 28.3077 28.3077 25.9647 28.3077 21.8462C28.3077 19.7087 26.5683 17.9692 24.4308 17.9692ZM24.4308 23.7846C24.1761 23.7845 23.924 23.7343 23.6888 23.6368C23.4535 23.5392 23.2398 23.3963 23.0598 23.2162C22.8798 23.0361 22.7371 22.8223 22.6397 22.587C22.5423 22.3517 22.4922 22.0995 22.4923 21.8449C22.4924 21.5902 22.5427 21.3381 22.6402 21.1029C22.7377 20.8676 22.8806 20.6539 23.0607 20.4739C23.2409 20.2939 23.4547 20.1511 23.69 20.0538C23.9253 19.9564 24.1774 19.9063 24.4321 19.9064C24.9464 19.9066 25.4395 20.111 25.803 20.4748C26.1666 20.8386 26.3707 21.3319 26.3705 21.8462C26.3704 22.3604 26.1659 22.8536 25.8021 23.2171C25.4384 23.5807 24.9451 23.7848 24.4308 23.7846Z' fill='%23878787'/%3E%3C/svg%3E");
  }
  .inTransit {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7.74901C2 7.01993 2.28644 6.32071 2.7963 5.80517C3.30617 5.28963 3.99769 5 4.71875 5H21.0312C21.7523 5 22.4438 5.28963 22.9537 5.80517C23.4636 6.32071 23.75 7.01993 23.75 7.74901V10.498H25.5988C26.0061 10.4984 26.4081 10.5913 26.7752 10.7699C27.1422 10.9485 27.4649 11.2082 27.7194 11.5298L30.4037 14.9203C30.7899 15.4081 31.0002 16.0144 31 16.6393V20.5777C31 21.3068 30.7136 22.006 30.2037 22.5216C29.6938 23.0371 29.0023 23.3267 28.2812 23.3267H27.375C27.375 24.2989 26.9931 25.2311 26.3133 25.9185C25.6334 26.6059 24.7114 26.9921 23.75 26.9921C22.7886 26.9921 21.8666 26.6059 21.1867 25.9185C20.5069 25.2311 20.125 24.2989 20.125 23.3267H11.0625C11.0635 23.8153 10.968 24.2991 10.7814 24.7498C10.5949 25.2005 10.3211 25.6089 9.97618 25.9511C9.63127 26.2932 9.22219 26.5622 8.77299 26.7422C8.32379 26.9222 7.84353 27.0096 7.36046 26.9992C6.87738 26.9888 6.40123 26.8809 5.96 26.6817C5.51878 26.4826 5.12137 26.1963 4.79116 25.8396C4.46094 25.4829 4.20457 25.0631 4.03713 24.6048C3.86969 24.1466 3.79455 23.659 3.81612 23.171C3.28515 22.982 2.82527 22.631 2.49997 22.1665C2.17466 21.702 1.99997 21.1469 2 20.5777V7.74901ZM4.34538 21.4134C4.67342 20.8714 5.1352 20.4249 5.68541 20.1178C6.23561 19.8107 6.85532 19.6535 7.48375 19.6616C8.11217 19.6697 8.7277 19.8429 9.26995 20.1642C9.8122 20.4854 10.2625 20.9437 10.5767 21.4941H20.6107C20.9289 20.9369 21.3865 20.4742 21.9375 20.1525V7.74901C21.9375 7.50598 21.842 7.27291 21.6721 7.10106C21.5021 6.92922 21.2716 6.83267 21.0312 6.83267H4.71875C4.4784 6.83267 4.24789 6.92922 4.07793 7.10106C3.90798 7.27291 3.8125 7.50598 3.8125 7.74901V20.5777C3.81236 20.7541 3.86256 20.9268 3.95708 21.075C4.05161 21.2233 4.18643 21.3408 4.34538 21.4134ZM23.75 19.6614C24.3863 19.6614 25.0114 19.8308 25.5624 20.1525C26.1135 20.4742 26.5711 20.9369 26.8893 21.4941H28.2812C28.5216 21.4941 28.7521 21.3975 28.9221 21.2257C29.092 21.0538 29.1875 20.8208 29.1875 20.5777V16.6375C29.1871 16.4295 29.1168 16.2279 28.9881 16.0657L26.3056 12.6752C26.2209 12.5679 26.1133 12.4812 25.991 12.4216C25.8686 12.362 25.7346 12.3309 25.5988 12.3307H23.75V19.6614ZM7.4375 21.4941C6.9568 21.4941 6.49578 21.6872 6.15587 22.0308C5.81596 22.3745 5.625 22.8407 5.625 23.3267C5.625 23.8128 5.81596 24.2789 6.15587 24.6226C6.49578 24.9663 6.9568 25.1594 7.4375 25.1594C7.9182 25.1594 8.37922 24.9663 8.71913 24.6226C9.05904 24.2789 9.25 23.8128 9.25 23.3267C9.25 22.8407 9.05904 22.3745 8.71913 22.0308C8.37922 21.6872 7.9182 21.4941 7.4375 21.4941ZM23.75 21.4941C23.2693 21.4941 22.8083 21.6872 22.4684 22.0308C22.1285 22.3745 21.9375 22.8407 21.9375 23.3267C21.9375 23.8128 22.1285 24.2789 22.4684 24.6226C22.8083 24.9663 23.2693 25.1594 23.75 25.1594C24.2307 25.1594 24.6917 24.9663 25.0316 24.6226C25.3715 24.2789 25.5625 23.8128 25.5625 23.3267C25.5625 22.8407 25.3715 22.3745 25.0316 22.0308C24.6917 21.6872 24.2307 21.4941 23.75 21.4941Z' fill='%23878787' stroke='%23878787' stroke-width='0.5'/%3E%3C/svg%3E");
  }
  .delivered {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.0204 4C14.7755 4 14.5306 4.12 14.2857 4.24L4.61224 9.52C4.2449 9.76 4 10.12 4 10.6V21.4C4 21.88 4.2449 22.24 4.61224 22.48L14.2857 27.76C14.5306 27.88 14.7755 28 15.0204 28C15.2653 28 15.5102 27.88 15.7551 27.76L16.8571 27.16C16.4898 26.44 16.3673 25.6 16.2449 24.76V16.72L23.5918 12.64V17.2C24.449 17.2 25.3061 17.32 26.0408 17.56V10.6C26.0408 10.12 25.7959 9.76 25.4286 9.52L15.7551 4.24C15.5102 4.12 15.2653 4 15.0204 4ZM15.0204 6.64L22.3673 10.6L19.9184 11.92L12.6939 7.84L15.0204 6.64ZM10.2449 9.16L17.4694 13.36L15.0204 14.68L7.67347 10.6L10.2449 9.16ZM6.44898 12.64L13.7959 16.72V24.76L6.44898 20.68V12.64ZM26.4082 20.56L22 24.88L20.0408 22.96L18.6939 24.4L22.1224 28L28 22.24L26.4082 20.56Z' fill='%23878787'/%3E%3C/svg%3E");
  }
  .naviTopTabItem:hover .allOrder,
  .naviTopTabItem.active .allOrder {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 25H23.125C23.6223 25 24.0992 24.8025 24.4508 24.4508C24.8025 24.0992 25 23.6223 25 23.125V21.625C25 21.1277 24.8025 20.6508 24.4508 20.2992C24.0992 19.9475 23.6223 19.75 23.125 19.75H13V25ZM13 18.25H23.125C23.6223 18.25 24.0992 18.0525 24.4508 17.7008C24.8025 17.3492 25 16.8723 25 16.375V15.625C25 15.1277 24.8025 14.6508 24.4508 14.2992C24.0992 13.9475 23.6223 13.75 23.125 13.75H13V18.25ZM11.5 13.75V18.25H8.875C8.37772 18.25 7.90081 18.0525 7.54917 17.7008C7.19754 17.3492 7 16.8723 7 16.375V15.625C7 15.1277 7.19754 14.6508 7.54917 14.2992C7.90081 13.9475 8.37772 13.75 8.875 13.75H11.5ZM13 12.25H23.125C23.6223 12.25 24.0992 12.0525 24.4508 11.7008C24.8025 11.3492 25 10.8723 25 10.375V8.875C25 8.37772 24.8025 7.90081 24.4508 7.54917C24.0992 7.19754 23.6223 7 23.125 7H13V12.25ZM11.5 7V12.25H8.875C8.37772 12.25 7.90081 12.0525 7.54917 11.7008C7.19754 11.3492 7 10.8723 7 10.375V8.875C7 8.37772 7.19754 7.90081 7.54917 7.54917C7.90081 7.19754 8.37772 7 8.875 7H11.5ZM11.5 19.75V25H8.875C8.37772 25 7.90081 24.8025 7.54917 24.4508C7.19754 24.0992 7 23.6223 7 23.125V21.625C7 21.1277 7.19754 20.6508 7.54917 20.2992C7.90081 19.9475 8.37772 19.75 8.875 19.75H11.5Z' fill='white'/%3E%3C/svg%3E");
    transition: all 0.7s;
  }
  .naviTopTabItem:hover .pendingTrip,
  .naviTopTabItem.active .pendingTrip {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.7301 5.86645C14.7952 6.1541 14.7435 6.45583 14.5862 6.70532C14.4289 6.9548 14.179 7.13162 13.8914 7.19689C13.6731 7.24656 13.4568 7.30445 13.2428 7.37043C13.1033 7.41352 12.9565 7.4287 12.8111 7.4151C12.6656 7.4015 12.5243 7.35938 12.3951 7.29116C12.266 7.22293 12.1515 7.12993 12.0583 7.01746C11.965 6.90499 11.8949 6.77527 11.8518 6.63568C11.8087 6.4961 11.7935 6.3494 11.8071 6.20395C11.8207 6.0585 11.8628 5.91715 11.931 5.78798C11.9993 5.65881 12.0923 5.54434 12.2047 5.45111C12.3172 5.35788 12.4469 5.28771 12.5865 5.24461C12.8535 5.16155 13.1242 5.08925 13.3986 5.02769C13.5411 4.99529 13.6886 4.99128 13.8326 5.0159C13.9767 5.04051 14.1145 5.09328 14.2381 5.17117C14.3618 5.24906 14.4689 5.35056 14.5533 5.46986C14.6377 5.58916 14.6978 5.72392 14.7301 5.86645ZM17.0106 5.86645C17.0758 5.57884 17.2527 5.32892 17.5021 5.17163C17.7516 5.01435 18.0534 4.96258 18.341 5.02769C23.2957 6.15123 26.9955 10.5808 26.9955 15.8759C26.9955 22.0197 22.0142 27 15.8715 27C10.5753 27 6.14566 23.3012 5.02213 18.3466C4.96446 18.0618 5.02052 17.7657 5.17832 17.5217C5.33611 17.2777 5.58312 17.1051 5.86651 17.0409C6.14989 16.9767 6.44717 17.0259 6.69475 17.178C6.94233 17.3301 7.12056 17.5731 7.19133 17.8549C7.54532 19.4053 8.3083 20.8326 9.40091 21.9881C10.4935 23.1437 11.8758 23.9854 13.404 24.4256C14.9322 24.8658 16.5504 24.8884 18.0903 24.4912C19.6302 24.0939 21.0356 23.2913 22.1601 22.1668C23.2846 21.0422 24.0873 19.6369 24.4845 18.097C24.8818 16.5571 24.8591 14.9389 24.4189 13.4107C23.9787 11.8825 23.137 10.5002 21.9814 9.40758C20.8259 8.31498 19.3986 7.55199 17.8482 7.19801C17.5606 7.1325 17.3107 6.95541 17.1536 6.7057C16.9965 6.45599 16.9451 6.1541 17.0106 5.86645ZM9.87891 7.77757C9.97839 7.88468 10.0558 8.01036 10.1067 8.1474C10.1576 8.28445 10.1809 8.43018 10.1755 8.57626C10.17 8.72235 10.1358 8.86592 10.0748 8.99877C10.0138 9.13163 9.92718 9.25115 9.81995 9.35052C9.65532 9.50255 9.49698 9.66051 9.34495 9.8244C9.14287 10.0347 8.8663 10.1572 8.57479 10.1655C8.28328 10.1739 8.00014 10.0674 7.78634 9.86911C7.57254 9.67077 7.44518 9.3964 7.43168 9.10508C7.41818 8.81376 7.51962 8.52879 7.71416 8.31153C7.90327 8.10684 8.10054 7.90921 8.30596 7.71861C8.41308 7.61913 8.53875 7.54173 8.6758 7.49085C8.81284 7.43997 8.95857 7.41659 9.10466 7.42207C9.25074 7.42755 9.39431 7.46176 9.52717 7.52276C9.66002 7.58376 9.77954 7.67035 9.87891 7.77757ZM15.8703 9.20145C16.1654 9.20145 16.4483 9.31865 16.6569 9.52727C16.8656 9.73589 16.9828 10.0188 16.9828 10.3139V15.4154L19.994 18.4267C20.1967 18.6365 20.3088 18.9175 20.3063 19.2091C20.3037 19.5008 20.1867 19.7798 19.9805 19.9861C19.7742 20.1923 19.4952 20.3093 19.2036 20.3118C18.9119 20.3144 18.6309 20.2022 18.4211 19.9996L15.0839 16.6624C14.8752 16.4538 14.758 16.1709 14.7579 15.8759V10.3139C14.7579 10.0188 14.8751 9.73589 15.0838 9.52727C15.2924 9.31865 15.5753 9.20145 15.8703 9.20145ZM6.62956 11.8579C6.91144 11.9448 7.14725 12.1401 7.28514 12.4009C7.42303 12.6616 7.45171 12.9665 7.36487 13.2484C7.29888 13.4623 7.241 13.6786 7.19133 13.8969C7.12056 14.1788 6.94233 14.4217 6.69475 14.5738C6.44717 14.7259 6.14989 14.7751 5.86651 14.7109C5.58312 14.6467 5.33611 14.4741 5.17832 14.2301C5.02052 13.9861 4.96446 13.69 5.02213 13.4052C5.08443 13.1309 5.15673 12.8602 5.23905 12.5932C5.32597 12.3113 5.52129 12.0755 5.78205 11.9376C6.04281 11.7997 6.34766 11.771 6.62956 11.8579Z' fill='white' stroke='white' stroke-width='0.5'/%3E%3C/svg%3E");
    transition: all 0.7s;
  }
  .naviTopTabItem:hover .assignTrip,
  .naviTopTabItem.active .assignTrip {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.0599 25.7231H8.27693C6.49484 25.7231 5.04616 24.2744 5.04616 22.4923C5.04616 20.7102 6.49484 19.2615 8.27693 19.2615H17.3231C19.8172 19.2615 21.8462 17.2326 21.8462 14.7385C21.8462 12.2443 19.8172 10.2154 17.3231 10.2154H11.0412C10.5667 11.1458 9.97899 12.0139 9.29139 12.8H17.3231C18.3918 12.8 19.2615 13.6697 19.2615 14.7385C19.2615 15.8072 18.3918 16.6769 17.3231 16.6769H8.27693C5.07072 16.6769 2.46155 19.2861 2.46155 22.4923C2.46155 25.6985 5.07072 28.3077 8.27693 28.3077H20.674C20.0398 27.5101 19.4983 26.643 19.0599 25.7231ZM6.33847 2.46155C4.20099 2.46155 2.46155 4.20099 2.46155 6.33847C2.46155 10.4583 6.33847 12.8 6.33847 12.8C6.33847 12.8 10.2154 10.4571 10.2154 6.33847C10.2154 4.20099 8.47595 2.46155 6.33847 2.46155ZM6.33847 8.27693C6.08382 8.27685 5.83169 8.22661 5.59646 8.12908C5.36122 8.03155 5.14751 7.88865 4.9675 7.70852C4.7875 7.5284 4.64474 7.31459 4.54737 7.07929C4.45 6.844 4.39992 6.59183 4.40001 6.33718C4.40009 6.08253 4.45033 5.83039 4.54786 5.59516C4.64539 5.35993 4.78829 5.14621 4.96842 4.96621C5.14854 4.78621 5.36235 4.64345 5.59765 4.54608C5.83295 4.4487 6.08512 4.39863 6.33976 4.39872C6.85405 4.39889 7.3472 4.60335 7.71073 4.96713C8.07426 5.3309 8.2784 5.82419 8.27822 6.33847C8.27805 6.85275 8.07359 7.34591 7.70982 7.70944C7.34604 8.07297 6.85275 8.2771 6.33847 8.27693Z' fill='white'/%3E%3Cpath d='M24.4308 17.9692C22.2933 17.9692 20.5539 19.7086 20.5539 21.8461C20.5539 25.966 24.4308 28.3076 24.4308 28.3076C24.4308 28.3076 28.3077 25.9647 28.3077 21.8461C28.3077 19.7086 26.5683 17.9692 24.4308 17.9692ZM24.4308 23.7846C24.1761 23.7845 23.924 23.7342 23.6888 23.6367C23.4535 23.5392 23.2398 23.3963 23.0598 23.2162C22.8798 23.036 22.7371 22.8222 22.6397 22.5869C22.5423 22.3516 22.4922 22.0995 22.4923 21.8448C22.4924 21.5902 22.5427 21.338 22.6402 21.1028C22.7377 20.8676 22.8806 20.6538 23.0607 20.4738C23.2409 20.2938 23.4547 20.1511 23.69 20.0537C23.9253 19.9563 24.1774 19.9063 24.4321 19.9063C24.9464 19.9065 25.4395 20.111 25.803 20.4748C26.1666 20.8385 26.3707 21.3318 26.3705 21.8461C26.3704 22.3604 26.1659 22.8535 25.8021 23.2171C25.4384 23.5806 24.9451 23.7847 24.4308 23.7846Z' fill='white'/%3E%3C/svg%3E");
    transition: all 0.7s;
  }
  
  .naviTopTabItem:hover .inTransit,
  .naviTopTabItem.active .inTransit {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 7.74901C2 7.01993 2.28644 6.32071 2.7963 5.80517C3.30617 5.28963 3.99769 5 4.71875 5H21.0312C21.7523 5 22.4438 5.28963 22.9537 5.80517C23.4636 6.32071 23.75 7.01993 23.75 7.74901V10.498H25.5988C26.0061 10.4984 26.4081 10.5913 26.7752 10.7699C27.1422 10.9485 27.4649 11.2082 27.7194 11.5298L30.4037 14.9203C30.7899 15.4081 31.0002 16.0144 31 16.6393V20.5777C31 21.3068 30.7136 22.006 30.2037 22.5216C29.6938 23.0371 29.0023 23.3267 28.2812 23.3267H27.375C27.375 24.2989 26.9931 25.2311 26.3133 25.9185C25.6334 26.6059 24.7114 26.9921 23.75 26.9921C22.7886 26.9921 21.8666 26.6059 21.1867 25.9185C20.5069 25.2311 20.125 24.2989 20.125 23.3267H11.0625C11.0635 23.8153 10.968 24.2991 10.7814 24.7498C10.5949 25.2005 10.3211 25.6089 9.97618 25.9511C9.63127 26.2932 9.22219 26.5622 8.77299 26.7422C8.32379 26.9222 7.84353 27.0096 7.36046 26.9992C6.87738 26.9888 6.40123 26.8809 5.96 26.6817C5.51878 26.4826 5.12137 26.1963 4.79116 25.8396C4.46094 25.4829 4.20457 25.0631 4.03713 24.6048C3.86969 24.1466 3.79455 23.659 3.81612 23.171C3.28515 22.982 2.82527 22.631 2.49997 22.1665C2.17466 21.702 1.99997 21.1469 2 20.5777V7.74901ZM4.34538 21.4134C4.67342 20.8714 5.1352 20.4249 5.68541 20.1178C6.23561 19.8107 6.85532 19.6535 7.48375 19.6616C8.11217 19.6697 8.7277 19.8429 9.26995 20.1642C9.8122 20.4854 10.2625 20.9437 10.5767 21.4941H20.6107C20.9289 20.9369 21.3865 20.4742 21.9375 20.1525V7.74901C21.9375 7.50598 21.842 7.27291 21.6721 7.10106C21.5021 6.92922 21.2716 6.83267 21.0312 6.83267H4.71875C4.4784 6.83267 4.24789 6.92922 4.07793 7.10106C3.90798 7.27291 3.8125 7.50598 3.8125 7.74901V20.5777C3.81236 20.7541 3.86256 20.9268 3.95708 21.075C4.05161 21.2233 4.18643 21.3408 4.34538 21.4134ZM23.75 19.6614C24.3863 19.6614 25.0114 19.8308 25.5624 20.1525C26.1135 20.4742 26.5711 20.9369 26.8893 21.4941H28.2812C28.5216 21.4941 28.7521 21.3975 28.9221 21.2257C29.092 21.0538 29.1875 20.8208 29.1875 20.5777V16.6375C29.1871 16.4295 29.1168 16.2279 28.9881 16.0657L26.3056 12.6752C26.2209 12.5679 26.1133 12.4812 25.991 12.4216C25.8686 12.362 25.7346 12.3309 25.5988 12.3307H23.75V19.6614ZM7.4375 21.4941C6.9568 21.4941 6.49578 21.6872 6.15587 22.0308C5.81596 22.3745 5.625 22.8407 5.625 23.3267C5.625 23.8128 5.81596 24.2789 6.15587 24.6226C6.49578 24.9663 6.9568 25.1594 7.4375 25.1594C7.9182 25.1594 8.37922 24.9663 8.71913 24.6226C9.05904 24.2789 9.25 23.8128 9.25 23.3267C9.25 22.8407 9.05904 22.3745 8.71913 22.0308C8.37922 21.6872 7.9182 21.4941 7.4375 21.4941ZM23.75 21.4941C23.2693 21.4941 22.8083 21.6872 22.4684 22.0308C22.1285 22.3745 21.9375 22.8407 21.9375 23.3267C21.9375 23.8128 22.1285 24.2789 22.4684 24.6226C22.8083 24.9663 23.2693 25.1594 23.75 25.1594C24.2307 25.1594 24.6917 24.9663 25.0316 24.6226C25.3715 24.2789 25.5625 23.8128 25.5625 23.3267C25.5625 22.8407 25.3715 22.3745 25.0316 22.0308C24.6917 21.6872 24.2307 21.4941 23.75 21.4941Z' fill='white' stroke='white' stroke-width='0.5'/%3E%3C/svg%3E");
    transition: all 0.7s;
  }
  .naviTopTabItem:hover .delivered,
  .naviTopTabItem.active .delivered {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.0204 4C14.7755 4 14.5306 4.12 14.2857 4.24L4.61224 9.52C4.2449 9.76 4 10.12 4 10.6V21.4C4 21.88 4.2449 22.24 4.61224 22.48L14.2857 27.76C14.5306 27.88 14.7755 28 15.0204 28C15.2653 28 15.5102 27.88 15.7551 27.76L16.8571 27.16C16.4898 26.44 16.3673 25.6 16.2449 24.76V16.72L23.5918 12.64V17.2C24.449 17.2 25.3061 17.32 26.0408 17.56V10.6C26.0408 10.12 25.7959 9.76 25.4286 9.52L15.7551 4.24C15.5102 4.12 15.2653 4 15.0204 4ZM15.0204 6.64L22.3673 10.6L19.9184 11.92L12.6939 7.84L15.0204 6.64ZM10.2449 9.16L17.4694 13.36L15.0204 14.68L7.67347 10.6L10.2449 9.16ZM6.44898 12.64L13.7959 16.72V24.76L6.44898 20.68V12.64ZM26.4082 20.56L22 24.88L20.0408 22.96L18.6939 24.4L22.1224 28L28 22.24L26.4082 20.56Z' fill='white'/%3E%3C/svg%3E");
    transition: all 0.7s;
  } 
.naviTopTabDataIcon {
    font-weight: 700;
}
.naviTopTabItem.active {
    background-color: #00c853;
    color: #ffffff;
    border-radius: 0;
}
.naviTopTabItem.active:first-child {
    border-radius: 5px 0 0 5px;
}
.naviTopTabItem.active:last-child {
    border-radius: 0 5px 5px 0;
}
.pagetitle {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.pageTitleRight {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.filter-button {
    background-color: #002f6c;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.5s;
}
.filter-button:hover {
    background-color: #01234e;
    color: #ffffff;
}
.order-button {
    background-color: #002f6c;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.5s;
    position: relative;
}
.order-button:hover {
    padding: 8px 15px;
    background-color: #01234e;
    color: #ffffff;
}
.order-button i {
    margin-right: 5px;
}
.navi-table .table-hover > tbody > tr:hover > * {
    color: #000000;
    background: #b7d6ff;
}
/* -- */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.box {
    background-color: rgba(2, 54, 124, 0.8);
    padding: 28px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: absolute;
    top: 228px;
    right: 50px;
}
.box button {
    padding: 5px;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: transparent;
    position: absolute;
    right: -3px;
    top: -1px;
}
.box button:hover {
    color: #00377e;
}

.searchForm .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px !important;
}
.searchForm .select2-container .select2-selection--single {
    font-size: 12px;
    font-weight: 400;
    color: #000000;
    height: 31px;
}
.searchForm .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -5px;
    position: absolute;
    top: 50%;
    width: 0;
}
.searchForm .select2-container--default .select2-selection--single {
    background-color: #fff;
    font-size: 12px;
    font-weight: 400;
    border-radius: 5px;
    border: 1px solid #aaa !important;
}
.input-group-text {
    border: 1px solid #aaa;
}
.box ul {
    list-style: none;
    padding-left: 0;
    text-align: left;
    margin-bottom: 0;
}
.box ul li {
    padding: 10px 15px;
    background-color: #00ac07;
    color: #ffffff;
    margin-bottom: 5px;
    border-radius: 2px;
}
.box ul li a {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 15px;
}
.box ul li a:hover {
    color: #020202;
}
.box ul li a i {
    font-size: 20px;
}
.selectStateName {
    padding: 0.275rem 0.75rem!important;
    margin: 0.20rem 0rem!important;
}
.selectStateName .dropdown-toggle {
    font-size: 13px;
    color: #000000;
    background: transparent;
    padding: 0px!important;
    border: none;
    width: 100%;
    height: auto;
}
.selectStateName .dropdown.bootstrap-select {
    width: 100%!important;
    margin: 5px 0!important;
}
/* -- */
.form-control {
    border-radius: 5px;
    padding: 0.575rem 0.75rem;
}
.form-control::placeholder {
    font-size: 13px;
    font-weight: 400;
    color: #afafaf;
}
.navi-table {
    width: 100%;
    height: auto;
}
.naviTableColSec {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    row-gap: 2px;
    position: relative;
    font-size: 12px;
    font-weight: 400;
}
.navi-table .tableBody tr td,
.navi-table .table thead tr th {
    font-size: 12px;
    vertical-align: top !important;
}
.navi-table .tableSec tr {
    position: relative;
}
.fixedAction i {
    font-size: 20px;
}
.initNavi {
    color: hsl(68, 8%, 65%);
    font-size: 10px;
    position: absolute;
    top: -7px;
}
.nextStepSec {
    white-space: nowrap;
}
.navi-statusBtn {
    display: block;
    justify-content: center;
    align-content: center;
    width: 110px;
    font-size: 12px;
    font-weight: 500;
    --s: 12px;
    line-height: 1.8;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--s)) 50%, 100% 100%, 0 100%);
    padding: 7px;
    border-radius: 3px;
    padding-inline: calc(var(--s) + .3em) .3em;
}
.saved {
    background-color: #ffc107;
    color: black;
}
.in-progress {
    background-color: #007bff;
    color: #ffffff;
}
.in-transit {
    background-color: #fd7e14;
    color: rgb(255, 255, 255);
}
.delivered-status {
    background-color: #28a745;
    color: rgb(255, 255, 255);
}
.upcoming {
    background-color: #6f42c1;
    color: rgb(255, 255, 255);
}


.AssignTrip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 12px !important;
    background-color: #ffffff!important;
    color: #000000!important;
    padding: 9px 16px!important;
    box-shadow: 0 0 10px #e2e1e1;
    border-radius: 2px;
}
.AssignTrip:hover, .AssignTrip:active {
    font-size: 12px!important;
    color: #000000!important;
    background-color: #ffffff!important;
    padding: 9px 16px!important;
    box-shadow: 0 0 10px #e2e1e1;
    border-radius: 2px;
}
.white-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 12px !important;
    background-color: #ffffff!important;
    color: #000000;
    padding: 9px 16px!important;
    box-shadow: 0 0 10px #e2e1e1;
    border-radius: 2px;
}
.white-button:hover, .white-button:focus,  .white-button:active {
    font-size: 12px!important;
    color: #000000!important;
    background-color: #ffffff!important;
    padding: 9px 16px!important;
    box-shadow: 0 0 10px #e2e1e1;
    border-radius: 2px;
}
.img-upload-btn {
    font-size: 14px;
    background-color: #ffffff;
}
.img-upload-btn:hover {
    font-size: 14px;
    background-color: #ffffff;
    font-weight: 600;
    color: #000000;
    box-shadow: 0 0 5px #ffffff;
}
.img-upload-sec {
    /* display: flex;
  justify-content: start;
  gap: 5px; */

    --auto-grid-min-size: 10rem;
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(var(--auto-grid-min-size), 1fr)
    );
    grid-gap: 1rem;
}
.activeCls {
    background-color: #00c853;
    color: #ffffff;
}
.inactive {
    background-color: #474747;
    color: #ffffff;
}
.Cancelled-btn {
    background-color: #6f6f6f;
    color: #ffffff;
}
.owdorderNavi {
    color: #2a60e2;
    font-size: 14px;
    font-weight: 500;
}
.initNaviMain {
    color: #000000;
    font-size: 14px;
}
.naviFilter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.naviFilter a i {
    font-size: 20px;
    font-weight: 500;
}
.headerRightNotiSec {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
.sendBoxSec {
    background-color: #00c853;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding-top: 5px;
}
.sendBoxSec i {
    color: #ffffff;
    font-size: 22px;
}
.trackingSec {
    background-color: #00c853;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    padding-top: 5px;
}
.trackingSec i {
    color: #ffffff;
    font-size: 14px;
}
.rfqSec {
    background-color: #002f6c;
    color: white;
    border-radius: 30px;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 280px;
    height: 45px;
}
.rfqLeSec {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20%;
    height: 45px;
}
.rfqLeSec figure {
    display: flex;
    width: 32px;
    height: 32px;
    background-color: #ffffff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}
.rfqLeSec figure img {
    max-width: 23px;
    width: 23px;
    height: auto;
}
.rfqRgSec {
    width: 80%;
}
.rfqRgSec p {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 0;
}
.rfqRgSec p b {
    font-size: 12px;
    letter-spacing: 0.02em;
}
.createOrderSec {
    width: 100%;
    margin: 0;
    margin-bottom: 20px;
}
.createOrderSec .form-control,
.createOrderSec .form-select,
.insuranceDetailSec .form-control,
.insuranceDetailSec .form-select {
    font-size: 12px !important;
    color: #000000;
    border-color: #aaa;
}
.createOrderSec .form-control::placeholder,
.insuranceDetailSec .form-control::placeholder {
    font-size: 12px !important;
    color: #a8a6a6;
}
.createOrderHeaderSec {
    padding: 0;
    border-radius: 5px 5px 0 0;
}
.createOrderBodySec {
    background-color: #d9d9d9;
    border-radius: 5px;
}
.createOrderHeaderSec h2 {
    font-size: 15px;
    font-weight: 600;
    color: #000000;
    padding-left: 4px;
}
.addItemDetailsSection {
    border-radius: 5px;
}
.addItemBoxSection {
    max-width: 1167px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    margin-bottom: 0;
}
.createUserRoleSec {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    /* --auto-grid-min-size: 16rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: 1rem; */
}
.createUserRole {
    font-size: 13px;
    font-weight: 600;
    color: #002f6c;
    background-color: #a6cdff;
    border: 1px solid #002f6c;
    border-radius: 3px;
    padding: 8px 15px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
}
.createUserRole i {
    border-bottom: 2px solid #002f6c;
    padding-bottom: 0px;
}
/* .addItemBoxInnerSection {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
}
.addItemBoxInnerSection table thead tr th {
  font-size: 13px;
  font-weight: 500;
  color: #000000;
}
.addItemBoxInnerSection table tbody tr td {
  font-size: 13px;
  font-weight: 500;
  color: #000000;
  padding: 0;
}
.addItemBoxInnerSection table tbody tr td input {
  border: none;
  outline: none;
  padding: 12px 8px;
  border: 1px solid #000000;
}
.addItemBoxInnerSection table tbody tr td:nth-child(1) input {
  border-radius: 5px 0 0 5px;
}
.addItemBoxInnerSection button {
  border: none;
  padding: 12px 30px;
  background-color: #002f6c;
  color: #ffffff;
  outline: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: 0 5px 5px 0;
} */

.datetimepicker {
    font-size: 12px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid lightgray;
    border-radius: 4px;
    padding: 5px;
    position: relative;
}
.datetimepicker input[type=date] {
    width: 60%;
    padding: 0.25rem 0 0.25rem 0.5rem;
    border-right-width: 0;
}
.datetimepicker input {
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    border: 0;
    background-color: transparent;
}
.datetimepicker span {
    height: 1rem;
    margin-right: 0.45rem;
    margin-left: 0.45rem;
    border-right: 1px solid #ddd;
}
.datetimepicker input[type=time] {
    width: 40%;
    padding: 0.25rem 0.5rem 0.25rem 0;
    border-left-width: 0;
}
.datetimepicker .error-message {
    position: absolute;
    bottom: -30px;
}
.amount-input-group {
    position: relative;
}
.amount-input-group .error-message {
    display: block;
    height: 12px;
}
.addDimentionSec input {
    text-align: center;
    margin: 0;
}
.order-form {
    display: flex;
    border: 1px solid #afafaf;
    border-radius: 5px;
    height: 39px;
}
.order-form select {
    border: none;
}
.order-form button {
    border: none;
    background-color: transparent;
    border-radius: 0;
    border-left: 1px solid lightgray;
    padding: 6px 8px;
}
.order-form button:hover {
    border: none;
    background-color: transparent;
    border-radius: 0;
    border-left: 1px solid lightgray;
    padding: 6px 8px;
}

.order-form .select2-container .select2-selection--single {
    font-size: 12px;
    font-weight: 400;
    color: #000000;
    height: 36px!important;
}

.addMeterailTableSec tbody tr td {
    font-size: 13px;
    color: rgb(86, 86, 86);
}
.addMeterailTableSec tbody tr:last-child,
.addMeterailTableSec tbody tr:last-child td {
    border: none;
    text-align: center;
    position: sticky;
    bottom: 0;
    top: 9px;
    padding-top: 9px;
    z-index: 9;
}
.addMeterailTableSec thead tr th {
    font-size: 13px;
    font-weight: 500;
    padding: 6px 9px;
    vertical-align: middle;
    background: #f1f1f1;
}
.addMeterailTableSec th:last-child {
    text-align: center;
}
.addMeterailTableSec td:last-child {
    text-align: center;
}
#addContactDetailAssign tr {
    vertical-align: top;
}
#addContactDetailAssign tr td:nth-child(1) {
    padding-top: 8px;
}
tbody#addContactDetailAssign tr td {
    margin-bottom: 5px 0;
}
.editMetirailActButton {
    font-size: 14px;
    padding: 0 10px;
}
.deleteMetirailActButton {
    font-size: 14px;
    padding: 0 10px;
}
.addDimentionSec {
    display: flex;
    justify-content: start;
    align-items: center;
}
.cashCollectionSec {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}
.order-form .select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 5px 0 0 5px;
    border: 0px solid lightgray !important;
}
.checkBTN {
    padding: 9px 13px;
    border-radius: 5px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.ena {
    background: #4c4c4c;
    color: #ffffff;
}
.dis {
    background: #cacaca;
    color: #ffffff;
}
.noOfPakg {
    display: block;
    padding: 10px;
    border: 1px solid lightgray;
    font-weight: 600;
    border-radius: 5px;
    width: 160px;
    margin: 5px auto;
}
.totWegt {
    display: block;
    background-color: #ffeded;
    color: #ff0000;
    font-weight: 600;
    padding: 10px;
    border: 1px solid lightgray;
    border-radius: 5px;
    width: 160px;
    margin: 5px auto;
}
.btn-file {
    background-color: #e0e0e0;
    color: #000000;
    font-size: 9px;
    border-radius: 0 5px 5px 0;
    position: relative;
    padding-left: 19px;
}
.btn-file i {
    font-size: 20px;
    position: absolute;
    top: 6px;
    left: 0;
}
.btn-file:hover {
    background-color: #d6d2d2;
    color: #000000;
}
.btn-file-down {
    background-color: #e0e0e0;
    color: #000000;
    font-size: 12px;
    border-radius: 0 5px 5px 0;
    position: relative;
    padding-left: 19px;
    padding: 8px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.btn-file-down i {
    font-size: 13px;
    margin-right: 5px;
}
.btn-file-down a {
    font-size: 14px;
    font-weight: 600;
    color: #000000;
    margin-right: 5px;
}
.btn-file-down:hover {
    background-color: #d6d2d2;
    color: #000000;
}
.addItemBoxSubInnerSection button {
    border: none;
    outline: none;
    background-color: #002f6c;
    padding: 10px 25px;
    color: #ffffff;
}
.addVehicleDetailsSec {
    width: 97%;
    margin: 20px 20px;
}
.amount-input-group .input-group-text {
    background-color: #ffffff;
    border-right: none;
}
.addVehicleTableSec thead tr th {
    background-color: #e8e8e8;
    font-size: 14px;
    font-weight: 500 !important;
    text-align: center;
    vertical-align: middle;
}

.dimensionaddVehicleTableSec {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #726e6e;
    gap: 27px;
    margin-top: 5px;
    width: 207px;
}
.addVehicleTableSec tbody tr td:nth-child(1) {
    text-align: center;
    font-size: 15px;
    padding-top: 16px;
}
.dimensionaddVehicleTableSec span {
    color: #afadad;
    font-weight: 400;
}
.addActionButton {
    border: 1px solid #e8e8e8;
    padding: 6px 11px;
    margin: 0px;
    border-radius: 4px;
}
.addActionButton:hover {
    background-color: #eae7e7;
    border: 1px solid #f4f4f4;
    color: #000000;
    padding: 6px 11px;
    margin: 0px;
    border-radius: 4px;
}
.meterialAtOwnersRisk {
    background-color: #ffffff;
    color: red;
    padding: 9px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    gap: 10px;
}
.sidebar-nav li.nav-item:last-child {
    position: fixed;
    bottom: 0;
    width: 240px;
}
.tabContainer {
    display: flex;
    width: 100%;
    justify-content: start;
    align-items: center;
    gap: 0;
    border-bottom: 3px solid lightgray;
    margin-bottom: 20px;
}
.tabContaine_1 {
    padding: 8px 30px;
    font-weight: 600;
    cursor: pointer;
}
.tabContaine_1.active {
    color: #00c853;
    border-bottom: 3px solid #00c853;
}
.tabContaine_2 {
    padding: 8px 30px;
    font-weight: 600;
    cursor: pointer;
}
.tabContaine_2.active {
    color: #00c853;
    border-bottom: 3px solid #00c853;
}
 .select2-results__option {
    user-select: none;
    -webkit-user-select: none;
    font-size: 12px;
    cursor: pointer;
}
.select2-results__option:hover {
    background-color: #1967D2;
    color: #ffffff;
}

 ul#select2-pick_address_id-results li, ul#select2-drop_address_id-results li {
    font-size: 12px;
    font-weight: 400;
    background-color: #002f6c;
    color: #ffffff;
    cursor: pointer;
    margin: 1px 5px;
}
ul#select2-pick_address_id-results li:hover, ul#select2-drop_address_id-results li:hover {
    background-color: #002f6c;
    color: #ffffff;
    cursor: pointer;
}
 .select2-container{
    width: 100% !important;
  }
  .select2-container .select2-selection--single {
    font-size: 12px;
    font-weight: 400;
    color: #000000;
    height: 38px !important; 
  }
.select2-container--default .select2-selection--single {
    background-color: #fff;
    font-size: 12px;
    font-weight: 400;
    border-radius: 5px;
    border: 1px solid #aaa!important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #000000!important;
  }
  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 35px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 5px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    padding-left: 8px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 273px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #dee2e6;
    font-size: 12px;
    font-weight: 400;
}
/* Select Opition End */

/* New Form start */
.actionDropDown {
    background-color: #002f6c;
    color: #ffffff;
    padding: 10px;
}
/* .actionDropDown .dropdown-item {
    background-color: #000000 !important;
    color: #ffffff;
    border: 1px solid #ffffff;
}
.actionDropDown .dropdown-item:hover {
    background-color: #000000 !important;
    color: #ffffff;
    border: 1px solid #ffffff;
} */

/* .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0;
} */

/* .select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: relative!important;
    top: -5px!important;
    content: ""!important;
    display: inline-block!important;
    width: 15px!important;
    height: 15px!important;
    border-right: 0.2em solid black!important;
    border-top: 0.2em solid black!important;    
    transform: rotate(135deg)!important;
    margin-right: 0.5em!important;
    margin-left: 1.0em!important;
    
} */



.select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: relative !important;
    top: 3px !important;
    content: "" !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 0.2em solid #42484d!important;
    border-top: 0.2em solid #42484d!important;
    transform: rotate(135deg) !important;
    margin-right: 0.2em !important;
    margin-left: -1em !important;
    border-width: 2px 2px 0 0px !important;
}

.createOrderSec input[type="date"]::-webkit-calendar-picker-indicator, 
.createOrderSec input[type="time"]::-webkit-calendar-picker-indicator,  
#addVehicle input[type="date"]::-webkit-calendar-picker-indicator
{
    opacity: 0;
    cursor: pointer;
  }

.createOrderSec input#pickup_date, 
.createOrderSec input#order_date, 
#addVehicle input#rc_validity_date,
#addVehicle input#insurance_validity_date,
#addVehicle input#puc_validity_date,
#AddNewVehicle input#validity_start_date, 
#AddNewVehicle input#validity_end_date,
input#onboarding_date
 {
    display: inline-block;
    position: relative;
    background: transparent url("../img/dateIcon.svg") 96% 50% no-repeat;
    cursor: pointer;
}
.createOrderSec input#pickup_time {
    display: inline-block;
    position: relative;
    background: transparent url("../img/timeIcon.svg") 96% 50% no-repeat;
    cursor: pointer;
} 
.createOrderSec input[type="date"]::-webkit-calendar-picker-indicator, .createOrderSec input[type="time"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
.cd-box input#onboarding_date {
    background-color: #ffffff;
}
input#rc_validity_date::-webkit-calendar-picker-indicator, 
input#insurance_validity_date::-webkit-calendar-picker-indicator,  
input#puc_validity_date::-webkit-calendar-picker-indicator, 
input#validity_start_date::-webkit-calendar-picker-indicator,
input#validity_end_date::-webkit-calendar-picker-indicator,
input#onboarding_date::-webkit-calendar-picker-indicator
{
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}
.form-control {
    border: 1px solid #aaa;
}
.actionDropDown .dropdown-item.view-order{
    background-color: #ffffff;
    color: #002f6c;
    font-size: 14px!important;
}
.actionDropDown .dropdown-item.view-order:hover {
    font-size: 14px!important;
    background-color: #ffffff;
    color: #002f6c;
    border: 0 solid #ffffff;
    box-shadow: 1px 1px 10px #ffffff;
}
.actionDropDown .dropdown-item.edit-order, .actionDropDown .dropdown-item.edit_address, .actionDropDown .dropdown-item.track-order, .actionDropDown .dropdown-item.edit-and-reactivate {
    background-color: #002f6c;
    color: #ffffff;
    border: 1px solid #6f8eb6;
    font-size: 14px!important;
}
.actionDropDown .dropdown-item.edit-order:hover, .actionDropDown .dropdown-item.edit_address:hover, .actionDropDown .dropdown-item.track-order:hover, .actionDropDown .dropdown-item.edit-and-reactivate:hover {
    background-color: #ffffff;
    color: #002f6c;
    box-shadow: 1px 1px 10px #ffffff;
    font-size: 14px!important;
}
.actionDropDown .dropdown-item.cancel-order, .actionDropDown .dropdown-item.request-for-cancel {
    background-color: #91b0d9;
    color: #ffffff;
    border: 1px solid #6f8eb6;
    font-size: 14px!important;
}
.actionDropDown .dropdown-item.cancel-order:hover, .actionDropDown .dropdown-item.request-for-cancel:hover{
    background-color: #ffffff;
    color: #002f6c;
    box-shadow: 1px 1px 10px #ffffff;
    font-size: 14px!important;
}
.actionDropDown .dropdown-menu-arrow::before {
    content: "";
    width: 13px;
    height: 13px;
    background: #000000 !important;
    position: absolute;
    top: -7px;
    right: 20px;
    transform: rotate(45deg) !important;
    border-top: 1px solid #000000 !important;
    border-left: 1px solid #000000 !important;
}
.actionDropDown li {
    margin: 10px 20px;
}
.picupAndDropSection {
    background-color: #d9d9d9;
    padding: 15px;
    padding-bottom: 10px;
    border-radius: 10px;
}
.picupAndDropHeaderSection {
    display: flex;
    justify-content: space-between;
    row-gap: 7px;
    flex-wrap: wrap;
    align-items: center;
}
.picupAndDropHeaderSection h2,
.picupAndDropHeaderSection label {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 0;
    letter-spacing: 0.01em;
    font-weight: 700;
}
.picupAndDropSearchandAddSection {
    display: flex;
    justify-content: start;
    gap: 10px;
    align-items: center;
    width: 75%;
}
.picupAndDropSearchandAddSection button {
    font-size: 13px;
    font-weight: 500;
    border: none;
    outline: none;
    background-color: #002f6c;
    color: #ffffff;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 3px;
}
.picupAndDropSearchandAddSection button:hover {
    font-size: 13px;
    font-weight: 500;
}
.pickUpandDropModel {
    background-color: #002f6c;
    color: #ffffff;
    padding: 10px 30px;
}
.pickUpandDropModel .modal-header {
    padding: 10px 0;
    margin: 0px 17px;
    color: #ffffff;
    border-radius: 0;
    display: flex;
    justify-content: space-between;
}
.pickUpandDropModel .form-control {
    border-radius: 3px;
    padding: 0.375rem 0.75rem;
}
.pickUpandDropModel .form-label {
    margin-bottom: 0.2rem;
    font-size: 13px;
    font-weight: 400;
}
.pickUpandDropModel .form-control::placeholder {
    font-size: 12px;
}
.mod-btn-close {
    color: #ffffff !important;
    background: none;
}
.modelGroupBtnFooterSec {
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 10px;
    padding: 0;
    padding-top: 20px;
}
.canBtnModal {
    font-size: 13px;
    font-weight: 500;
    border: 2px solid #ffffff;
    color: #ffffff;
    padding: 8px 15px;
    background-color: transparent;
    border-radius: 3px;
}
.canBtnModal:hover {
    background-color: #00c853;
    color: #ffffff;
    border: 2px solid #00c853;
}
.subBtnModal {
    background-color: #00c853;
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 3px;
}
.subBtnModal:hover {
    background-color: #04ac4a;
    color: #ffffff;
    padding: 10px 15px;
}
.addressLineStyle::after {
    content: "";
    display: flex;
    width: 89%;
    height: 3px;
    border-top: 2px dashed #6a82a1;
    position: relative;
    right: -78px;
    top: -10px;
    letter-spacing: 7em;
}
.contactDetailsLineStyle::after {
    content: "";
    display: flex;
    width: 80%;
    height: 3px;
    border-top: 2px dashed #6a82a1;
    position: relative;
    right: -142px;
    top: -10px;
    letter-spacing: 7em;
}

.picupandDropDetailsSec {
    padding: 0px;
    padding-top: 25px;
    min-height: 170px;
    height: auto;
}
.picupandDropDetailsInnerSec {
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 10px;
    white-space: wrap;
    word-break: break-all;
}
.picupandDropDetailsInnerSec p {
    font-size: 12px;
    margin-bottom: 5px;
}
.contactDetailTableSec thead tr th {
    padding-bottom:5px;
}
.contactDetailTableSec tbody {
    background-color: white;
    border-radius: 5px;
    padding: 5px;
}
.contactDetailTableSec .form-control {
    border-radius: 0px;
    padding: 0.575rem 0.75rem;
    margin-bottom: 5px;
}
.contactDetailTableSec tbody tr td {
    vertical-align: top;
}
.contact_detail tr td:first-child .form-group {
    padding-top: 10px;
}
#contact_detail tr td:nth-child(1) .form-group {
    padding-top: 10px;
}
.subBtnModal {
    font-size: 13px;
    font-weight: 500;
    background-color: #00c853;
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 3px;
}
.float-right {
    float: right;
}
/* New Form end */
.topHeaderBTN {
    display: flex;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
    gap: 10px;
    padding: 10px 25px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 3px;
}
.warning {
    background-color: #ffdada;
    color: #ff0000;
}
.required {
    background-color: #fff1ad;
    color: #898600;
}
.cancel-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 3px;
    border: 2px solid #002f6c;
    color: #002f6c;
    background-color: transparent;
}
.cancel-btn:hover {
    background-color: #002f6c;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 16px;
    color: #ffffff;
    box-shadow: 0 0 10px #bbd9ff;
    transition: all 0.5s;
}
.sub-btn {
    font-size: 14px;
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: center;
    vertical-align: middle;
    background-color: #002f6c;
    color: #ffffff;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 3px;
    letter-spacing: 0.02em;
    border: none;
}
.sub-btn:hover {
    font-size: 14px;
    font-weight: 600;
    background-color: transparent;
    border: 0 solid #002f6c;
    padding: 10px 20px;
    color: #002f6c;
    box-shadow: 0 0 10px #d9d9d9;
    transition: all 0.5s;
}
.sub-btn i {
    font-size: 14px;
}
.topHeaderButtonGroup {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}
.chooseFromMapBTN {
    font-size: 10px;
    font-weight: 500;
    background-color: #002f6c;
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 3px;
    display: inline;
    position: relative;
    top: -10px;
    left: 5px;
}
.chooseFromMapBTN:hover {
    background-color: #002f6c;
    color: #ffffff;
}
.latiLongTude {
    max-width: 12px;
    width: 100%;
    height: auto;
}
.insuranceDetailSec {
    width: 100%;
    margin: 0;
    margin-bottom: 20px;
    background-color: #ffeded;
    border: 2px dashed #ff0000;
    border-radius: 5px;
    padding: 20px;
}
.insuranceDetailSec h2 {
    font-size: 15px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 3px;
}
.insuranceDetailSec h2 span {
    font-style: italic;
}
.insuranceDetailSec p {
    font-size: 11px;
    font-weight: 400;
    color: #000000;
}
.vehicleDetialsSec {
    padding: 20px;
    background-color: #d9d9d9;
    color: #000000;
    border-radius: 10px;
}
.boxSectionSty {
    background-color: #fafcfd;
    border: 1px solid #e0eeff;
    padding: 10px;
    border-radius: 0 0 3px 3px;
    min-height: 280px;
}
.bg-transparent {
    background-color: none;
}
.secondry-modal {
    background-color: white;
}
.secondry-modal .modal-header {
    background-color: #002f6c;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-body-scroll {
    overflow-y: auto;
    height: 600px;
    scroll-behavior: smooth;
}
.modal-header-btn-group {
    display: flex;
    justify-content: space-between;
    align-content: center;
    gap: 5px;
}

.modal-header-btn-group .btn-group-item-outline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 2px solid #ffffff;
    border-radius: 3px;
    color: #ffffff;
    padding: 8px 15px;
    font-size: 15px;
    font-weight: 600;
    background-color: transparent;
    transition: all 0.6s;
}
.modal-header-btn-group .btn-group-item-outline:hover {
    background-color: #ffffff;
    color: #002f6c;
    box-shadow: 1px 1px 10px #ffffff;
}
.modal-header-btn-group .btn-group-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 2px solid #ffffff;
    border-radius: 3px;
    color: #002f6c;
    padding: 8px 15px;
    font-size: 15px;
    font-weight: 600;
    background-color: #ffffff;
    transition: all 0.6s;
}
.modal-header-btn-group .btn-group-item:hover {
    background-color: #ffffff;
    color: #002f6c;
    box-shadow: 1px 1px 10px #ffffff;
}
/*---


-----------------------------------------------------------
# NAVI  END
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
    .navmenu {
        padding: 0;
    }

    .navmenu ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
    }

    .navmenu li {
        position: relative;
    }

    .navmenu a,
    .navmenu a:focus {
        color: var(--nav-color);
        padding: 18px 35px;
        font-size: 18px;
        font-family: var(--nav-font);
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
    }

    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        transition: 0.3s;
    }

    .navmenu li:last-child a {
        padding-right: 0;
    }

    .navmenu li:hover > a,
    .navmenu .active,
    .navmenu .active:focus {
        color: var(--nav-hover-color);
    }

    .navmenu .dropdown ul {
        margin: 0;
        padding: 10px 0;
        background: var(--nav-dropdown-background-color);
        display: block;
        position: absolute;
        visibility: hidden;
        left: 14px;
        top: 130%;
        opacity: 0;
        transition: 0.3s;
        border-radius: 4px;
        z-index: 99;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    }

    .navmenu .dropdown ul li {
        min-width: 200px;
    }

    .navmenu .dropdown ul a {
        padding: 10px 20px;
        font-size: 15px;
        text-transform: none;
        color: var(--nav-dropdown-color);
    }

    .navmenu .dropdown ul a i {
        font-size: 12px;
    }

    .navmenu .dropdown ul a:hover,
    .navmenu .dropdown ul .active:hover,
    .navmenu .dropdown ul li:hover > a {
        color: var(--nav-dropdown-hover-color);
    }

    .navmenu .dropdown:hover > ul {
        opacity: 1;
        top: 100%;
        visibility: visible;
    }

    .navmenu .dropdown .dropdown ul {
        top: 0;
        left: -90%;
        visibility: hidden;
    }

    .navmenu .dropdown .dropdown:hover > ul {
        opacity: 1;
        top: 0;
        left: -100%;
        visibility: visible;
    }
}

@media (max-width: 1350px) {
    .cancel-btn {
        display: flex;
        justify-content: space-between;
        align-items: center;
        vertical-align: middle;
        padding: 11px 10px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 3px;
        border: 2px solid #002f6c;
        color: #002f6c;
        background-color: transparent;
    }
    .cancel-btn:hover {
        background-color: #002f6c;
        font-size: 12px;
        font-weight: 600;
        padding: 11px 10px;
        color: #ffffff;
        box-shadow: 0 0 10px #002f6c;
        transition: all 0.5s;
    }
    .sub-btn {
        font-size: 12px;
        display: flex;
        justify-content: center;
        gap: 10px;
        align-items: center;
        vertical-align: middle;
        background-color: #002f6c;
        color: #ffffff;
        padding: 12px 10px;
        font-weight: 500;
        border-radius: 3px;
        letter-spacing: 0.02em;
        border: none;
    }
    .sub-btn:hover {
        font-size: 12px;
        background-color: transparent;
        border: 0 solid #002f6c;
        padding: 12px 10px;
        color: #002f6c;
        box-shadow: 0 0 10px #002f6c;
        transition: all 0.5s;
    }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
    /* Home page Navbar start */

    .navmenuhome {
        position: fixed;
        top: 67px;
        left: -100%;
        width: 280px;
        height: 100%;
        background-color: #ffffff;
        padding: 20px;
        transition: left 0.4s ease-in-out;
        z-index: 999;
    }

    .navmenuhome ul {
        list-style: none;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .navmenuhome ul li {
        margin: 0;
    }

    .mobile-nav-toggle {
        color: var(--nav-color);
        font-size: 28px;
        line-height: 0;
        margin-right: 10px;
        cursor: pointer;
        transition: color 0.3s;
        position: absolute;
        left: 210px;
        top: 10px;
    }
    .navmenuhome.open {
        top: 70px;
        left: 0;
    }
    .navmenuhome ul li a,
    .navmenuhome ul li a:focus {
        padding: 10px 0;
    }
    .mobile-nav-close {
        display: flex;
        font-size: 28px;
        cursor: pointer;
        position: absolute;
        top: 14px;
        background: transparent;
        right: 23px;
        color: black;
    }

    /* Home page Navbar end */

    .navmenu {
        padding: 0;
        z-index: 9997;
    }

    .navmenu ul {
        display: none;
        position: absolute;
        inset: 60px 20px 20px 20px;
        padding: 10px 0;
        margin: 0;
        border-radius: 6px;
        background-color: var(--nav-mobile-background-color);
        overflow-y: auto;
        transition: 0.3s;
        z-index: 9998;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    }

    .navmenu a,
    .navmenu a:focus {
        color: var(--nav-dropdown-color);
        padding: 10px 20px;
        font-family: var(--nav-font);
        font-size: 17px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
    }

    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: 0.3s;
        background-color: color-mix(
            in srgb,
            var(--accent-color),
            transparent 90%
        );
    }

    .navmenu a i:hover,
    .navmenu a:focus i:hover {
        background-color: var(--accent-color);
        color: var(--contrast-color);
    }

    .navmenu a:hover,
    .navmenu .active,
    .navmenu .active:focus {
        color: var(--nav-dropdown-hover-color);
    }

    .navmenu .active i,
    .navmenu .active:focus i {
        background-color: var(--accent-color);
        color: var(--contrast-color);
        transform: rotate(180deg);
    }

    .navmenu .dropdown ul {
        position: static;
        display: none;
        z-index: 99;
        padding: 10px 0;
        margin: 10px 20px;
        background-color: var(--nav-dropdown-background-color);
        border: 1px solid
            color-mix(in srgb, var(--default-color), transparent 90%);
        box-shadow: none;
        transition: all 0.5s ease-in-out;
    }

    .navmenu .dropdown ul ul {
        background-color: rgba(33, 37, 41, 0.1);
    }

    .navmenu .dropdown > .dropdown-active {
        display: block;
        background-color: rgba(33, 37, 41, 0.03);
    }

    .mobile-nav-active {
        overflow: hidden;
    }

    .mobile-nav-active .mobile-nav-toggle {
        color: #fff;
        position: absolute;
        font-size: 32px;
        top: 15px;
        right: 15px;
        margin-right: 0;
        z-index: 9999;
    }

    .mobile-nav-active .navmenu {
        position: fixed;
        overflow: hidden;
        inset: 0;
        background: rgba(33, 37, 41, 0.8);
        transition: 0.3s;
    }

    .mobile-nav-active .navmenu > ul {
        display: block;
    }
}
/* Add Role Start */
.main-select-all {
    margin-left: 0;
}
.checkbox-section {
    width: 100%;
    border: 1px solid #3769e4;
    padding: 0 3% 3% 3%;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 30px;
}
.checkbox-section .section {
    margin-bottom: 0;
}
#show_permission_list .checkbox-section:last-child {
    margin-bottom: 0;
}
.selectActionSec {
    height: 100px;
    padding-top: 40px;
    text-align: right;
}
.select-all {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 5px 25px;
    background: #f0f0f0;
    border: 2px solid #3769e4;
    color: #000000;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    position: relative;
    top: -20px;
}
.checkbox-group {
    position: relative;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 10px;
}
.checkbox-item {
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 5px 15px;
    border: 1px solid #3769e4;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.checkbox-item.checked {
    background-color: #2a60e2;
    color: white;
}
.checkbox-item label {
    cursor: pointer;
}
.checkbox {
    font-size: 13px;
    color: #5a5a5a;
    margin-right: 10px;
}
#super_admin_checked {
    color: #3769e4;
    margin-bottom: 10px;
}
/* Add Role End */
/*--------------------------------------------------------------
# Add Participants start
--------------------------------------------------------------*/
.addReceiverSec .card {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    position: relative;
}

.addReceiverSec .card input[type="checkbox"] {
    position: absolute;
    top: 10px;
    left: 10px;
}

.addReceiverSec .card img {
    max-width: 100px;
    display: block;
    margin-bottom: 10px;
}

.addReceiverSec .controls {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.addReceiverSec .dropdown-container {
    position: relative;
    display: inline-block;
}

.addReceiverSec #textbox {
    padding: 5px;
    width: 150px;
    cursor: pointer;
}

.addReceiverSec .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    width: 100%;
}

.addReceiverSec .dropdown-content a {
    color: black;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
}

.addReceiverSec .dropdown-content a:hover {
    background-color: #f1f1f1;
}
/* Add Participants end */

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 99999;
    background-color: var(--accent-color);
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

.scroll-top i {
    font-size: 24px;
    color: var(--contrast-color);
    line-height: 0;
}

.scroll-top:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
    color: var(--contrast-color);
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 120px 0;
    text-align: center;
    position: relative;
}

.page-title h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

.page-title .breadcrumbs ol a {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.page-title .breadcrumbs ol li + li {
    padding-left: 10px;
}

.page-title .breadcrumbs ol li + li::before {
    content: "/";
    display: inline-block;
    padding-right: 10px;
    color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/

@media (max-width: 1199px) {
    section,
    .section {
        scroll-margin-top: 76px;
    }
    .addReceiversDropdown-innerContainer {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
    text-align: center;
    padding-bottom: 60px;
    position: relative;
}

.section-title h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.section-title p {
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
    width: 100%;
    min-height: calc(96vh - 150px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
    overflow: hidden;
    text-align: center;
}

.hero:before {
    content: "";
    background: color-mix(in srgb, var(--background-color), transparent 70%);
    position: absolute;
    inset: 0;
    z-index: 2;
}

.hero img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 3;
}

.hero h1 {
    display: block;
    margin: 0 auto;
    font-size: 56px;
    font-weight: 700;
    line-height: 82px;
    max-width: 890px;
    width: 100%;
    color: var(--accent-color);
}
.hero h1 span {
    color: var(--highlight-color);
}
.hero p {
    margin: 20px 0 0 0;
    font-size: 26px;
    font-weight: 500;
    color: black;
}
.swal2-container.swal2-center.swal2-backdrop-show {
    overflow: auto;
    z-index: 99999;
}
div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
    border: 0;
    border-radius: 0.25em;
    background: initial;
    background-color: #002f6c !important;
    color: #fff !important;
    font-size: 1em;
}
div:where(.swal2-icon).swal2-warning {
    border-color: rgb(0 120 50) !important;
    color: #007832 !important;
}
div:where(.swal2-container) h2:where(.swal2-title) {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 0.8em 1em 0;
    color: hsl(145.05deg 70.07% 28.82%) !important;
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    word-wrap: break-word;
}
@media (max-width: 992px) {
    .hero h1 {
        display: block;
        margin: 0 auto;
        font-size: 56px;
        font-weight: 700;
        line-height: 72px;
        max-width: 890px;
        width: 100%;
    }
    .hero p {
        margin: 40px 0 0 0;
        font-size: 18px;
        line-height: 24px;
    }
    .dashboard .info-card {
        padding: 10px 20px;
        margin-bottom: 15px;
    }
    .autionIconSec img {
        max-width: 15px;
        height: auto;
    }
    .allBidsGraphSecTopSec ul {
        list-style: none;
        display: flex;
        gap: 10px !important;
        justify-content: start;
        margin: 0;
        padding: 0;
        align-items: center;
    }
    .allBidsGraphSecMidSec ul {
        list-style: none;
        gap: 5px !important;
    }
    .allBidsGraphSecTopSec ul li {
        font-size: 15px !important;
        font-weight: 600 !important;
    }
    .allBidsGraphSecMidInnerSec {
        gap: 5px !important;
    }
    .allBidsGraphSecMidInnerRightSec {
        font-size: 14px !important;
        font-weight: 400;
        color: #000000;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .allBidsGraphSecMidInnerLeftSec {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 12px;
    }
    .topBiddersRowSec img {
        max-width: 45px !important;
        width: 100% !important;
        height: auto !important;
    }
    .dashboard .info-card h6 {
        font-size: 13px !important;
    }
    .dashboard .info-card h5 {
        font-size: 13px !important;
    }
    .searchFormButtonSec {
        margin-top: 10px;
    }
    ._table__rout_sec {
        width: 140px;
    }
    .__pageNation_Sec {
        font-size: 12px;
    }
    .primary-button {
        padding: 8px 25px;
    }
    .__pageNation_Sec a,
    .__pageNation_Sec span {
        font-size: 14px;
        color: #000000;
        display: flex;
        gap: 5px;
        justify-content: space-between;
        align-items: center;
    }
    .bidDurationSec span:nth-child(1) {
        display: block !important;
    }
    .checkbox-section {
        width: 100%;
        border: 1px solid #3769e4;
        padding: 0 3% 3% 3%;
        box-sizing: border-box;
        border-radius: 5px;
        margin-bottom: 30px;
    }
    .__popup_main_sec_title:before {
        left: -34px;
    }
    .addReceiversDropdown-innerContainer {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
    .selectActionSec {
        height: 40px;
        padding-top: 10px;
        text-align: left;
    }
    .addRoleMarBtm {
        margin-bottom: 30px;
    }
    .saveEmpMb {
        margin-bottom: 0px;
    }
    .addReceiversDropdown-container {
        position: relative;
        width: auto;
        height: auto;
        row-gap: 20px;
        justify-content: center;
    }
    .table-responsive {
        overflow-x: scroll !important;
        -webkit-overflow-scrolling: touch;
    }
    .tableHeader tr th {
        position: static !important;
    }
}

.hero .btn-get-started {
    color: var(--contrast-color);
    background: var(--accent-color);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.5px;
    display: inline-block;
    padding: 14px 50px;
    border-radius: 5px;
    transition: 0.5s;
    margin-top: 15px;
    border: none;
}

.hero .btn-get-started:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 15%);
    border: none;
}

.hero .icon-box {
    padding: 20px 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
    z-index: 1;
    height: 100%;
    width: 100%;
    border: 1px solid black;
    text-align: center;
    cursor: pointer;
}

.hero .icon-box .title {
    font-weight: 700;
    margin-bottom: 32px;
    font-size: 24px;
}

.hero .icon-box .title a {
    color: var(--heading-color);
    transition: 0.3s;
}

.hero .icon-box .description {
    font-size: 18px;
    margin-bottom: 0;
    color: black;
    font-weight: 500;
    min-height: 90px;
}

.hero .icon-box .icon {
    margin-bottom: 20px;
    padding-top: 10px;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    font-size: 36px;
    line-height: 1;
    color: var(--accent-color);
}
.checkbox-section {
    width: 100%;
    border: 1px solid #3769e4;
    padding: 0 3% 3% 3%;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 30px;
}
@media (min-width: 640px) {
    .hero .icon-box:hover {
        transform: scale(1.08);
    }

    .hero .icon-box:hover .title a {
        color: var(--accent-color);
    }
}

/*--------------------------------------------------------------
# Deal section of Home page start
--------------------------------------------------------------*/

.dealSection {
    background-color: #fffaef;
    position: relative;
    width: 100%;
    height: auto;
}
.dealCard {
    position: relative;
    display: block;
    max-width: 351px;
    width: 100%;
    height: 457px;
    background: rgb(255, 237, 197);
    background: linear-gradient(
        55deg,
        rgb(239 231 213) 0%,
        rgb(248 201 94) 50%
    );
    border-radius: 20px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    margin: 0 auto;
    padding: 20px;
}
.dealCard .dealCardHeader {
    position: relative;
    width: 100%;
}
.dealCardHeaderTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dealCardHeaderTop .item {
    font-size: 12px;
}
.dealCardHeaderTop .item:nth-child(1) {
    text-align: left;
}
.dealCardHeaderTop .item:nth-child(2) {
    color: red;
    text-align: right;
}
.dealCard .dealCardHeader h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 20px;
    text-align: center;
}
.dealCardMain {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    position: relative;
}
.dealCardMainItem {
    background: rgb(255, 176, 0);
    background: linear-gradient(180deg, rgb(255 176 0) 0%, rgb(239 176 35) 50%);
    width: 230px;
    height: 230px;
    position: relative;
    border-radius: 50%;
    text-align: center;
}
.dealCardMainItemHeader {
    margin-top: 40px;
    margin-bottom: 15px;
}
.dealCardMainItemHeader img {
    max-width: 110px;
    width: 100%;
    height: auto;
}
.dealCardMainItemHeader {
    color: #ab8737;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
span.dealCardMainItemHeaderLeft {
    position: absolute;
    top: 50px;
    left: 35px;
}
span.dealCardMainItemHeaderTop {
    position: absolute;
    top: 44px;
    left: 88px;
}
.dealCardMainItem p {
    margin: 7px 0;
}
.dealCardMainItem h4 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #000000;
}
.dealCardMainItem .knowMore {
    font-size: 12px;
    color: black;
    text-align: center;
    background: transparent;
    border: 1px solid #000000;
    border-radius: 5px;
    padding: 2px 10px;
}
.dealCardMainItem .knowMore:hover {
    background-color: black;
    color: #ffffff;
}
/* <img src="{{asset('assets/img/logo.svg')}}" alt=""> */
.dealCardFooter {
    height: 110px;
    padding: 10px 0;
}
.dealCardFooterItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 15px;
}
.bidSubmittedBtn {
    border: none;
    background: black;
    color: #ffffff;
    font-size: 11px;
    padding: 8px 15px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.bidSubmittedBtn span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: green;
}
.joinTheBiddingBtn {
    border: none;
    font-size: 14px;
    padding: 10px 40px;
    border-radius: 4px;
}

/*--------------------------------------------------------------
# Deal section of Home page start
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Index Page end
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
    display: flex;
    margin-top: 60px;
    padding: 20px 30px;
    transition: all 0.3s;
    height: auto;
}
/*--------------------------------------------------------------
# Create Bid page start
--------------------------------------------------------------*/

.borderRound {
    border-radius: 10px;
}

.createBidSec {
    position: relative;
    display: block;
    float: left;
    width: 100%;
    padding: 2%;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: -1px 0px 3px lightgray;
    margin-bottom: 25px;
    min-height: 80vh;
    box-sizing: border-box;
}
.allBidsBtnSec {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 15px;
    margin: 0;
}
.allBidsBtnSec a {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 8px 25px;
    background-color: var(--highlight-color);
    font-weight: 500;
    color: #ffffff;
    font-size: 14px;
    border-radius: 5px;
    border: none;
}
.allBidsBtnSec a:hover {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 8px 25px;
    background-color: #0a9c47;
    font-weight: 500;
    color: #ffffff;
    font-size: 14px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
    -moz-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
    box-shadow: 0px 5px 10px 2px rgb(201 249 221);
    cursor: pointer;
    border: none;
    align-items: center;
}
.box-shadow {
    box-shadow: -1px 0px 4px 0.1px;
}
.picUpDropViewSec {
    display: block;
    border-bottom: 2px dotted black;
    max-width: 85%;
    margin: 15px 0 auto;
    position: relative;
}
.picUpDropViewSec:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("../assets/img/blackTruckIcon.png");
    background-repeat: no-repeat;
    position: absolute;
    left: -20px;
    top: 10px;
}
.picUpDropViewSec:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: lightgray;
    position: absolute;
    right: -30px;
    top: -10px;
}
.picUpLocation {
    display: flex;
    justify-content: end;
}
.lastDropLocation {
    display: flex;
    justify-content: start;
}
.pri-h2 {
    font-size: 15px;
    font-weight: 600;
    color: #002f6c;
    margin-bottom: 0;
}
.sec-h3 {
    font-size: 14px;
    font-weight: 500;
    color: #000000;
    margin-bottom: 0;
}
.gray-color {
    color: #777676;
}
.black-color {
    color: #000000;
}

.addNewBTN {
    font-size: 13px;
    border: 1px solid #ffffff;
    color: #ffffff;
    background-color: transparent;
    border-radius: 3px;
    padding: 6px 15px;
}
.addNewBTN:hover {
    font-size: 13px;
    border: 1px solid #ffffff;
    color: #002f6c;
    background-color: #ffffff;
    border-radius: 3px;
}
.addNewBTNwhite-bg {
    font-size: 13px;
    color: #ffffff;
    background-color: #002f6c;
    border-radius: 3px;
    padding: 6px 15px;
}
.addNewBTNwhite-bg:hover {
    font-size: 13px;
    color: #ffffff;
    background-color: #002f6c;
    border-radius: 3px;
    box-shadow: 1px 1px 10px #83aade;
}

.fs-12 {
    font-size: 12px;
}
.fs-13 {
    font-size: 13px;
}
.fs-14 {
    font-size: 14px;
}
.fs-15 {
    font-size: 15px;
}
.fs-16 {
    font-size: 16px;
}
.fs-17 {
    font-size: 17px;
}
.fs-18 {
    font-size: 18px;
}
.fs-19 {
    font-size: 19px;
}
.fs-20 {
    font-size: 20px;
}
.fs-21 {
    font-size: 21px;
}
.fs-22 {
    font-size: 22px;
}
.fs-25 {
    font-size: 25px;
}
.fs-30 {
    font-size: 30px;
}
.fw-400 {
    font-weight: 400;
}
.fw-500 {
    font-weight: 500;
}
.fw-600 {
    font-weight: 600;
}
.fw-700 {
    font-weight: 700;
}
.mr-5 {
    margin-right: 5px;
}
.mr-10 {
    margin-right: 10px;
}
.mr-20 {
    margin-right: 20px;
}
.mr-30 {
    margin-right: 30px;
}
.ml-5 {
    margin-left: 5px;
}
.ml-10 {
    margin-left: 10px;
}
.ml-20 {
    margin-left: 20px;
}
.ml-30 {
    margin-left: 30px;
}

input#bidtitle {
    height: 38px;
    border: 1px solid lightgray;
    margin-top: 10px;
    border-radius: 8px;
}
.daterangepicker {
    z-index: 9 !important;
}
.datePickerSec .form-control {
    font-size: 15px;
    border: none;
    background-color: transparent;
}
.dateTimePickerBox {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 20px;
    height: 38px;
    border: 1px solid lightgray;
    border-radius: 8px;
}
#operation_start_date .datePickerSec input,
#operation_start_date .timePickerSec input {
    border: 1px solid lightgray;
    border-radius: 8px;
}

.datePickerSec,
.timePickerSec {
    width: 100%;
    position: relative;
}
.datePickerSec span.dateIcon {
    position: absolute;
    top: 6px;
    right: 13px;
    z-index: 9;
    cursor: pointer;
}
.timePickerSec span.timeIcon {
    position: absolute;
    top: 6px;
    right: 13px;
    z-index: 99;
    cursor: pointer;
}
.datePickerSec input,
.timePickerSec input {
    border: none;
    height: 36px;
    padding: 0 15px;
    border-radius: 8px;
    outline: none;
    width: 100%;
    position: relative;
    z-index: 9;
    cursor: pointer;
    background-color: transparent;
}
select#startTimepicker,
select#endTimepicker {
    display: flex;
    content: "";
    background-color: transparent;
    background-image: url(../img/timeIcon.svg);
    background-repeat: no-repeat;
    background-position: 91%;
    background-size: 22px 22px;
    z-index: 1;
    position: relative;
    right: 0;
    padding: 6px 15px;
    border: none;
    cursor: pointer;
    color: #6f7074;
}
select#startTimepicker option,
select#endTimepicker option {
    font-size: 12px;
}
select#startTimepicker option:nth-child(1),
select#endTimepicker option:nth-child(1) {
    color: #000000;
}
select option:nth-child(1) {
    color: #000000;
}
select option:hover {
    color: #fff;
    box-shadow: inset 20px 20px #002f6c !important;
}
#bid_title_limit {
    font-size: 12px;
    font-weight: 500;
    margin-top: 10px;
}
.datePickerSec span.dateIcon img {
    max-width: 24px;
    width: 100%;
    height: auto;
}
.datePickerSec span.dateIcon img,
.timePickerSec span.timeIcon img {
    max-width: 23px;
    width: 100%;
    height: auto;
}
.createBidHeaderTopSec .datePickerSec:after {
    content: "";
    display: block;
    width: 1px;
    height: 20px;
    background-color: lightgray;
    position: absolute;
    right: -10px;
    top: 8px;
}
.start_timer_dropdown,
.end_timer_dropdown {
    display: none;
    padding: 10px 18px;
    line-height: 23px;
    font-size: 13px;
    border: 1px solid #ccc;
    background-color: white;
    max-height: 150px;
    overflow-y: auto;
    position: sticky;
    z-index: 99;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
input#startTimepicker,
input#endTimepicker {
    display: flex;
    content: "";
    background-image: url("../img/timeIcon.svg");
    background-repeat: no-repeat;
    background-position: 91%;
    background-size: 22px 22px;
    z-index: 1;
    position: relative;
    right: 0;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #002f6c;
    border-color: transparent;
    color: #fff;
}
.allBidsBtnSec {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 15px;
    margin: 0;
}
.allBidsBtnSec a {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 8px 25px;
    background-color: var(--highlight-color);
    font-weight: 500;
    color: #ffffff;
    font-size: 14px;
    border-radius: 5px;
    border: none;
}
.allBidsBtnSec a:hover {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 8px 25px;
    background-color: #0a9c47;
    font-weight: 500;
    color: #ffffff;
    font-size: 14px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
    -moz-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
    box-shadow: 0px 5px 10px 2px rgb(201 249 221);
    cursor: pointer;
    border: none;
    align-items: center;
}
/*--------------------------------------------------------------
# Create Bid page end
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Switch Button Start
--------------------------------------------------------------*/

.switch {
    display: inline-block;
    height: 21px;
    position: relative;
    width: 37px;
    cursor: pointer;
}

.switch input {
    display: none;
}

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

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

input:checked + .slider {
    background-color: #002f6c;
}

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

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

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

/*--------------------------------------------------------------
# Switch Button End
--------------------------------------------------------------*/

/* Customer Master Start */

.top-bar {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.cd-tabs {
    border-bottom: 4px solid lightgray;
    margin-bottom: 20px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 1px;
    padding-bottom: 1px;
}
.cd-tabs button {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    width: 170px;
    padding: 10px 15px;
    border: none;
    background: #ccc;
    cursor: pointer;
    border-radius: 3px 3px 0 0;
}
.cd-tabs button.active {
    background: #00c853;
    color: white;
    position: relative;
}
.cd-tabs button.active:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #00c853;
}
.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.cd-box {
    background: #e8f0fe;
    padding: 15px;
    border-radius: 5px;
    position: relative;
}

.cd-box h2 {
    color: #28a745;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.09rem;
    margin-bottom: 20px;
}
.cd-box label {
    font-size: 12px;
    font-weight: 500;
    display: block;
    margin: 5px 0;
    margin-bottom: 5px;
}
.cd-box > label span {
    font-size: 10px;
    background: black;
    color: #ffffff;
    text-align: center;
    padding: 5px 15px;
    border-radius: 20px;
}
.cd-box input {
    width: 100%;
    padding: 8px;
    border: none;
    background: white;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}
.file-input-container {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-bottom: 10px;
    background-color: #ffffff;
    border-radius: 4px;
}
.file-icon-button {
    background-color: #ffffff;
    color: rgb(81, 81, 81);
    border: none;
    padding: 8px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    border-right: 1px solid rgb(232 232 232);
}

.file-icon-button:hover {
    background-color: #ffffff;
}
.file-name-textbox {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    font-size: 13px!important;
    font-weight: 400!important;
    color: #8c8989;
}
.file-name-textbox::placeholder {
    color: #8c8989;
}
.hidden-file-input {
    display: none;
}
.cd-contact-box {
    background-color: white;
    padding: 15px;
    border-radius: 3px;
}
.cd-contact-box p {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 3px;
}
.detailsCopyDownSec {
    position: relative;
    margin: 10px 0;
}
.detailsCopyDownSec p {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 3px;
}
.detailsCopyDownSec i {
    font-size: 45px;
}
.detailsPDFSec {
    position: absolute;
    left: 0;
    top: 0;
}
.detailsPDFSec i {
    display: block;
    background-color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    top: 67px;
    left: 32px;
    border-radius: 3px;
    padding: 1px 6px;
    cursor: pointer;
}
.form-contact-cards {
    display: flex;
    justify-content: start;
    align-items: center;
    overflow-x: auto;
    gap: 10px;
    padding: 0;
    padding-top: 40px;
    padding-left: 20px;
    border-radius: 5px;
    width: 530px;
}
.contactPersionCardDetails {
    display: flex;
    justify-content: center;
    background-color: white;
    width: 400px;
    padding: 10px;
    font-size: 12px;
    flex-direction: column;
    position: relative;
    white-space: nowrap;
}
.contactPersionCardDetails span {
    display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        position: absolute;
        top: -27px;
        right: -1px;
        font-size: 11px;
        background-color: #000000;
        color: #ffffff;
        white-space: nowrap;
        padding: 5px 10px;
        border-radius: 5px 5px 0 0;
}
.contactPersionCardDetailsHeader {
    display: flex;
    justify-content: space-between;
    align-items: start;
    font-size: 14x;
}
.contactPersionCardDetailsHeader h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
}
.contactPersionCardDetailsHeader p {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0;
}
.contactPersionCardDetailsFooter {
    display: flex;
    justify-content: start;
    align-items: start;
    font-size: 12px;
    padding: 0;
}
.contactPersionCardDetailsFooter p {
margin-bottom: 0;
margin-top: 15px;
}
.addMorePersionDetails {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    white-space: nowrap;
    background-color: #ffffff;
    color: #000000;
    border: 2px dashed lightgray;
    border-radius: 5px;
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    width: 170px;
    height: 89px;
    cursor: pointer;
}
.addMorePersionDetails i {
    font-size: 34px;
}
.scroll-btn {
    border: none;
    background-color: #ffffff;
    border-radius: 3px;
}
.cd-box #prev {
    position: absolute;
    left: 6px;
    top: 130px;
    z-index: 9;
    box-shadow: 0 0 5px lightgray;
}
.cd-box #next {
    position: absolute;
    right: 6px;
    top: 130px;
    z-index: 9;
    box-shadow: 0 0 5px lightgray;
}
.btn-secondary-contact-details {
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background-color: #ffffff;
    color: #002f6c;
    font-weight: 600;
}
.btn-secondary-contact-details:hover {
    border: none;
    padding: 10px 15px;
    background-color: #002f6c;
    color: #ffffff;
    font-weight: 600;
}
.buttons {
    margin-top: 20px;
}
.buttons .btn {
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    margin-right: 10px;
    border-radius: 5px;
}
.buttons .btn.primary {
    background: #007bff;
    color: white;
}
.buttons .btn.secondary {
    background: #6c757d;
    color: white;
}
.buttons .btn.edit {
    background: #004085;
    color: white;
}
/* add profile photo start */
.pp-avatar-wrapper {
    position: relative;
    height: 200px;
    width: 200px;
    margin: 50px auto;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.3s ease;
}
.pp-avatar-wrapper:hover {
    transform: scale(1.05);
    cursor: pointer;
}
.pp-avatar-wrapper:hover .pp-profile-pic {
    opacity: 0.5;
}
.pp-avatar-wrapper .pp-profile-pic {
    height: 100%;
    width: 100%;
    transition: all 0.3s ease;
    border: 6px solid #ecf0f1;
}
.pp-avatar-wrapper .pp-profile-pic:after {
    font-family: FontAwesome;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    font-size: 130px;
    background: #ecf0f1;
    color: #545455;
    text-align: center;
}

.pp-avatar-wrapper .pp-upload-button {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.pp-avatar-wrapper .pp-profile-pic:before {
    content: "Add Upload Photo";
    display: block;
    font-size: 15px;
    padding: 2px 10px;
    position: absolute;
    left: 23px;
    top: 129px;
    color: black;
    border-radius: 3px;
    text-align: center;
    z-index: 9;
    background-color: #ffffff;
}

.pp-avatar-wrapper .pp-upload-button .fa-arrow-circle-up {
    position: absolute;
    font-size: 234px;
    top: -17px;
    left: 0;
    text-align: center;
    opacity: 0;
    transition: all 0.3s ease;
    color: #34495e;
}
.pp-avatar-wrapper .pp-upload-button:hover .fa-arrow-circle-up {
    opacity: 0.9;
}
/* add profile photo start */

/* Customer Master End */

/*--------------------------------------------------------------
# Metirail Table start
--------------------------------------------------------------*/

.materialTable thead tr th {
    background-color: #f4f4f4;
    font-size: 14px;
    font-weight: 500 !important;
    text-align: center;
    vertical-align: middle;
}
.materialTable tbody tr td,
.materialTable tbody tr th {
    background-color: #fffdfd;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    position: relative;
    z-index: 9;
}
.materialTable tbody tr td .form-control {
    padding: 0.575rem 0.3rem;
    border-radius: 3px;
}
.dimensionHeaderSection,
.dimensionBodySection {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #726e6e;
    gap: 0px;
    margin-top: 5px;
    width: 133px;
}

.dimensionHeaderSection span {
    color: lightgray;
    font-weight: 400;
}
.dimensionBodySection div {
    font-size: 14px;
    color: black;
    font-weight: 600;
}
.dimensionHeaderSection div,
.dimensionBodySection div {
    display: block;
    width: 33%;
    text-align: center;
}
.materialTable thead tr th:nth-child(1),
.materialTable tbody tr td:nth-child(1) {
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    width: auto;
}
.materialTable thead tr th:nth-child(2),
.materialTable tbody tr td:nth-child(2) {
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    width: 140px;
}
.materialTable thead tr th:nth-child(3),
.materialTable tbody tr td:nth-child(3) {
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    width: 170px;
}
.materialTable thead tr th:nth-child(4),
.materialTable tbody tr td:nth-child(4) {
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    width: 255px;
}
.materialTable thead tr th:nth-child(4) .form-control,
.materialTable tbody tr td:nth-child(4) .form-control {
    padding: 0.575rem 0.35rem;
    border-radius: 3px;
    width: 40px;
}
.materialTable thead tr th:nth-child(5),
.materialTable tbody tr td:nth-child(5) {
    font-weight: bold;
    text-align: center;
    width: 177px;
}
.materialTable thead tr th:nth-child(5) button:first-child,
.materialTable thead tr th:nth-child(5) button:first-child,
.materialTable tbody tr td:nth-child(5) button:first-child,
.materialTable tbody tr td:nth-child(5) button:last-child {
    border: none;
    background: transparent;
    font-size: 20px;
    font-weight: 700;
    width: auto;
}
.materialTable thead tr th:nth-child(6),
.materialTable tbody tr td:nth-child(6) {
    font-weight: bold;
    text-align: center;
    width: 165px;
}
.meterialDetailSec {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ellipsis {
    width: 230px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s linear;
    white-space: nowrap;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
/* .ellipsis:focus, .ellipsis:hover {
  color:transparent;
  } */
.ellipsis:focus,
.ellipsis:hover {
    color: #000000;
}
.ellipsis:focus:after,
.ellipsis:hover:after {
    /* content:attr(data-text);
  overflow: visible;
  text-overflow: inherit;
  background: #fff;
  position: absolute;
  left:auto;
  top:auto;
  width: auto;
  max-width: 20rem;
  border: 1px solid #eaebec;
  padding: .5rem .5rem;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.28); */
    white-space: normal;
    word-wrap: break-word;
    display: block;
    margin-top: -1.25rem;
    color: #000000;
}
/*--------------------------------------------------------------
# Metirail Table end
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Response Bid Table start
--------------------------------------------------------------*/

.resBidTable thead tr th {
    background-color: #002f6c;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}

.resBidTable tbody tr td {
    background-color: #fffdfd;
    padding: 5px 10px;
    vertical-align: middle;
}
.resBidTable tbody tr {
    align-items: center;
}
.resBidTable thead tr th:nth-child(1),
.resBidTable tbody tr td:nth-child(1) {
    text-align: center;
    font-weight: 600;
}
.resBidTable thead tr th:nth-child(5),
.resBidTable tbody tr td:nth-child(5) {
    text-align: center;
    font-weight: 600;
}
.resBidTable thead tr th:nth-child(5) i,
.resBidTable tbody tr td:nth-child(5) i {
    font-size: 20px;
    color: black;
}

.resBidTable .filter {
    position: relative;
    right: 0px;
    top: 0 !important;
}
.dashboard .filter .icon {
    padding-right: 0 !important;
}

.resBidTransporterSec {
    display: flex;
    gap: 10px;
    text-align: left;
    vertical-align: middle;
    justify-content: start;
    align-items: center;
}
.resBidTransporterSec img {
    max-width: 60px;
    width: 60px;
    min-height: 60px;
    height: auto;
    overflow: hidden;
}

.statusBtn {
    padding: 5px 15px;
    border-radius: 25px;
    font-size: 14px;
}
.success {
    border-color: #71ef76;
    background-color: #b0ffb4;
    color: #007705;
}

/*--------------------------------------------------------------
# Response Bid Table end
--------------------------------------------------------------*/

@media (max-width: 1199px) {
    #main {
        padding: 20px;
    }
}

/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.pagetitle {
    margin-bottom: 15px;
    border-bottom: 1px solid lightgray;
    padding-bottom: 13px;
    background: #ffffff;
    position: sticky;
    top: 60px;
    z-index: 99;
}

/*--------------------------------------------------------------
# Table start
--------------------------------------------------------------*/
.tableSec {
    position: relative;
    display: inline-table;
    overflow-x: scroll;
    height: auto;
    border-collapse: collapse;
    white-space: nowrap;
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid lightgray;
}
.table-responsive {
    overflow-x: clip;
    -webkit-overflow-scrolling: touch;
}
.tableHeader {
    border-radius: 10px;
}
.tableHeader tr th {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    background-color: #002f6c;
    position: sticky;
    top: 117px;
    z-index: 9;
    white-space: nowrap;
}
.tableBody tr td,
.table thead tr th {
    font-size: 13px;
    font-weight: 500;
    vertical-align: middle;
}

._table__rout_sec p {
    font-size: 13px;
    margin-bottom: 0;
    font-weight: 500;
}
._table__rout_sec h4 {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #00c853;
    white-space: break-spaces;
}
/* Root Modal start */
.checkRoot {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Modal background with glassmorphism */
.chackRootModal-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 70%);
    justify-content: center;
    align-items: center;
    z-index: 99999;
    overflow-y: scroll;
}
.chackRootModal {
    position: relative;
    max-width: 500px;
    width: 100%;
    padding: 20px;
    background: rgba(255, 255, 255, 2.85);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
    max-height: 700px;
    overflow-y: auto;
    margin: 5%;
}
.chackRootModal .__popup_container_innersec {
    width: auto;
    background-color: transparent;
    box-shadow: none;
    padding: 20px;
    position: static;
    left: 0;
    top: 0;
    transition: all 0.25s ease;
    opacity: 100;
    display: block;
    animation: in-animation 0.25s ease;
    text-align: left !important;
    border-radius: 0;
    z-index: 99;
}
.chackRootModal figure {
    width: 36px;
    height: 40px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    margin-bottom: 10px;
    z-index: 9;
}
.additionalLocationSec {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../img/mid_location_icon.svg);
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 14px;
    font-weight: bold;
    width: 30px;
    height: 35px;
}
.chackRootModal .__popup_inner_sec {
    background: transparent;
}
.chackRootModal-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 32px;
    color: #333;
    cursor: pointer;
}
._table__rout_sec button.checkRoot {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 15px;
    border: none;
    outline: none;
    background-color: var(--highlight-color);
    color: #ffffff;
    border-radius: 35px;
    letter-spacing: 0.01em;
}
._table__activity_sec {
    display: flex;
    justify-content: inherit;
    gap: 15px;
    align-items: center;
    width: auto;
}
.tableSec .btn-success,
.tableSec .btn-danger,
.tableSec .btn-warning {
    font-size: 12px;
}
.tableBody tr td span.tableBodySpan,
.tableBody tr th span.tableBodySpan {
    font-weight: 500;
    display: block;
}
.tableSec tr {
    vertical-align: top;
    word-wrap: break-word;
    white-space: normal;
}
.bodyTableData tr td {
    padding: 0;
}

._table__rout_sec p:nth-child(1) {
    font-weight: 500;
}
._table__rout_sec p:nth-child(2) {
    font-size: 13px;
    font-weight: 400;
    color: #a29c9c;
}
._table__private_sec {
    font-size: 12px;
    color: #002f6c;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
._table__private_sec span {
    display: block;
    width: 6px;
    height: 6px;
    background-color: #295fe0;
    border-radius: 10px;
}
._table__Public_sec {
    font-size: 12px;
    color: #a29c9c;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 400;
    gap: 5px;
}
._table__Public_sec span {
    display: block;
    width: 6px;
    height: 6px;
    background-color: lightgray;
    border-radius: 10px;
}
._table__close_sec {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 136px;
    height: 33px;
    line-height: 33px;
    padding: 0 10px;
    background: #ffffff;
    color: #000000;
    border-radius: 5px;
}
.table-hover > tbody > tr:hover > * {
    background: #e5f6ff;
}
.btn-closed {
    background-color: #aaaaaa;
    border: 1px solid #aaaaaa;
    color: #ffffff;
    font-size: 13px;
}
.btn-running {
    background-color: #00c853;
    border: 1px solid #00c853;
    color: #000000;
    font-size: 13px;
}
.btn-cancelled {
    border: 1px solid #b4b4b4;
    background-color: #b4b4b4;
    color: #000000;
    font-size: 13px;
    text-align: center;
    border-radius: 5px;
    width: 140px;
    height: 33px;
    line-height: 33px;
}
.btn-pendingDecision {
    background: #ffc107;
    border: 1px solid #ffc107;
    color: #000000;
    font-size: 13px;
}
.btn-invitationSent {
    background-color: #b4b4b4;
    border: 1px solid #b4b4b4;
    color: #ffffff;
    font-size: 13px;
}
.btn-upcoming {
    background-color: #b0bec5;
    border: 1px solid #b0bec5;
    color: #000000;
    font-size: 13px;
}
.btn-accepted {
    background-color: #eef9f2;
    border: 1px solid #eef9f2;
    color: #000000;
    font-size: 13px;
}
.btn-denied {
    background-color: #f5cac3;
    border: 1px solid #f5cac3;
    color: #000000;
    font-size: 13px;
}
.chackRootModal-background .tableHeader tr th {
    position: relative !important;
    top: 0;
    left: 0;
}
/* *****************Start*********************** */
.btn-invitationsent {
    background-color: #b4b4b4;
    border: 1px solid #b4b4b4;
    color: #ffffff;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 5px;
    min-width: 120px;
}

.btn-joined {
    display: block;
    background-color: #4caf50;
    border: 1px solid #4caf50;
    color: #ffffff;
    font-size: 13px;
    padding: 6px 15px;
    text-align: center;
    border-radius: 5px;
    width: 140px;
}
.btn-underreview {
    background: #ff9800;
    border: 1px solid #ff9800;
    color: #ffffff;
    font-size: 13px;
    padding: 6px 15px;
    border-radius: 5px;
    min-width: 120px;
}

.btn-history {
    position: relative;
    background: lightgray;
    border: 1px solid lightgray;
    color: #000000;
    font-size: 13px;
    padding: 6px 10px 6px 25px;
    border-radius: 5px;
    min-width: 120px;
}
.btn-history::before {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-image: url(../img/history-icon.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    top: 8px;
    left: 24px;
}

.btn-winner {
    background-color: #4caf50;
    border: 1px solid #4caf50;
    color: #ffffff;
    font-size: 13px;
    position: relative;
    padding: 6px 15px;
    padding-left: 38px;
    border-radius: 5px;
    min-width: 120px;
}
.btn-winner::before {
    content: "";
    display: block;
    width: 25px;
    height: 25px;
    background-image: url(../img/winner-trophy-icon.png);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    top: 3px;
    left: 18px;
}
.btn-notjoined {
    background-color: #b4b4b4;
    border: 1px solid #b4b4b4;
    font-size: 13px;
    padding: 6px 15px;
    border-radius: 5px;
    min-width: 120px;
}
.btn-notselected {
    background-color: #ffd8d8;
    border: 1px solid #ffd8d8;
    color: #5d626b;
    font-size: 13px;
    padding: 6px 15px;
    border-radius: 5px;
    min-width: 120px;
}
.btn-notSelected {
    background-color: #ffd8d8;
    border: 1px solid #ffd8d8;
    color: #5d626b;
    font-size: 13px;
    padding: 6px 15px;
    border-radius: 5px;
    min-width: 120px;
}
.resBidTransporterTdSec {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
/* ********************* Response Button Action start *************************** */

.btn-closeDeal {
    background-color: #6a6dff;
    color: #ffffff;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 110px;
    height: 34px;
    line-height: 33px;
    padding: 0 10px;
    border-radius: 5px;
    border: none;
}
.btn-reInvite {
    background-color: #f6f7f8;
    color: #5d626b;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 110px;
    height: 34px;
    line-height: 33px;
    padding: 0 10px;
    border-radius: 5px;
    border: none;
}
.btn-invite {
    background-color: #ffd8d8;
    color: #000000;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 110px;
    height: 34px;
    line-height: 33px;
    padding: 0 10px;
    border-radius: 5px;
    border: none;
}

div:where(.swal2-icon).swal2-warning {
    border-color: #ff0707 !important;
    color: #ff0707 !important;
}
div:where(.swal2-container) h2:where(.swal2-title) {
    position: relative;
    max-width: 100%;
    margin: 0;
    padding: 0.8em 1em 0;
    color: #dc3545 !important;
    font-size: 1.875em;
    font-weight: 600;
    text-align: center;
    text-transform: none;
    word-wrap: break-word;
}
/* ********************* Response Button Action end *************************** */
/* *******************End********************* */

.btn-active {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100px;
    height: 33px;
    line-height: 33px;
    padding: 0 10px;
    border-radius: 8px;
    background-color: #f7fffa;
    border: 1px solid #12ce17;
    color: green;
    font-weight: 500;
}
.btn-inactive {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100px;
    height: 33px;
    line-height: 33px;
    padding: 0 10px;
    border-radius: 8px;
    background-color: #fcfcfc;
    border: 1px solid #e6dbdb;
    color: #d2cfcf;
    font-weight: 500;
}

._table_activity_partisipents {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 33px;
    padding: 5px 10px;
    background-color: #f6f7f8;
    stroke: #e4e4e4;
    border-radius: 8px;
}
._table_activity_partisipents i {
    color: #8999b0;
    font-size: 16px;
}
._table_activity_partisipents span {
    background: #f6f7f8;
    border: 1px solid #e4e4e4;
    padding: 0px 6px;
    text-align: center;
    color: #696c70;
    font-size: 13px;
    border-radius: 6px;
}
._table_activity_partisipents .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position the tooltip above the icon */
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

._table_activity_partisipents .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

._table_activity_partisipents:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}
.tableSec .filter .icon {
    color: #000000;
    padding-bottom: 5px;
    transition: 0.3s;
    font-size: 16px;
    text-align: right;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-bottom: 0 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 20px !important;
}

.resultColTabSec {
    display: inline-flex;
    justify-content: start;
    align-items: center;
    background: #f4f4f4;
    border-radius: 5px;
    gap: 10px;
    padding: 0 10px;
    height: 50px;
}
.resultColTabLeftSec i {
    font-size: 40px;
}
.resultColTabLeftSec img {
    width: 40px;
}
.__hover_DisplayText {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.__hover_DisplayText .__hover_DisplayTextSec {
    visibility: hidden;
    width: auto;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: 106%;
    right: 0;
    transition: opacity 0.3s;
}

.__hover_DisplayText .__hover_DisplayTextSec::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 35px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
.__hover_DisplayText:hover .__hover_DisplayTextSec {
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# Table end
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Requirement Information (Pickup and drop search box) start
--------------------------------------------------------------*/

.pickUpandDropLocationSection {
    margin: 0;
    position: relative;
    height: auto;
    min-height: 335px;
    max-height: 365px;
    height: 365px;
    box-shadow: -1px 0px 3px lightgray;
    padding: 20px 20px 0 20px;
}

.textbox-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 0;
    max-height: 210px;
    overflow-x: hidden;
    overflow-y: auto;
}
/* scrollbar start */
.textbox-container::-webkit-scrollbar {
    width: 8px;
}
.textbox-container::-webkit-scrollbar-thumb {
    background-color: var(--highlight-color);
    border-radius: 10px;
}
.textbox-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--highlight-color);
}
.textbox-container::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255, 255, 255, 0.3);
}
/* Scrollbar End */

.addDestionationSec {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    padding: 15px 0 10px 0;
    position: sticky;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: #ffffff;
}
#textbox-container .textbox-item {
    padding: 10px;
}
.textbox-item {
    display: flex;
    align-items: start;
    margin: 0;
    padding: 10px 0;
    border-radius: 4px;
    cursor: grab;
}
.location-icon,
.number-label {
    cursor: pointer;
    display: flex;
    width: 35px;
    height: 43px;
    justify-content: start;
    align-items: center;
}

.pickUpandDropLocationSection input[type="text"] {
    padding: 5px 0 5px 135px;
    border: none !important;
    border-radius: 4px;
    margin: 0 20px;
    height: 50px;
    width: 84%;
}

.pickDropLocationSec {
    display: flex;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 5px;
    width: 100%;
}
.startPointIcon {
    left: 0;
    background: #ffffff;
    width: 120px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px 0 0 4px;
    text-align: left;
    color: #ffffff;
    border-right: 2px solid black;
    position: relative;
    z-index: 9;
}
.startPointIcon select,
.endPointIcon select {
    position: relative;
    width: 90px;
    height: 40px;
    line-height: 40px;
    border: none;
    border-radius: 4px 0 0 4px;
    padding: 0 10px;
    color: #000000;
    outline: none;
    font-size: 13px;
    font-weight: 500;
    z-index: 9;
    right: 8px;
    left: 1px;
    top: -1px;
    cursor: pointer;
}
.endPointIcon {
    left: 0;
    background: #ffffff;
    width: 120px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px 0 0 4px;
    text-align: left;
    color: #ffffff;
    border-right: 2px solid black;
    position: relative;
    z-index: 9;
}
span.number-label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 43px;
    background-image: url(../img/mid_location_icon.svg);
    background-repeat: no-repeat;
    background-position: center center;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    left: -6px;
}
.container.row.startPointSec {
    position: relative;
    left: -5px;
    padding: 0 7px;
}
input.pac-target-input {
    border: 1px solid rgb(0 139 255) !important;
}
gmpx-place-picker.search_route {
    padding: 0;
    padding-left: 8px;
}
gmpx-place-picker.search_route input.pac-target-input {
    border: 1px solid rgb(255, 255, 255) !important;
    border-radius: 4px !important;
}
.overlay {
    border: 1px solid white !important;
}
.search_border_dis {
    border: 1px solid white !important;
}
.close-button {
    margin-left: 10px;
    font-size: 28px;
    color: #aaa;
    cursor: pointer;
}

.data-exchange-icon {
    cursor: pointer;
    font-size: 24px;
    color: #007bff;
    margin-top: 0px;
    margin-left: -70px;
}
input.pac-target-input {
    background-color: var(--gmpx-color-surface, #fff);
    border: 1px solid rgb(255 255 255) !important;
    border-radius: 4px !important;
    color: var(--gmpx-color-on-surface, #212121);
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    padding: calc(var(--gmpx-font-size-base, 0.875rem) * 0.75)
        calc(var(--gmpx-font-size-base, 0.875rem) * 2.5);
    padding: 10px 10px 10px 40px !important;
    width: 100% !important;
}
input.pac-target-input {
    border: var(--nav-hover-color) !important;
}
.textbox-item:hover .close-button {
    display: inline;
}

/* #add-more {
  background: #ffffff;
  margin-top: 0;
  padding: 5px 7px;
  color: var(--highlight-color);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border: 2px solid var(--highlight-color);
  border-radius: 5px;
  width: 40%;
  margin-left: 7%;
}
#add-more:hover {
  background-color: var(--highlight-color);
  color: #ffffff;
} 
#add-more:hover i {
  color: #ffffff;
}
  */
#add-more i {
    font-weight: 800;
    font-size: 25px;
}

.dragging {
    opacity: 0.5;
}
div#exchange-container {
    position: absolute;
    right: -20px;
    top: 75px;
}

.dataTransferIcon {
    max-width: 35px;
    height: auto;
}

.overlay button.search-button {
    font-size: 20px !important;
    color: #c2bcbc !important;
}

#map {
    height: 50vh;
    position: relative;
    z-index: 9;
}
div#mLogo0,
div#mLogo3,
.cst-attrib-cont,
.mmiDRo {
    display: none;
}
span#show_time {
    font-size: 14px;
    font-weight: 600;
    margin-right: 30px;
    text-transform: capitalize;
}
span#show_distance {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}
.operationBlockSec {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    width: 100%;
}
.operationBlockSec input,
.operationBlockSec select {
    border: none;
    background-color: transparent;
}
/* .operationBlockSec input{
    width: 39%;
} */
.operationBlockSec select {
    border-left: 1px solid lightgray;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.__requirement_Information_sec {
    display: flex;
    justify-content: space-around;
    align-items: start;
    margin-top: 30px;
}
.__requirement_Information_innersec {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 33.2%;
}

.__requirement_Information_innersec figure img {
    max-width: 40px;
    width: 100%;
    height: auto;
}
.__requirement_Information_sec figure {
    width: 36px;
    height: 40px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    margin-bottom: 10px;
    z-index: 9;
}
.__requirement_Information_sec h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}
.__requirement_Information_sec p {
    font-size: 14px;
    font-weight: 400;
    color: #777676;
    margin-bottom: 5px;
    min-height: 17px;
}

.__hover_AdditionalLocation {
    width: 40px;
    height: 40px;
    background: #ebebeb;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    margin-bottom: 10px;
    position: relative;
    font-size: 14px;
    font-weight: 700;
}
.__hover_AdditionalLocation span {
    position: absolute;
    top: 0px;
    right: 0px;
    transform: rotate(320deg);
}
.__hover_AdditionalLocation span i {
    font-size: 18px;
}

.__requirement_Information_sec:before {
    content: "";
    display: block;
    width: 35%;
    height: 1px;
    border-bottom: 3px dotted #ebebeb;
    position: absolute;
    margin: 0 13%;
    margin-top: 28px;
}

.__popup_container {
    position: relative;
    margin-top: -2px;
}
/* .__popup_container .icon {
  width: 50px;
  height: 50px;
  background: #ebebeb;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 700;
  color: black;
  cursor: pointer;
} */
.__popup_container .icon {
    width: 60px;
    height: 60px;
    background: #ebebeb;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 40px;
    margin-bottom: 0;
    font-size: 22px;
    font-weight: 700;
    color: black;
    cursor: pointer;
    border: 8px solid white;
}
.__popup_container .icon span {
    position: absolute;
    top: -11px;
    right: -20px;
    transform: rotate(318deg);
}
.__popup_container .icon i {
    font-size: 29px;
    color: #0f41b7;
}
.__popup_container_innersec {
    width: 385px;
    background-color: white;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 20px;
    position: absolute;
    left: 50px;
    top: -80px;
    transition: all 0.25s ease;
    opacity: 0;
    display: none;
    animation: in-animation 0.25s ease;
    z-index: 9;
    text-align: left !important;
    border-radius: 10px;
    z-index: 99;
}
.__popup_container:hover .__popup_container_innersec {
    opacity: 1;
    display: block;
}
.__popup_container:hover .__popup_container_innersec h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0px;
    min-height: 18px;
}
.__popup_container:hover .__requirement_Information_innersec h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
    min-height: 80px;
    height: 80px;
    overflow: auto;
    text-align: left;
}

@keyframes in-animation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.__popup_inner_sec {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 15px;
    background: white;
    z-index: 9;
    margin: 5px 0;
}
.__popup_inner_leftsec {
    width: 10%;
}
.__popup_inner_leftsec figure img {
    max-width: 27px;
    width: 100%;
    height: auto;
}
.__popup_inner_rightsec {
    width: 88%;
}
.__popup_inner_rightsec h3 {
    font-size: 14px;
    color: #777676;
    font-weight: 500;
    margin-bottom: 5px;
}
.__popup_inner_rightsec h4 {
    font-size: 13px;
    color: #131313;
    font-weight: 500;
}
.__popup_main_sec {
    padding-left: 0;
    margin-top: 0;
    position: relative;
}
.__popup_main_sec_title {
    font-size: 14px;
    color: #777676;
    padding: 0;
    display: block;
    margin: 0 0 10px 0;
}
.__popup_main_sec_title:before {
    content: "";
    display: block;
    width: 3px;
    height: 14px;
    border-left: 3px dotted #c3baba;
    position: relative;
    left: 18px;
    top: 0;
}
.__popup_main_sec_title:after {
    content: "";
    display: block;
    width: 3px;
    height: 14px;
    border-left: 3px dotted #c3baba;
    position: relative;
    left: 18px;
    bottom: 0;
    display: none;
}

.__popup_main_sec .__popup_inner_sec {
    position: relative;
    padding-bottom: 20px;
}
.__popup_main_sec .__popup_inner_sec:after {
    content: "";
    display: block;
    width: 3px;
    height: 14px;
    border-left: 3px dotted #c3baba;
    position: absolute;
    left: 18px;
    bottom: 6px;
}
/*--------------------------------------------------------------
# Requirement Information (Pickup and drop search box) end
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Search bar start
--------------------------------------------------------------*/

.pagetitleRightSec {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 20px;
}

.search-container {
    max-width: 400px;
    width: 100%;
    position: relative;
}

input#search-bar {
    width: 100%;
    margin: 0 auto;
    height: 40px;
    padding: 0 20px;
    font-size: 1rem;
    outline: none;
    border-radius: 5px;
    background-color: #e7ecf6;
    border: none;
}
input#search-bar:focus {
    border: 2px solid #e7ecf6;
    transition: 0.35s ease;
    color: #000000;
}
input#search-bar:focus::-webkit-input-placeholder {
    transition: opacity 0.45s ease;
    opacity: 0;
}
input#search-bar:focus::-moz-placeholder {
    transition: opacity 0.45s ease;
    opacity: 0;
}
input#search-bar:focus:-ms-placeholder {
    transition: opacity 0.45s ease;
    opacity: 0;
}
a.search-icon {
    position: absolute;
    float: right;
    width: 52px;
    height: 40px;
    top: 0px;
    right: 0;
    background: #002f6c;
    color: white;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}
a.search-icon:hover {
    position: absolute;
    float: right;
    width: 52px;
    height: 40px;
    top: 0px;
    right: 0;
    background: #0f41b7;
    color: white;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
    -moz-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
    box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
}
.primary-button {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    padding: 8px 25px;
    background-color: var(--highlight-color);
    font-weight: 500;
    color: #ffffff;
    font-size: 14px;
    border-radius: 5px;
    border: none;
}
.primary-button:hover {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 8px 25px;
    background-color: #0a9c47;
    font-weight: 500;
    color: #ffffff;
    font-size: 14px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
    -moz-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
    box-shadow: 0px 5px 10px 2px rgb(201 249 221);
    cursor: pointer;
    border: none;
    align-items: center;
}
.second-button {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 6px 20px;
    color: var(--nav-color);
    font-size: 14px;
    border-radius: 5px;
    background-color: transparent;
    border: 2px solid var(--nav-color);
    cursor: pointer;
    align-items: center;
}
.second-button:hover {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 6px 20px;
    background-color: none;
    color: #ffffff;
    border: 2px solid var(--nav-hover-color);
    background-color: var(--nav-hover-color);
    font-size: 14px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
    -moz-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
    box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
    align-items: center;
}
.third-button {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 6px 20px;
    color: #e22a2a;
    font-size: 14px;
    border-radius: 5px;
    background-color: transparent;
    border: 2px solid #e22a2a;
    align-items: center;
}
.third-button:hover {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 6px 20px;
    background-color: none;
    color: #ffffff;
    border: 2px solid #e22a2a;
    background-color: #e22a2a;
    font-size: 14px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
    -moz-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
    box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
    align-items: center;
}
/*--------------------------------------------------------------
# Search bar end
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Add Receivers section start
--------------------------------------------------------------*/

.addReceiverSec {
    display: block;
    float: left;
    width: 100%;
    padding: 20px;
    min-height: 50vh;
}
.addReceiversDropdown-container {
    position: relative;
    width: auto;
    height: auto;
}

#addReceiversTextbox {
    width: 100%;
    height: 70px;
    border: 2px solid lightgray;
    position: relative;
    border-radius: 10px;
    padding-left: 25px;
    font-size: 18px;
}
#addReceiversTextbox::placeholder {
    font-size: 20px;
}
.addReceiversDropdown-innerContainer {
    display: contents;
}
#addReceiversDropdown-button {
    padding: 5px;
    cursor: pointer;
    width: 270px;
    height: 70px;
    background-color: #002f6c;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0 10px 10px 0;
    color: #ffffff;
    font-size: 20px;
    border: none;
}
#addReceiversDropdown-button img {
    max-width: 60px;
    height: auto;
}
a.addNewReceiversBtn {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    background: #002f6c;
    border: 3px solid #002f6c;
    border-radius: 7px;
    padding: inherit;
    font-weight: 500;
    color: white;
    height: 70px;
    padding: 5px 10px;
    align-items: center;
    margin: 0 5px;
}
a.addNewReceiversBtn p {
    margin-bottom: 0;
    text-align: left;
}
a.addNewReceiversBtn p strong {
    display: flex;
}
a.addNewReceiversBtn:before {
    content: "";
    background-image: url("../img/findFromContactIcon-white.svg");
    display: block;
    width: 46px;
    height: 49px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
a.addNewReceiversBtn:hover {
    background-color: white;
    color: white;
}
a.addNewReceiversBtn:hover:before {
    content: "";
    background-image: url("../img/findFromContactIcon.svg");
    display: block;
    width: 46px;
    height: 49px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
a.addNewReceiversBtn:hover p {
    color: #002f6c;
    text-align: left;
}
a.inviteFormInvitationBtn {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    background: #ffffff;
    border: 3px solid #002f6c;
    border-radius: 7px;
    padding: inherit;
    font-weight: 500;
    color: #002f6c;
    height: 70px;
    padding: 5px 10px;
    align-items: center;
    margin: 0 5px;
}

a.inviteFormInvitationBtn p {
    margin-bottom: 0;
}
a.inviteFormInvitationBtn p strong {
    margin-bottom: 0;
    display: flex;
}
a.inviteFormInvitationBtn:before {
    content: "";
    background-image: url("../img/inviteFormInvitationIcon.svg");
    display: block;
    width: 46px;
    height: 49px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
a.inviteFormInvitationBtn:hover {
    background-color: #002f6c;
    color: #ffffff;
}
a.inviteFormInvitationBtn:hover:before {
    content: "";
    background-image: url("../img/inviteFormInvitationIcon-white.svg");
    display: block;
    width: 46px;
    height: 49px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
a.inviteFormInvitationBtn:hover p {
    color: #ffffff;
}

.addReceiversDropdown-content {
    display: none;
    position: absolute;
    top: 70px;
    left: 13px;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    width: 56%;
    border-radius: 0 0 5px 5px;
    padding: 0;
}

.addReceiversDropdown-content a {
    color: black;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
}

.addReceiversDropdown-content a:hover {
    background-color: #f1f1f1;
}

a.addNewReceiversSec {
    background-color: #002f6c;
    color: #ffffff;
}
a.addNewReceiversSec i,
a.addNewReceiversSec button {
    color: #ffffff;
}
a.addNewReceiversSec:hover {
    background-color: #1146c1;
}
a.addNewReceiversSec:hover i,
a.addNewReceiversSec:hover button {
    color: #ffffff;
}
.addReceiversDropdown-content a .addReceiversListDetails {
    display: flex;
    width: 100%;
    height: 60px;
    justify-content: start;
    align-items: center;
    gap: 30px;
}
.addReceiversDropdown-content
    a
    .addReceiversListDetails
    .addReceiversListDetailsSpan {
    display: flex;
    flex-direction: column;
    column-gap: 10px;
    width: 100%;
}
.addReceiversDropdown-content a .addReceiversListDetails figure {
    margin: 0 0 1rem;
    width: 70px;
    height: 70px;
    overflow: hidden;
    object-fit: cover;
    display: contents;
}
.addReceiversDropdown-content a .addReceiversListDetails figure img {
    max-width: 60px;
    width: 100%;
    height: auto;
}

.addReceiversDropdown-content a .addReceiversListDetailsAddButton {
    display: flex;
    justify-content: end;
    align-items: center;
}
.addReceiversDropdown-content a .addReceiversListDetailsAddButton button {
    display: flex;
    border: none;
    width: 90px;
    height: auto;
    border-radius: 5px;
    padding: 10px;
    font-weight: 600;
    background: #ddddd8;
    justify-content: center;
    align-items: center;
}
.addReceiversDropdown-content a .addNewReceiversSec {
    padding: 0 15px;
    display: flex;
    justify-content: start;
    align-items: center;
}
.addReceiversDropdown-content a .addNewReceiversSec i {
    font-size: 32px;
    margin-right: 34px;
}
.addReceiversDropdown-content a .addNewReceiversSec button {
    border: none;
    background-color: transparent;
    font-size: 13px;
    font-weight: 600;
}
.addReceiversDropdown-content a .addNewReceiversSec i {
    font-size: 32px;
    margin-right: 14px;
}
.addReceiversDropdown-content a .addNewReceiversSec button i {
    font-size: 32px;
    margin-right: 31px;
    margin-left: 15px;
}

.addReceiversCardSec {
    margin-top: 80px;
}
.addReceiversCardSec button#deleteSelected {
    border: none;
    background: transparent;
    margin: 0 20px;
}
div#cardsContainer {
    display: block;
    width: 100%;
    height: auto;
}
div#cardsContainer .card {
    display: block;
    float: left;
    width: 23%;
    margin-right: 14px;
    text-align: center;
    padding: 2% 0;
    border: none;
}
div#cardsContainer .card img {
    border-radius: 60%;
    display: block;
    margin: 0 auto;
    max-width: 80px;
    width: 100%;
    height: 80px;
    margin-bottom: 10px;
}
div#cardsContainer .card p {
    margin-bottom: 0;
}
p.receiverNameCls {
    font-size: 16px;
    font-weight: 600;
    margin: 15px 0;
}
p.receiverPhoneCls {
    color: #969696;
}
/*--------------------------------------------------------------
# Add Receivers section end
--------------------------------------------------------------*/

.pagetitle h1 {
    font-size: 17px;
    margin-bottom: 0;
    font-weight: 600;
    color: #002f6c;
    height: 37px;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
}
.pagetitle h1 span {
    color: black;
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 99999;
    background: #024192;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

.back-to-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
}

.back-to-top:hover {
    background: #002f6c;
    color: #fff;
}

.back-to-top.active {
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
    border-radius: 4px;
    padding: 10px 0;
    animation-name: dropdown-animate;
    animation-duration: 0.2s;
    animation-fill-mode: both;
    border: 0;
    box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
    text-align: center;
    font-size: 15px;
    padding: 10px 25px;
}

.dropdown-menu .dropdown-footer a {
    color: #444444;
    text-decoration: underline;
}

.dropdown-menu .dropdown-footer a:hover {
    text-decoration: none;
}

.dropdown-menu .dropdown-divider {
    color: #a5c5fe;
    margin: 0;
}

.dropdown-menu .dropdown-item {
    font-size: 14px;
    padding: 10px 15px;
    transition: 0.3s;
}

.dropdown-menu .dropdown-item i {
    margin-right: 10px;
    font-size: 18px;
    line-height: 0;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #f6f9ff;
}

@media (min-width: 768px) {
    .hero {
        width: 100%;
        min-height: calc(100vh - 150px);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 60px 0;
        overflow: hidden;
        text-align: center;
    }
    .dropdown-menu-arrow::before {
        content: "";
        width: 13px;
        height: 13px;
        background: #fff;
        position: absolute;
        top: -7px;
        right: 20px;
        transform: rotate(45deg);
        border-top: 1px solid #eaedf1;
        border-left: 1px solid #eaedf1;
    }
    .actionDropDown::before {
        content: "";
        width: 13px;
        height: 13px;
        background: #002f6c;
        position: absolute;
        top: -7px;
        right: 20px;
        transform: rotate(45deg);
        border-top: 1px solid #002f6c;
        border-left: 1px solid #002f6c;
        z-index: 9;
    }
}

@keyframes dropdown-animate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

    0% {
        opacity: 0;
    }
}

/* Light Backgrounds */
.bg-primary-light {
    background-color: var(--highlight-color);
    border-color: var(--highlight-color);
}

.bg-secondary-light {
    background-color: #e2e3e5;
    border-color: #e2e3e5;
}

.bg-success-light {
    background-color: #d1e7dd;
    border-color: #d1e7dd;
}

.bg-danger-light {
    background-color: #f8d7da;
    border-color: #f8d7da;
}

.bg-warning-light {
    background-color: #fff3cd;
    border-color: #fff3cd;
}

.bg-info-light {
    background-color: #cff4fc;
    border-color: #cff4fc;
}

.bg-dark-light {
    background-color: #d3d3d4;
    border-color: #d3d3d4;
}

/* Card */
.card {
    margin-bottom: 30px;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}

.card-header,
.card-footer {
    border-color: #ebeef4;
    background-color: #fff;
    color: #798eb3;
    padding: 15px;
}

.card-title {
    padding: 20px 0 15px 0;
    font-size: 18px;
    font-weight: 500;
    color: #012970;
    font-family: "Poppins", sans-serif;
}

.card-title span {
    color: #899bbd;
    font-size: 14px;
    font-weight: 400;
}

.card-body {
    padding: 0 20px 20px 20px;
}

.card-img-overlay {
    background-color: rgba(255, 255, 255, 0.6);
}

/* Alerts */
.alert-heading {
    font-weight: 500;
    font-family: "Poppins", sans-serif;
    font-size: 20px;
}

/* Close Button */
.btn-close {
    background-size: 45%;
}

.btn-close:focus {
    outline: 0;
    box-shadow: none;
}
.btn-pri {
    color: var(--contrast-color);
    background: var(--accent-color);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    display: inline-block;
    padding: 10px 25px;
    border-radius: 5px;
    transition: 0.5s;
    margin-top: 15px;
    border: none;
    cursor: pointer;
}

.btn-pri:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 15%);
    border: none;
}
/* Accordion */
.accordion-item {
    border: 1px solid #ebeef4;
}

.accordion-button:focus {
    outline: 0;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: #012970;
    background-color: #f6f9ff;
}

.accordion-flush .accordion-button {
    padding: 15px 0;
    background: none;
    border: 0;
}

.accordion-flush .accordion-button:not(.collapsed) {
    box-shadow: none;
    color: #4154f1;
}

.accordion-flush .accordion-body {
    padding: 0 0 15px 0;
    color: #3e4f6f;
    font-size: 15px;
}

/* Breadcrumbs */
.breadcrumb {
    font-size: 14px;
    font-family: "Nunito", sans-serif;
    color: #899bbd;
    font-weight: 600;
    display: flex;
    justify-content: start;
    align-items: center;
    margin-bottom: 0;
}

.breadcrumb a {
    color: #899bbd;
    transition: 0.3s;
}

.breadcrumb a:hover {
    color: #51678f;
}

.breadcrumb .breadcrumb-item::before {
    color: #899bbd;
}

.breadcrumb .active {
    color: #51678f;
    font-weight: 600;
}
/* Bordered Tabs */
.nav-tabs-bordered {
    border-bottom: 2px solid #ebeef4;
}
.nav-tabs-bordered .nav-link {
    margin-bottom: -2px;
    border: none;
    color: #2c384e;
}
.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
    color: #4154f1;
}
.nav-tabs-bordered .nav-link.active {
    background-color: #fff;
    color: #4154f1;
    border-bottom: 2px solid #4154f1;
}
.toggle-sidebar-closebtn {
    display: none;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.logo {
    line-height: 1;
}
.logo img {
    max-height: 40px;
    margin-right: 6px;
}
.logo span {
    font-size: 26px;
    font-weight: 700;
    color: #012970;
    font-family: "Nunito", sans-serif;
}

.header {
    transition: all 0.5s;
    z-index: 997;
    height: 60px;
    box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
    background-color: #fff;
    padding: 0 2%;
    z-index: 999;
}

.header .toggle-sidebar-btn {
    font-size: 32px;
    padding-left: 10px;
    cursor: pointer;
    color: #012970;
}

.header .search-bar {
    min-width: 360px;
    padding: 0 20px;
}
.header .search-bar a {
    font-size: 16px;
    font-weight: 500;
    padding: 17px 20px;
    /* padding-left: 10px; */
    color: #002f6c;
    display: flex;
    align-items: center;
    gap: 10px;
}
.header .search-bar a:hover {
    color: #00c853;
    background: #effbf4;
}
.header .search-bar a i {
    font-size: 24px;
    font-weight: 600;
    color: #002f6c;
}

/* animation effect start */
.orderCardSec {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    background: #ffffff;
    margin-bottom: 30px;
    padding: 30px;
    border-radius: 6px;
    box-shadow: 0 0 5px lightgray;
    overflow: hidden;
}
.orderCardSec figure img {
    max-width: 110px;
}
.orderCardSec h4 {
    color: #000000;
    font-size: 18px;
    font-weight: 600;
}
.contentSec h4 {
    color: #ffffff;
}

.contentSec {
    width: 100%;
    padding: 5px 25px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    gap: 5px;
    align-items: center;
    /* background: rgb(33 33 33 / 93%); */
    background: rgb(42 96 226 / 93%);
    color: white;
    transform: translateY(100%);
    transition: all 0.35s ease;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    cursor: pointer;
}

.orderCardSec:hover .contentSec {
    transform: translateY(0);
}

.contentSec h4 {
    font-size: 24px;
    font-weight: 600;
}

.contentSec .icons {
    /* width: 130px; */
    display: flex;
    justify-content: space-evenly;
}

.contentSec .icons i {
    font-size: 21px;
    color: rgba(255, 255, 255, 100%);
    transition: all 0.2s ease;
}

.contentSec .icons i:hover {
    color: rgba(255, 255, 255, 0.438);
}

@media (min-width: 1200px) {
    .logo {
        width: 180px;
    }
}

/* animation effect end */
@media (max-width: 1199px) {
    .header .search-bar {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        padding: 20px;
        box-shadow: 0px 0px 15px 0px rgba(1, 41, 112, 0.1);
        background: white;
        z-index: 99999;
        transition: 0.3s;
        visibility: hidden;
        opacity: 0;
    }

    .header .search-bar-show {
        top: 60px;
        visibility: visible;
        opacity: 1;
    }
}

.header .search-form {
    width: 100%;
}

.header .search-form input {
    border: 0;
    font-size: 14px;
    color: #012970;
    border: 1px solid rgba(1, 41, 112, 0.2);
    padding: 7px 38px 7px 8px;
    border-radius: 3px;
    transition: 0.3s;
    width: 100%;
}

.header .search-form input:focus,
.header .search-form input:hover {
    outline: none;
    box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
    border: 1px solid rgba(1, 41, 112, 0.3);
}

.header .search-form button {
    border: 0;
    padding: 0;
    margin-left: -30px;
    background: none;
}

.header .search-form button i {
    color: #012970;
}

/*--------------------------------------------------------------
# Header Nav
--------------------------------------------------------------*/
.header-nav ul {
    list-style: none;
}

.header-nav > ul {
    margin: 0;
    padding: 0;
}

.header-nav .nav-icon {
    font-size: 22px;
    color: #012970;
    margin-right: 25px;
    position: relative;
}

.header-nav .nav-profile {
    color: #012970;
}

.header-nav .nav-profile img {
    max-height: 36px;
}

.header-nav .nav-profile span {
    font-size: 14px;
    font-weight: 600;
}

.header-nav .badge-number {
    position: absolute;
    inset: -2px -5px auto auto;
    font-weight: normal;
    font-size: 12px;
    padding: 3px 6px;
    background-color: #00c853 !important;
    border-radius: 10px;
}

.header-nav .notifications {
    inset: 8px -15px auto auto !important;
}

.header-nav .notifications .notification-item {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    transition: 0.3s;
}

.header-nav .notifications .notification-item i {
    margin: 0 20px 0 10px;
    font-size: 24px;
}

.header-nav .notifications .notification-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.header-nav .notifications .notification-item p {
    font-size: 13px;
    margin-bottom: 3px;
    color: #919191;
}

.header-nav .notifications .notification-item:hover {
    background-color: #f6f9ff;
}

.header-nav .messages {
    inset: 8px -15px auto auto !important;
}

.header-nav .messages .message-item {
    padding: 15px 10px;
    transition: 0.3s;
}

.header-nav .messages .message-item a {
    display: flex;
}

.header-nav .messages .message-item img {
    margin: 0 20px 0 10px;
    max-height: 40px;
}

.header-nav .messages .message-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #444444;
}

.header-nav .messages .message-item p {
    font-size: 13px;
    margin-bottom: 3px;
    color: #919191;
}

.header-nav .messages .message-item:hover {
    background-color: #f6f9ff;
}

.header-nav .profile {
    min-width: 240px;
    padding-bottom: 0;
    top: 8px !important;
}

.header-nav .profile .dropdown-header h6 {
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 600;
    color: #444444;
}

.header-nav .profile .dropdown-header span {
    font-size: 14px;
}

.header-nav .profile .dropdown-item {
    font-size: 14px;
    padding: 10px 15px;
    transition: 0.3s;
}

.header-nav .profile .dropdown-item i {
    margin-right: 10px;
    font-size: 18px;
    line-height: 0;
}

.header-nav .profile .dropdown-item:hover {
    background-color: #f6f9ff;
}
.m-card-profile__pic-wrapper {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20px;
}
.m-card-profile__pic-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.m-card-profile__picsm-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
}
.m-card-profile__picsm-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-bottom: 10px;
}
.profile-img-upload-icon {
    position: absolute;
    background-color: #0d6efd;
    color: white;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-top: -136px;
    margin-left: 120px;
    z-index: 9;
    border: 2px solid #ffffff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.profile-img-upload-icon i {
    font-size: 22px;
}
.m_Profile_section h5 {
    font-size: 15px;
    font-weight: 600;
    color: #0d6efd;
}
.m_Profile_section a.nav-link.m-tabs__link {
    font-size: 16px;
    font-weight: 600;
    color: black;
}
.m_Profile_section .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #0d6efd !important;
}
.m_Profile_section .col-form-label {
    font-size: 14px;
}
/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    width: 240px;
    transition: all 0.3s;
    padding: 20px 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #aab7cf transparent;
    box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
    background-color: #fff;
    line-height: 17px;
    z-index: 99;
    color: #002f6c;
}

@media (max-width: 1199px) {
    .sidebar {
        left: -300px;
    }
}

.sidebar::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #aab7cf;
}
@media (min-width: 1200px) {
    .toggle-sidebar #main,
    .toggle-sidebar #footer {
        margin-left: 65px;
    }
    .toggle-sidebar .sidebar {
        left: 0px;
        width: 66px;
        display: flex;
        overflow: hidden;
    }
    #main {
        margin-left: 240px;
    }
    #footer {
        margin-left: 240px;
    }
}

@media (max-width: 1199px) {
    .toggle-sidebar .sidebar {
        left: 0;
        z-index: 999;
    }
}

/* Left sidebar testing strat */
.sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-nav .nav-item {
    margin-bottom: 5px;
}
.sidebar-nav .nav-heading {
    font-size: 11px;
    text-transform: uppercase;
    color: #899bbd;
    font-weight: 600;
    margin: 10px 0 5px 17px;
}
.sidebar-nav .nav-link {
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    transition: 0.3s;
    padding: 20px 20px 20px 26px;
    border-radius: 0;
}
.sidebar-nav .nav-link i {
    min-width: 27px;
    font-size: 24px;
    margin-right: 10px;
}
.sidebar-nav .nav-link img {
    min-width: 27px;
    margin-right: 5px;
}
.sidebar-nav .nav-link {
    background: #fff;
    white-space: nowrap;
}
.sidebar-nav .nav-link:hover {
    color: #00c853;
    background: #effbf4;
}
.sidebar-nav .nav-link:hover i {
    color: #002f6c;
}
.sidebar-nav .nav-link.active {
    background-color: #effbf4;
    color: #00c853;
    border-bottom: 5px solid #00c853;
}
.sidebar-nav .nav-link .bi-chevron-down {
    margin-right: 0;
    transition: transform 0.2s ease-in-out;
}
.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}
.sidebar-nav .nav-content {
    padding: 5px 0 0 0;
    margin: 0;
    list-style: none;
}
.sidebar-nav .nav-content a {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #012970;
    transition: 0.3;
    padding: 10px 0 10px 40px;
    transition: 0.3s;
}
.sidebar-nav .nav-content a i {
    font-size: 6px;
    margin-right: 8px;
    line-height: 0;
    border-radius: 50%;
}
.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
    color: #4154f1;
    background: #effbf4;
}
.sidebar-nav .nav-content a.active i {
    background-color: #4154f1;
}

.sidebarIcon {
    display: flex;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.5s;
}
.order {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.6667 28H24.6042C25.2396 28 25.849 27.7476 26.2983 27.2983C26.7476 26.849 27 26.2396 27 25.6042V23.6875C27 23.0521 26.7476 22.4427 26.2983 21.9934C25.849 21.5441 25.2396 21.2917 24.6042 21.2917H11.6667V28ZM11.6667 19.375H24.6042C25.2396 19.375 25.849 19.1226 26.2983 18.6733C26.7476 18.224 27 17.6146 27 16.9792V16.0208C27 15.3854 26.7476 14.776 26.2983 14.3267C25.849 13.8774 25.2396 13.625 24.6042 13.625H11.6667V19.375ZM9.75 13.625V19.375H6.39583C5.76042 19.375 5.15103 19.1226 4.70172 18.6733C4.25242 18.224 4 17.6146 4 16.9792V16.0208C4 15.3854 4.25242 14.776 4.70172 14.3267C5.15103 13.8774 5.76042 13.625 6.39583 13.625H9.75ZM11.6667 11.7083H24.6042C25.2396 11.7083 25.849 11.4559 26.2983 11.0066C26.7476 10.5573 27 9.94791 27 9.3125V7.39583C27 6.76042 26.7476 6.15103 26.2983 5.70172C25.849 5.25242 25.2396 5 24.6042 5H11.6667V11.7083ZM9.75 5V11.7083H6.39583C5.76042 11.7083 5.15103 11.4559 4.70172 11.0066C4.25242 10.5573 4 9.94791 4 9.3125V7.39583C4 6.76042 4.25242 6.15103 4.70172 5.70172C5.15103 5.25242 5.76042 5 6.39583 5H9.75ZM9.75 21.2917V28H6.39583C5.76042 28 5.15103 27.7476 4.70172 27.2983C4.25242 26.849 4 26.2396 4 25.6042V23.6875C4 23.0521 4.25242 22.4427 4.70172 21.9934C5.15103 21.5441 5.76042 21.2917 6.39583 21.2917H9.75Z' fill='%23002F6C'/%3E%3C/svg%3E");
}
.customer {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.7953 6.51319C17.7953 3.46833 15.2887 1 12.1968 1L11.8897 1.00812C8.94058 1.16518 6.59838 3.56986 6.59838 6.51319C6.59838 9.55812 9.10493 12.0264 12.1968 12.0264L12.504 12.0183C15.4531 11.8613 17.7953 9.45659 17.7953 6.51319ZM13.7964 24.6282C13.7964 26.3496 14.2637 27.9636 15.0803 29.3538H1V23.683C1 19.1026 4.5741 15.3678 9.05147 15.184L9.39757 15.1769H14.996C16.4532 15.1769 17.8236 15.5528 19.0181 16.2141C15.9177 17.7809 13.7964 20.9605 13.7964 24.6282ZM18.6927 31L23.3937 28.1724L28.0946 31L26.8165 25.7233L31 22.1943L25.5091 21.7608L23.3937 16.7521L21.2782 21.7608L15.7874 22.1943L19.9708 25.7233L18.6927 31Z' fill='%23002F6C'/%3E%3C/svg%3E");
}
.transporter {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.325 5C2.04141 5 1 5.96582 1 7.15625V21.5312C1 22.7217 2.04141 23.6875 3.325 23.6875H4.1C4.1 26.0684 6.18281 28 8.75 28C11.3172 28 13.4 26.0684 13.4 23.6875H19.6C19.6 26.0684 21.6828 28 24.25 28C26.8172 28 28.9 26.0684 28.9 23.6875H30.45C31.3073 23.6875 32 23.0451 32 22.25C32 21.4549 31.3073 20.8125 30.45 20.8125V15.66C30.45 14.8963 30.1255 14.1641 29.5442 13.625L25.8 10.1525C25.2187 9.61348 24.4292 9.3125 23.6058 9.3125H21.15V7.15625C21.15 5.96582 20.1086 5 18.825 5H3.325ZM21.15 12.1875H23.6058L27.35 15.66V16.5H21.15V12.1875ZM6.425 23.6875C6.425 23.1156 6.66995 22.5672 7.10598 22.1628C7.542 21.7584 8.13337 21.5313 8.75 21.5312C9.36663 21.5313 9.958 21.7584 10.394 22.1628C10.83 22.5672 11.075 23.1156 11.075 23.6875C11.075 24.2594 10.83 24.8078 10.394 25.2122C9.958 25.6166 9.36663 25.8437 8.75 25.8438C8.13337 25.8437 7.542 25.6166 7.10598 25.2122C6.66995 24.8078 6.425 24.2594 6.425 23.6875ZM24.25 21.5312C24.8666 21.5313 25.458 21.7584 25.894 22.1628C26.33 22.5672 26.575 23.1156 26.575 23.6875C26.575 24.2594 26.33 24.8078 25.894 25.2122C25.458 25.6166 24.8666 25.8437 24.25 25.8438C23.6334 25.8437 23.042 25.6166 22.606 25.2122C22.17 24.8078 21.925 24.2594 21.925 23.6875C21.925 23.1156 22.17 22.5672 22.606 22.1628C23.042 21.7584 23.6334 21.5313 24.25 21.5312Z' fill='%23002F6C'/%3E%3C/svg%3E");
}
.setting {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.0058 11.9155C14.9473 11.9155 13.9561 12.3044 13.2056 13.0153C12.4587 13.7261 12.0445 14.6649 12.0445 15.6674C12.0445 16.67 12.4587 17.6088 13.2056 18.3196C13.9561 19.0271 14.9473 19.4194 16.0058 19.4194C17.0642 19.4194 18.0554 19.0271 18.8059 18.3196C19.5528 17.6088 19.967 16.67 19.967 15.6674C19.967 14.6649 19.5528 13.7261 18.8059 13.0153C18.4393 12.6654 18.003 12.388 17.5224 12.1992C17.0417 12.0104 16.5261 11.914 16.0058 11.9155ZM30.6012 19.8117L28.286 17.9374C28.3958 17.3003 28.4524 16.6498 28.4524 16.0027C28.4524 15.3556 28.3958 14.7018 28.286 14.0681L30.6012 12.1938C30.7761 12.052 30.9013 11.8631 30.9601 11.6523C31.0189 11.4415 31.0085 11.2187 30.9304 11.0136L30.8986 10.9264C30.2614 9.23881 29.3067 7.67455 28.0807 6.30938L28.017 6.23897C27.8681 6.07317 27.6697 5.95399 27.4479 5.89713C27.2261 5.84027 26.9913 5.84839 26.7744 5.92044L23.9 6.88944C22.838 6.06461 21.6556 5.41414 20.3741 4.9615L19.8183 2.11485C19.7764 1.90041 19.6666 1.70312 19.5034 1.5492C19.3403 1.39529 19.1316 1.29203 18.905 1.25315L18.8094 1.23638C16.9686 0.921206 15.0287 0.921206 13.1879 1.23638L13.0923 1.25315C12.8658 1.29203 12.657 1.39529 12.4939 1.5492C12.3308 1.70312 12.2209 1.90041 12.179 2.11485L11.6197 4.97491C10.3503 5.43114 9.16786 6.08004 8.11863 6.89614L5.22291 5.92044C5.00614 5.84782 4.77117 5.8394 4.54923 5.8963C4.32729 5.95319 4.12888 6.07271 3.98037 6.23897L3.91665 6.30938C2.69282 7.67599 1.73836 9.23986 1.09881 10.9264L1.06695 11.0136C0.907645 11.4327 1.03863 11.9021 1.39617 12.1938L3.73965 14.0882C3.62991 14.7185 3.57681 15.3623 3.57681 15.9994C3.57681 16.6431 3.62991 17.2869 3.73965 17.9105L1.40325 19.805C1.22835 19.9468 1.10318 20.1356 1.04437 20.3465C0.985566 20.5573 0.995908 20.7801 1.07403 20.9852L1.10589 21.0724C1.74663 22.7589 2.69181 24.318 3.92373 25.6894L3.98745 25.7598C4.13632 25.9256 4.33474 26.0448 4.55655 26.1016C4.77836 26.1585 5.01315 26.1504 5.22999 26.0783L8.12571 25.1026C9.18063 25.9241 10.3559 26.5745 11.6268 27.0238L12.1861 29.8839C12.228 30.0983 12.3379 30.2956 12.501 30.4495C12.6641 30.6035 12.8728 30.7067 13.0994 30.7456L13.195 30.7624C15.0539 31.0792 16.9576 31.0792 18.8165 30.7624L18.9121 30.7456C19.1387 30.7067 19.3474 30.6035 19.5105 30.4495C19.6737 30.2956 19.7835 30.0983 19.8254 29.8839L20.3812 27.0372C21.6627 26.5812 22.845 25.9341 23.907 25.1093L26.7815 26.0783C26.9983 26.1509 27.2333 26.1593 27.4552 26.1024C27.6771 26.0456 27.8756 25.926 28.0241 25.7598L28.0878 25.6894C29.3197 24.3113 30.2649 22.7589 30.9056 21.0724L30.9375 20.9852C31.0897 20.5694 30.9587 20.1034 30.6012 19.8117ZM16.0058 21.5619C12.5684 21.5619 9.78243 18.9231 9.78243 15.6674C9.78243 12.4117 12.5684 9.77297 16.0058 9.77297C19.4431 9.77297 22.2291 12.4117 22.2291 15.6674C22.2291 18.9231 19.4431 21.5619 16.0058 21.5619Z' fill='%23002F6C'/%3E%3C/svg%3E");
}
.item-master {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7.3C4 6.035 5.035 5 6.3 5H24.7C25.31 5 25.895 5.24232 26.3263 5.67365C26.7577 6.10499 27 6.69 27 7.3V9.6H4V7.3ZM5.15 10.75H25.85V25.7C25.85 26.31 25.6077 26.895 25.1763 27.3263C24.745 27.7577 24.16 28 23.55 28H7.45C6.84 28 6.25499 27.7577 5.82365 27.3263C5.39232 26.895 5.15 26.31 5.15 25.7V10.75ZM12.05 13.05V15.35H18.95V13.05H12.05Z' fill='%23002F6C'/%3E%3C/svg%3E");
}
.address-master {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.7186 9.831L26.3936 7.269C26.1676 7.124 25.922 7.01226 25.6642 6.9372C25.4076 6.85344 25.1402 6.80723 24.8704 6.8H15.3L16.4214 13.8H24.8704C25.1 13.8 25.387 13.7482 25.6628 13.6628C25.9386 13.5774 26.2046 13.4598 26.3922 13.3324L29.7172 10.7676C29.9062 10.6402 30 10.4708 30 10.3C30 10.1292 29.9062 9.9598 29.7186 9.831ZM13.9 4H12.5C12.3143 4 12.1363 4.07375 12.005 4.20503C11.8737 4.3363 11.8 4.51435 11.8 4.7V9.6H7.1296C6.8972 9.6 6.6116 9.6518 6.3358 9.7386C6.0586 9.8226 5.794 9.9388 5.6064 10.069L2.2814 12.631C2.0924 12.7584 2 12.9292 2 13.1C2 13.2694 2.0924 13.4388 2.2814 13.569L5.6064 16.1338C5.794 16.2612 6.0586 16.3788 6.3358 16.4628C6.6116 16.5482 6.8972 16.6 7.1296 16.6H11.8V28.5C11.8 28.6857 11.8737 28.8637 12.005 28.995C12.1363 29.1263 12.3143 29.2 12.5 29.2H13.9C14.0857 29.2 14.2637 29.1263 14.395 28.995C14.5263 28.8637 14.6 28.6857 14.6 28.5V4.7C14.6 4.51435 14.5263 4.3363 14.395 4.20503C14.2637 4.07375 14.0857 4 13.9 4Z' fill='%23002F6C'/%3E%3C/svg%3E");
}
.user-role {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 5C17.025 5 18.4875 5.6058 19.5659 6.68414C20.6442 7.76247 21.25 9.22501 21.25 10.75C21.25 12.275 20.6442 13.7375 19.5659 14.8159C18.4875 15.8942 17.025 16.5 15.5 16.5C13.975 16.5 12.5125 15.8942 11.4341 14.8159C10.3558 13.7375 9.75 12.275 9.75 10.75C9.75 9.22501 10.3558 7.76247 11.4341 6.68414C12.5125 5.6058 13.975 5 15.5 5ZM15.5 19.375C21.8538 19.375 27 21.9481 27 25.125V28H4V25.125C4 21.9481 9.14625 19.375 15.5 19.375Z' fill='%23002F6C'/%3E%3C/svg%3E");
}
.sidebar-nav .nav-link:hover .order,
.sidebar-nav .nav-link.active .order {
    color: #00c853;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.6667 28H24.6042C25.2396 28 25.849 27.7476 26.2983 27.2983C26.7476 26.849 27 26.2396 27 25.6042V23.6875C27 23.0521 26.7476 22.4427 26.2983 21.9934C25.849 21.5441 25.2396 21.2917 24.6042 21.2917H11.6667V28ZM11.6667 19.375H24.6042C25.2396 19.375 25.849 19.1226 26.2983 18.6733C26.7476 18.224 27 17.6146 27 16.9792V16.0208C27 15.3854 26.7476 14.776 26.2983 14.3267C25.849 13.8774 25.2396 13.625 24.6042 13.625H11.6667V19.375ZM9.75 13.625V19.375H6.39583C5.76042 19.375 5.15103 19.1226 4.70172 18.6733C4.25242 18.224 4 17.6146 4 16.9792V16.0208C4 15.3854 4.25242 14.776 4.70172 14.3267C5.15103 13.8774 5.76042 13.625 6.39583 13.625H9.75ZM11.6667 11.7083H24.6042C25.2396 11.7083 25.849 11.4559 26.2983 11.0066C26.7476 10.5573 27 9.94791 27 9.3125V7.39583C27 6.76042 26.7476 6.15103 26.2983 5.70172C25.849 5.25242 25.2396 5 24.6042 5H11.6667V11.7083ZM9.75 5V11.7083H6.39583C5.76042 11.7083 5.15103 11.4559 4.70172 11.0066C4.25242 10.5573 4 9.94791 4 9.3125V7.39583C4 6.76042 4.25242 6.15103 4.70172 5.70172C5.15103 5.25242 5.76042 5 6.39583 5H9.75ZM9.75 21.2917V28H6.39583C5.76042 28 5.15103 27.7476 4.70172 27.2983C4.25242 26.849 4 26.2396 4 25.6042V23.6875C4 23.0521 4.25242 22.4427 4.70172 21.9934C5.15103 21.5441 5.76042 21.2917 6.39583 21.2917H9.75Z' fill='%2300C853'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
.sidebar-nav .nav-link:hover .customer,
.sidebar-nav .nav-link.active .customer {
    color: #00c853;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.7953 6.51319C17.7953 3.46833 15.2887 1 12.1968 1L11.8897 1.00812C8.94058 1.16518 6.59838 3.56986 6.59838 6.51319C6.59838 9.55812 9.10493 12.0264 12.1968 12.0264L12.504 12.0183C15.4531 11.8613 17.7953 9.45659 17.7953 6.51319ZM13.7964 24.6282C13.7964 26.3496 14.2637 27.9636 15.0803 29.3538H1V23.683C1 19.1026 4.5741 15.3678 9.05147 15.184L9.39757 15.1769H14.996C16.4532 15.1769 17.8236 15.5528 19.0181 16.2141C15.9177 17.7809 13.7964 20.9605 13.7964 24.6282ZM18.6927 31L23.3937 28.1724L28.0946 31L26.8165 25.7233L31 22.1943L25.5091 21.7608L23.3937 16.7521L21.2782 21.7608L15.7874 22.1943L19.9708 25.7233L18.6927 31Z' fill='%2300C853'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
.sidebar-nav .nav-link:hover .transporter,
.sidebar-nav .nav-link.active .transporter {
    color: #00c853;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.325 5C2.04141 5 1 5.96582 1 7.15625V21.5312C1 22.7217 2.04141 23.6875 3.325 23.6875H4.1C4.1 26.0684 6.18281 28 8.75 28C11.3172 28 13.4 26.0684 13.4 23.6875H19.6C19.6 26.0684 21.6828 28 24.25 28C26.8172 28 28.9 26.0684 28.9 23.6875H30.45C31.3073 23.6875 32 23.0451 32 22.25C32 21.4549 31.3073 20.8125 30.45 20.8125V15.66C30.45 14.8963 30.1255 14.1641 29.5442 13.625L25.8 10.1525C25.2187 9.61348 24.4292 9.3125 23.6058 9.3125H21.15V7.15625C21.15 5.96582 20.1086 5 18.825 5H3.325ZM21.15 12.1875H23.6058L27.35 15.66V16.5H21.15V12.1875ZM6.425 23.6875C6.425 23.1156 6.66995 22.5672 7.10598 22.1628C7.542 21.7584 8.13337 21.5313 8.75 21.5312C9.36663 21.5313 9.958 21.7584 10.394 22.1628C10.83 22.5672 11.075 23.1156 11.075 23.6875C11.075 24.2594 10.83 24.8078 10.394 25.2122C9.958 25.6166 9.36663 25.8437 8.75 25.8438C8.13337 25.8437 7.542 25.6166 7.10598 25.2122C6.66995 24.8078 6.425 24.2594 6.425 23.6875ZM24.25 21.5312C24.8666 21.5313 25.458 21.7584 25.894 22.1628C26.33 22.5672 26.575 23.1156 26.575 23.6875C26.575 24.2594 26.33 24.8078 25.894 25.2122C25.458 25.6166 24.8666 25.8437 24.25 25.8438C23.6334 25.8437 23.042 25.6166 22.606 25.2122C22.17 24.8078 21.925 24.2594 21.925 23.6875C21.925 23.1156 22.17 22.5672 22.606 22.1628C23.042 21.7584 23.6334 21.5313 24.25 21.5312Z' fill='%2300C853'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
.sidebar-nav .nav-link:hover .setting,
.sidebar-nav .nav-link.active .setting {
    color: #00c853;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.0058 11.9155C14.9473 11.9155 13.9561 12.3044 13.2056 13.0153C12.4587 13.7261 12.0445 14.6649 12.0445 15.6674C12.0445 16.67 12.4587 17.6088 13.2056 18.3196C13.9561 19.0271 14.9473 19.4194 16.0058 19.4194C17.0642 19.4194 18.0554 19.0271 18.8059 18.3196C19.5528 17.6088 19.967 16.67 19.967 15.6674C19.967 14.6649 19.5528 13.7261 18.8059 13.0153C18.4393 12.6654 18.003 12.388 17.5224 12.1992C17.0417 12.0104 16.5261 11.914 16.0058 11.9155ZM30.6012 19.8117L28.286 17.9374C28.3958 17.3003 28.4524 16.6498 28.4524 16.0027C28.4524 15.3556 28.3958 14.7018 28.286 14.0681L30.6012 12.1938C30.7761 12.052 30.9013 11.8631 30.9601 11.6523C31.0189 11.4415 31.0085 11.2187 30.9304 11.0136L30.8986 10.9264C30.2614 9.23881 29.3067 7.67455 28.0807 6.30938L28.017 6.23897C27.8681 6.07317 27.6697 5.95399 27.4479 5.89713C27.2261 5.84027 26.9913 5.84839 26.7744 5.92044L23.9 6.88944C22.838 6.06461 21.6556 5.41414 20.3741 4.9615L19.8183 2.11485C19.7764 1.90041 19.6666 1.70312 19.5034 1.5492C19.3403 1.39529 19.1316 1.29203 18.905 1.25315L18.8094 1.23638C16.9686 0.921206 15.0287 0.921206 13.1879 1.23638L13.0923 1.25315C12.8658 1.29203 12.657 1.39529 12.4939 1.5492C12.3308 1.70312 12.2209 1.90041 12.179 2.11485L11.6197 4.97491C10.3503 5.43114 9.16786 6.08004 8.11863 6.89614L5.22291 5.92044C5.00614 5.84782 4.77117 5.8394 4.54923 5.8963C4.32729 5.95319 4.12888 6.07271 3.98037 6.23897L3.91665 6.30938C2.69282 7.67599 1.73836 9.23986 1.09881 10.9264L1.06695 11.0136C0.907645 11.4327 1.03863 11.9021 1.39617 12.1938L3.73965 14.0882C3.62991 14.7185 3.57681 15.3623 3.57681 15.9994C3.57681 16.6431 3.62991 17.2869 3.73965 17.9105L1.40325 19.805C1.22835 19.9468 1.10318 20.1356 1.04437 20.3465C0.985566 20.5573 0.995908 20.7801 1.07403 20.9852L1.10589 21.0724C1.74663 22.7589 2.69181 24.318 3.92373 25.6894L3.98745 25.7598C4.13632 25.9256 4.33474 26.0448 4.55655 26.1016C4.77836 26.1585 5.01315 26.1504 5.22999 26.0783L8.12571 25.1026C9.18063 25.9241 10.3559 26.5745 11.6268 27.0238L12.1861 29.8839C12.228 30.0983 12.3379 30.2956 12.501 30.4495C12.6641 30.6035 12.8728 30.7067 13.0994 30.7456L13.195 30.7624C15.0539 31.0792 16.9576 31.0792 18.8165 30.7624L18.9121 30.7456C19.1387 30.7067 19.3474 30.6035 19.5105 30.4495C19.6737 30.2956 19.7835 30.0983 19.8254 29.8839L20.3812 27.0372C21.6627 26.5812 22.845 25.9341 23.907 25.1093L26.7815 26.0783C26.9983 26.1509 27.2333 26.1593 27.4552 26.1024C27.6771 26.0456 27.8756 25.926 28.0241 25.7598L28.0878 25.6894C29.3197 24.3113 30.2649 22.7589 30.9056 21.0724L30.9375 20.9852C31.0897 20.5694 30.9587 20.1034 30.6012 19.8117ZM16.0058 21.5619C12.5684 21.5619 9.78243 18.9231 9.78243 15.6674C9.78243 12.4117 12.5684 9.77297 16.0058 9.77297C19.4431 9.77297 22.2291 12.4117 22.2291 15.6674C22.2291 18.9231 19.4431 21.5619 16.0058 21.5619Z' fill='%2300C853'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
.sidebar-nav .nav-link:hover .item-master,
.sidebar-nav .nav-link.active .item-master {
    color: #00c853;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7.3C4 6.035 5.035 5 6.3 5H24.7C25.31 5 25.895 5.24232 26.3263 5.67365C26.7577 6.10499 27 6.69 27 7.3V9.6H4V7.3ZM5.15 10.75H25.85V25.7C25.85 26.31 25.6077 26.895 25.1763 27.3263C24.745 27.7577 24.16 28 23.55 28H7.45C6.84 28 6.25499 27.7577 5.82365 27.3263C5.39232 26.895 5.15 26.31 5.15 25.7V10.75ZM12.05 13.05V15.35H18.95V13.05H12.05Z' fill='%2300C853'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
.sidebar-nav .nav-link:hover .address-master,
.sidebar-nav .nav-link.active .address-master {
    color: #00c853;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M29.7186 9.831L26.3936 7.269C26.1676 7.124 25.922 7.01226 25.6642 6.9372C25.4076 6.85344 25.1402 6.80723 24.8704 6.8H15.3L16.4214 13.8H24.8704C25.1 13.8 25.387 13.7482 25.6628 13.6628C25.9386 13.5774 26.2046 13.4598 26.3922 13.3324L29.7172 10.7676C29.9062 10.6402 30 10.4708 30 10.3C30 10.1292 29.9062 9.9598 29.7186 9.831ZM13.9 4H12.5C12.3143 4 12.1363 4.07375 12.005 4.20503C11.8737 4.3363 11.8 4.51435 11.8 4.7V9.6H7.1296C6.8972 9.6 6.6116 9.6518 6.3358 9.7386C6.0586 9.8226 5.794 9.9388 5.6064 10.069L2.2814 12.631C2.0924 12.7584 2 12.9292 2 13.1C2 13.2694 2.0924 13.4388 2.2814 13.569L5.6064 16.1338C5.794 16.2612 6.0586 16.3788 6.3358 16.4628C6.6116 16.5482 6.8972 16.6 7.1296 16.6H11.8V28.5C11.8 28.6857 11.8737 28.8637 12.005 28.995C12.1363 29.1263 12.3143 29.2 12.5 29.2H13.9C14.0857 29.2 14.2637 29.1263 14.395 28.995C14.5263 28.8637 14.6 28.6857 14.6 28.5V4.7C14.6 4.51435 14.5263 4.3363 14.395 4.20503C14.2637 4.07375 14.0857 4 13.9 4Z' fill='%2300C853'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
.sidebar-nav .nav-link:hover .user-role,
.sidebar-nav .nav-link.active .user-role {
    color: #00c853;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 5C17.025 5 18.4875 5.6058 19.5659 6.68414C20.6442 7.76247 21.25 9.22501 21.25 10.75C21.25 12.275 20.6442 13.7375 19.5659 14.8159C18.4875 15.8942 17.025 16.5 15.5 16.5C13.975 16.5 12.5125 15.8942 11.4341 14.8159C10.3558 13.7375 9.75 12.275 9.75 10.75C9.75 9.22501 10.3558 7.76247 11.4341 6.68414C12.5125 5.6058 13.975 5 15.5 5ZM15.5 19.375C21.8538 19.375 27 21.9481 27 25.125V28H4V25.125C4 21.9481 9.14625 19.375 15.5 19.375Z' fill='%2300C853'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
.headerIcon {
    display: flex;
    width: 36px;
    height: 36px;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.5s;
}
.dashboard-icon {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.1111 11.3333C18.6704 11.3333 18.3012 11.184 18.0036 10.8853C17.7059 10.5867 17.5566 10.2175 17.5556 9.77778V3.55556C17.5556 3.11481 17.7049 2.74563 18.0036 2.448C18.3022 2.15037 18.6714 2.00104 19.1111 2H28.4444C28.8852 2 29.2549 2.14933 29.5535 2.448C29.8522 2.74667 30.001 3.11585 30 3.55556V9.77778C30 10.2185 29.8507 10.5882 29.552 10.8869C29.2533 11.1856 28.8841 11.3344 28.4444 11.3333H19.1111ZM3.55556 17.5556C3.11481 17.5556 2.74563 17.4062 2.448 17.1076C2.15037 16.8089 2.00104 16.4397 2 16V3.55556C2 3.11481 2.14933 2.74563 2.448 2.448C2.74667 2.15037 3.11585 2.00104 3.55556 2H12.8889C13.3296 2 13.6993 2.14933 13.998 2.448C14.2967 2.74667 14.4455 3.11585 14.4444 3.55556V16C14.4444 16.4407 14.2951 16.8104 13.9964 17.1091C13.6978 17.4078 13.3286 17.5566 12.8889 17.5556H3.55556ZM19.1111 30C18.6704 30 18.3012 29.8507 18.0036 29.552C17.7059 29.2533 17.5566 28.8841 17.5556 28.4444V16C17.5556 15.5593 17.7049 15.1901 18.0036 14.8924C18.3022 14.5948 18.6714 14.4455 19.1111 14.4444H28.4444C28.8852 14.4444 29.2549 14.5938 29.5535 14.8924C29.8522 15.1911 30.001 15.5603 30 16V28.4444C30 28.8852 29.8507 29.2549 29.552 29.5535C29.2533 29.8522 28.8841 30.001 28.4444 30H19.1111ZM3.55556 30C3.11481 30 2.74563 29.8507 2.448 29.552C2.15037 29.2533 2.00104 28.8841 2 28.4444V22.2222C2 21.7815 2.14933 21.4123 2.448 21.1147C2.74667 20.817 3.11585 20.6677 3.55556 20.6667H12.8889C13.3296 20.6667 13.6993 20.816 13.998 21.1147C14.2967 21.4133 14.4455 21.7825 14.4444 22.2222V28.4444C14.4444 28.8852 14.2951 29.2549 13.9964 29.5535C13.6978 29.8522 13.3286 30.001 12.8889 30H3.55556Z' fill='%23002F6C'/%3E%3C/svg%3E");
}
.reports-icon {
    background-image:  url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.6929 9.02188C27.8889 9.20938 28 9.4625 28 9.72812V29C28 29.5531 27.5328 30 26.9545 30H6.04545C5.46719 30 5 29.5531 5 29V3C5 2.44687 5.46719 2 6.04545 2H19.9206C20.1983 2 20.4662 2.10625 20.6622 2.29375L27.6929 9.02188ZM25.5889 10.1875L19.4403 4.30625V10.1875H25.5889ZM18.5693 14.9325L16.5693 18.1294L14.5496 14.9312C14.5147 14.876 14.4654 14.8303 14.4066 14.7986C14.3479 14.767 14.2815 14.7503 14.214 14.7503H12.9582C12.8842 14.7503 12.8117 14.7704 12.7491 14.8081C12.7055 14.8344 12.6678 14.8686 12.638 14.9088C12.6083 14.9491 12.5871 14.9945 12.5757 15.0426C12.5643 15.0906 12.563 15.1404 12.5717 15.1889C12.5804 15.2375 12.5991 15.284 12.6266 15.3256L15.3167 19.4013L12.5903 23.5506C12.551 23.6104 12.5302 23.6797 12.5302 23.7503C12.5302 23.8498 12.5715 23.9452 12.645 24.0155C12.7186 24.0858 12.8183 24.1253 12.9223 24.1253H14.0481C14.1149 24.1253 14.1807 24.1089 14.2391 24.0777C14.2975 24.0466 14.3465 24.0016 14.3816 23.9472L16.4301 20.7763L18.4655 23.9466C18.5005 24.0012 18.5497 24.0463 18.6082 24.0776C18.6667 24.1089 18.7326 24.1253 18.7997 24.1253H20.0242C20.0992 24.1253 20.1727 24.1047 20.2359 24.0659C20.2792 24.0393 20.3166 24.0048 20.346 23.9644C20.3754 23.924 20.3962 23.8784 20.4072 23.8303C20.4182 23.7822 20.4191 23.7325 20.41 23.684C20.4009 23.6355 20.3819 23.5893 20.3541 23.5478L17.6154 19.4681L20.4022 15.3284C20.4428 15.2678 20.4644 15.1973 20.4642 15.1253C20.4642 15.0259 20.4229 14.9305 20.3494 14.8601C20.2759 14.7898 20.1762 14.7503 20.0722 14.7503H18.9059C18.8381 14.7504 18.7715 14.7672 18.7126 14.7992C18.6537 14.8312 18.6044 14.8772 18.5697 14.9328L18.5693 14.9325Z' fill='%23002F6C'/%3E%3C/svg%3E");
}
.header .search-bar a:hover .dashboard-icon,
.header .search-bar a.active .dashboard-icon {
    color: #00c853;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.1111 11.3333C18.6704 11.3333 18.3012 11.184 18.0036 10.8853C17.7059 10.5867 17.5566 10.2175 17.5556 9.77778V3.55556C17.5556 3.11481 17.7049 2.74563 18.0036 2.448C18.3022 2.15037 18.6714 2.00104 19.1111 2H28.4444C28.8852 2 29.2549 2.14933 29.5535 2.448C29.8522 2.74667 30.001 3.11585 30 3.55556V9.77778C30 10.2185 29.8507 10.5882 29.552 10.8869C29.2533 11.1856 28.8841 11.3344 28.4444 11.3333H19.1111ZM3.55556 17.5556C3.11481 17.5556 2.74563 17.4062 2.448 17.1076C2.15037 16.8089 2.00104 16.4397 2 16V3.55556C2 3.11481 2.14933 2.74563 2.448 2.448C2.74667 2.15037 3.11585 2.00104 3.55556 2H12.8889C13.3296 2 13.6993 2.14933 13.998 2.448C14.2967 2.74667 14.4455 3.11585 14.4444 3.55556V16C14.4444 16.4407 14.2951 16.8104 13.9964 17.1091C13.6978 17.4078 13.3286 17.5566 12.8889 17.5556H3.55556ZM19.1111 30C18.6704 30 18.3012 29.8507 18.0036 29.552C17.7059 29.2533 17.5566 28.8841 17.5556 28.4444V16C17.5556 15.5593 17.7049 15.1901 18.0036 14.8924C18.3022 14.5948 18.6714 14.4455 19.1111 14.4444H28.4444C28.8852 14.4444 29.2549 14.5938 29.5535 14.8924C29.8522 15.1911 30.001 15.5603 30 16V28.4444C30 28.8852 29.8507 29.2549 29.552 29.5535C29.2533 29.8522 28.8841 30.001 28.4444 30H19.1111ZM3.55556 30C3.11481 30 2.74563 29.8507 2.448 29.552C2.15037 29.2533 2.00104 28.8841 2 28.4444V22.2222C2 21.7815 2.14933 21.4123 2.448 21.1147C2.74667 20.817 3.11585 20.6677 3.55556 20.6667H12.8889C13.3296 20.6667 13.6993 20.816 13.998 21.1147C14.2967 21.4133 14.4455 21.7825 14.4444 22.2222V28.4444C14.4444 28.8852 14.2951 29.2549 13.9964 29.5535C13.6978 29.8522 13.3286 30.001 12.8889 30H3.55556Z' fill='%2300C853'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
.header .search-bar a:hover .reports-icon,
.header .search-bar a.active .reports-icon {
    color: #00c853;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.6929 9.02188C27.8889 9.20938 28 9.4625 28 9.72812V29C28 29.5531 27.5328 30 26.9545 30H6.04545C5.46719 30 5 29.5531 5 29V3C5 2.44687 5.46719 2 6.04545 2H19.9206C20.1983 2 20.4662 2.10625 20.6622 2.29375L27.6929 9.02188ZM25.5889 10.1875L19.4403 4.30625V10.1875H25.5889ZM18.5693 14.9325L16.5693 18.1294L14.5496 14.9312C14.5147 14.876 14.4654 14.8303 14.4066 14.7986C14.3479 14.767 14.2815 14.7503 14.214 14.7503H12.9582C12.8842 14.7503 12.8117 14.7704 12.7491 14.8081C12.7055 14.8344 12.6678 14.8686 12.638 14.9088C12.6083 14.9491 12.5871 14.9945 12.5757 15.0426C12.5643 15.0906 12.563 15.1404 12.5717 15.1889C12.5804 15.2375 12.5991 15.284 12.6266 15.3256L15.3167 19.4013L12.5903 23.5506C12.551 23.6104 12.5302 23.6797 12.5302 23.7503C12.5302 23.8498 12.5715 23.9452 12.645 24.0155C12.7186 24.0858 12.8183 24.1253 12.9223 24.1253H14.0481C14.1149 24.1253 14.1807 24.1089 14.2391 24.0777C14.2975 24.0466 14.3465 24.0016 14.3816 23.9472L16.4301 20.7763L18.4655 23.9466C18.5005 24.0012 18.5497 24.0463 18.6082 24.0776C18.6667 24.1089 18.7326 24.1253 18.7997 24.1253H20.0242C20.0992 24.1253 20.1727 24.1047 20.2359 24.0659C20.2792 24.0393 20.3166 24.0048 20.346 23.9644C20.3754 23.924 20.3962 23.8784 20.4072 23.8303C20.4182 23.7822 20.4191 23.7325 20.41 23.684C20.4009 23.6355 20.3819 23.5893 20.3541 23.5478L17.6154 19.4681L20.4022 15.3284C20.4428 15.2678 20.4644 15.1973 20.4642 15.1253C20.4642 15.0259 20.4229 14.9305 20.3494 14.8601C20.2759 14.7898 20.1762 14.7503 20.0722 14.7503H18.9059C18.8381 14.7504 18.7715 14.7672 18.7126 14.7992C18.6537 14.8312 18.6044 14.8772 18.5697 14.9328L18.5693 14.9325Z' fill='%2300C853'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}
/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/

.allBidsTopSec {
    font-size: 15px;
    font-weight: 500;
}
.color-allbids {
    color: #498ce5;
    display: flex;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
}
.color-openBid {
    color: #13bb13;
    display: flex;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
}
.color-upcomingBid {
    color: #13bba7;
    display: flex;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
}
.color-closeBid {
    color: #aaaeaa;
    display: flex;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
}
.successfullresultsec {
    display: block;
}
.closeBidSec {
    margin: 0;
    padding: 0;
}
.closeBidSec .nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: #000000;
    --bs-nav-pills-link-active-bg: #f9f9f9;
    border-radius: 3px;
    font-weight: 600;
}
.closeBidSec .nav-link {
    color: #000000;
    font-weight: 600;
}
.allBidsGraphSec {
    padding: 20px 0;
}
.allBidsGraphSecTopSec {
    margin: 15px 0;
}
.allBidsGraphSecTopSec ul {
    list-style: none;
    display: flex;
    gap: 20px;
    justify-content: start;
    margin: 0;
    padding: 0;
    align-items: center;
}
.allBidsGraphSecTopSec ul li {
    font-size: 20px;
    font-weight: 600;
}
.autionIconSec {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
    border-radius: 50%;
}
.autionIconSec img {
    max-width: 25px;
    height: auto;
}
.allBidsGraphSecTopSec p {
    font-size: 10px;
    margin-bottom: 0;
    margin-top: 9px;
    text-align: right;
    color: #a89999;
    display: flex;
    justify-content: end;
    gap: 5px;
}
.allBidsGraphSecTopSec p img {
    max-width: 15px;
    height: auto;
}
.allBidsGraphSecMidSec {
    margin: 0;
}
.allBidsGraphSecMidSec ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 5px;
}
.bg-color-open {
    background: #13bb13;
}
.bg-color-upcoming {
    background: #13bba7;
}
.bg-color-pending {
    background: #f4e232;
}
.bg-color-close {
    background: #b9bfb9;
}
.bg-color-cancel {
    background: #f43232;
}
.allBidsGraphSecMidInnerSec {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 7px;
}
.allBidsGraphSecMidInnerSec::after {
    content: "";
    display: block;
    width: 1px;
    height: 20px;
    background-color: #b9b9b9;
}
.allBidsGraphSecMidSec ul li:last-child .allBidsGraphSecMidInnerSec::after {
    display: none;
}
.allBidsGraphSecMidInnerSec ul {
    list-style: none;
}
.allBidsGraphSecMidInnerLeftSec {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 12px;
}
.allBidsGraphSecMidInnerMidSec {
    font-size: 14px;
    color: #ababab;
}
.allBidsGraphSecMidInnerRightSec {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    padding-left: 4px;
    padding-right: 4px;
}
.myChartSec {
    padding-top: 15px;
}
.looseresultsec {
    display: block;
}
.successresultinnerrowSec {
    background-color: #ddf9dd;
    margin: 2px 0;
    padding: 9px 5px;
}
.successresultinnerrowSec p {
    font-size: 13px;
    margin-bottom: 0;
    color: #00ac07;
}
.looseresultinnerrowSec {
    background-color: #f9f9f9;
    margin: 2px 0;
    padding: 9px 5px;
}
.looseresultinnerrowSec p {
    font-size: 13px;
    margin-bottom: 0;
}
.tableSec tbody.tableBody tr td .filter {
    position: relative;
    right: 0;
    top: 0;
}
.tableSec tbody.tableBody tr td .filter a i {
    font-size: 17px;
}
.table tr td p {
    margin-bottom: 0;
}
.border {
    border: 1px solid lightgray;
}
.dashboard .filter {
    position: relative;
    right: 0;
    top: 0;
}
.dashboard .filter .icon {
    color: #000000;
    padding-bottom: 5px;
    transition: 0.3s;
    font-size: 16px;
    text-align: right;
    display: block;
}
.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
    color: #4154f1;
}
.dashboard .filter .dropdown-header {
    padding: 8px 15px;
}
.dashboard .filter .dropdown-header h6 {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #aab7cf;
    margin-bottom: 0;
    padding: 0;
}
.dashboard .filter .dropdown-item {
    padding: 8px 15px;
}
.sales-card h3 {
    font-size: 17px;
    font-weight: 600;
    margin-top: 7px;
    margin-bottom: 13px;
}
/* Info Cards */
.dashboard .info-card {
    padding: 10px 20px;
}
.topBidderSec {
    padding: 0;
    margin: 0;
    max-height: 407px;
    overflow: auto;
}
.topBiddersRowSec {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 1px dashed lightgray;
    padding: 0 10px;
}
.topBiddersRowSec div:nth-child(1) {
    width: 14%;
}
.topBiddersRowSec div:nth-child(2) {
    width: 50%;
}
.topBiddersRowSec div:nth-child(3) {
    width: 30%;
    text-align: right;
}
.dashboard .info-card h5 {
    font-size: 13px;
    color: #000000;
    font-weight: 600;
    margin: 0;
    padding: 0;
}
.dashboard .info-card h6 {
    font-size: 14px;
    color: #012970;
    font-weight: 500;
    margin: 0;
    padding: 0;
}
.topBiddersRowSec img {
    max-width: 45px;
}
.topBiddersRowSec h6 {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
}
.topBiddersRowSec p {
    font-size: 11px;
    color: #6d6d6d;
    font-weight: 400;
    margin-bottom: 0;
}
.dashboard .card-icon {
    font-size: 32px;
    line-height: 0;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    flex-grow: 0;
}
.dashboard .sales-card .card-icon {
    color: #4154f1;
    background: #f6f6fe;
}
.dashboard .revenue-card .card-icon {
    color: #2eca6a;
    background: #e0f8e9;
}
.dashboard .customers-card .card-icon {
    color: #ff771d;
    background: #ffecdf;
}

/* Activity */
.dashboard .activity {
    font-size: 14px;
}

.dashboard .activity .activity-item .activite-label {
    color: #888;
    position: relative;
    flex-shrink: 0;
    flex-grow: 0;
    min-width: 64px;
}

.dashboard .activity .activity-item .activite-label::before {
    content: "";
    position: absolute;
    right: -11px;
    width: 4px;
    top: 0;
    bottom: 0;
    background-color: #eceefe;
}

.dashboard .activity .activity-item .activity-badge {
    margin-top: 3px;
    z-index: 1;
    font-size: 11px;
    line-height: 0;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid #fff;
    flex-grow: 0;
}

.dashboard .activity .activity-item .activity-content {
    padding-left: 10px;
    padding-bottom: 20px;
}

.dashboard .activity .activity-item:first-child .activite-label::before {
    top: 5px;
}

.dashboard .activity .activity-item:last-child .activity-content {
    padding-bottom: 0;
}

/* News & Updates */

.dashboard .news .post-item + .post-item {
    margin-top: 15px;
}

.dashboard .news img {
    width: 80px;
    float: left;
    border-radius: 5px;
}

.dashboard .news h4 {
    font-size: 15px;
    margin-left: 95px;
    font-weight: bold;
    margin-bottom: 5px;
}

.dashboard .news h4 a {
    color: #012970;
    transition: 0.3s;
}

.dashboard .news h4 a:hover {
    color: #4154f1;
}

.dashboard .news p {
    font-size: 14px;
    color: #777777;
    margin-left: 95px;
}

/* Recent Sales */
.dashboard .recent-sales {
    font-size: 14px;
}

.dashboard .recent-sales .table thead {
    background: #f6f6fe;
}

.dashboard .recent-sales .table thead th {
    border: 0;
}

.dashboard .recent-sales .dataTable-top {
    padding: 0 0 10px 0;
}

.dashboard .recent-sales .dataTable-bottom {
    padding: 10px 0 0 0;
}

/* Top Selling */
.dashboard .top-selling {
    font-size: 14px;
}

.dashboard .top-selling .table thead {
    background: #f6f6fe;
}

.dashboard .top-selling .table thead th {
    border: 0;
}

.dashboard .top-selling .table tbody td {
    vertical-align: middle;
}

.dashboard .top-selling img {
    border-radius: 5px;
    max-width: 60px;
}
/* input and dropdown new style start */

/* .floating-label-group {
    position: relative;
    margin: 8px 0;
  }
  .floating-label-group input,
  .floating-label-group select {
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    outline: none;
  }
  .floating-label-group label {
    font-size: 13px;
    position: absolute;
    left: 12px;
    top: 9px;
    color: #888;
    background: white;
    padding: 0 4px;
    transition: all 0.2s ease;
    pointer-events: none;
  }
  .floating-label-group input:focus + label,
  .floating-label-group input.not-empty + label,
  .floating-label-group select:focus + label,
  .floating-label-group select.not-empty + label {
    background: #F4F5F8;
    background: linear-gradient(180deg,rgba(244, 245, 248, 1) 0%, rgba(255, 255, 255, 1) 63%);
    top: -10px;
    left: 8px;
    font-size: 12px;
    color: #888;
  } */

/* input and dropdown new style end */
/* Start POD */
.viewPODSec {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
    padding: 10px 10px;
    width: 70px;
    overflow-x: auto;
    background-color: #f4f5f8;
    position: relative;
}
.viewPOD_PreviousBTN {
    position: absolute;
    left: 0;
    z-index: 99;
}
.viewPOD_NextBTN {
    position: absolute;
    right: 0;
    z-index: 99;
}
/* End POD */
/*--------------------------------------------------------------
# Icons list page
--------------------------------------------------------------*/
.iconslist {
    display: grid;
    max-width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    padding-top: 15px;
}

.iconslist .icon {
    background-color: #fff;
    border-radius: 0.25rem;
    text-align: center;
    color: #012970;
    padding: 15px 0;
}

.iconslist i {
    margin: 0.25rem;
    font-size: 2.5rem;
}

.iconslist .label {
    font-family: var(--bs-font-monospace);
    display: inline-block;
    width: 100%;
    overflow: hidden;
    padding: 0.25rem;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666;
}

/*--------------------------------------------------------------
# Profie Page
--------------------------------------------------------------*/
.profile .profile-card img {
    max-width: 120px;
}

.profile .profile-card h2 {
    font-size: 24px;
    font-weight: 700;
    color: #2c384e;
    margin: 10px 0 0 0;
}

.profile .profile-card h3 {
    font-size: 18px;
}

.profile .profile-card .social-links a {
    font-size: 20px;
    display: inline-block;
    color: rgba(1, 41, 112, 0.5);
    line-height: 0;
    margin-right: 10px;
    transition: 0.3s;
}

.profile .profile-card .social-links a:hover {
    color: #012970;
}

.profile .profile-overview .row {
    margin-bottom: 20px;
    font-size: 15px;
}

.profile .profile-overview .card-title {
    color: #012970;
}

.profile .profile-overview .label {
    font-weight: 600;
    color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit label {
    font-weight: 600;
    color: rgba(1, 41, 112, 0.6);
}

.profile .profile-edit img {
    max-width: 120px;
}

/*--------------------------------------------------------------
# F.A.Q Page
--------------------------------------------------------------*/
.faq .basic h6 {
    font-size: 18px;
    font-weight: 600;
    color: #4154f1;
}

.faq .basic p {
    color: #6980aa;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
    padding: 28px 30px;
}

.contact .info-box i {
    font-size: 38px;
    line-height: 0;
    color: #4154f1;
}

.contact .info-box h3 {
    font-size: 20px;
    color: #012970;
    font-weight: 700;
    margin: 20px 0 10px 0;
}

.contact .info-box p {
    padding: 0;
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0;
}

.contact .php-email-form .error-message {
    display: none;
    color: #fff;
    background: #ed3c0d;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 400;
}

.contact .php-email-form .sent-message {
    display: none;
    color: #fff;
    background: #18d26e;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact .php-email-form .loading {
    display: none;
    background: #fff;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid #18d26e;
    border-top-color: #eee;
    animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    border-radius: 0;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
    border-color: #4154f1;
}

.contact .php-email-form input {
    padding: 10px 15px;
}

.contact .php-email-form textarea {
    padding: 12px 15px;
}

.contact .php-email-form button[type="submit"] {
    background: #4154f1;
    border: 0;
    padding: 10px 30px;
    color: #fff;
    transition: 0.4s;
    border-radius: 4px;
}

.contact .php-email-form button[type="submit"]:hover {
    background: #5969f3;
}

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/
.error-404 {
    padding: 30px;
}

.error-404 h1 {
    font-size: 180px;
    font-weight: 700;
    color: #4154f1;
    margin-bottom: 0;
    line-height: 150px;
}

.error-404 h2 {
    font-size: 24px;
    font-weight: 700;
    color: #012970;
    margin-bottom: 30px;
}

.error-404 .btn {
    background: #51678f;
    color: #fff;
    padding: 8px 30px;
}

.error-404 .btn:hover {
    background: #3e4f6f;
}

@media (min-width: 992px) {
    .error-404 img {
        max-width: 50%;
    }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
    padding: 20px 0;
    font-size: 14px;
    transition: all 0.3s;
    border-top: 3px solid #f4f4f4;
    background: white;
}

.footer .copyright {
    font-size: 16px;
    text-align: center;
    color: #000000;
}

.footer .credits {
    padding-top: 5px;
    text-align: center;
    font-size: 13px;
    color: var(--accent-color);
    font-weight: 500;
}
@media (max-width: 767px) {
    .hero {
        width: 100%;
        min-height: calc(100vh - 150px);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 60px 0;
        overflow: hidden;
        text-align: center;
    }
    .hero h1 {
        font-size: 35px;
        line-height: 50px;
    }
    .hero p {
        font-size: 25px;
        line-height: 24px;
    }
    .apkSec p {
        font-size: 23px;
        color: #002f6c;
        font-weight: 400;
    }
    .sidebar {
        width: 100%;
        padding: 44px 0 0 0;
        left: -102%;
        background-color: rgb(0 0 0 / 60%);
    }
    .toggle-sidebar-closebtn {
        font-size: 24px;
        display: block;
        position: absolute;
        right: 25px;
        top: 10px;
        cursor: pointer;
        z-index: 99;
    }
    .sidebar ul {
        width: 100%;
        height: 100%;
        list-style: none;
        margin: 0;
        background-color: #ffffff;
        position: fixed;
        top: 0;
        padding: 100px 0 0 0;
        box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.5);
    }
    a.linkFirst,
    a.linkFirst:hover {
        font-size: 13px;
    }
    .modal-title {
        font-size: 15px;
    }
    label {
        font-size: 14px;
    }
    .btn-pri_1,
    .btn-pri_1:focus {
        color: var(--contrast-color);
        background: var(--accent-color);
        font-size: 13px;
        padding: 8px 25px;
        border-radius: 4px;
        transition: 0.3s;
        border: none;
        outline: none;
        cursor: pointer;
    }
    .header {
        padding: 0 6%;
        z-index: 99999;
    }
    .pagetitleRightSec {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: start;
        gap: 10px;
        margin: 10px 0;
    }
    .pickUpandDropLocationSection {
        padding: 10px;
    }
    .datePickerSec span.dateIcon img,
    .timePickerSec span.timeIcon img {
        max-width: 20px;
    }
    input#startTimepicker,
    input#endTimepicker {
        background-size: 19px 19px;
    }
    .sidebar-nav .nav-link {
        font-size: 14px;
        font-weight: 600;
        padding: 20px 20px 20px 20px;
        border-radius: 0;
    }
    #main {
        padding: 14px;
    }
    .createBidSec {
        padding: 5%;
    }
    .pagetitleRightSec .search-container {
        max-width: 250px;
    }
    .pagetitleRightSec input#search-bar {
        width: 100%;
        margin: 0 auto;
        height: 40px;
        padding: 0 20px;
        font-size: 1rem;
        outline: none;
        border-radius: 25px;
        background-color: #e7ecf6;
        border: none;
    }
    .pagetitleRightSec a.search-icon {
        width: 50px;
        height: 40px;
    }
    input#search-bar {
        width: 100%;
        margin: 0 auto;
        height: 42px;
        padding: 0 20px;
        font-size: 0.8rem;
        outline: none;
        border-radius: 25px;
        background-color: #e7ecf6;
        border: none;
    }
    a.search-icon {
        width: 60px;
        height: 42px;
    }
    .tableBody tr td,
    .tableBody tr th {
        font-size: 13px;
        font-weight: 500;
        padding: 10px;
    }
    .primary-button {
        font-size: 14px;
        border-radius: 5px;
    }
    .primary-button:hover {
        font-size: 14px;
        border-radius: 5px;
    }
    .third-button {
        padding: 5px 25px;
        font-size: 14px;
        border-radius: 5px;
    }
    .third-button:hover {
        padding: 5px 25px;
        font-size: 14px;
        border-radius: 5px;
    }
    .pagetitle h1 {
        font-size: 18px;
        margin-bottom: 0;
        font-weight: 600;
        color: #002f6c;
        padding-left: 0;
    }
    .pagetitle .primary-button {
        font-size: 13px;
        border-radius: 5px;
        padding: 8px 14px;
    }
    .pagetitle nav {
        padding-left: 0;
    }
    .pagetitle h1 span {
        color: #000000;
    }
    .table-responsive {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }
    .tableHeader tr th {
        font-size: 14px;
        font-weight: 500;
        color: #ffffff;
        background-color: #002f6c;
        position: initial;
        top: 110px;
        z-index: 99;
        white-space: nowrap;
    }
    .tableSec tr {
        vertical-align: top;
        word-wrap: break-word;
        white-space: nowrap;
    }
    .addReceiverSec {
        display: block;
        float: left;
        width: 100%;
        padding: 0;
        min-height: 50vh;
        text-align: center;
    }
    .addReceiversCardSec {
        margin-top: 30px;
    }
    #addReceiversTextbox {
        width: 100%;
        height: 60px;
        border: 2px solid lightgray;
        position: relative;
        border-radius: 10px;
        padding-left: 50px;
        font-size: 18px;
    }
    #addReceiversTextbox::placeholder {
        font-size: 15px;
        padding-left: 0 !important;
    }
    div#cardsContainer .card {
        display: block;
        float: left;
        margin-right: 14px;
        text-align: center;
        padding: 5% 0;
        border: none;
        width: 100%;
    }
    div#cardsContainer .card input[type="checkbox"] {
        position: absolute;
        top: 30px;
        left: 30px;
        width: 15px;
        height: 15px;
    }
    .addReceiversDropdown-content a {
        color: black;
        padding: 10px 20px;
        text-decoration: none;
        display: block;
    }
    .addReceiversDropdown-content {
        width: 92%;
        top: 60px;
    }
    .addReceiversDropdown-content a .addReceiversListDetails {
        gap: 10px;
    }
    .addReceiversDropdown-content
        a
        .addReceiversListDetails
        .addReceiversListDetailsSpan
        span {
        font-size: 14px;
        column-gap: 10px;
        text-align: left;
    }
    .addReceiversDropdown-content a .addReceiversListDetailsAddButton button {
        border: none;
        width: 150px;
        height: auto;
        border-radius: 5px;
        padding: 7px;
        font-weight: 600;
        font-size: 13px;
        justify-content: center;
    }
    .addReceiversDropdown-content a .addNewReceiversSec button {
        border: none;
        background-color: transparent;
        font-size: 18px;
        font-weight: 700;
    }
    .hero .icon-box .description {
        font-size: 18px;
        margin-bottom: 0;
        color: black;
        font-weight: 500;
        min-height: 30px;
    }
    .addReceiversDropdown-innerContainer {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
    .dashboard .info-card {
        padding: 10px 20px;
        margin-bottom: 15px;
    }
    .dashboard .card {
        margin-bottom: 10px;
    }
    .dashboard h3 {
        text-align: center;
    }
    .allBidsGraphSecTopSec p {
        justify-content: start;
    }
    .allBidsGraphSecMidInnerSec::after {
        display: none;
    }
    .allBidsGraphSecMidSec ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        align-items: center;
        gap: 10px;
    }
    .allBidsBtnSec {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 15px;
        margin: 0;
    }
    .allBidsBtnSec a {
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        padding: 8px 10px;
        background-color: var(--highlight-color);
        font-weight: 500;
        color: #ffffff;
        font-size: 14px;
        border-radius: 5px;
        border: none;
    }
    .allBidsBtnSec a:hover {
        display: flex;
        justify-content: center;
        align-content: center;
        padding: 8px 10px;
        background-color: #0a9c47;
        font-weight: 500;
        color: #ffffff;
        font-size: 14px;
        border-radius: 5px;
        -webkit-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
        -moz-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
        box-shadow: 0px 5px 10px 2px rgb(201 249 221);
        cursor: pointer;
        border: none;
        align-items: center;
    }
    .startPointIcon select,
    .endPointIcon select {
        position: relative;
        width: 73px;
        height: 40px;
        line-height: 40px;
        border: none;
        border-radius: 4px 0 0 4px;
        padding: 0 2px;
        color: #000000;
        outline: none;
        font-size: 13px;
        font-weight: 500;
        z-index: 9;
        right: 8px;
        left: 0px;
        cursor: pointer;
    }
    .startPointIcon,
    .endPointIcon {
        width: 100px;
    }
    .bidDurationSec span:nth-child(1) {
        display: block !important;
    }
    .__popup_container_innersec {
        width: 385px;
        background-color: white;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        padding: 20px;
        position: absolute;
        right: -130px !important;
        top: -80;
        transition: all 0.25s ease;
        opacity: 0;
        display: none;
        animation: in-animation 0.25s ease;
        text-align: left !important;
        border-radius: 10px;
        z-index: 99;
    }
    .bidCurrentStatusSec {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        margin-top: 20px;
    }
    .checkbox-section {
        width: 100%;
        border: 1px solid #3769e4;
        padding: 0 3% 3% 3%;
        box-sizing: border-box;
        border-radius: 5px;
        margin-bottom: 30px;
    }
    .__popup_main_sec_title:before {
        left: 16px;
    }
    .main-select-all {
        margin-left: 0;
        display: flex;
        justify-content: start;
        align-items: center;
        text-align: left;
        padding-left: 0;
    }
    .m-form__group label {
        font-size: 13px;
        font-weight: 500;
    }
    .checkbox-section {
        margin-bottom: 30px !important;
    }
    .selectActionSec {
        height: auto !important;
        text-align: left !important;
    }
    .headerInd .btn-getstarted {
        order: 2;
        margin: 0 15px 0 0;
        padding: 6px 15px;
    }
    select#startTimepicker option,
    select#endTimepicker option {
        font-size: 13px;
    }
    .bidDurationSec {
        font-size: 15px;
        font-weight: 500;
        color: gray;
        margin-bottom: 0;
        display: flex;
    }
    .addReceiversDropdown-container {
        position: relative;
        width: auto;
        height: auto;
        row-gap: 20px;
        justify-content: center;
    }
    a.addNewReceiversBtn {
        gap: 10px;
    }
    .addReceiversDropdown-innerContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 0;
    }
    .materialTable tbody tr td,
    .materialTable tbody tr th {
        background-color: #fffdfd;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        min-width: 180px;
    }
}
@media (max-width: 420px) {
    .headerInd .logo img {
        max-height: 33px;
        margin-right: 8px;
    }
    .mobile-nav-toggle {
        color: var(--nav-color);
        font-size: 28px;
        line-height: 0;
        margin-right: 10px;
        cursor: pointer;
        transition: color 0.3s;
        position: absolute;
        right: 182px;
        top: 3px;
    }
    .headerInd .btn-getstarted,
    .headerInd .btn-getstarted:focus {
        color: var(--contrast-color);
        background-color: #0a9c47;
        -webkit-box-shadow: 0px 5px 10px 2px rgb(201 249 221);
        -moz-box-shadow: 0px 5px 10px 2px rgb(201 249 221);
        box-shadow: 0px 5px 10px 2px rgb(201 249 221);
        font-size: 13px;
        padding: 8px 15px;
        margin: 0 0 0 80px;
        border-radius: 4px;
        transition: 0.3s;
        cursor: pointer;
        font-weight: 600;
    }
    .hero h1 {
        font-size: 35px;
        line-height: 50px;
    }
    .hero p {
        font-size: 25px;
        line-height: 24px;
    }
    .apkSec p {
        font-size: 23px;
        color: #002f6c;
        font-weight: 400;
    }
    .sidebar {
        width: 100%;
        padding: 44px 0 0 0;
        left: -102%;
        background-color: rgb(0 0 0 / 60%);
    }
    .toggle-sidebar-closebtn {
        font-size: 24px;
        display: block;
        position: absolute;
        right: 25px;
        top: 10px;
        cursor: pointer;
        z-index: 99;
    }
    .sidebar ul {
        width: 100%;
        height: 100%;
        list-style: none;
        margin: 0;
        background-color: #ffffff;
        position: fixed;
        top: 0;
        padding: 100px 0 0 0;
        box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.5);
    }
    a.linkFirst,
    a.linkFirst:hover {
        font-size: 13px;
    }
    .modal-title {
        font-size: 15px;
    }
    label {
        font-size: 14px;
    }
    .btn-pri_1,
    .btn-pri_1:focus {
        color: var(--contrast-color);
        background: var(--accent-color);
        font-size: 13px;
        padding: 8px 25px;
        border-radius: 4px;
        transition: 0.3s;
        border: none;
        outline: none;
        cursor: pointer;
    }
    #RoleModalForm .modelSection {
        margin-top: 60px;
        padding: 2%;
    }
    #RoleModalForm .modal-header {
        padding: 3% 2%;
        margin: 0;
    }
    #RoleModalForm .modal-title {
        font-size: 18px;
    }
    #RoleModalForm label {
        font-size: 12px;
    }

    .header {
        padding: 0 6%;
        z-index: 99999;
    }
    .pagetitleRightSec {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: start;
        gap: 10px;
        margin: 10px 0;
    }
    .pickUpandDropLocationSection {
        padding: 10px;
    }
    .datePickerSec span.dateIcon img,
    .timePickerSec span.timeIcon img {
        max-width: 20px;
    }
    input#startTimepicker,
    input#endTimepicker {
        background-size: 19px 19px;
    }
    .sidebar-nav .nav-link {
        font-size: 14px;
        font-weight: 600;
        padding: 20px 20px 20px 20px;
        border-radius: 0;
    }
    #main {
        padding: 14px;
    }
    .createBidSec {
        padding: 5%;
    }
    .pagetitleRightSec .search-container {
        max-width: 250px;
    }
    .pagetitleRightSec input#search-bar {
        width: 100%;
        margin: 0 auto;
        height: 40px;
        padding: 0 20px;
        font-size: 1rem;
        outline: none;
        border-radius: 25px;
        background-color: #e7ecf6;
        border: none;
    }
    .pagetitleRightSec a.search-icon {
        width: 50px;
        height: 40px;
    }
    input#search-bar {
        width: 100%;
        margin: 0 auto;
        height: 42px;
        padding: 0 20px;
        font-size: 0.8rem;
        outline: none;
        border-radius: 25px;
        background-color: #e7ecf6;
        border: none;
    }
    a.search-icon {
        width: 60px;
        height: 42px;
    }
    .tableBody tr td,
    .tableBody tr th {
        font-size: 13px;
        font-weight: 500;
        padding: 10px;
    }
    .primary-button {
        font-size: 14px;
        border-radius: 5px;
    }
    .primary-button:hover {
        font-size: 14px;
        border-radius: 5px;
    }
    .third-button {
        padding: 5px 25px;
        font-size: 14px;
        border-radius: 5px;
    }
    .third-button:hover {
        padding: 5px 25px;
        font-size: 14px;
        border-radius: 5px;
    }
    .pagetitle h1 {
        font-size: 18px;
        margin-bottom: 0;
        font-weight: 600;
        color: #002f6c;
        padding-left: 0;
    }
    .pagetitle .primary-button {
        font-size: 14px;
        border-radius: 5px;
        padding: 8px 14px;
    }
    .pagetitle nav {
        padding-left: 0;
    }
    .table-responsive {
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }
    .tableHeader tr th {
        font-size: 14px;
        font-weight: 500;
        color: #ffffff;
        background-color: #002f6c;
        position: initial;
        top: 110px;
        z-index: 99;
        white-space: nowrap;
    }
    .tableSec tr {
        vertical-align: top;
        word-wrap: break-word;
        white-space: nowrap;
    }

    .addReceiverSec {
        display: block;
        float: left;
        width: 100%;
        padding: 0;
        min-height: 50vh;
        text-align: center;
    }
    .addReceiversCardSec {
        margin-top: 30px;
    }
    #addReceiversTextbox {
        width: 100%;
        height: 50px;
        border: 2px solid lightgray;
        position: relative;
        border-radius: 10px;
        padding-left: 30px;
        font-size: 16px;
    }
    #addReceiversTextbox::placeholder {
        font-size: 15px;
        padding-left: 0 !important;
    }
    div#cardsContainer .card {
        display: block;
        float: left;
        margin-right: 14px;
        text-align: center;
        padding: 5% 0;
        border: none;
        width: 100%;
    }
    div#cardsContainer .card input[type="checkbox"] {
        position: absolute;
        top: 30px;
        left: 30px;
        width: 15px;
        height: 15px;
    }
    .addReceiversDropdown-content a {
        color: black;
        padding: 10px 20px;
        text-decoration: none;
        display: block;
    }
    .addReceiversDropdown-content {
        top: 60px;
        width: 90%;
    }
    .addReceiversDropdown-content a .addReceiversListDetails {
        gap: 10px;
    }
    .addReceiversDropdown-content
        a
        .addReceiversListDetails
        .addReceiversListDetailsSpan
        span {
        font-size: 14px;
        column-gap: 10px;
        text-align: left;
    }
    .addReceiversDropdown-content a .addReceiversListDetailsAddButton button {
        border: none;
        width: 150px;
        height: auto;
        border-radius: 5px;
        padding: 7px;
        font-weight: 600;
        font-size: 13px;
    }
    .addReceiversDropdown-content a .addNewReceiversSec i {
        font-size: 32px;
        margin-right: 14px;
    }
    .addReceiversDropdown-content a .addNewReceiversSec button {
        border: none;
        background-color: transparent;
        font-size: 15px;
        font-weight: 700;
    }
    .__viewResponseToggleButton {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;
        margin: 12px 0;
    }
    .hero .icon-box .description {
        font-size: 18px;
        margin-bottom: 0;
        color: black;
        font-weight: 500;
        min-height: 30px;
    }
    .addReceiversDropdown-innerContainer {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
    .dashboard .info-card {
        padding: 10px 20px;
        margin-bottom: 15px;
    }
    .dashboard .card {
        margin-bottom: 10px;
    }
    .dashboard h3 {
        text-align: center;
    }
    .looseresultinnerrowSec {
        text-align: center;
    }
    .allBidsGraphSecTopSec p {
        justify-content: start;
    }
    .topBiddersRowSec div:nth-child(2),
    .topBiddersRowSec div:nth-child(2),
    .topBiddersRowSec div:nth-child(3) {
        width: 100%;
        text-align: center;
    }
    .topBiddersRowSec {
        display: flex;
        justify-content: center;
        flex-direction: column;
        justify-items: center;
        text-align: center;
        row-gap: 10px;
    }
    .successresultinnerrowSec {
        text-align: center;
    }
    .allBidsGraphSecMidInnerSec::after {
        display: none;
    }
    .allBidsGraphSecMidSec ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        align-items: center;
        gap: 10px;
    }
    .allBidsBtnSec {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 5px;
        margin: 0;
    }
    .allBidsBtnSec a {
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        padding: 8px 7px;
        background-color: var(--highlight-color);
        font-weight: 500;
        color: #ffffff;
        font-size: 12px;
        border-radius: 5px;
        border: none;
    }
    .allBidsBtnSec a:hover {
        display: flex;
        justify-content: center;
        align-content: center;
        padding: 8px 14px;
        background-color: #0a9c47;
        font-weight: 500;
        color: #ffffff;
        font-size: 12px;
        border-radius: 5px;
        -webkit-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
        -moz-box-shadow: 0px 5px 10px 2px rgba(54, 163, 247, 0.25);
        box-shadow: 0px 5px 10px 2px rgb(201 249 221);
        cursor: pointer;
        border: none;
        align-items: center;
    }
    .startPointIcon select,
    .endPointIcon select {
        position: relative;
        width: 73px;
        height: 40px;
        line-height: 40px;
        border: none;
        border-radius: 4px 0 0 4px;
        padding: 0 2px;
        color: #000000;
        outline: none;
        font-size: 13px;
        font-weight: 500;
        z-index: 9;
        right: 8px;
        left: 0px;
        cursor: pointer;
    }
    .pri-h2 {
        font-size: 15px;
        font-weight: 600;
        color: #002f6c;
        margin-bottom: 5px !important;
    }
    .bidCurrentStatusSec {
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
        text-align: right;
        margin-top: 20px !important;
    }
    .startPointIcon,
    .endPointIcon {
        width: 100px;
    }
    .bidDurationSec {
        margin-bottom: 10px;
        display: inline-block;
    }
    .bidCurrentStatusSec {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        margin-top: 20px;
    }
    .bidDurationSec span:nth-child(1) {
        display: block !important;
    }
    .chackRootModal {
        padding: 0;
        margin: 5%;
    }
    .reqInfoTitle {
        text-align: center;
    }
    .__requirement_Information_sec {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-around;
        align-items: start;
        margin-top: 0px;
    }
    .__requirement_Information_innersec {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        margin-bottom: 30px;
    }
    .__requirement_Information_sec:before {
        content: "";
        display: block;
        width: 35%;
        height: 1px;
        border-bottom: 3px dotted #ebebeb;
        position: absolute;
        margin: 0 28%;
        margin-top: -42px;
        transform: rotate(270deg);
    }
    .__popup_container_innersec {
        width: 335px;
        background-color: white;
        box-shadow: rgb(116 116 152 / 140%) 5px 7px 303px 0px;
        padding: 20px;
        position: absolute;
        left: -137px;
        top: -120px;
        transition: all 0.25s ease;
        animation: in-animation 0.25s ease;
        text-align: left !important;
        border-radius: 10px;
        z-index: 999;
    }
    .__popup_container:hover .__popup_container_innersec h3 {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 0px;
        min-height: 18px;
        text-align: left;
    }
    .__popup_main_sec {
        padding-left: 0px;
        margin-top: 0;
        position: relative;
    }
    .__popup_main_sec_title {
        font-size: 13px;
        color: #777676;
        padding: 0;
        display: block;
        margin: 0 0 10px 0;
    }
    .__requirement_Information_sec
        .__requirement_Information_innersec:nth-child(2) {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        margin-bottom: 30px;
        position: relative;
        height: auto;
    }
    .__popup_container {
        position: relative;
    }
    .__popup_container .icon span {
        position: absolute;
        top: -3px;
        right: -17px;
        transform: rotate(318deg);
    }

    .main-select-all {
        margin-left: 0;
        display: flex;
        justify-content: start;
        align-items: center;
        text-align: left;
        padding-left: 0;
    }
    .main-select-all {
        margin-left: 0 !important;
    }
    .m-form__group label {
        font-size: 13px;
        font-weight: 500;
    }
    .checkbox-section {
        margin-bottom: 30px !important;
    }
    .selectActionSec {
        height: auto !important;
        padding-top: 10px !important;
        text-align: left !important;
        font-size: 12px;
    }
    .headerInd .btn-getstarted {
        order: 2;
        margin: 0 15px 0 0;
        padding: 6px 15px;
    }
    select#startTimepicker option,
    select#endTimepicker option {
        font-size: 12px;
        background-color: white;
    }
    .materialTable tbody tr td,
    .materialTable tbody tr th {
        background-color: #fffdfd;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        min-width: 180px;
    }
}