/* ==== Poppins ==== */

@font-face {
    font-family: 'Poppins ex-bold';
    src: url('fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins bold';
    src: url('fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins ex-light';
    src: url('fonts/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins black';
    src: url('fonts/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins medium';
    src: url('fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins light';
    src: url('fonts/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins regular';
    src: url('fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins sm-bold';
    src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins thin';
    src: url('fonts/Poppins-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* ==== inter ==== */

@font-face {
    font-family: 'Inter 18pt bold';
    src: url('fonts/fonts/Inter18pt-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt ex-bold';
    src: url('fonts/fonts/Inter18pt-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt black';
    src: url('fonts/fonts/Inter18pt-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt ex-light';
    src: url('fonts/Inter18pt-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt medium';
    src: url('fonts/Inter18pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt light';
    src: url('fonts/Inter18pt-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt sm-bold';
    src: url('fonts/Inter18pt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt regular';
    src: url('fonts/Inter18pt-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 18pt thin';
    src: url('fonts/Inter18pt-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}




img {
    max-width: 100%;
}

input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="email"],
input[type="tel"],
textarea,
.input-checkbox {
    outline: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
}

input:focus {
    outline: 0;
}

textarea:focus {
    outline: 0;
}

button:focus {
    outline: 0;
}

a {
    cursor: pointer;
    text-decoration: none;
    transition: all 0.5s ease;
}

a:focus,
a:hover {
    text-decoration: none;
    outline: 0;
}

.TC {
    text-align: center;
}

.TL {
    text-align: left;
}

.TR {
    text-align: right;
}

.margin_auto {
    margin: auto;
    float: none;
}

.padding {
    padding: 0;
}

.al {
    width: 100%;
    height: 100%;
    display: table;
}

.alm {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

abbr[title] {
    border-bottom: none !important;
    cursor: inherit !important;
    text-decoration: none !important;
}

body {
    font-family: 'Poppins regular';
    background-color: #fff;
}

.container {
    max-width: 1230px;
    margin: 0 auto;
    width: 100%;
}

/* ==== login screen Start ==== */

.login-screen-main {
    width: 100%;
    height: 100vh;
    position: relative;
}

.login-screen-image-main {
    width: 100%;
    height: 100%;
}

.login-screen-image-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.login-screen-popup-main {
    width: 100%;
    height: 100%;
    background-color: #00000090;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-screen-main-inside-popup {
    width: 90%;
    max-width: 670px;
    padding: 24px;
    border-radius: 18px;
    background-color: white;
    animation: zoomIn 0.3s ease forwards;
}

@keyframes zoomIn {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

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

.login-screen-logo-image {
    width: fit-content;
    margin-bottom: 32px;
}

.login-screen-heading {
    margin-bottom: 32px;
}

.login-screen-heading h1 {
    font-size: 32px;
    color: black;
    margin-bottom: 12px;
    font-family: 'Inter 18pt sm-bold';
}

.login-screen-heading p {
    font-size: 16px;
    color: black;
    font-family: 'Inter 18pt regular';
}

.login-screen-heading p a {
    color: #46A56C;
}

.login-screen-field-section {
    width: 100%;
}

.login-field-lable-inside-main {
    width: 100%;
    margin-bottom: 24px;
}

.login-screen-field-section:nth-last-child(1) .login-field-lable-inside-main {
    margin-bottom: 10px;
}

.login-field-lable-inside-main label {
    color: black;
    font-family: 'Inter 18pt regular';
    margin-bottom: 6px;
    width: 100%;
}

.login-field-lable-inside-main input {
    width: 100%;
    border: 1px solid #D8DADC;
    border-radius: 10px;
    font-size: 16px;
    color: black;
    font-family: 'Inter 18pt regular';
    padding: 16px 16px;
}

.login-field-lable-inside-main input::placeholder {
    color: black;
}

.login-screen-forgot-pass-and-rememberme {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.login-screen-forgot-pass-and-rememberme .form-check-input:checked {
    background-color: #46A56C;
    border-color: #46A56C;
}

.login-screen-forgot-pass-and-rememberme .form-check-input {
    box-shadow: unset;
    border-color: #46A56C;
}

.login-screen-forgot-pass-and-rememberme .form-check .form-check-label {
    color: #333333;
    font-family: 'Inter 18pt regular';
    font-size: 12px;
}

.login-screen-forgot-pass-and-rememberme a {
    color: #46A56C;
    font-size: 12px;
    font-family: 'Inter 18pt medium';
}

.login-page-sbmt-button {
    width: 100%;
    margin: auto;
    margin-top: 40px;
}

.login-page-sbmt-button button {
    width: 100%;
    color: white;
    background-color: #46A56C;
    border: 1px solid #46A56C;
    border-radius: 10px;
    font-size: 16px;
    font-family: 'Inter 18pt sm-bold';
    padding: 15px;
    transition: 0.3s;
}

.login-page-sbmt-button button:hover {
    background-color: transparent;
    color: #46A56C;
}

.verify-your-email-address-code-main {
    width: fit-content;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 20px;
}

.verify-your-email-address-code-main input {
    width: 52px;
    height: 52px;
    border: 1px solid #CBCFD2;
    border-radius: 15px;
    text-align: center;
    color: #282C31;
    font-size: 24px;
    font-family: 'Inter 18pt sm-bold';
}

.verify-your-email-address-code-main input::placeholder {
    color: #282C31;
}

.verify-otp-enter-time {
    margin-bottom: 20px;
}

.verify-otp-enter-time #countdown {
    font-size: 16px;
    font-family: 'Inter 18pt regular';
    color: #000000ad;
    text-align: center;
}

.verify-code-didnt-receive-resend p {
    font-size: 16px;
    font-family: 'Inter 18pt regular';
    color: #000000ad;
    text-align: center;
}

.verify-code-didnt-receive-resend p a {
    color: black;
    font-family: 'Inter 18pt sm-bold';
}

.verify-code-didnt-receive-resend p a.disabled {
    opacity: 0.5;
}

/* == account created page start == */

.account-created-page .login-screen-logo-image {
    margin: auto;
    margin-bottom: 32px;
}

.account-created-icon-main {
    width: 200px;
    height: 200px;
    background-color: #e8f9e6;
    border-radius: 100px;
    margin: auto;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-created-icon-main img {
    animation: zoomInicn 0.6s ease forwards;
}

@keyframes zoomInicn {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

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

.account-created-page .login-screen-heading h1 {
    text-align: center;
}

.account-created-page .login-screen-heading p {
    text-align: center;
}

/* == account created page End == */

/* ==== login screen End ==== */

/* ==== Driver Managemnt Page Start ==== */

header {
    width: 100%;
    margin: auto;
    background-color: white;
    position: sticky;
    top: 0px;
    z-index: 1;
}

.header-main {
    width: 100%;
    margin: auto;
    padding: 14px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-main {
    width: fit-content;
}

.logo-main a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
}

.logo-main a img {
    width: 44px;
}

.notificaton-and-my-profile-main {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 30px;
}

.notification-icon-header-main {
    width: fit-content;
}

.notification-icon-header-main a {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.notification-icon-header-main a .notification-badge {
    background-color: #EA8F95;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    position: absolute;
    top: 1px;
    right: 0px;
}

.my-account-header-main {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-icon-main-hdr {
    width: 48px;
    height: 48px;
    border-radius: 50px;
    background-color: #E3EBFD;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-usr-account-details-name-main {
    width: fit-content;
    cursor: pointer;
    position: relative;
}

.my-profile-usr-dpdn-main {
    position: absolute;
    background-color: white;
    width: 175px;
    box-shadow: 0px 2px 8px #0000004a;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #9CA3AF;
    top: 50px;
    left: unset;
    right: 0px;
    padding: 20px 10px;
    display: none;
}

.profile-usr-account-details-name-main.active a i.fa-caret-down {
    transform: rotate(180deg);
    transition: 0.2s;
}

.profile-usr-account-details-name-main.active .my-profile-usr-dpdn-main {
    display: block;
}

.my-profile-usr-dpdn-main ul {
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.my-profile-usr-dpdn-main ul li {
    list-style: none;
}

.my-profile-usr-dpdn-main ul li a {
    font-family: 'Poppins medium';
    font-size: 14px;
    color: white;
    padding: 8px 16px;
    border-bottom: 1px solid #CBD5E1;
    background-color: #46A56C;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #46A56C;
}

.my-profile-usr-dpdn-main ul li a:hover {
    background-color: transparent;
    color: #46A56C;
}

.my-profile-usr-dpdn-main ul li:nth-last-child(1) a {
    background-color: #FF383C;
    border-color: #FF383C;
}

.my-profile-usr-dpdn-main ul li:nth-last-child(1) a:hover {
    color: #FF383C;
    background-color: transparent;
}

.profile-usr-account-details-name-main p {
    color: #9A9EA6;
    font-size: 12px;
}

.profile-usr-account-details-name-main a {
    color: #1F4BA4;
    font-size: 18px;
    font-family: 'Poppins bold';
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-usr-account-details-name-main a p {
    color: #1F4BA4;
    font-size: 14px;
    font-family: 'Poppins bold';
}

/* ==== Driver Managemnt Page End ==== */

/* ==== Deshboard main section Start ====  */

.deshboard-main-section {
    width: 100%;
    margin: auto;
    display: flex;
}

.deshboard-sidebar-main {
    width: 260px;
    min-width: 260px;
    height: 90vh;
    padding: 30px 16px;
    position: fixed;
    background-color: white;
    z-index: 1;
    transition: 0.3s;
}

.sidebar-close-button {
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: white;
    border: 1px solid #17412C;
    right: -14px;
    top: 0;
    border-radius: 6px;
    transition: 0.3s;
}

.sidebar-close-button:hover {
    background-color: #17412C;
}

.sidebar-close-button:hover button {
    color: white;
}

.sidebar-close-button button {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: unset;
    background: transparent;
    border-radius: 10px;
}

.deshboard-sidebar-main ul {
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    margin: auto;
}

.deshboard-sidebar-main ul li {
    list-style: none;
}

.deshboard-sidebar-main ul li a {
    font-size: 14px;
    font-family: 'Inter 18pt medium';
    color: #17412C;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    border-radius: 4px;
    transition: 0.3s;
}

.deshboard-sidebar-main ul li a:hover img {
    filter: brightness(0) saturate(100%) invert(99%) sepia(10%) saturate(101%) hue-rotate(254deg) brightness(118%) contrast(100%);
}

.deshboard-sidebar-main ul li a:hover {
    color: white;
    background-color: #1F9254;
}

.deshboard-sidebar-main ul li a.active {
    color: white;
    background-color: #1F9254;
}

.deshboard-sidebar-main ul li a.active img {
    filter: brightness(0) saturate(100%) invert(99%) sepia(10%) saturate(101%) hue-rotate(254deg) brightness(118%) contrast(100%);
}

.deshboard-contant-section-main {
    width: 100%;
    width: calc(100% - 90px);
    margin-left: auto;
    background-color: #fcfcfc;
    padding: 20px;
    overflow-x: auto;
    transition: 0.3s;
}

.deshboard-page-heading-and-button-main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.deshboard-page-heading-and-button-main h1,
.deshboard-page-heading-and-button-main h1,
.deshboard-page-heading-and-button-main h1 a {
    font-size: 32px;
    color: black;
    font-family: 'Poppins sm-bold';
}

.add-new-button {
    width: fit-content;
}

.add-new-button a {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    color: white;
    background-color: #46A56C;
    padding: 11px 16px;
    border-radius: 50px;
    border: 1px solid #46A56C;
    transition: 0.3s;
}

.add-new-button a:hover {
    color: #46A56C;
    background-color: transparent;
}

.add-new-button a i {
    transition: 0.3s;
}

.add-new-button a:hover i {
    transform: rotate(90deg);
}

.deshboard-table-main-section {
    width: 100%;
    margin: auto;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 2px 8px #00000015;
}

.driver-management-page-main {
    width: 100%;
}

/* ==== Deshboard main section End ====  */

/* ==== data table Start ==== */

.deshboard-table-main-section .dataTables_scrollBody {
    scrollbar-width: thin;
    scrollbar-color: #1F9254 white;
}

.deshboard-table-main-section table.dataTable {
    /*width: 1920px !important;*/
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
}

.supports-page-table-section table.dataTable {
    overflow: unset;
}

.deshboard-table-main-section table.dataTable thead th {
    background-color: white;
    color: black;
    font-size: 14px;
    font-family: 'Poppins sm-bold';
    padding: 16px 16px;
    border-bottom: unset;
    cursor: pointer;
}

.deshboard-table-main-section table.dataTable tbody td {
    padding: 6px 16px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    font-family: 'Inter 18pt regular';
}

.deshboard-table-main-section table.dataTable tbody tr:hover {
    background-color: #f9f9f9;
}

.deshboard-table-main-section table.dataTable tbody tr.odd {
    background-color: #F7F6FE;
}

.usr-tbl-image img {
    width: 32px;
    height: 32px;
    border-radius: 50px;
}

.toggle-switch-main {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-switch-main-inside {
    width: 35px;
    border-radius: 50px;
    background-color: #9A9EA6;
    display: flex;
}

.toggle-switch-main-inside span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50px;
    background-color: white;
    margin: 2px 3px;
}

.toggle-switch-main.active .toggle-switch-main-inside {
    background-color: #346F9B;
    justify-content: end;
}

.toggle-active-text {
    color: #1F9254;
    font-size: 12px;
    display: none;
    font-family: 'Poppins medium';
}

.toggle-in-active-text {
    color: #9A9EA6;
    font-size: 12px;
    font-family: 'Poppins medium';
}

.toggle-switch-main.active {

    .toggle-in-active-text {
        display: none;
    }

    .toggle-active-text {
        display: block;
    }

}

.documents-table {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 83px;
    border-radius: 50px;
    font-size: 12px;
    font-family: 'Inter 18pt regular';
    padding: 2px 0px;
}

.documents-table.Verified {
    background-color: #B8FDBB;
    color: #228D29;
}

.documents-table.na {
    background-color: #EDEDED;
    color: #228D29;
}

.documents-table.Pending {
    background-color: #fdeba1;
    color: #907B28;
}

.documents-table.In-Progress {
    background-color: #d0caf7;
    color: #2400FF;
}

.documents-table.Rejected {
    background-color: #fdd9d9;
    color: #EF0000;
}

.documents-table.completed-off {
    background-color: #e4e2e4;
    color: #848380;
}

.verification-status-tbl {
    display: flex;
    gap: 6px;
    align-items: center;
}

.verification-status-tbl .verification-approve {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-family: 'Inter 18pt sm-bold';
    color: white;
    background-color: #228D29;
    border-radius: 4px;
    padding: 5px;
    line-height: normal;
    width: fit-content;
    min-width: 100px;
}

.verification-status-tbl .verification-reject {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-family: 'Inter 18pt sm-bold';
    color: white;
    width: 90px;
    padding: 5px;
    border-radius: 4px;
    line-height: normal;
    background-color: #EF0000;
}

.tbl-action-main {
    display: flex;
    width: fit-content;
    gap: 16px;
    align-items: center;
}

/* ==== data table End ==== */

.deshboard-table-main-section .table-filters {
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 12px;
}

.deshboard-table-main-section .table-search-input {
    box-shadow: unset !important;
    border: unset;
    padding: 10px 12px;
    background-color: transparent;
    font-size: 12px;
}

.deshboard-table-main-section .table-search-input::placeholder {
    color: #B5B7C0;
}

.deshboard-table-main-section .table-filters .search-box {
    display: flex;
    align-items: center;
    width: 200px;
    border-radius: 8px;
    background-color: #F9FBFF;
    padding-left: 15px;
}

.deshboard-table-main-section .table-filters .search-box a i {
    color: #7E7E7E;
}

.deshboard-table-main-section .table-status-filter {
    width: 160px;
    border-radius: 8px;
}

.dataTables_filter {
    display: none;
}

.deshboard-table-main-section .status-filter {
    position: relative;
}

.deshboard-table-main-section .custom-select {
    width: 180px;
    user-select: none;
    font-family: 'Poppins regular';
    position: relative;
    border-radius: 8px;
    background: #F9FBFF;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

.deshboard-table-main-section .custom-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    gap: 8px;
    color: #6b7280;
    font-size: 14px;
}

.deshboard-table-main-section .custom-select__trigger i {
    color: #9ca3af;
}

.deshboard-table-main-section .custom-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
    z-index: 50;
    display: none;
    max-height: 220px;
    overflow-y: auto;
}

.deshboard-table-main-section .custom-select.open .custom-options {
    display: block;
}

.deshboard-table-main-section .custom-option {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
}

.deshboard-table-main-section .custom-option:hover {
    background: #f3f4f6;
}

.deshboard-table-main-section .custom-option.active {
    background: #e6f4ea;
    color: #166534;
    font-weight: 600;
}

/* ==== sidebar open close start ==== */

.deshboard-sidebar-main.active {

    width: 90px;
    min-width: 90px;
    transition: 0.3s;
    padding: 30px 10px;

    ul li a span {
        display: none;
    }

    ul li a {
        width: 52px;
        height: 52px;
        justify-content: center;
        transition: 0.3s;
    }

    .sidebar-close-button button {
        transform: rotate(180deg);
        transition: 0.3s;
    }

    ul {
        width: fit-content;
        margin: auto;
    }

    ul li {
        width: fit-content;
    }

    .setting-dropdown a i.fa-angle-down {
        display: none;
    }



}

.deshboard-main-section.active {

    .deshboard-contant-section-main {
        width: calc(100% - 260px);
    }

}

.mobile-sidebar-toggle-button {
    display: none;
}

/* ==== sidebar open close End ==== */

/* ==== Driver Management Add New page Start ==== */

.driver-management-currunt-page {
    width: fit-content;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.driver-management-currunt-page a {
    color: black;
    font-size: 16px;
}

.driver-management-currunt-page a.back-page {
    color: #1F9254;
}

.driver-management-add-new-main {
    width: 100%;
}

.driver-management-add-new-main form {
    width: 100%;
}

.driver-management-add-details-main-itp-section {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.driver-management-input-section-inside {
    width: 48.50%;
    margin-bottom: 24px;
}

.driver-management-input-section-inside label {
    width: 100%;
    color: black;
    font-size: 16px;
    font-family: 'Poppins medium';
    margin-bottom: 4px;
}

.driver-management-input-section-inside label span {
    color: #DF0404;
}

.driver-management-input-section-inside input {
    background-color: #FDFDFD;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    padding: 14px 20px;
    border-radius: 8px;
    width: 100%;
}

.driver-management-input-section-inside textarea {
    background-color: #FDFDFD;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    padding: 14px 20px;
    border-radius: 8px;
    width: 100%;
    height: 110px;
}

.support-add-new-page-textaria-mn {
    width: 100%;
}

.driver-status-edit-page textarea {
    background-color: #F5F9FF;
}

.driver-management-input-section-inside input::placeholder,
.driver-management-input-section-inside textarea {
    color: #989898;
}

.dropodwn-driver-mngmnt-add-new-page-one {
    width: 100%;
}

.dropodwn-driver-mngmnt-add-new-page-one .custom-dropdown {
    position: relative;
    width: 100%;
}

.dropodwn-driver-mngmnt-add-new-page-one .dropdown-selected {
    background-color: #FDFDFD;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    padding: 14px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color 0.2s ease;
    color: #989898;
}

.dropodwn-driver-mngmnt-add-new-page-one .dropdown-selected:hover {
    border-color: #bfbfbf;
}

.dropodwn-driver-mngmnt-add-new-page-one .dropdown-selected i {
    color: #999;
    transition: transform 0.3s ease;
}

.dropodwn-driver-mngmnt-add-new-page-one .custom-dropdown.active .dropdown-selected i {
    transform: rotate(180deg);
}

.dropodwn-driver-mngmnt-add-new-page-one .dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    margin-top: 4px;
    list-style: none;
    padding: 4px 0;
    display: none;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.dropodwn-driver-mngmnt-add-new-page-one .dropdown-options li {
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s;
}

.dropodwn-driver-mngmnt-add-new-page-one .dropdown-options li:hover {
    background: #f3f3f3;
}

.dropodwn-driver-mngmnt-add-new-page-one .custom-dropdown.active .dropdown-options {
    display: block;
}

.driver-management-company-details-section {
    width: 100%;
    margin-bottom: 24px;
}

.drvr-mngmnt-cmpny-dtls-tital {
    width: 100%;
    margin-bottom: 16px;
}

.drvr-mngmnt-cmpny-dtls-tital h2 {
    color: black;
    font-size: 20px;
    font-family: 'Poppins medium';
}

.driver-management-company-details-inside-main {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.driver-management-company-details-inside-main .driver-management-input-section-inside {
    width: 32%;
}

/* == truck photo upload Start == */

.driver-mngmnt-truck-photo-uploader-section {
    width: 50%;
    padding: 20px;
    border: 2px dashed #1849D6;
    border-radius: 12px;
    background-color: transparent;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    transition: border-color 0.2s ease-in-out;
    margin-bottom: 48px;
}

.driver-mngmnt-truck-photo-uploader-section.dragover {
    border-color: #007bff;
}

.driver-mngmnt-truck-photo-uploader-section .image-card {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #e9eef3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.driver-mngmnt-truck-photo-uploader-section .image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.driver-mngmnt-truck-photo-uploader-section .remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 20px;
    height: 20px;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.driver-mngmnt-truck-photo-uploader-section .remove-btn:hover {
    background-color: #ff4d4d;
    color: #fff;
}

.driver-mngmnt-truck-photo-uploader-section .upload-box {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    background-color: #edf2f7;
    color: #295e8a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.driver-mngmnt-truck-photo-uploader-section .upload-box:hover {
    background-color: #d9e6f3;
}

/* == truck photo upload End == */

.driver-management-company-details-upload-documents-section {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.driver-management-company-details-upload-documents-section .driver-management-input-section-inside {
    width: 100%;
}

/* ==== Driver Management Add New page End ==== */

.driver-mngmnt-multiselect-dropdown-searcheble {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    color: #fff;
    background-color: #FDFDFD;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    padding: 14px 20px;
    border-radius: 8px;
}

.driver-mngmnt-multiselect-dropdown-searcheble .selected-area {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.driver-mngmnt-multiselect-dropdown-searcheble .selected-area input {
    border: none;
    background: transparent;
    color: #fff;
    outline: none;
    flex: 1;
    min-width: 120px;
    padding: 0px;
}

.driver-mngmnt-multiselect-dropdown-searcheble .selected-item {
    background: #1F9254;
    border-radius: 5px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 6px;
}

.driver-mngmnt-multiselect-dropdown-searcheble .selected-item i {
    margin-left: 6px;
    cursor: pointer;
    color: #ff4d4d;
}

.driver-mngmnt-multiselect-dropdown-searcheble .dropdown-options {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    display: none;
}

.driver-mngmnt-multiselect-dropdown-searcheble.active .dropdown-options {
    display: block;
}

.driver-mngmnt-multiselect-dropdown-searcheble .dropdown-options li {
    padding: 8px 10px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
    color: black;
}

.driver-mngmnt-multiselect-dropdown-searcheble .dropdown-options li:hover {
    background: rgb(243, 243, 243);
}

.driver-mngmnt-multiselect-dropdown-searcheble .dropdown-options li.active {
    background: #1F9254;
    color: #fff;
}

.driver-mngmnt-multiselect-dropdown-searcheble .dropdown-icon {
    position: absolute;
    right: 10px;
    top: 0;
    color: #999;
    transition: transform 0.3s ease;
    bottom: 0;
    margin: auto;
    height: fit-content;
}

.driver-mngmnt-multiselect-dropdown-searcheble.active .dropdown-icon {
    transform: rotate(180deg);
}

.highlight {
    color: #00b7ff;
    font-weight: 500;
}

/* ==== Drag document file Start ==== */

.drag-your-document-uploader-main {
    width: 100%;
    padding: 24px;
    border: 2px dashed #033F63;
    border-radius: 6px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
    margin-bottom: 16px;
}

.drag-your-document-uploader-main:hover {
    background: #f0f8ff;
    border-color: #0056b3;
}

.drag-your-document-uploader-main i {
    font-size: 26px;
    color: #0a3552;
    margin-bottom: 8px;
}

.drag-your-document-uploader-main p {
    margin: 0;
    font-size: 15px;
    color: #333;
}

.drag-your-document-uploader-main p span {
    color: #033F63;
    font-family: 'Poppins medium';
    cursor: pointer;
}

.drag-your-document-uploader-main small {
    color: #AFAFAF;
    font-size: 13px;
    margin-top: 8px;
}

.drag-your-document-uploader-main input[type="file"] {
    display: none;
}

.drag-your-document-uploader-main.dragover {
    background: #e9f5ff;
    border-color: #0077cc;
}

.drag-your-document-uploader-main img {
    margin-bottom: 16px;
}

.document-upload-details-section-main {
    width: 100%;
    margin: auto;
}

.document-upload-details-section-main {
    background: #fff;
    margin-bottom: 48px;
    width: 100%;
}

.document-upload-details-section-main .drag-your-document-table-main {
    width: 100%;
    margin: auto;
    border-collapse: collapse;
    background: #fff;
}

.document-upload-details-section-main .drag-your-document-table-main table {
    width: 100%;
    border-collapse: collapse;
}

.document-upload-details-section-main .drag-your-document-table-main thead th {
    text-align: left;
    font-size: 14px;
    font-family: 'Poppins sm-bold';
    color: black;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 16px;
}

.document-upload-details-section-main .drag-your-document-table-main tbody td {
    font-size: 15px;
    color: black;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
    font-family: 'Inter 18pt regular';
}

.document-upload-details-section-main .drag-your-document-table-main .action-icons {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 16px;
}

.save-and-cancel-button-main {
    width: fit-content;
    display: flex;
    gap: 17px;
    align-items: center;
}

.save-and-cancel-button-main button {
    font-size: 16px;
    background-color: transparent;
    border-radius: 10px;
    width: fit-content;
    min-width: 120px;
    padding: 11px;
    transition: 0.3s;
}

.save-and-cancel-button-main button.save {
    border: 1px solid #1F9254;
    background-color: #1F9254;
    color: white;
}

.save-and-cancel-button-main button.save:hover {
    background-color: transparent;
    color: #1F9254;
}

.save-and-cancel-button-main button.cancel {
    border: 1px solid #E2DEFF;
    color: #7C7B7F;
}

.save-and-cancel-button-main button.cancel:hover {
    background-color: #FDFDFD;
    border-color: #1F9254;
    color: #1F9254;
}

/* ==== Drag document file End ==== */

/* ==== Driver Managemnt Popup Start ==== */

.driver-managemnt-popup-main {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #00000060;
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    z-index: 9;
    display: none;
}

.support-add-new-tiket-main {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #00000060;
    backdrop-filter: blur(1px);
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    z-index: 9;
    display: none;
}

.support-add-new-tiket-main.active {
    display: block;
}

.support-add-new-tiket-main .login-screen-main-inside-popup {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
}

.driver-managemnt-popup-main .login-screen-main-inside-popup {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
}

.driver-managemnt-popup-main.active {
    display: block;
}

/* ==== Driver Managemnt Popup End ==== */

/* ==== driver management edit page Start ==== */

.driver-management-edit-pg .driver-management-input-section-inside input {
    background-color: #F5F9FF;
}

.driver-management-edit-pg .dropodwn-driver-mngmnt-add-new-page-one .dropdown-selected {
    background-color: #F5F9FF;
}

.driver-status-edit-page {
    width: 100%;
}

/* ==== driver management edit page End ==== */

/* ==== driver management view page Start ==== */

.driver-management-view-pg .dropodwn-driver-mngmnt-add-new-page-one .custom-dropdown.active .dropdown-options {
    display: none;
}

.driver-management-view-pg .dropodwn-driver-mngmnt-add-new-page-one .custom-dropdown.active .dropdown-selected i {
    transform: rotate(0deg);
}

/* ==== driver management view page End ==== */

/* ==== driver management delete popup Start ==== */

.driver-managemnt-delete-popup-main {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #00000060;
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    z-index: 9;
    display: none;
}

.driver-managemnt-delete-popup-main.active {
    display: block;
}

.driver-managemnt-delete-popup-main .login-screen-main-inside-popup {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
}

.driver-managemnt-delete-popup-main .account-created-icon-main {
    background: linear-gradient(90deg, rgb(235 87 87 / 20%) 0%, rgb(199 63 63 / 20%) 100%);
}

/* ==== driver management delete popup End ==== */

/* ==== driver payouts page Start ==== */

.driver-payouts-page-main .verification-status-tbl a.disable {
    background-color: #A9A9A9;
}




.customer-management-radio-btn-active-and-in-active .custom-radio {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #2c2c2c;
    gap: 8px;
    font-weight: 500;
}

.customer-management-radio-btn-active-and-in-active .custom-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.customer-management-radio-btn-active-and-in-active .radio-circle {
    height: 20px;
    width: 20px;
    border: 2px solid #343a40;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    transition: all 0.2s ease-in-out;
}

.customer-management-radio-btn-active-and-in-active .custom-radio input:checked+.radio-circle::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    width: 10px;
    height: 10px;
    background-color: #46A56C;
    border-radius: 50%;
}

.customer-management-radio-btn-active-and-in-active .custom-radio:hover .radio-circle {
    border-color: #0d6efd;
}

.customer-management-radio-btn-active-and-in-active .custom-radio input:checked+.radio-circle {
    border-color: #46A56C;
}

.customer-management-radio-btn-active-and-in-active .label-text {
    margin-left: 2px;
    color: black;
    font-size: 16px;
    font-family: 'Poppins regular';
}

.customer-management-radio-btn-active-and-in-active {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.customer-management-radio-btn-active-and-in-active label {
    width: fit-content;
}

.customer-management-page-edit-section .driver-management-input-section-inside input {
    background-color: #FDFDFD;
}

/* ==== driver payouts page End ==== */

/* ==== Setting Dropdown menu Start ==== */

.setting-dropdown {
    position: relative;
}

.setting-dropdown a i.fa-angle-down {
    margin-left: auto;
}

.setting-dropdown-submenu-main {
    position: absolute;
    background-color: white;
    width: 224px;
    box-shadow: 0px 2px 8px #0000004a;
    border-radius: 4px;
    border: 1px solid #CBD5E1;
    top: 48px;
    display: none;
}

.setting-dropdown.active .setting-dropdown-submenu-main {
    display: block;
}

.setting-dropdown.active a i.fa-angle-down {
    transform: rotate(180deg);
    transition: 0.2s;
}

.setting-dropdown-submenu-main ul {
    padding: 0px !important;
    padding-right: 0px !important;
    margin: 0px;
    height: fit-content !important;
    gap: 0px !important;
}

.setting-dropdown-submenu-main ul li {
    list-style-type: none;
}

.setting-dropdown-submenu-main ul li a {
    font-size: 14px;
    font-family: 'Inter 18pt medium';
    color: #17412C;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    border-radius: 4px;
    transition: 0.3s;
}

.setting-dropdown-submenu-main ul li a:hover {
    background-color: #1F9254;
    color: white;
}

.setting-dropdown-submenu-main ul li a:hover img {
    filter: brightness(0) saturate(100%) invert(99%) sepia(10%) saturate(101%) hue-rotate(254deg) brightness(118%) contrast(100%);
}

.setting-dropdown-submenu-main ul li a img {
    width: 20px;
    height: 20px;
}

.update-date-and-time-dtls {
    color: #228D29;
}

/* ==== table pending and close dropwodn Start ==== */

.supports-tbl-dpdn .status-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 120px;
}

.supports-tbl-dpdn ul.status-menu {
    padding: 0px;
    margin: 0px;
}

.supports-tbl-dpdn .status-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.supports-tbl-dpdn .status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f4c542;
}

.supports-tbl-dpdn .status-text {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

/* ===== Dropdown Menu ===== */
.supports-tbl-dpdn .status-menu {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-top: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 10;
}

.supports-tbl-dpdn .status-menu li {
    list-style: none;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}

.supports-tbl-dpdn .status-menu li:hover {
    background: #f2f2f2;
}

.supports-tbl-dpdn .status-menu li::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f4c542;
}

.supports-tbl-dpdn .status-menu li[data-status="Close"]::before {
    background: #28a745;
}

.supports-tbl-dpdn .status-dropdown.active .status-menu {
    display: block;
}

/* ==== table pending and close dropwodn End ==== */

/* ==== Setting Dropdown menu End ==== */

/* ==== Setting Page Start ==== */

.settings-servies-type-page-main {
    width: 100%;
    margin: auto;
}

.setting-service-type-heading-and-add-btn-main {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 16px;
}

.setting-service-type-heading-and-add-btn-main h2 {
    font-size: 24px;
    color: black;
    font-family: 'Poppins medium';
}

.setting-services-type-manage-sectoin-main .form-check .form-check-label {
    font-size: 16px;
    color: black;
    font-family: 'Poppins medium';
}

.setting-services-type-manage-sectoin-main .form-check {
    margin-bottom: 16px;
}

.setting-services-type-manage-sectoin-main .form-check:nth-last-child(1) {
    margin-bottom: 0px;
}

.setting-services-type-manage-sectoin-main .form-check-input {
    box-shadow: unset;
    border-color: #228D29;
    margin-right: 15px;
}

.setting-services-type-manage-sectoin-main .form-check-input:checked {
    background-color: #228D29;
    border-color: #228D29;
}

.percentage-setting-page-table-section {
    margin-top: 16px;
}

/* ==== Setting Page End ==== */

/* ==== my profile page Start ==== */

.my-profile-page-main {
    width: 100%;
    margin: auto;
}

.my-profile-image-section-main {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 100px;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 32px;
}

.my-profile-image-section-main img {
    width: 100%;
    height: 100%;
    border-radius: 100px;
    object-fit: cover;
    transition: 0.3s ease;
}

.my-profile-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    opacity: 0;
    transition: 0.3s ease;
}

.my-profile-image-overlay img {
    width: 32px;
    height: 32px;
    border-radius: unset;
}

.my-profile-image-section-main:hover .my-profile-image-overlay {
    opacity: 1;
}

/* ==== my profile page End ==== */

/* ==== notification page Start ==== */

.notification-list-page {
    width: 100%;
    margin: auto;
    height: 75vh;
    overflow: auto;
    padding-right: 10px;
    scrollbar-color: #46A56C white;
    scrollbar-width: thin;
}

.notification-list-main-row {
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #DDDDDD;
}

.notification-list-main-row:nth-last-child(1) {
    border-bottom: unset;
}

.notification-list-main-row a {
    display: flex;
    align-items: center;
    gap: 12px;
}

.noti-profile-img {
    width: 48px;
    min-width: 48px;
    height: 48px;
}

.noti-profile-img img {
    width: 100%;
    height: 100%;
    border-radius: 100px;
}

.notification-msg-tital-and-time {
    width: fit-content;
}

.notification-msg-tital-and-time h5 {
    color: black;
    font-size: 14px;
    font-family: 'Poppins sm-bold';
    margin-bottom: 4px;
}

.notification-msg-tital-and-time p {
    font-size: 13px;
    color: #717171;
}

.notification-list-main-row.active {
    background-color: #F3FDFF;
}

.notification-list-main-row.active .notification-msg-tital-and-time h5,
.notification-list-main-row.active .notification-msg-tital-and-time p {
    color: #737373;
}

.notificaton-page-filer-ane-send-noti-btn {
    width: fit-content;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* ==== Notification filter start ==== */

.noti-filter-dropdown {
    position: relative;
    display: inline-block;
}

.noti-filter-selected {
    background: #F9FBFF;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 180px;
    color: #6c757d;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0px 1px 2px rgb(16 24 40 / 17%);
}

.noti-filter-selected:hover {
    background: #eef0f4;
}

.noti-filter-menu {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #e2e3e8;
    border-radius: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: none;
    z-index: 10;
}

.noti-filter-menu li {
    padding: 8px 14px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: 0.2s;
}

.noti-filter-menu li:hover {
    background: #e6f4ea;
    color: #166534;
}

.noti-filter-dropdown.active .noti-filter-menu {
    display: block;
}

.noti-filter-dropdown.active .fa-angle-down {
    transform: rotate(180deg);
    transition: 0.3s;
}

/* ==== Notification filter start ==== */

/* ==== notification page End ==== */

/* ==== time picker start ==== */

.time-select-container {
    position: relative;
}

.time-select-input {
    width: 180px;
    padding: 10px 15px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    background: #fff;
    transition: 0.3s;
}

.time-select-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.3);
}

.time-select-popup {
    position: absolute;
    top: 45px;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 100;
    padding: 10px;
}

.time-select-popup.active {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.time-select-column {
    width: 60px;
    max-height: 160px;
    overflow-y: auto;
    border-radius: 8px;
    background: #f8f9fb;
    text-align: center;
    padding: 5px 0;
}

.time-select-column::-webkit-scrollbar {
    width: 4px;
}

.time-select-column::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.time-select-option {
    padding: 8px 0;
    font-size: 14px;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.2s;
}

.time-select-option:hover,
.time-select-option.active {
    background: #007bff;
    color: #fff;
}

.time-select-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #999;
}

/* ==== time picker End ==== */

/* ==== date picker Start ==== */

.date-select-container {
    position: relative;
}

.date-select-input {
    width: 180px;
    padding: 10px 15px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    background: #fff;
    transition: 0.3s;
}

.date-select-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.3);
}

.date-select-popup {
    position: absolute;
    top: 45px;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 100;
    padding: 10px;
    width: 250px;
}

.date-select-popup.active {
    display: block;
}

.date-select-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.date-select-header button {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #007bff;
}

.date-select-header span {
    font-weight: 600;
}

.date-select-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    gap: 4px;
}

.date-select-day {
    padding: 8px 0;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    transition: 0.2s;
}

.date-select-day:hover {
    background: #e9f2ff;
}

.date-select-day.active {
    background: #007bff;
    color: #fff;
}

.date-select-day.disabled {
    color: #ccc;
    cursor: default;
}

.date-select-weekday {
    font-weight: 600;
    color: #666;
}

/* ==== date picker End ==== */

/* ==== HTML Editor Start ==== */

.notification-msg-editr-main {
    width: 100%;
    margin-bottom: 24px;
}

.html-editor-container {
    width: 100%;
    border-radius: 8px;
}

/* Toolbar */
.html-editor-toolbar {
    width: fit-content;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px;
    border-bottom: 1px solid #eee;
    background: #F9FBFF;
}

.html-editor-toolbar button,
.html-editor-toolbar select {
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    font-size: 16px;
    padding: 6px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.html-editor-toolbar select {
    font-size: 14px;
    color: #333;
    outline: none;
}

/* Editor Area */
.html-editor-content {
    min-height: 110px;
    background: #F9FBFF;
    padding: 14px;
    border-radius: 0 0 8px 8px;
    outline: none;
    overflow-y: auto;
    color: #333;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid #CBD5E1;
}

.noti-editor-color-picker {
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    cursor: pointer;
    margin-left: 6px;
    padding: 0;
    border-radius: 4px;
}

/* ==== HTML Editor End ==== */

/* ==== logout popup Start ==== */

.logout-popup-main {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #00000060;
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    z-index: 9;
    display: none;
}

.logout-popup-main.open {
    display: block;
}

.logout-popup-main .login-screen-main-inside-popup.logout-popup-inside-main-sctn {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    height: fit-content;
}

.logout-popup-inside-main-sctn .account-created-icon-main {
    background: linear-gradient(90deg, rgb(235 87 87 / 20%) 0%, rgb(199 63 63 / 20%) 100%);
}

.logout-popup-inside-main-sctn .account-created-icon-main img {
    width: 90px;
}

.logout-popup-button {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

    .logout-popup-button a {
        width: 250px;
        color: white;
        background-color: #46A56C;
        border: 1px solid #46A56C;
        border-radius: 10px;
        font-size: 16px;
        font-family: 'Inter 18pt sm-bold';
        padding: 15px;
        transition: 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.logout-popup-button a.yes:hover {
    background-color: transparent;
    color: #46A56C;
}

.logout-popup-button a.cancel {
    border: 1px solid #d24646;
    background-color: transparent;
    color: #d24646;
}

.logout-popup-button a.cancel:hover {
    background-color: #f7dbdb;
}

/* ==== logout popup End ==== */

/* ==== date and time both popup Start ==== */

.date-and-time-both {
    position: relative;
    width: 100%;
}

.date-and-time-both input {
    width: 100%;
    cursor: pointer;
    outline: none;
    transition: 0.3s;
}

.date-and-time-both .popup-modern {
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    padding: 15px;
    z-index: 20;
    display: none;
    animation: fadeIn 0.25s ease;
}

.date-and-time-both .popup-modern.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.date-and-time-both .time-step,
.date-and-time-both .date-step {
    display: none;
}

.date-and-time-both .time-step.active,
.date-and-time-both .date-step.active {
    display: block;
}

.date-and-time-both .popup-modern h3 {
    text-align: center;
    margin-bottom: 10px;
    color: #333;
}

.date-and-time-both .time-inputs {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.date-and-time-both select {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    outline: none;
    cursor: pointer;
}

.date-and-time-both .calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    text-align: center;
    margin-top: 10px;
}

.date-and-time-both .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.date-and-time-both .calendar-header button {
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    color: #007bff;
}

.date-and-time-both .calendar-header h4 {
    margin: 5px 0;
    color: #333;
}

.date-and-time-both .day {
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

.date-and-time-both .day:hover {
    background: #007bff;
    color: #fff;
}

.date-and-time-both .day.selected {
    background: #007bff;
    color: #fff;
    font-weight: bold;
}

.date-and-time-both .btn-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.date-and-time-both button.action-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(135deg, #007bff, #00bfff);
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

.date-and-time-both button.action-btn:hover {
    background: linear-gradient(135deg, #0065d1, #00a6e0);
}

.date-and-time-both button.btn-back {
    background: linear-gradient(135deg, #999, #bbb);
}

.date-and-time-both button.btn-back:hover {
    background: linear-gradient(135deg, #777, #999);
}

.date-and-time-both .day-header {
    font-weight: 600;
    color: #555;
}

/* ==== date and time both popup End ==== */

/* ==== dashboard page start ==== */

.dashboard-driver-mn {
    width: fit-content;
}

.dashboard-driver-mn.filter-dropdown-main {
    position: relative;
    display: inline-block;
}

.dashboard-driver-mn .filter-dropdown-btn {
    background: #e4f1ea;
    color: black;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-family: 'Poppins medium';
    font-size: 16px;
    transition: 0.3s;
}

.dashboard-driver-mn .filter-dropdown-btn i {
    font-size: 18px;
    color: #17412C;
}

.dashboard-driver-mn .arrow-icon {
    transition: transform 0.25s ease;
}

.dashboard-driver-mn.filter-dropdown-main.active .arrow-icon {
    transform: rotate(180deg);
}

.dashboard-driver-mn .filter-dropdown-list {
    position: absolute;
    top: 110%;
    left: 0;
    background: #fff;
    padding: 6px 0;
    width: 170px;
    border-radius: 6px;
    display: none;
    list-style: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.dashboard-driver-mn .filter-dropdown-list li {
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}

.dashboard-driver-mn .filter-dropdown-list li:hover {
    background: #E6E6E6;
}

.dashboard-driver-mn .filter-dropdown-list li.active {
    background: #1A8E46;
    color: #fff;
}

.dashboard-driver-mn.filter-dropdown-main.active .filter-dropdown-list {
    display: block;
}

.dashboard-over-view-graph-box-one-main {
    width: 100%;
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.dashboard-over-view-graph-box-inside-main {
    width: calc(33% - 12px);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    box-shadow: 0px 2px 6px #0d0a2c29;
}

.dashboard-over-view-graph-box-inside-main.active-driver-box {
    background: linear-gradient(90deg, rgba(250, 245, 255, 1) 0%, rgba(243, 232, 255, 1) 100%);
}

.dashboard-over-view-graph-box-inside-main.active-customer-box {
    background: linear-gradient(90deg, rgba(240, 253, 244, 1) 0%, rgba(220, 252, 231, 1) 100%);
}

.dashboard-over-view-graph-box-inside-main.active-towing-box {
    background: linear-gradient(90deg, rgba(255, 247, 237, 1) 0%, rgba(255, 237, 213, 1) 100%);
}

.dashboard-graph-mini-left-box {
    width: fit-content;
}

.dashboard-graph-mini-left-box p {
    color: #9291A5;
    font-size: 14px;
    margin-bottom: 4px;
    font-family: 'Inter 18pt light';
}

.dashboard-graph-mini-left-box h5 {
    color: #1E1B39;
    font-size: 18px;
    font-family: 'Poppins bold';
    line-height: 24px;
    margin-bottom: 24px;
}

.dashboard-graph-mini-left-box h2 {
    font-size: 44px;
    line-height: 52px;
    color: #1E1B39;
    font-family: 'Poppins bold';
}

.dashboard-mini-graph-mn-box-one {
    width: fit-content;
}

.active-driver {
    width: 100%;
    max-width: 142px;
    height: 100px;
}

.active-driver canvas {
    width: 100% !important;
    height: 100% !important;
}

.dashboard-total-earning-driver-and-admin-box {
    width: 100%;
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.dashboard-total-earning-driver-and-admin-box-inside-main {
    width: calc(50% - 12px);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0px 2px 6px #0d0a2c29;
}

.dashboard-ttl-erng-box-head-mn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.dashboard-ttl-erng-box-head-mn h2 {
    line-height: 48px;
    font-size: 32px;
    color: #1E1B39;
    font-family: 'Poppins bold';
}

.dashboard-ttl-erng-box-head-mn .dashboard-graph-mini-left-box p {
    font-size: 18px;
}

.dashboard-ttl-erng-box-head-mn .dashboard-graph-mini-left-box h5 {
    margin-bottom: 0px;
    font-size: 22px;
}


.total-driver-rarnings-graph-box-main {
    width: 100%;
    height: 310px;
    position: relative;
    overflow: hidden;
}

.total-driver-rarnings-graph-box-main canvas {
    width: 100% !important;
    height: 100% !important;
}

.dsbrd-tital-main-heading-rcntordr-box {
    margin-bottom: 20px;
}

.dsbrd-tital-main-heading-rcntordr-box h4 {
    color: #2B2B2B;
    font-family: 'Inter 18pt sm-bold';
    font-size: 24px;
}

/* ==== dashboard page end ==== */

.driver-information-and-order-history-tab-main {
    width: 100%;
    margin: auto;
}

.driver-information-and-order-history-tab-main {
    width: 100%;
    background: #ffffff;
}

/* Tabs Header */
.driver-information-and-order-history-tab-main .tab-header {
    display: flex;
    margin-bottom: 24px;
}

/* Tab Buttons */
.driver-information-and-order-history-tab-main .tab-btn {
    padding: 8px 20px;
    border: none;
    cursor: pointer;
    color: #1C1C1C;
    transition: all 0.3s ease;
    width: 50%;
    background-color: #E8EAED;
    font-family: 'Poppins sm-bold';
}

/* Active Tab */
.driver-information-and-order-history-tab-main .tab-btn.active {
    color: #ffffff;
    background-color: #46A56C;
}

/* Tab Content */
.driver-information-and-order-history-tab-main .tab-content {
    padding: 0px;
}

/* Tab Pane */
.driver-information-and-order-history-tab-main .tab-pane {
    display: none;
}

/* Active Pane */
.driver-information-and-order-history-tab-main .tab-pane.active {
    display: block;
}

.driver-information-tab-one-main-box {
    width: 100%;
    margin: auto;
}

.driver-information-verification-and-document-box {
    width: 100%;
    padding: 20px;
    border: 1px solid #46A56C;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.driver-information-verification-box-one {
    display: flex;
    align-items: center;
    gap: 16px;
}

.driver-information-verification-box-one h5 {
    color: #212529;
    font-size: 20px;
    font-family: 'Inter 18pt sm-bold';
}

.driver-information-personal-information-box {
    width: 100%;
    padding: 20px;
    border: 1px solid #46A56C;
    border-radius: 8px;
    margin-bottom: 24px;
}

.driver-information-personal-information-box .driver-information-verification-box-one {
    margin-bottom: 16px;
}

.driver-information-personal-information-box-one {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.drvr-info-persnl-info-img {
    width: 160px;
    min-width: 160px;
    height: 166px;
}

.drvr-info-persnl-info-img img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.drvr-info-persnl-detailsbox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.drvr-info-persnl-detailsbox .driver-management-input-section-inside {
    width: 32%;
}

.dt-pkr {
    position: relative;
}

.dt-icon-nw {
    position: absolute;
    top: 41px;
    right: 20px;
    margin: auto;
    height: fit-content;
    background: #F5F9FF;
}

.driver-management-input-section-inside .driver-information-verification-box-one .fa-star::before {
    color: #FFCB11;
    font-size: 20px;
}

.driver-management-input-section-inside .driver-information-verification-box-one i {
    color: #212529;
    font-size: 14px;
}

.driver-info-company-detils-flex-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.driver-mngmnt-pera-cmpny-detals p {
    color: #212529;
    font-size: 16px;
    font-family: 'Inter 18pt regular';
}

.driver-information-personal-information-box .accordion-item {
    border: unset;
}

.driver-information-personal-information-box .accordion-button {
    padding: 0px;
    color: #212529;
    font-size: 20px;
    font-family: 'Inter 18pt sm-bold';
    border: unset;
    background: unset;
    box-shadow: unset;
}

.driver-information-personal-information-box .accordion-body {
    margin-top: 16px;
    padding: 0px;
}

.driver-information-personal-information-box .accordion-button::after {
    filter: brightness(0) saturate(100%) invert(11%) sepia(14%) saturate(535%) hue-rotate(169deg) brightness(94%) contrast(91%);
}

.driver-documnt-ppr-upload-section {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.driver-documnt-ppr-upload-section .driver-management-input-section-inside {
    width: 49%;
}

.drvr-pg-insu-ppr-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.insu-icn-text-box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.insu-icn-text-box a {
    color: #17412C;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    font-size: 16px;
    font-family: 'Inter 18pt regular';
    text-decoration: underline;
}

.insu-dnd-icn-mn img {
    cursor: pointer;
}

.driver-information-personal-information-box .driver-mngmnt-truck-photo-uploader-section {
    width: 100%;
    margin-bottom: 0px;
}

.driver-information-personal-information-box .driver-management-company-details-section {
    margin-bottom: 0px;
}

.driver-information-personal-information-box .driver-mngmnt-truck-photo-uploader-section {
    padding: 0px;
    border: unset;
}

.driver-information-personal-information-box .driver-mngmnt-truck-photo-uploader-section .upload-box {
    width: 240px;
    height: 200px;
}

.driver-information-personal-information-box .driver-mngmnt-truck-photo-uploader-section .image-card {
    position: relative;
    width: 240px;
    height: 200px;
}

.if-driver-reject-section-doc-box {
    width: 100%;
    margin-bottom: 24px;
}

.if-driver-reject-section-doc-box h6 {
    color: #2B2B2B;
    font-size: 16px;
    margin-bottom: 6px;
}

.if-driver-section-red-box {
    background-color: #ffe1e2;
    padding: 10px;
    border-radius: 8px;
}

.if-driver-section-red-box p {
    color: #2B2B2B;
    font-size: 14px;
}

.driver-mngmnt-pera-cmpny-detals {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.driver-mngmnt-pera-cmpny-detals .customer-management-radio-btn-active-and-in-active {
    flex-wrap: wrap;
}

.driver-add-another-vehicle-tital-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.driver-add-another-vehicle-tital-box a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    height: fit-content;
    color: #46A56C;
    font-size: 16px;
    font-family: 'Inter 18pt medium';
}

.insu-dnd-icn-mn {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dpdn-ttl-left h4 {
    color: #212529;
    font-size: 28px;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 0px !important;
    margin-top: 20px;
    border: 1px solid #E8EAED;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #46A56C !important;
    padding: 6px 12px !important;
    margin: 0px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #46A56C !important;
    border-color: #46A56C !important;
    margin: 0px 0px 0px 0px;
}

#DataTables_Table_0_length {
    display: none;
}

.driver-information-and-order-history-tab-main .deshboard-table-main-section {
    padding: 0px;
    background-color: transparent;
    border-radius: unset;
    box-shadow: unset;
}

/* ==== View Driver Order page start ====  */

.view-driver-order-status-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.view-driver-order-heading-and-pera-box h5 {
    color: #212529;
    font-size: 32px;
    font-family: 'Inter 18pt medium';
    line-height: 38px;
}

.view-driver-order-heading-and-pera-box p {
    color: #9CA3AF;
    font-size: 16px;
    line-height: 24px;
    font-family: 'Inter 18pt regular';
}

.view-driver-order-status-box-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.view-driver-order-status-box-main h6 {
    color: #212529;
    font-size: 20px;
    font-family: 'Inter 18pt sm-bold';
}

.view-driver-order-history-traking-and-profile-basic-details {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.view-drvr-ordr-hstry-trkng-prfl-box-one {
    width: 49%;
    border: 1px solid #46A56C;
    border-radius: 8px;
    padding: 16px;
}

.view-prfl-box-image-and-name-box-one {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.view-profile-icon-img-usr-box {
    width: 46px;
    min-width: 46px;
    height: 46px;
}

.view-profile-icon-img-usr-box img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.view-profile-heading-tital-and-peragraph {
    width: fit-content;
}

.view-profile-heading-tital-and-peragraph h6 {
    color: #00030F;
    font-size: 20px;
    font-family: 'Inter 18pt regular';
}

.view-profile-heading-tital-and-peragraph p {
    font-family: 'Inter 18pt medium';
    font-size: 14px;
    color: #9CA3AF;
}

.view-pickup-items-and-icon {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.view-pickup-items-icn {
    width: 20px;
    min-width: 20px;
    height: 20px;
}

.view-pickup-dtls-pera-mn p {
    font-family: 'Inter 18pt medium';
    font-size: 14px;
    color: #9CA3AF;
}

.view-pickup-dtls-pera-mn p:nth-last-child(1) {
    color: #2B2B2B;
    font-family: 'Inter 18pt regular';
}

.view-order-time-and-loctn-box {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.view-order-time-and-loctn-box .view-pickup-dtls-pera-mn p {
    color: #9CA3AF;
}

.payment-details-small-heading-main {
    margin-bottom: 10px;
}

.payment-details-small-heading-main p {
    color: #333333;
    font-size: 20px;
    font-family: 'Inter 18pt regular';
}

.pyment-details-history-for-customer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pyment-details-history-for-customer p {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: #1C1C1C;
    font-size: 16px;
    font-family: 'Inter 18pt regular';
}

.view-fuly-order-details-for-driver-vehicle-details-box {
    width: 100%;
    border: 1px solid #46A56C;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.view-fuly-order-details-for-driver-vehicle-details-box .payment-details-small-heading-main p {
    font-family: 'Inter 18pt medium';
}

.view-fuly-order-details-for-driver-vehicle-details-box .pyment-details-history-for-customer {
    margin-bottom: 16px;
}

.view-fuly-order-details-for-driver-vehicle-details-box .driver-mngmnt-truck-photo-uploader-section {
    padding: 0px;
    border: unset;
    margin-bottom: 0px;
}

.view-fuly-order-details-for-driver-vehicle-details-box .driver-mngmnt-truck-photo-uploader-section .upload-box {
    width: 240px;
    height: 200px;
}

.view-fuly-order-details-for-driver-vehicle-details-box .driver-mngmnt-truck-photo-uploader-section .image-card {
    position: relative;
    width: 240px;
    height: 200px;
}

.view-fuly-order-details-for-driver-vehicle-details-box .driver-mngmnt-truck-photo-uploader-section {
    width: 100%;
}

.if-driver-section-red-box.gray-box {
    background-color: #E8EAED;
}

.if-driver-section-red-box.gray-box p {
    color: black;
    font-family: 'Inter 18pt medium';
}

.view-order-completed-with-reviewed {
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #46A56C;
}

.view-ordr-cmplt-star-sec-box {
    margin-bottom: 8px;
    display: flex;
    gap: 2px;
    color: #FFCB11;
    font-size: 18px;
}

.driver-info-inside-uploader {
    width: 100%;
    height: 100%;
}

.driver-info-inside-uploader .profile-uploader {
    width: 160px;
    min-width: 160px;
    height: 166px;
    border: 1px solid #cfd4dc;
    border-radius: 0%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    background: #f9fafb;
}

.driver-info-inside-uploader .profile-uploader img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.driver-info-inside-uploader .upload-placeholder {
    text-align: center;
    color: #9aa3af;
    font-size: 14px;
    pointer-events: none;
    width: 100px;
    height: 100px;
    border: 1px dashed #9CA3AF;
    border-radius: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.driver-info-inside-uploader .upload-placeholder .icon {
    font-size: 32px;
    display: block;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.driver-info-inside-uploader .upload-placeholder p {
    color: #9CA3AF;
    font-size: 12px;
}

.upload-placeholder .icon img {
    display: block;
}

.driver-info-inside-uploader .change-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
}

.driver-info-inside-uploader .profile-uploader.has-image:hover .change-overlay {
    opacity: 1;
}

.driver-info-inside-uploader input[type="file"] {
    display: none;
}

.driver-managemnt-delete-popup-main .logout-popup-button a {
    width: 48%;
}

/* ==== View Driver Order page end ====  */

/* ==== rejection popup start ==== */

.reject-request-popup-box-main {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #00000060;
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    z-index: 9;
    display: none;
}

.reject-request-popup-box-main.active {
    display: block;
}

.reject-request-popup-box-inside-main {
    width: 90%;
    max-width: 670px;
    padding: 24px;
    border-radius: 18px;
    background-color: white;
    animation: zoomIn 0.3s ease forwards;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    height: fit-content;
}

.reject-req-tital-main {
    margin: auto;
    margin-bottom: 12px;
    width: 100%;
}

.reject-req-tital-main h5 {
    color: #212529;
    font-size: 20px;
    font-family: 'Inter 18pt medium';
    text-align: center;
}

.reject-reason-textaria-box {
    width: 100%;
    margin: auto;
    margin-bottom: 18px;
}

.reject-reason-textaria-box label {
    color: #212529;
    font-size: 16px;
    margin-bottom: 10px;
    font-family: 'Inter 18pt regular';
    width: 100%;
}

.reject-reason-textaria-box label span {
    color: #FF383C;
}

.reject-reason-textaria-box textarea {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #D8DADC;
    padding: 14px;
    height: 220px;
    resize: none;
    color: #212529;
}

.reject-reason-textaria-box textarea::placeholder {
    color: #212529;
    font-size: 16px;
    font-family: 'Inter 18pt regular';
}

.reject-request-popup-box-main .logout-popup-button a {
    width: 48%;
}

.reject-request-popup-box-main .logout-popup-button a.cancel {
    color: #46A56C;
    border-color: #46A56C;
}

.reject-request-popup-box-main .logout-popup-button a.cancel:hover {
    background-color: #46a56c1f;
}

.order-mngmnt-page-box-one .view-drvr-ordr-hstry-trkng-prfl-box-one {
    width: 100%;
}

.status-employe-clm {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.status-employe-clm label {
    width: fit-content;
}

.view-role-page-tital-inside-main {
    margin-bottom: 15px;
}

.view-role-page-tital-inside-main h5 {
    font-size: 20px;
    color: black;
    font-family: 'Inter 18pt sm-bold';
}

.green-clr {
    color: #1F9254;
    font-size: 12px;
    font-family: 'Inter 18pt medium';
}

.off-white {
    font-size: 12px;
    color: #9A9EA6;
    font-family: 'Inter 18pt medium';
}

/* ==== rejection popup end ==== */

/* ==== Privacy Policy Updated popup start ==== */

.privacy-policy-updated-popup-main {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #00000060;
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    z-index: 9;
    display: none;
}

.privacy-policy-updated-popup-main.active {
    display: block;
}

.privacy-policy-updated-popup-main .login-screen-main-inside-popup {
    width: 90%;
    max-width: 670px;
    padding: 24px;
    border-radius: 18px;
    background-color: white;
    animation: zoomIn 0.3s ease forwards;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    height: fit-content;
}

.setting-page-inside-heading h1 {
    font-size: 24px;
}

.add-towing-service-type-pg-box .driver-management-input-section-inside {
    width: 100%;
}

/* ==== Privacy Policy Updated popup End ==== */

.password-field {
    position: relative;
}

.password-wrapper .password-field input {
    width: 100%;
    padding-right: 40px;
    /* icon mate space */
}

.password-wrapper .password-field i {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
}

.password-wrapper .password-field i:hover {
    color: #000;
}

.driver-added-toast-popup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background-color: white;
    padding: 10px;
    border-radius: 8px;
    width: 90%;
    max-width: 480px;
    position: fixed;
    top: 8%;
    left: 0px;
    right: 0px;
    margin: auto;
    box-shadow: 0px 1px 10px #0000001f;
    z-index: 9;
    display: none;

}

.driver-added-toast-popup p {
    color: #1F1204;
    font-size: 14px;
    font-family: 'Inter 18pt medium';
}

.driver-added-toast-popup a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: fit-content;
}