:root {
    --theme-primary-softer: #2f79bb99;
    --theme-primary: #2f79bb;
    --theme-primary-darker: #1367b2;
}



.custom-center-logo {
    display: none;
}

.main-content {
    background-color: rgba(91,140,232,.25) !important;
    overflow: unset !important;
    min-height: 100vh;
}

body[data-sidebar-size="sm"] .vertical-menu #sidebar-menu > ul > li:hover > a {
    width: 280px !important;
}

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

    .text-center .form-check {
        margin: 0 auto;
    }

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

#side-menu li a[b-weu3bfapu1] {
    display: none;
}

.notification-item {
    display: block;
}

    .notification-item:hover {
        cursor: pointer;
    }

    .notification-item .d-flex:hover {
        background-color: unset !important;
    }

    .notification-item.notif-bg-soft-primary {
        /*background-color: rgba(47, 121, 187, .25) !important;*/
        background-color: #fff !important;
        color: #fff !important;
    }

        .notification-item.notif-bg-soft-primary:hover {
            background-color: #fff !important;
        }

    .notification-item.notif-bg-soft-dark {
        background-color: rgba(40, 70, 118, .25) !important;
        color: #fff !important;
    }

        .notification-item.notif-bg-soft-dark:hover {
            background-color: rgba(40, 70, 118, .25) !important;
        }

    .notification-item.notif-bg-soft-primary .avatar-title {
        background-color: rgba(116, 120, 141, .50); /*#74788d !important;*/
    }

    .notification-item.notif-bg-soft-dark .avatar-title {
        background-color: rgba(40, 70, 118, .75) !important;
    }

.notif-bg-soft-secondary {
    background-color: rgba(107, 144, 204, .50) !important;
    color: rgba(107, 144, 204, 100) !important;
}


a[onclick] {
    cursor: pointer;
}

/* OVERRIDES*/
.activity-feed .feed-item::after {
    border: 2px solid var(--theme-primary);
}

.timeline {
    overflow: auto;
    max-height: 700px;
}


/* Buttons */
.btn-primary, .page-item.active .page-link, .bg-primary {
    background-color: var(--theme-primary) !important;
}

    .btn-primary:hover,
    .btn-primary:active,
    .btn-primary:focus,
    .page-item.active .page-link:hover,
    .page-item.active .page-link:active,
    .page-item.active .page-link:focus {
        background-color: var(--theme-primary-darker);
    }

.btn-outline-primary {
    border-color: var(--theme-primary) !important;
}

    .btn-outline-primary:hover {
        background-color: var(--theme-primary-darker);
    }

.btn-soft-primary {
    /*background-color: var(--theme-primary-softer);
    border-color: var(--theme-primary-softer);*/
    color: var(--theme-primary-darker);
}

/*Borders*/
.border-soft-primary {
    border-color: rgba(91,115,232,.18) !important;
}

/*Border Radius*/
.border-radius-2 {
    border-radius: .5rem;
}


/*font-size*/

.font-size-40 {
    font-size: 40px;
}

.font-size-32 {
    font-size: 32px;
}

.font-size-28 {
    font-size: 28px;
}

/* Typography */
.text-primary,
.btn-link {
    color: var(--theme-primary-darker) !important;
}

/*table*/
.table-holder .table tbody tr {
    cursor: pointer;
}

    .table-holder .table tbody tr.disabled {
        cursor: not-allowed;
    }

    .table-holder .table tbody tr:hover {
        background-color: #e6edf9;
    }

.table-holder .table th.text-center {
    text-align: center !important;
}

/*dataTables*/
table.dataTable thead th {
    /*text-transform: uppercase !important;*/
    text-align: left !important;
}

table.dataTable thead th, table.dataTable thead td,
table.dataTable.no-footer {
    /*border-bottom: 1px solid var(--theme-primary-darker) !important;*/
    border-bottom: unset !important;
}



.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0 !important;
}

.page-link {
    margin-left: 0 !important;
}

/*toastr*/

.toast-top-right {
    top: 80px !important;
}

.form-control {
    padding: .7rem .75rem;
}

.form-switch .form-check-input {
    width: 3.3em !important;
    height: 1.5em !important;
}

.btn {
    padding: .7rem .75rem;
}

.btn-sm {
    padding: .25rem .5rem
}

.btn-primary:hover {
    background-color: rgba(47, 121, 187, .75) !important;
    border-color: #2f79bb !important;
}

.btn-dark {
    background-color: #284676;
    border-color: #284676;
}

    .btn-dark:hover {
        background-color: rgba(40, 70, 118, .75);
        border-color: #284676;
    }

.btn-secondary {
    background-color: #6b90cc;
    border-color: #6b90cc;
}

    .btn-secondary:hover {
        background-color: rgba(107, 144, 204, .75);
        border-color: #6b90cc;
    }

