body {
    /* font-family:  Nunito,sans-serif !important; */
    background-color: #fff;
}
body.enlarged {
    min-height: unset;
}
.login-box {
    /* margin: 13.5% auto; */
    display: grid;
    place-content: center;
}
.custom-file-label::after {
    background-color: #38414a;
    color: #fff;
}
.dataTables_filter {
    float: right;
}
.navbar-custom {
    background-color: #ffffff;
    padding-top: 24px;
    height: unset;
    box-shadow: unset;
}
.left-side-menu {
    background-color: #F9EBF6;
}
.logo .logo-lg-text-light {
    font-size: 17px;
}
.logo-sm-text-dark {
    color: #fff;
}
.btn-primary {
    background-color: #9338AB;
    border-color: #9338AB;
}
.btn-primary:hover {
    background-color: #9338AB;
    border-color: #9338AB;
}
.dataTables_length {
    float: left;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #9338AB;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #9338AB;
    border-color: #9338AB;
}

.object-cover {
    object-fit: cover;
}
.object-scale-down {
    object-fit: scale-down;
}

.btn-outline-blue {
    color: #9338AB;
    border-color: #9338AB;
}
.btn-outline-blue:hover {
    color: #fff;
    background-color: #9338AB;
    border-color: #9338AB;
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #9338AB;
    border-color: #9338AB;
}

.custom-control-input:checked~.custom-control-label::before {
    color: #9338AB;
    border-color: #9338AB;
    background-color: #9338AB;
}

#reason {
    max-width: 252px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#reason::after {
    content: "...";
}

.custom-file-label::after {
    background-color: #9338AB;
}

.bg-primary {
    background-color: #9338AB !important;
}

.breadcrumb {
    padding-bottom: 0px !important;
    margin-bottom: 5px !important;
}

.dataTables_info {
    float: left;
}

.portlet {
    background: #fff;
    border-radius: 0.25rem;
    margin-bottom: 20px;
    background-clip: padding-box;
    box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
}
.portlet .portlet-heading {
    border-radius: 3px 3px 0 0;
    padding: 12px 20px;
    /*border-bottom: 1px solid #efefef;*/
}
.portlet .portlet-heading .portlet-title {
    float: left;
    line-height: 1.5;
    margin: 0;
}
.portlet .portlet-heading .portlet-widgets {
    display: inline-block;
    float: right;
    font-size: 15px;
    line-height: 30px;
    padding-left: 15px;
    position: relative;
    text-align: right;
}
.portlet .portlet-heading .portlet-widgets .divider {
    margin: 0 5px;
}
.portlet .portlet-heading .portlet-widgets .collapsed .ion-minus-round:before {
    content: "" !important;
}
.portlet .portlet-heading a {
    color: #999999;
}
.portlet .portlet-body {
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    background: #fff;
    border-top: 1px solid #ccc;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 15px;
}
.portlet-default .portlet-title {
    color: #ccc !important;
}
.portlet .portlet-heading.bg-custom a, .portlet .portlet-heading.bg-purple a, .portlet .portlet-heading.bg-info a, .portlet .portlet-heading.bg-success a, .portlet .portlet-heading.bg-primary a, .portlet .portlet-heading.bg-danger a, .portlet .portlet-heading.bg-warning a, .portlet .portlet-heading.bg-inverse a, .portlet .portlet-heading.bg-pink a {
    color: #fff;
}
.portlet .portlet-heading .portlet-title {
    color: #797979;
    float: left;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 5px;
}
.panel-disabled {
    background: rgba(243, 242, 241, 0.5);
    bottom: 15px;
    left: 0;
    position: absolute;
    right: -5px;
    top: 0;
}

.buttons-csv {
    margin-right: 4px;
}
.rounded-circle {
    object-fit: cover;
}
#sidebar-menu>ul>li>a {
    color: #3D174D;
    font-weight: bold;
}
/*#sidebar-menu > ul > li > a.active
{
	color: #000;
    background-color: #fff;
}*/

#sidebar-menu>ul>li>a.active, #sidebar-menu>ul>li:hover>a {
    color: #3D174D !important;
    background-image: linear-gradient(270deg, #3d174d80 -30%, #F9EBF600 80%);
}