.nav-tabs-custom {
    border-bottom: 2px solid var(--theme-primary);
}

    .nav-tabs-custom .nav-item .nav-link {
        padding: 1rem;
    }

        .nav-tabs-custom .nav-item .nav-link:hover {
            color: var(--theme-primary);
        }

        .nav-tabs-custom .nav-item .nav-link.active {
            /*color: var(--theme-primary);*/
            color: #fff;
        }

        .nav-tabs-custom .nav-item .nav-link::after {
        }

        .nav-tabs-custom .nav-item .nav-link:after {
            background: var(--theme-soft-primary);
        }


.nav-tabs .nav-link.active {
    /*background-color: #dee3fa;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);*/
    background: var(--theme-primary);
}


.form-filter-holder > * {
    /*align-content: flex-end;*/
}

.form-filter-holder .choices__list--dropdown {
    width: 140% !important;
}

.table thead tr th {
    color: #2f79bb;
}

.table tr td {
}

    .table tr td:not(.data-action) {
        /* word-break: break-all;*/
        /*max-width: 160px;*/
        max-width: 120px;
        white-space: nowrap;
        /*width: 50px;*/
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .table tr td.data-action.button-inline {
        display: flex;
        justify-content: center;
    }

        .table tr td.data-action.button-inline .btn {
            align-self: stretch;
            align-content: center;
            margin: 0px;
            margin-right: 0px !important;
            width: 54px;
            text-align: center;
            font-size: 8px;
            border-radius: 0px;
            padding: 8px 0px;
        }

            .table tr td.data-action.button-inline .btn:first-child {
                border-radius: 8px 0px 0px 8px;
            }



            .table tr td.data-action.button-inline .btn:last-child {
                border-radius: 0px 8px 8px 0px;
            }

            .table tr td.data-action.button-inline .btn:only-child {
                border-radius: 8px;
            }

            .table tr td.data-action.button-inline .btn i {
                display: block;
                font-size: 14px;
                margin-bottom: 4px;
            }

.order-list-container .table thead tr th.action-column {
    width: 230px;
}

.table thead tr th:nth-child(7),
.table thead tr th:nth-child(8) {
    text-align: center !important;
}

.bold-label {
    font-weight: bold;
}

.col-form-label {
    line-height: 1.25;
}

#ar-details-table-sub.table,
#deposit-table-sub.table {
    margin-top: 1rem;
}

    #ar-details-table-sub.table tr,
    #deposit-table-sub.table tr {
        border: 1px solid rgba(91,140,232,.25);
        border-radius: 4px;
        margin-bottom: .75rem;
        display: block;
    }

        #ar-details-table-sub.table tr td,
        #deposit-table-sub.table tr td {
            display: inline-block;
            width: 50%;
            position: relative;
            border: 0px;
            margin-bottom: 0rem;
            white-space: wrap;
            vertical-align: top !important;
            padding-left: 8rem;
            text-align: left !important;
        }

            #ar-details-table-sub.table tr td:not(.data-action),
            #deposit-table-sub.table tr td:not(.data-action) {
                max-width: unset;
            }


        #deposit-table-sub.table tr td {
            width: 50% !important;
        }


            #ar-details-table-sub.table tr td[data-name]:before,
            #deposit-table-sub.table tr td[data-name]:before {
                display: block;
                content: attr(data-name);
                color: #9b9b9b;
                position: absolute;
                left: .75rem;
                bottom: 1rem;
                font-size: 10px;
                text-transform: uppercase;
            }

/*cnc users*/
.ar-button-holder .btn {
    width: 48% !important;
    position: relative;
}


.sales-order-right-side {
    background: #dee3fa !important;
}



/*customer info*/

.customer-info-holder {
    background: #dee3fa !important;
}

    .customer-info-holder .btn-edit-group {
        top: -4px;
    }


.id-img-holder {
    position: relative;
    margin-top: 10px;
    border: 1px solid #cfd1d8;
    padding: 4px;
}

    .id-img-holder img {
        width: 320px;
        max-width: 100%;
        max-height: 200px; /*
        display: block;
        margin: 0 auto;*/
    }

    .id-img-holder .btn {
        position: absolute;
        top: -4px;
        right: -4px;
    }

.farm-info-holder {
    margin-top: .75rem;
}

    .farm-info-holder .farm-info-list {
        border: 1px solid rgba(91,140,232,.25);
        border-radius: 4px;
        margin-bottom: .75rem;
        display: block;
        padding: .75rem;
    }

.price-info-holder {
    margin-top: .75rem;
}

    .price-info-holder .price-info-list {
        border: 1px solid rgba(91,140,232,.25);
        border-radius: 4px;
        margin-bottom: .75rem;
        display: block;
        padding: .75rem;
    }
        /*.price-info-holder .price-info-list .table-primary {
            --bs-table-bg: unset !important;
        }*/

        .price-info-holder .price-info-list:nth-child(odd) {
            background: rgba(91,140,232,.10) !important;
        }


        .price-info-holder .price-info-list:nth-child(even) {
            /*background: #ffffff;*/
            background: rgba(245,246,248,.25) !important;
        }

.hori-timeline .events .event-list .event-date {
    /*background: var(--bs-gray-300) !important;*/
    background: rgba(91,115,232,.25) !important;
}

    .hori-timeline .events .event-list .event-date .text-primary {
        position: relative;
    }

.hori-timeline .events .event-list:before {
    content: "";
    display: block;
    position: absolute;
    top: 14px;
    left: -4px;
    width: 25% !important;
    height: 2px;
    border-radius: 50%;
    background: rgba(91,115,232,.25) !important;
}

.hori-timeline .events .event-list:after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 14px !important;
    left: unset !important;
    right: -4px !important;
    width: 25% !important;
    height: 2px !important;
    border-radius: 50% !important;
    background: rgba(91,115,232,.25) !important;
}

.hori-timeline .events .event-list .event-date:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -52px;
    left: calc(50% - 1px);
    width: 2px;
    height: 48px;
    background: rgba(91,115,232,.25) !important;
    /*background-color: var(--bs-card-bg);*/
    background-color: rgba(91,115,232,.25) !important;
}

.hori-timeline .events .event-list .event-date:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* border: 2px solid var(--bs-gray-300);
    background-color: var(--bs-card-bg);*/
    border: 2px solid rgba(91,115,232,.25) !important;
    background-color: var(--bs-card-bg) !important;
}

.customer-info-form > .card-body {
    flex: unset;
}


/*if the card has no child element inside*/
.user-not-sic-holder:not(:has(#table-container)) {
    display: none;
}


/*end customer info*/
/*sales target*/
.sales-target-form {
    /*width: 360px;*/
    /*width: 720px;*/
    max-width: 100%;
    margin: 0 auto;
}

.sales-target-card {
    position: relative;
}

    .sales-target-card .card {
        min-height: 206px;
    }

        .sales-target-card .card .form-control {
            width: 220px;
        }

    .sales-target-card > div:nth-child(odd) .card {
        background: rgba(91,140,232,.10);
        /*background: rgba(116,120,141,.25) !important;*/
    }

    .sales-target-card .card.active {
        background: rgba(91,140,232,.25) !important;
    }

    .sales-target-card > div:nth-child(even) .card {
        background: #ffffff;
    }


    .sales-target-card .button-float {
        position: absolute;
        top: -2rem;
        right: -1rem;
    }

/*dashboard page*/
.dashboard-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0px;
    left: 40%;
}

.w-xxs {
    width: 60px;
}

/*dashboard page*/
/*if you dont want wrap choice item*/
.choices__item {
    text-wrap: nowrap;
}

.choices__list--single .choices__item {
    max-width: 96%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.choices__list--dropdown .choices__item--selectable[data-select-text],
.choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
    max-width: 100%;
    white-space: wrap;
    overflow: hidden;
    /*text-overflow: ellipsis;*/
    padding-right: 10px !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: rgba(91,115,232,.25) !important;
}

    .choices__list--dropdown .choices__item--selectable.is-highlighted::after,
    .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
        border-radius: .25rem;
        background: #2f79bb !important;
        color: #fff !important;
        opacity: 1 !important;
        padding: 2px 4px;
    }


/*responsiveness*/

/*min screen 769 and above*/
@media only screen and (min-width: 769px) {
    body[data-sidebar-size="sm"] {
        min-height: unset !important;
    }
}

@media only screen and (max-width: 1024px) {
    .table.dataTable .btn-sm {
        margin-bottom: .5rem !important;
        display: block;
        width: 100%;
    }

    /*dashboard*/
    .dashboard-icon {
        left: 32%;
    }

    .w-xxs {
        margin-bottom: 8px;
    }
}