#sidebar-menu>ul>li>a:hover {
    color: #fff;
    /*background-color: #fff;*/
}
.nav-second-level li a:focus, .nav-second-level li a:hover, .nav-thrid-level li a:focus, .nav-thrid-level li a:hover {
    color: #fff;
}
#sidebar-menu>ul>li>a:hover, #sidebar-menu>ul>li>a:focus, #sidebar-menu>ul>li>a:active {
    color: #3D174D;
}
.enlarged .left-side-menu #sidebar-menu>ul>li>a:hover, .enlarged .left-side-menu #sidebar-menu>ul>li>a:active, .enlarged .left-side-menu #sidebar-menu>ul>li>a:focus {
    color: #fff;
}
.enlarged .left-side-menu #sidebar-menu>ul>li:hover>ul a:hover {
    color: #3D174D;
}
.nav-second-level li.active>a, .nav-third-level li.active>a {
    color: #3D174D;
    background-image: linear-gradient(270deg, #3d174d80 -30%, #F9EBF600 80%);
}
.navbar-custom .button-menu-mobile {
    color: #fff;
}
.navbar-custom .topnav-menu .nav-link {
    color: #fff;
}
.page-item.active .page-link {
    background-color: #9338AB;
    border-color: #9338AB;
}
.nav-second-level li a, .nav-thrid-level li a {
    color: #3D174D;
}
.logo-md-text-light {
    font-size: 35px;
    color: #9338AB;
    font-weight: 600;
}

.enlarged .left-side-menu #sidebar-menu>ul ul {
    background-color: #9338AB;
}