/* Medium devices (landscape tablets, 991px and down to 600px) */
@media only screen and (max-width: 991px) {


    /*AR Details Modal for Iphone Promax 14 932px*/
    #additional-details {
    }

        #additional-details #ar-details-table.table thead,
        #additional-details-deposit #deposit-table.table thead {
            display: none;
        }


        #additional-details #ar-details-table.table tr:nth-child(odd),
        #additional-details #ar-details-table.table tr.odd,
        #additional-details-deposit #deposit-table.table tr:nth-child(odd),
        #additional-details-deposit #deposit-table.table tr.odd {
            /* background: #f6f6f6 !important;*/
            background: rgba(91,140,232,.25) !important;
        }

        #additional-details #ar-details-table.table tr:nth-child(even),
        #additional-details #ar-details-table.table tr.even,
        #additional-details-deposit #deposit-table.table tr:nth-child(even),
        #additional-details-deposit #deposit-table.table tr.even {
            background: #ffffff;
        }

        #additional-details #ar-details-table.table tr,
        #additional-details-deposit #deposit-table.table tr {
            border: 1px solid rgba(91,140,232,.25);
            border-radius: 4px;
            margin-bottom: .75rem;
            display: block;
        }

            #additional-details #ar-details-table.table tr td,
            #additional-details-deposit #deposit-table.table tr td {
                display: inline-block;
                width: 33%;
                position: relative;
                border: 0px;
                margin-bottom: .75rem;
                white-space: wrap;
                vertical-align: top !important;
                text-align: left;
            }

        #additional-details #ar-details-table.table tfoot tr,
        #additional-details-deposit #deposit-table.table tfoot tr {
            padding-bottom: .75rem;
        }

            #additional-details #ar-details-table.table tfoot tr th,
            #additional-details-deposit #deposit-table.table tfoot tr {
                position: relative;
                margin-bottom: .75rem;
            }

                #additional-details #ar-details-table.table tfoot tr th[data-name]:before,
                #additional-details #ar-details-table.table tr td[data-name]:before,
                #additional-details-deposit #deposit-table.table tfoot tr th[data-name]:before,
                #additional-details-deposit #deposit-table.table tr td[data-name]:before {
                    display: block;
                    content: attr(data-name);
                    color: #9b9b9b;
                    position: absolute;
                    bottom: -.25rem;
                    left: .75rem;
                    font-size: 10px;
                    text-transform: uppercase;
                }

        #additional-details #ar-details-table.table tr td:first-child,
        #additional-details-deposit #deposit-table.table tr td:first-child {
            display: none;
        }


        #additional-details #ar-details-table.table tr td.data-action,
        #additional-details-deposit #deposit-table.table tr td.data-action {
            width: 58%;
        }

            #additional-details #ar-details-table.table tr td.data-action .btn-sm,
            #additional-details-deposit #deposit-table.table tr td.data-action {
                width: 28%;
                display: inline-block;
            }

        /*pagination details*/
        #additional-details #ar-details-container .col-sm-12.col-md-5,
        #additional-details #ar-details-container .col-sm-12.col-md-7,
        #additional-details-deposit #ar-details-container .col-sm-12.col-md-5,
        #additional-details-deposit #ar-details-container .col-sm-12.col-md-7 {
            display: block !important;
            width: 100%;
            text-align: center;
        }

    #ar-details-table_paginate .pagination,
    #deposit-table_paginate .pagination {
        justify-content: center;
        margin-top: 1rem;
    }

    #ar-details-table-sub.table tr,
    #deposit-table-sub.table tr {
        padding-bottom: .75rem;
        background: #dee3fa;
        margin-bottom: 0px;
    }

        #ar-details-table-sub.table tr td,
        #deposit-table-sub.table tr td {
            padding-left: .75rem;
        }

            #ar-details-table-sub.table tr td[data-name]:before,
            #deposit-table-sub.table tr td[data-name]:before {
                bottom: 0px;
            }
    /*end AR Details Modal for Iphone Promax 14 932px*/
}

/* Extra small devices (phones, 780px and down) */
@media only screen and (max-width: 780px) {

    .view-sales-order-form .order-button-section {
        justify-content: center !important;
    }

    .custom-center-logo {
        display: flex;
    }

    #page-topbar .navbar-header .navbar-brand-box {
        display: none;
    }

    .form-filter-holder .text-end {
        text-align: left !important;
    }



    .table thead {
        display: none;
    }


    .table tr:nth-child(odd),
    .table tr.odd {
        /* background: #f6f6f6 !important;*/
        background: rgba(91,140,232,.25) !important;
    }

    .table tr:nth-child(even),
    .table tr.even {
        background: #ffffff;
    }

    .table tr {
        border: 1px solid rgba(91,140,232,.25);
        border-radius: 4px;
        margin-bottom: .75rem;
        display: block;
    }

    /*customer info*/
    .price-info-holder .price-info-list .table tr:nth-child(odd),
    .price-info-holder .price-info-list .table tr:nth-child(even) {
        background: unset !important;
    }

    .sales-order-list-holder table tr td {
        width: 29%;
    }

    .table tr td {
        display: inline-block;
        width: 33%;
        position: relative;
        border: 0px;
        margin-bottom: .75rem;
        white-space: wrap;
        vertical-align: top !important;
    }

    /*.table tr td[data-name="Status"] .badge {
            margin-left: 40px;
            width: calc(100% - 40px);
        }*/

    #ar-details-table.table tr td {
        width: 45%;
        text-align: left !important;
    }

    #deposit-table.table tr td {
        width: 42%;
        text-align: left;
    }

    .table tfoot tr {
        padding-bottom: .75rem;
    }

        .table tfoot tr th {
            position: relative;
            margin-bottom: .75rem;
            padding-bottom: 14px;
        }

            .table tfoot tr th[data-name]:before,
            .table tr td[data-name]:before {
                display: block;
                content: attr(data-name);
                color: #9b9b9b;
                position: absolute;
                bottom: -.25rem;
                left: .75rem;
                font-size: 10px;
                text-transform: uppercase;
                font-weight: normal;
            }

    .table tr td {
        text-align: left !important;
    }
        /* .table tr td[data-name="Status"]:before {
            bottom: 1rem;
        }*/
        .table tr td.data-action {
            width: 58%;
        }

            .table tr td.data-action .btn-sm {
                width: 28% !important;
                display: inline-block;
            }

    /*AR Details*/
    #ar-details-table_paginate {
        margin: 1rem auto;
    }

    #deposit-table_paginate {
        margin: 1rem auto;
    }

    /*dashboard*/
    .logo {
        display: block;
        text-align: center;
        margin: 8px 0px;
    }
    .dashboard-icon {
        left: 28%;
    }
}




/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {


    .form-filter-holder .choices__list--dropdown {
        width: 100% !important;
    }

    .text-center,
    .text-right,
    .text-left {
        text-align: center !important;
    }

    .card-title label span.badge {
        margin-top: 1rem !important;
    }

    .view-sales-order-form .col-form-label {
        /*text-align: center;*/
    }

    .sales-order-list-holder table tr td {
        width: 42%;
    }


    .table tr td {
        width: 49%;
    }

        .table tr td.data-action {
            width: 90%;
            text-align: left !important;
        }

            .table tr td.data-action.button-inline {
                justify-content: start;
            }

    #contact-number-table .table tr td,
    #resedential-address-container .table tr td {
        width: 100%;
    }

    #userTable td.text-center {
        text-align: left !important;
    }

    #search-order, #search-order + .btn,
    #search-customer, #search-customer + .btn,
    #search-salesRegion, #search-salesRegion + .btn,
    #search-occupation, #search-occupation + .btn,
    #search-check-collection, #search-check-collection + .btn{
        margin-top: 1rem;
    }

    .form-buttons-holder {
        margin-top: 1rem;
    }

    /*customer view*/
    .customer-info-form {
        margin-top: 1rem !important;
        height: auto !important;
    }

        /*if the card has no child element inside*/
        .customer-info-form:not(:has(div)) {
            display: none;
        }

    .customer-info-holder {
        height: auto !important;
    }


    .text-center .form-check {
        margin: 0;
    }
}


/* Extra small devices (phones, 428px and down) */
@media only screen and (max-width: 428px) {

    #orderTable.table tr td[data-name="Status"] .badge,
    #checkTable.table tr td[data-name="Status"] .badge,
    #depositCheckTable.table tr td[data-name="Status"] .badge {
        display: inline-block !important;
    }

    .form-buttons-holder {
        display: block !important;
    }

        .form-buttons-holder .btn {
            width: 48% !important;
            position: relative;
        }

            .form-buttons-holder .btn:nth-child(n+3) {
                margin-top: .5rem !important;
            }

    .table tr td {
        width: 100%;
        max-width: 100%;
    }



        .table tr td:not(.data-action),
        #orderTable.table tr td:not(.data-action),
        #customerTable.table tr td:not(.data-action) {
            width: 95%;
            max-width: 95%;
            word-break: break-all !important;
            white-space: unset !important;
            padding: 8px 8px 14px 8px;
        }


        .table tfoot tr th[data-name]:before,
        .table tr td[data-name]:before,
        #orderTable.table tfoot tr th[data-name]:before,
        #orderTable.table tr td[data-name]:before {
            bottom: 0px;
            left: .50rem;
        }

    #orderTable.table tfoot tr td[data-name="Total"] {
        margin-bottom: 0px;
    }

        #orderTable.table tfoot tr td[data-name="Total"]:before {
            content: "";
        }

    .sales-target-form .col-sm-3 + .col-sm-3 {
        margin-top: 1rem;
    }

    /*dashboard*/  

    .dashboard-icon {
        left: 43%;
    }
}