.form-control:disabled, .form-control[readonly] {
    /* background-color: #dedede; */
    background-color: #ffffff;
    border-color: #9338AB;
}
.badge {
    cursor: pointer;
}
.dataTables_wrapper .dataTables_filter input::-webkit-search-cancel-button {
    cursor: pointer;
}
.se-pre-icon {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0.8;
    background-size: 45%;
    background: url(/assets/shipper/panel_theme/loader/loader.gif) 50% 50% no-repeat rgb(255, 255, 255);
}
/*--- admin shipment status styling ---*/
.load-status .is-pending {
    background-color: #F3C747;
}
.status-box {
    padding: 2px 9px 2px 10px;
    min-height: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.status-box.pending {
    background-color: #F3C747;
    color: #000000;
}
.status-box.on-trip, .load-status .on-trip {
    background-color: #3A90E5;
    color: #ffffff;
}
.status-box.scheduled, .load-status .scheduled {
    background-color: #F5F5F5;
    color: #9338AB;
}
.status-box.ready, .load-status .is-ready {
    background-color: #A9DBFB;
    color: #000000;
}
.status-box.draft {
    background-color: #9B51E024;
    color: #000000;
}
.status-box.draft .status-info {
    color: #9B51E0;
}
.status-box.fulfilled, .load-status .is-fulfilled {
    background-color: #BCB6B0;
    color: #FFFFFF;
}
.status-box.not-fulfilled, .load-status .not-fulfilled {
    background-color: #000000;
    color: #FFFFFF;
}
.status-box.part-fulfilled {
    padding-top: 0;
    padding-bottom: 0;
}
.status-box.part-fulfilled div:first-child {
    background-color: #ECECEC;
    padding: 4px;
    border-radius: 5px;
    width: 100%;
    color: #000000;
    flex: 1;
}
.status-box.part-fulfilled .status-info {
    width: 100%;
    color: #ffffff;
    padding: 4px;
}
.load-status .part-fulfilled {
    background-color: #ECECEC;
}
.status-box.rejected, .load-status .rejected {
    background-color: #D56969;
    color: #ffffff;
}
.italic {
    font-style: italic;
}

.font-semibold {
    font-weight: 600;
}
.w-28 {
    width: 7rem;
}
status-box {
    min-height: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.rounded-md {
    border-radius: 0.375rem;
}
[id^="NotiflixConfirmWrap"]>div[class*="-content"]>div[class*="-buttons"]>a.confirm-button-ok {
    margin: 0 0% 0 0 !important;
    float: right !important;
}

div[class*="-content"]>div[class*="-buttons"]>a.confirm-button-cancel {
    margin: 0 0 0 2% !important;
    float: left !important;
}
/*--- manage shipment status styling ---*/
/*--- Developer Change Start ---*/
/* .load-status .is-pending { background-color: #F3C747; } */
.load-status .pending {
    background-color: #F3C747;
}
/*--- Developer Change End ---*/
.status-box-priority {
    min-height: 24px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.status-box {
    min-height: 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.status-box.pending {
    background-color: #F3C747;
    color: #000000;
}
.status-box.pending-request {
    background-color: #55cf9e;
    color: #ffffff;
}
.status-box.pending-more {
    background: transparent linear-gradient(90deg, #F3C747 0%, #4BA48A 100%) 0% 0% no-repeat padding-box;
}
.status-box.on_trip, .load-status .on_trip {
    background-color: #3A90E5;
    color: #ffffff;
}
.status-box.scheduled, .load-status .scheduled {
    background-color: #F5F5F5;
    color: #9338AB;
}
.status-box.ready, .load-status .ready {
    background-color: #A9DBFB;
    color: #000000;
}
.status-box.draft .status-info {
    color: #9B51E0;
}
/*--- Developer Change ---*/
.status-box.draft, .load-status .draft {
    background-color: #9B51E024;
    color: #000000;
}
/* .status-box.fulfilled, .load-status .fulfilled { background-color: #B8F312; color: #9338AB; } */
.status-box.fulfilled, .load-status .fulfilled {
    background-color: #9A9AA9;
    color: #ffffff;
}
/*--- Developer Change END ---*/
.status-box.not-fulfilled, .load-status .not-fulfilled {
    background-color: #000000;
    color: #FFFFFF;
}
/* .status-box.part-fulfilled { background-color: #000000; padding-top: 0; padding-bottom: 0; } */
.status-box.part-fulfilled div:first-child {
    background-color: #ECECEC;
    padding: 4px;
    border-radius: 5px;
    width: 100%;
    color: #000000;
    flex: 1;
}
.status-box.part-fulfilled .status-info {
    width: 100%;
    color: #ffffff;
    padding: 4px;
}
.load-status .part-fulfilled {
    background-color: #ECECEC;
}
.status-box.rejected, .load-status .rejected {
    background-color: #D56969;
    color: #ffffff;
}
.status-box.canceled, .load-status .canceled {
    background-color: #D56969;
    color: #ffffff;
}
.status-box-priority.canceled, .load-status .canceled {
    background-color: #D56969;
    color: #ffffff;
}
.f-20 {
    font-size: 20px;
}
.error {
    color: red;
}
.filter_date_error {
    color: red;
}
.product_count {
    background-color: #9338AB;
    border-color: #9338AB;
    color: white;
    padding: 4px 7px 7px 7px;
    float: right;
}
.chat-text {
    color: #323a46;
}
.text-title {
    color: #9338AB;
}
.vat_error {
    color: red;
}

.logo-black-font {
    color: #000 !important;
}

/* file uplode fix pendding  */
input[type="file"] {
    padding: 0.30rem .5rem;
}

input:checked+.slider {
    background: transparent linear-gradient(99deg, #ffffff -50%, #9338AB 100%) 0% 0% no-repeat !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #9338AB !important;
    border: 1px solid #9338AB !important;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin-right: 2px;
}

/* .sele
    background: transparent linear-gradient(99deg, #ffffff -50%, #9338AB 100%) 0% 0% no-repeat;
} */

.auth-illustartion_container img {
    object-fit: cover;
}

/* Media queries for responsive layout */
@media only screen and (max-width:767px) and (orientation: portrait) {
    .auth-wrapper {
        margin-inline: 0;
    }
    .auth-wrapper>div.col-md-6 {
        max-height: 50vh;
    }
    .auth-wrapper>div.col-md-6:first-child {
        order: 2;
    }
    .auth-wrapper>div.col-md-6:nth-child(2) {
        order: 1;
    }
    .auth-illustartion_container {
        height: auto !important;
    }
    .auth-illustartion_container img {
        object-fit: contain;
    }
}

@media only screen and (max-width:992px) and (orientation: landscape) {
    .auth-wrapper {
        height: unset !important;
    }
    .login-conatiner .form-group.mb-3 {
        margin-bottom: 1rem !important;
    }
    .login-conatiner .text-muted.mb-4 {
        margin-bottom: 1.25rem !important;
    }
    .auth-wrapper>div.col-md-6 {
        max-height: unset;
    }
}


/* ---- CSS for redesign of Admin Panel ---- */
.color-pruple {
    color: #3D174D !important;
}
.fw-semibold {
    font-weight: 600;
}
.content-page {
    --inline-size: 50px;
    margin-top: 0;
    padding: 0;
    margin-left: 288px;
}
.navbar-custom {
    position: static;
}
.left-side-menu {
    top: 0;
    border-image: linear-gradient(180deg, #592E6B 0%, #C858BA 47%, #DB9A32 100%);
    border-right-width: 2px;
    border-style: solid;
    border-image-slice: 1;
    border-width: 0 2px 0 0;
    width: 288px;
}
#sidebar-menu>ul>li>a,
body:not(.enlarged) .log-out_btn {
    padding-left: 60px;
}
#sidebar-menu>ul>li>a>span {
    margin-left: 16px;
}
#sidebar-menu>ul>li>a img {
    width: 24px;
    aspect-ratio: 1;
}
#sidebar-menu {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.log-out_btn a {
    font-size: 18px;
    /* display: ; */
    width: fit-content;
    gap: 14px;
    font-weight: bold;
    color: #DB9A32;
    background-color: #fff;
    border: none;
    padding: 24px 32px;
    border-radius: 100vw;
    transition: 100ms linear;
}
.log-out_btn a:hover {
    box-shadow: 0 0 0 2px #3D174D;
}
body.enlarged .log-out_btn a span {
    display: none;
    width: 190px;
    padding: 15px 20px;
    position: absolute;
    color: #3D174D;
    background-image: linear-gradient(270deg, #3d174d66 0%, #F9EBF600 100%);
    white-space: nowrap;
    left: 100%;
    text-align: left;
}
body.enlarged .log-out_btn a {
    padding: 15px;
    border-radius: 12px;
    margin-inline: auto;
}
body.enlarged .log-out_btn:hover span {
    display: block;
}
body.enlarged .left-side-menu .slimScrollDiv,
.enlarged .left-side-menu .slimscroll-menu {
    height: 100% !important;
}
.enlarged .left-side-menu {
    position: fixed;
}
.enlarged .left-side-menu #sidebar-menu>ul>li:hover>ul {
    background-color: #F9EBF6;
}
.nav-second-level a {
    font-weight: bold;
}
.admin-user {
    color: #3D174D;
    font-size: 24px;
    margin-left: 12px;
    font-weight: bold;
}
.navbar-custom .button-menu-mobile {
    height: auto;
    line-height: normal;
}
.calander-group .input-group {
    border-radius: 9999px;
    background-color: #3D174D;
    overflow: hidden;
    padding: 8px 4px;
}
.calander-group .input-group .input-group-text {
    background-color: inherit !important;
    border: 0;
}
.nav-user img.user-img {
    height: 60px;
    width: 60px;
    aspect-ratio: 1;
}
.navbar-custom .custom-header .nav-link {
    line-height: unset;
    text-align: left;
    gap: 16px;
}
.pro-user-name {
    font-size: 16px;
    font-weight: bold;
    text-transform: capitalize;
}
.nav-second-level li a:hover {
    color: #3D174D;
    background-image: linear-gradient(270deg, #3d174d80 -30%, #F9EBF600 80%);
}
.navbar-custom {
    padding-inline: 12px;
}
.dashboard-number_card {
    row-gap: 24px;
}
.dashboard-number_card .card-box {
    border-radius: 32px;
    margin-bottom: 0;
    height: 100%;
}
.dashboard-number_card .card-box > .row {
    height: 100%;
    align-items: center;
}
.dashboard-number_card .bg-purple-200 .card-box {
    background-color: #7921911a;
}
.dashboard-number_card .bg-purple-100 .card-box {
    background-color: #C858BA1A;
}
.dashboard-number_card .bg-yellow-200 .card-box {
    background-color: #DB9A321A;
}
.dashboard-number_card .text-right h3 {
    font-size: 40px;
}
.dashboard-number_card .bg-purple-200 .text-right h3 {
    color: #78218F;
}
.dashboard-number_card .bg-purple-100 .text-right h3 {
    color: #C858BA;
}
.dashboard-number_card .bg-yellow-200 .text-right h3 {
    color: #DB9A32;
}
.avatar-lg {
    width: 96px;
    height: 96px;
    aspect-ratio: 1;
    border-radius: 12px !important;
}
.dashboard_name.color-pruple {
    font-size: 18px;
    font-weight: 500;
}
.logo-box {
    margin-inline: auto;
}
.user-notification h6,
.user-notification .dropdown-item {
    color: #3D174D;
    font-weight: bold;
}
.user-notification>.dropdown-item {
    background-color: #F9EBF6;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dropdown-menu.show {
    padding: 8px;
}
.user-notification .dropdown-item:hover {
    background-color: #fff;
    box-shadow: 1px 1px 2px 2px #F9EBF6;
}
@media screen and (max-width:1440px) {
    .content-page {
        --inline-size: 32px;
    }
    .dashboard-number_card .card-box {
        border-radius: 16px;
    }
    .log-out_btn a {
        font-size: 16px;
        padding: 16px 24px;
    }
    .avatar-lg {
        width: 72px;
        height: 72px;
    }
    .dashboard-number_card .text-right h3 {
        font-size: 32px;
        font-weight: bold;
    }
    .dashboard_name.color-pruple {
        font-size: 16px;
    }
    .dashboard-number_card>div.col-md-6 {
        padding-right: 4px;
    }
    #sidebar-menu>ul>li>a, body:not(.enlarged) .log-out_btn {
        padding-left: 32px;
    }
    .navbar-custom .custom-header .nav-link {
        gap: 0;
    }
    .admin-user {
        font-size: 20px;
    }
}
@media screen and (max-width:1200px) {
    .content-page {
        --inline-size: 24px;
    }
    .nav-user img.user-img {
        width: 44px;
        height: 44px;
    }
}
@media screen and (max-width:992px) {
    .dashboard-number_card .card-box {
        padding: 1rem;
    }
    .avatar-lg img {
        width: 32px;
        aspect-ratio: 1;
    }
}
@media screen and (max-width:767px) {
    .content-page {
        --inline-size: 16px;
    }
    .dashboard-number_card>div.col-md-6 {
        padding-right: 12px;
    }
    .dashboard-number_card .text-right h3 {
        font-size: 24px;
    }
    .page-title-box .page-title-right {
        display: unset;
    }
    .logo-box {
        display: unset;
    }
}
@media screen and (max-width:567px) {
    .admin-user {
        font-size: 18px;
    }
    .navbar-custom .custom-header .nav-link>*:not(.user-img) {
        display: none;
    }
    .admin-user {
        font-size: 16px;
        margin-left: 4px;
    }
    #sidebar-menu>ul>li>a {
        padding: 11px 20px;
    }
}

/* ----  CSS to redesign input boxes ---- */
.card {
    box-shadow: none;
}
.form-wrapper label,
.form-wrapper input:not(:disabled),
.breadcrumb-item>a,
.card-view_details label,
.custom-table th,
.custom-table label {
    font-weight: 700 !important;
    color: #3D174D;
}
.card-view_details .col-md-6 p {
    color: #C858BA;
    font-weight: 700;
}

.page-title-box h4,
.breadcrumb-item>a,
li.breadcrumb-item,
.breadcrumb-item>a:not([href]):not([tabindex]) {
    color: #3D174D;

}
.gradient_border::placeholder {
    color: rgba(120, 33, 143, 0.6);
}
.gradient_border {
    border: 2px solid transparent;
    border-radius: 9999px;
    display: inline-block;
    background-color: #F8ECF6;
    font-weight: bold;
    height: calc(2em + .9rem + 2px);
}
.gradient_border.form-control:focus {
    color: #3D174D;
    border-color: transparent;
    background: linear-gradient(#fff 0 0) padding-box, linear-gradient(104deg, #592E6B, #C858BA, #DB9A32) border-box;
}
select.gradient_border {
    -webkit-appearance: none;
    appearance: none;
    color: #3D174D;
}
.custom-file_input {
    height: unset;
    cursor: pointer;
}
.custom-file_input::-webkit-file-upload-button,
.custom-file_input::file-selector-button {
    font-size: 16px;
    width: fit-content;
    font-weight: bold;
    color: #DB9A32;
    background-color: #fff;
    border: none;
    margin-left: -2px;
    margin-right: 8px;
    padding: 4px 12px;
    border-radius: 9999px;
    transition: 100ms linear;
    font-family: Nunito, sans-serif !important;
}
.custom-file_input:focus::-webkit-file-upload-button,
.custom-file_input:focus::file-selector-button {
    box-shadow: 0 0 0 1px #3D174D;
}
.form-wrapper .custom-btn {
    background-color: #84259C;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    padding: 16px;
    box-shadow: inset -2px 0 24px #390A4A, inset -8px -10px 16px #1D0D23;
    transition: all 100ms ease;
    position: relative;
    max-width: 250px;
    width: 100%;
    border-radius: 9999px;
    border: 2px solid transparent;
}
.form-wrapper .custom-btn:focus,
.form-wrapper .custom-btn:hover,
.form-wrapper .custom-btn:active {
    box-shadow:
        inset -2px 0 24px #390A4A,
        inset -8px -10px 16px #1D0D23,
        4px 4px 0px #84259C;
    border: 2px solid #DF76FB;
}
textarea.gradient_border {
    border-radius: 12px;
    resize: none;
}

.custom-select_element .select2-selection {
    border: 2px solid transparent;
    border-radius: 9999px;
    background-color: #F8ECF6;
    font-weight: bold;
    height: calc(2em + .9rem + 2px);
}
.custom-select_element .select2-container--open .select2-selection {
    color: #3D174D;
    border-color: transparent;
    border-bottom-left-radius: 9999px !important;
    border-bottom-right-radius: 9999px !important;
    background: linear-gradient(#fff 0 0) padding-box, linear-gradient(104deg, #592E6B, #C858BA, #DB9A32) border-box;
}
.custom-radio_input {
    --input-size: 24px;
    -webkit-appearance: none;
    appearance: none;
    width: var(--input-size);
    height: var(--input-size);
    aspect-ratio: 1;
    border: 2px solid #3D174D;
    border-radius: 100vw;
    transition: all 200ms ease;
    cursor: pointer;
}
.custom-radio_input:focus,
.custom-radio_input:active {
    outline: none;
}
.custom-radio_input+label {
    cursor: pointer;
}
.custom-radio_input:checked {
    background-color: #3D174D;
    box-shadow: inset 0 0 0 calc(var(--input-size) / 10) #fff;
}
.picture-container {
    gap: 8px;
}
.picture-container img {
    border: 1px solid #390A4A;
    object-fit: contain;
    max-width: 100%;
    height: 150px;
    aspect-ratio: 2/3;
}
.login-box .form-wrapper .custom-btn {
    max-width: 100%;
}
/* --- CSS to style Table and prevent overflow --- */

.custom-table {
    background-color: #F1F2F5;
}
.custom-table td {
    color: #390A4A;
    font-weight: 600;
}
.custom-table .dataTables_info {
    color: #78218F;
}

/* ====== CSS for custom sweetalert2 styling ====== */

.custom-alert_wrapper.swal2-popup.swal2-modal,
.custom-modal_theme {
    font-family: Nunito, sans-serif;
    width: 576px;
    max-width: 100%;
    padding: clamp(1.25rem, 0.2115rem + 2.8846vw, 2rem);
    border-radius: 20px;
}
.custom-modal_wrapper {
    width: 576px;
    max-width: 100%;
}
.custom-alert_wrapper .swal2-image {
    margin-bottom: 0.5rem;
}
.custom-alert_wrapper .swal2-title {
    color: #3D174D !important;
    font-size: clamp(1.75rem, 1.3478rem + 1.1173vw, 2.5rem) !important;
    font-weight: 800 !important;
}
.custom-alert_wrapper.delete-record_modal .swal2-title {
    font-size: clamp(1rem, 1.2rem + 1.1173vw, 2.125rem) !important;
}
.custom-alert_wrapper #swal2-content {
    color: rgba(61, 23, 77, 0.6);
    font-weight: 700;
    margin-block: 1rem;
    text-wrap: pretty;
}
.change-status_modal #swal2-content {
    max-width: 400px;
    margin-inline: auto;
}
.custom-alert_wrapper .swal2-actions {
    width: 100%;
}
.custom-alert_wrapper button.swal2-confirm.swal2-styled,
.custom-alert_wrapper button.swal2-cancel.swal2-styled,
.custom-modal_theme .modal-footer button {
    border-radius: 100vw !important;
    border: 1px solid #84259C !important;
    font-weight: 700;
    flex: 1;
    min-width: fit-content;
}
.custom-modal_theme .modal-footer {
    border-top: 0;
    gap: 12px;
}
.custom-modal_theme .modal-footer button {
    padding: 10px;
    font-size: 17px;
    margin: 0;
}
.custom-alert_wrapper button {
    transition: all 150ms ease;
}
.custom-alert_wrapper button.swal2-confirm {
    background-color: #84259C !important;
}

.custom-alert_wrapper button.swal2-cancel,
.custom-modal_theme .modal-footer button.btn-secondary {
    color: #3D174D !important;
    background-color: #fff !important;
}
@media (hover:hover) {
    .custom-alert_wrapper button.swal2-cancel:hover {
        background-image: none !important;
        box-shadow: inset 0 0 0 1px #84259C;
    }
}
.page-title-right .btn-sm {
    font-size: 1.25rem;
}
@media (max-width:576px) {
    body {
        padding-bottom: 0;
    }
    .custom-alert_wrapper.delete-record_modal #swal2-content,
    .custom-alert_wrapper.delete-record-success_modal #swal2-content {
        margin: 0;
    }
    .custom-alert_wrapper.delete-record_modal .swal2-title {
        text-wrap: pretty;
    }
    .custom-alert_wrapper .swal2-image {
        width: 80px;
    }
    .custom-modal_theme .modal-footer {
        padding-inline: 0;
    }
    .page-title-right .btn-sm {
        font-size: 1rem;
    }
}

/* ---- custom select2 styling ---- */
.select2-dropdown {
    border: 2px solid transparent;
    border-radius: 12px;
    background-color: #F8ECF6;
    font-weight: bold;
}
.select2-container--open .select2-dropdown {
    color: #3D174D;
    border-color: transparent;
    background: linear-gradient(#F8ECF6 0 0) padding-box, linear-gradient(104deg, #592E6B, #C858BA, #DB9A32) border-box;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    overflow: hidden;
}
.select2-container--open .select2-dropdown.select2-dropdown--above {
    margin-top: -4px;
}
.select2-container--open .select2-dropdown.select2-dropdown--below {
    margin-top: 4px;
}
.select2-search.select2-search--dropdown {
    background-color: transparent;
}
.select2-selection__arrow>b {
    display: none;
}
.select2-selection__arrow {
    background-image: url(/assets/common/images/down-caret.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    top: 50% !important;
    transform: translate(-50%, -50%);
    transition: transform 100ms ease-in;
}
.select2-container--open .select2-selection__arrow {
    transform: translate(-50%, -50%) rotateX(180deg);
}
.custom-select_modifier .select2-selection--multiple {
    color: #3D174D;
    border: 2px solid transparent !important;
    background: #F8ECF6;
    border-radius: 22px !important;
    min-height: calc(2em + .9rem + 2px);
    overflow: hidden;
}

.custom-select_modifier .select2-container--open .select2-selection--multiple {
    background: linear-gradient(#fff 0 0) padding-box, linear-gradient(104deg, #592E6B, #C858BA, #DB9A32) border-box;
}
.custom-select_modifier .select2-container .select2-selection--multiple .select2-selection__rendered {
    height: 100%;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    column-gap: 4px;
}
.custom-select_modifier .select2-selection__rendered>li:not(:last-child) {
    margin: 5px 0 !important;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 6px;
    font-weight: 600;
}
.custom-select_modifier .select2-selection__rendered>li .select2-search__field {
    height: 100%;
    margin-top: 0px;
}
.custom-select_modifier .select2-selection--multiple .select2-selection__choice__remove {
    color: transparent !important;
    height: 100%;
    width: 18px;
    background: url(/assets/common/images/cross-circle.svg) no-repeat center;
    background-size: contain;
}
.select2-container--default .select2-results>.select2-results__options {
    scrollbar-width: thin;
    scrollbar-color: #3D174D #F8ECF6;
}
.phone-number_field {
    border-radius: 9999px;
    height: calc(1.8em + .9rem + 2px);
    overflow: hidden;
}
.phone-number_field .input-group-prepend {
    inset: 0 auto 0 0;
    z-index: 12;
}
.phone-number_field .input-group-prepend span {
    background-color: #dedede;
    border: 0;
    padding-right: 0px;
    font-weight: 700;
    color: #6c757d;
}
.phone-number_field .form-control {
    padding-left: 50px;
    height: 100%;
}

/* ---- style to show gender count in User Card in DashBoard ---- */
.user-card_box {
    gap: 1rem;
    align-items: flex-end;
}
.gap-3 {
    gap: 0.75rem;
}
.gender-view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    flex: 1;
    justify-content: space-evenly;
    max-width: 280px;
    width: 100%;
}
.user-count_container {
    container-type: inline-size;
    container-name: gender-card;

}
.gender-view img {
    object-fit: contain;
    display: block;
    margin-inline: auto;
}
.gender-view>* {
    text-align: center;
    background-color: #fff;
    border-radius: 12px;
    padding: 4px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 4px;
}
.gender-view .user-count {
    font-size: 1.25rem;
    font-size: clamp(1rem, 0.25rem + 0.8333vw, 1.25rem);
    font-weight: bold;
}
.gender-view>*:nth-child(1) .user-count {
    color: #EB9204;
}
.gender-view>*:nth-child(2) .user-count {
    color: #C858BA;
}
.gender-view>*:nth-child(3) .user-count {
    background-image: linear-gradient(to right, #EB9204, #C858BA);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

@media screen and (max-width:1560px) {
    .gender-view img {
        width: 24px;
        height: 24px;
    }
    .gender-view {
        gap: 0.5rem;
    }
}

@container gender-card (max-width:220px) {
    .gender-view>* {
        flex-direction: row;
        aspect-ratio: unset;
        border-radius: 8px;
        align-items: center;
        padding-block: 6px;
        gap: 4px;
    }
    .gender-view>*>div.mt-1 {
        margin-top: 0 !important;
    }
    .gender-view {
        grid-template-columns: repeat(2, 1fr);
    }
}
@container gender-card (max-width:190px) {
    .gender-view {
        grid-template-columns: 1fr;
        max-width: 100px;
    }
}
a.download-icon {
    color: #C858BA;
    text-decoration: none;
    background-color: transparent;
}

a.download-icon:hover {
    color: #C858BA;
    text-decoration: none;
}
.navbar-custom .button-menu-mobile {
    width: unset;
}
.table.dataTable.no-footer {
    width: 100% !important;
}

/* ===== filter area stling ===== */
.page-title-box form.form-inline {
    gap: 0.5rem;
}
/*  ---- date picker styling ---- */
.datepicker.datepicker-dropdown {
    border-radius: 0.875rem;
    margin-top: 0.5rem;
    color: #390A4A;
    border-color: transparent;
    background: linear-gradient(#fff 0 0) padding-box, linear-gradient(104deg, #592E6B, #C858BA, #DB9A32) border-box;
    border: 2px solid transparent;
}
.custom-dropdown .dropdown-menu .dropdown-item:hover,
.datepicker table tr td span.focused, 
.datepicker table tr td span:hover {
    background-color: #F9EBF6 !important;
    color: #9338AB;
}
.custom-dropdown .dropdown-toggle[aria-expanded="true"],
.custom-dropdown .dropdown-toggle:active,
.page-title-right .btn-sm:active {
    background-color: #9338AB !important;
}
.datepicker.datepicker-dropdown.datepicker-orient-left:after {
    left: 12px;
}
.datepicker.datepicker-dropdown.datepicker-orient-left:before {
    border-bottom-color: #592E6B;
    left: 11px;
    top: -8px;
}
.datepicker table tr td.new, 
.datepicker table tr td.old {
    opacity: 1;
    color: rgb(57, 10, 74, 0.6) !important;
}
.datepicker.datepicker-dropdown table tr td.day.focused, 
.datepicker.datepicker-dropdown table tr td.day:not(.disabled):hover {
    background-color: #F9EBF6;
}
.page-title-right .form-control.gradient_border,
.custom-dropdown .dropdown-menu .dropdown-item {
    color: #390A4A;
}
.datepicker.datepicker-dropdown table tr td.day.active {
    background-color: #9338AB !important;
}