/* Extra small devices (phones, 360px and down) */
@media only screen and (max-width: 360px) {




    /*
    #customerTable.table tr td.data-action {
        padding-left: 0px !important;
    }*/

    /*main customer table*/
    #customerTable.table tr td.data-action:has(.btn[title="Farm/Dealer Info"]) {
        padding-left: 0px !important;
    }

    .table tr td.data-action .btn-sm {
        width: 16%;
    }



    #salesAreaTable.table tr td {
        width: 100%;
        text-align: left;
        padding: 10px;
        word-break: break-word;
    }

    #salesRegionTable.table tr td {
        width: 100%;
        text-align: left;
        padding: 10px;
        word-break: break-word;
    }

    #residential-address-table.table tr td {
        width: 100%;
        text-align: left;
        padding: 10px;
        word-break: break-word;
    }

    #contact-number-table.table tr td {
        width: 100%;
        text-align: left;
        padding: 10px;
        word-break: break-word;
    }

    #customerTable.table tr td {
        width: 100%;
        text-align: left;
        padding: 10px;
        word-break: break-word;
    }

    #userTable.table tr td {
        width: 100%;
        text-align: left;
        padding: 10px;
        word-break: break-word;
    }

    #table-container #dynamicTable.table tr td {
        width: 100%;
        text-align: left;
        padding: 10px;
        word-break: break-word;
    }

    .sales-order-list-holder table tr td {
        width: 100%;
        padding: 10px;
        word-break: break-word;
    }

    #ar-details-table.table tr td {
        width: 100%;
        text-align: left;
        padding: 10px;
        word-break: break-word;
    }

    #deposit-table.table tr td {
        width: 100%;
        text-align: left;
        padding: 10px;
        word-break: break-word;
    }

    .table > :not(caption) > * > * {
        padding: .25rem .25rem;
    }

    #returnToOrderList + .text-primary + .d-inline-flex {
        margin-top: 1rem;
    }

    .card-body > .row > div + div {
        margin-top: 1rem;
    }
}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}

/*BELL NOTIFS CSS*/
#notificationsContainer {
    max-height: 300px;
    overflow-y: auto;
}

.dropdown-item.notify-item {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
}

    .dropdown-item.notify-item:last-child {
        border-bottom: none;
    }

.avatar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 18px;
}

.flex-1 {
    flex: 1;
    margin-left: 10px;
}

.ms-3 {
    margin-left: auto;
}

.dropdown-menu {
    /* width: 400px; */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#notificationsContainer {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
}
/*BELL NOTIFS CSS*/

/*ORDER LIST CSS*/
#orderTable tbody tr {
    cursor: pointer;
}

    #orderTable tbody tr.disabled {
        cursor: not-allowed;
    }

    #orderTable tbody tr:hover {
        background-color: #e6edf9;
    }

#orderTable th.text-center {
    text-align: center !important;
}
/*ORDER LIST CSS*/

/*CHECK LIST CSS*/
#checkTable tbody tr {
    cursor: pointer;
}

    #checkTable tbody tr.disabled {
        cursor: not-allowed;
    }

    #checkTable tbody tr:hover {
        background-color: #e6edf9;
    }

#checkTable th.text-center {
    text-align: center !important;
}
/*CHECK LIST CSS*/

/*DEPOSIT CHECK LIST CSS*/
#depositCheckTable tbody tr {
    cursor: pointer;
}

    #depositCheckTable tbody tr.disabled {
        cursor: not-allowed;
    }

    #depositCheckTable tbody tr:hover {
        background-color: #e6edf9;
    }

#depositCheckTable th.text-center {
    text-align: center !important;
}
/*DEPOSIT CHECK LIST CSS*/


/*CUSTOMER LIST CSS*/
#customerTable tbody tr {
    cursor: pointer;
}

    #customerTable tbody tr.disabled {
        cursor: not-allowed;
    }

    #customerTable tbody tr:hover {
        background-color: #e6edf9;
    }

#customerTable th.text-center {
    text-align: center !important;
}
/*CUSTOMER LIST CSS*/

/*USER LIST CSS*/
#userTable tbody tr {
    cursor: pointer;
}

    #userTable tbody tr.disabled {
        cursor: not-allowed;
    }

    #userTable tbody tr:hover {
        background-color: #e6edf9;
    }

#userTable th.text-center,
#userTable td.text-center {
    text-align: center;
}
/*USER LIST CSS*/

/*USER EDIT >  LIST CSS*/
#table-container #dynamicTable tbody tr {
    cursor: pointer;
}

    #table-container #dynamicTable tbody tr.disabled {
        cursor: not-allowed;
    }

    #table-container #dynamicTable tbody tr:hover {
        background-color: #e6edf9;
    }

#table-container #dynamicTable th.text-center,
#table-container #dynamicTable td.text-center {
    text-align: center;
}
/*USER EDIT >  LIST CSS*/

/*Residential List Order*/
#residential-address-table tbody tr {
    cursor: pointer;
}

    #residential-address-table tbody tr.disabled {
        cursor: not-allowed;
    }

    #residential-address-table tbody tr:hover {
        background-color: #e6edf9;
    }

#residential-address-table th.text-center {
    text-align: center !important;
}

/*Residential List Order*/


/*CREATE ORDER CSS*/

/*admin > branch mngt > products > add product (modal)*/
#ProductModal .modal-dialog-scrollable .modal-content {
    overflow: visible;
    max-height: unset;
}

#ProductModal .modal-dialog-scrollable .modal-body {
    overflow: visible;
}
/*admin > branch mngt > products > add product (modal)*/


/*admin > sales area > add branch (modal)*/
#BranchModal .modal-dialog-scrollable .modal-content {
    overflow: visible;
}

#BranchModal .modal-dialog-scrollable .modal-body {
    overflow: visible;
}
/*admin > sales area > add branch (modal)*/



/*admin > check deposit > create*/
.deposit-slip-wrapper {
    /*  position: relative;*/
    margin: 0 auto;
}

    .deposit-slip-wrapper .position-relative {
        width: 120px;
        margin: 0 auto;
    }

    .deposit-slip-wrapper .remove-deposit-slip {
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .deposit-slip-wrapper .preview {
        width: 120px;
    }
/*admin > check deposit > create*/


.choices__list--dropdown .choices__item {
    font-size: 16px;
    padding: 10px;
}

.choices__placeholder {
    color: #999;
    font-style: italic;
}

#orderTable th, #orderTable td {
    vertical-align: middle;
    text-align: center;
}

#orderTable td {
    padding: 10px;
    word-break: break-word;
}

#orderTable .d-flex {
    gap: 0.5rem;
}
/*CREATE ORDER CSS*/


/*EDIT ORDER CSS*/
#orderTable th, #orderTable td {
    vertical-align: middle;
    text-align: center;
}

#orderTable td {
    padding: 10px;
    word-break: break-word;
}

#orderTable .d-flex {
    gap: 0.5rem;
}
/*EDIT ORDER CSS*/

/*VIEW ORDER CSS*/
.view-additional-details {
    overflow-x: auto;
}
/*VIEW ORDER CSS*/



/*AR DETAILS CSS*/
#ar-details-table {
    width: 100%;
}

    #ar-details-table th, #ar-details-table td {
        text-align: center;
        padding: 8px;
        white-space: nowrap;
    }

        #ar-details-table th:nth-child(1),
        #ar-details-table td:nth-child(1) {
            width: 20%;
            text-align: left;
        }

        #ar-details-table th:nth-child(2),
        #ar-details-table td:nth-child(2) {
            width: 20%;
        }

        #ar-details-table th:nth-child(3),
        #ar-details-table td:nth-child(3) {
            width: 20%;
        }

        #ar-details-table th:nth-child(4),
        #ar-details-table td:nth-child(4) {
            width: 10%;
        }
/*AR DETAILS CSS*/


/*CREATE USER CSS*/
.choices__placeholder {
    color: #999;
    /*font-style: italic;*/
    font-style: normal !important;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
    z-index: 999999 !important;
}

.choices[data-type*="select-one"] .choices__inner {
    background: #fff;
}

#contactNoError {
    display: block;
    margin-top: 5px;
}

/*.text-success {
    color: green !important;
}

.text-danger {
    color: red !important;
}*/

.strength-bar {
    height: 5px;
    background-color: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.strength-bar-inner {
    height: 100%;
    width: 0%;
    background-color: red;
    transition: width 0.3s ease, background-color 0.3s ease;
}


#eyeIcon {
    width: 16px;
    height: 16px;
}

#salesAreaSection .input-group {
    display: flex;
    align-items: stretch;
}

#salesAreaSection .choices {
    flex: 1;
    margin-bottom: 0px !important;
}

#salesAreaSection .choices__inner {
    height: calc(2.25rem + 2px);
    display: flex;
    align-items: center;
    border-radius: 0;
    border-right: none;
}

#salesAreaSection .form-select {
    padding: 0.375rem 0.75rem;
    height: calc(2.25rem + 2px);
    box-sizing: border-box;
}

#salesAreaSection .btn {
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    border-left: none;
}

#branchSection .input-group {
    display: flex;
    align-items: stretch;
}

#branchSection .choices {
    flex: 1;
    margin-bottom: 0px !important;
}

#branchSection .choices__inner {
    height: calc(2.25rem + 2px);
    display: flex;
    align-items: center;
    border-radius: 0;
    /*border-right: none;*/
}

#branchSection .form-select {
    padding: 0.375rem 0.75rem;
    height: calc(2.25rem + 2px);
    box-sizing: border-box;
}

#branchSection .btn {
    height: calc(2.25rem + 2px);
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    border-left: none;
}

#userTable tbody tr {
    cursor: pointer;
}

    #userTable tbody tr.disabled {
        cursor: not-allowed;
    }

    #userTable tbody tr:hover {
        background-color: #e6edf9;
    }

#userTable th.text-center {
    text-align: center !important;
}

#userTable th, #userTable td {
    vertical-align: middle;
    text-align: center;
}
/*CREATE USER CSS*/


/*PROFILE CSS*/



.account-settings .user-profile {
    margin: 0 auto;
    padding-bottom: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centering the content horizontally */
    justify-content: center; /* Centering the content vertically */
    width: 100%; /* Make sure it takes the full width of the container */
    max-width: 300px; /* Optional: Set a max width for the profile container */
}

    .account-settings .user-profile .user-avatar {
        margin: 0 0 1rem 0;
    }

        .account-settings .user-profile .user-avatar img {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            object-fit: cover;
        }

    .account-settings .user-profile h5.user-name,
    .account-settings .user-profile h6.user-email {
        margin: 0.5rem 0;
    }

    .account-settings .user-profile h5.user-name {
        margin: 0 0 0.5rem 0;
    }

    .account-settings .user-profile h6.user-email {
        margin: 0;
        font-size: 0.8rem;
        font-weight: 400;
        color: #9fa8b9;
    }

.account-settings .about {
    margin: 2rem 0 0 0;
    text-align: center;
}

    .account-settings .about h5 {
        margin: 0 0 15px 0;
        color: #007ae1;
    }

    .account-settings .about p {
        font-size: 0.825rem;
    }

.form-control {
    border: 1px solid #cfd1d8;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: .825rem;
    background: #ffffff;
    color: #2e323c;
}

.card {
    background: #ffffff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 0;
    margin-bottom: 1rem;
}
/*PROFILE CSS*/

/*CUSTOMER CREATE PAGE CSS*/
.profile-photo {
    border: 1px dashed #ccc;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#dropZone {
    position: relative;
    text-align: center;
    width: 100%;
    max-width: 100%;
    height: auto;
    /*min-height: 300px;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px dashed #ccc;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    overflow: hidden;
    min-height: 240px;
}

#previewImage {
    display: none;
    max-width: 100%;
    max-height: 250px;
    margin: 0 auto;
}

video {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}


#fileName {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
}



.profile-photo .button-inline {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

    .profile-photo .button-inline .btn {
        align-self: stretch;
        align-content: center;
        margin: 0px;
        margin-right: 0px !important;
        width: 54px;
        text-align: center;
        font-size: 8px;
        border-radius: 0px;
        padding: 8px 4px;
        vertical-align: text-top;
    }


#useCamera {
    border-radius: 8px;
}

#capturePhotoButton {
    border-radius: 8px 0px 0px 8px;
}

#cancelCameraButton {
    border-radius: 0px 8px 8px 0px;
}

    #capturePhotoButton i,
    #cancelCameraButton i,
    #useCamera i {
        font-size: 18px;
        display: block;
        margin-bottom: 4px;
    }



#browseText {
    font-weight: bold;
    color: #007bff;
    cursor: pointer;
}


.profile-photo video {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    display: none;
}

.profile-photo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
    display: none;
}

.profile-photo .file-name {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
}

.profile-photo {
    height: auto;
    min-height: 200px;
}

    .profile-photo .text-primary {
        cursor: pointer;
    }

.form-group {
    margin-bottom: 15px;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
}

.form-group label {
    font-weight: bold;
}

.form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.list-group .list-group-item span {
    max-width: 170px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-group.list-group-upload {
    padding: 0px;
}

    .list-group.list-group-upload li {
        list-style: none;
        font-size: 12px;
        color: var(--theme-primary-darker) !important;
        border-left: 1px solid rgba(91,115,232,.25);
        border-right: 1px solid rgba(91,115,232,.25);
        padding-left: .5rem;
        padding-right: .5rem;
    }

        .list-group.list-group-upload li:first-child {
            border-top: 1px solid rgba(91,115,232,.25);
            border-top-left-radius: .2rem;
            border-top-right-radius: .2rem;
            padding-top: .5rem;
        }

        .list-group.list-group-upload li:last-child {
            border-bottom: 1px solid rgba(91,115,232,.25);
            border-bottom-left-radius: .2rem;
            border-bottom-right-radius: .2rem;
            padding-bottom: .5rem;
        }
/*.btn {
    padding: 10px 15px;
    font-size: 16px;
}*/
.left-column, .right-column {
    flex: 1;
    max-width: 48%;
}

.left-column {
    margin-right: 4%;
}

.bottom-row {
    text-align: right;
    margin-top: 20px;
}

#removeImageButton:hover {
    background: darkred;
    transform: scale(1.1);
}

.custom-btn {
    padding: 4px 8px;
    font-size: 0.75rem;
    height: 30px;
    width: 30px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .custom-btn i {
        font-size: 0.9rem;
        margin: 0;
    }

.pac-container {
    z-index: 10000;
}

#ResedentialAddressModal .pac-container {
    z-index: 1050 !important;
}


/*CUSTOMER CREATE PAGE CSS*/

.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Transparent black */
    display: none; /* Initially hidden */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}



/* Circular rotating loader */
.loader {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

/* Spin animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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


/*back to top*/
#btn-backtotop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
}


/*back to top*/