body {
        font-family: "Poppins", Arial, sans-serif;
        font-size: 14px;
        font-weight: normal;
    }

    /*custom theme colors start*/
    .title_green {
        color: #28a577;
    }

    .title_dark_grey {
        color: #ffffff;
        background-color: #868686;
        padding: 8px;
        border-radius: 10px;
    }

    .title_dark_green {
        color: #ffffff;
        background-color: #27a576;
        padding: 8px;
        border-radius: 10px;
    }

    .size13 {
        font-size: 13px;
    }

    .size16 {
        font-size: 16px;
    }

    .size18 {
        font-size: 18px;
    }

    .size20 {
        font-size: 20px;
    }

    /*custom theme colors ends*/

    .row {
        margin: 0px !important;
    }

    a {
        -webkit-transition: .3s all ease;
        -o-transition: .3s all ease;
        transition: .3s all ease;
    }

    a:hover,
    a:focus {
        text-decoration: none !important;
        outline: none !important;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    button {
        -webkit-transition: .3s all ease;
        -o-transition: .3s all ease;
        transition: .3s all ease;
    }

    button:hover,
    button:focus {
        text-decoration: none !important;
        outline: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5 {
        line-height: 1.5;
        font-weight: 400;
        font-family: "Poppins", Arial, sans-serif;
        color: #000;
    }

    .ftco-section {
        padding: 7em 0;
    }

    .ftco-no-pt {
        padding-top: 0;
    }

    .ftco-no-pb {
        padding-bottom: 0;
    }

    .heading-section {
        font-size: 28px;
        color: #000;
    }

    .heading-section small {
        font-size: 18px;
    }

    .img {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .line {
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #ddd;
        margin: 40px 0;
    }

    .wrapper {
        width: 100%;
    }

    .profile_photo {
        display: block;
        width: 120px;
        height: 120px;
    }

    a[data-toggle="collapse"] {
        position: relative;
    }

    .dropdown-toggle::after {
        display: block;
        position: absolute;
        top: 50%;
        /*right: 0;*/
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-right: 10px;
        content: none !important;
    }

    .btn-action {
        padding-right: 25px !important;
    }

    .btn-icon-only {
        height: 30px;
    }

    .btn-icon-only::after {
        content: '' !important;
    }

    .dropdown-menu {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
    }

    .dropdown-item{
        color: #565656;
    }
    .dropdown-item i{
        color:#565656;
        margin-right: 3px;
    }
    .dropdown-item:hover {
        background-color: #dadada;
    }

    #content {
        width: 100%;
        padding: 0;
        min-height: 100vh;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        min-width: 300px;
    }

    .footer p {
        color: rgba(255, 255, 255, 0.5);
    }



    .page-header {
        background-image: url(../images/page_heading_background.jpg);
        background-size: cover;
        background-position: bottom left;
        position: relative;
        border-radius: 0;
        color: #fff;
    }

    .page-block {
        padding: 10px 15px;
    }

    .page-header:before {
        content: "";
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .page-header .page-block {
        padding: 10px 15px;
    }

    .page-header .page-block .breadcrumb {
        float: right;
        background: transparent;
        margin-bottom: 0;
        padding: 0;
    }

    .page-header .page-block .breadcrumb a {
        font-size: 14px;
        color: #fff;
    }

    .breadcrumb-item+.breadcrumb-item::before {
        content: ">";
    }

    .main_page_content {
        padding: 5px 3px 5px 3px;
    }

    .card_heading {
        font-size: 17px;
        background-color: #009688;
        padding: 7px;
        color: #fff;
        width: 100%;
        margin-bottom: 2px;
        border-radius: 7px 7px 0px 0px;
    }

    .card-body {
        padding: 1.05rem;
    }

    .card_heading_red {
        font-size: 17px;
        background-color: #c9000a;
        padding: 10px;
        color: #fff;
        width: 100%;
        border-radius: 7px 7px 0px 0px;
    }

    .card_heading_green {
        font-size: 17px;
        background-color: #3c7037;
        padding: 7px;
        color: #fff;
        width: 100%;
        border-radius: 7px 7px 0px 0px;
    }

    .card_heading_green_sm {
        font-size: 14px;
        background-color: #3c7037;
        padding: 5px;
        color: #fff;
        width: 100%;
        border-radius: 4px 4px 0px 0px;
    }

    .card_heading_purple {
        font-size: 17px;
        background-color: #520098;
        padding: 7px;
        color: #fff;
        width: 100%;
        border-radius: 7px 7px 0px 0px;
    }

    .card_heading_orange {
        font-size: 17px;
        background-color: #984900;
        padding: 7px;
        color: #fff;
        width: 100%;
        border-radius: 7px 7px 0px 0px;
    }

    .card1 {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
        margin-top: 10px;
    }

    .card1_content {
        padding: 7px;
        width: 100%;
    }

    .card1_floating_menu {
        /* padding: 10px; */
        float: right;
        color: #FFF;
        font-size: 16px;
        padding-right: 30px;
        padding-left: 20px;
        /* height: inherit; */
        margin-top: 7px;
        cursor: pointer;
    }

    /* Apply card-like styles to table rows */
    .card-row {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.1s ease, box-shadow 0.1s ease;
    }

    /* Hover effect to zoom and add a bigger shadow */
    .card-row:hover {
        /*transform: scaleY(1.005);*/
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        background-color: #eeeeee;
    }

    .table-header-row {
        background-color: #e3e3e3;
    }

    .table thead th {
        vertical-align: top !important;
    }

    .form-group {
        margin-bottom: 1rem !important;
    }

    .btn-default {
        background-color: #e0e0e0 !important;
    }

    .btn-default:hover {
        background-color: #c9c9c9 !important;
    }


    .sortable {
        cursor: pointer;
    }

    .fa-sort-light {
        color: white !important;
    }

    .fa-sort {
        color: #a1a1a1;
        margin-left: 2px;
    }

    .highlight {
        background-color: #fffecb !important;
    }

    .highlightDeletedArticle {
        background-color: #FFD5D6 !important;
    }

    .required::before {
        content: '*';
        color: red;
    }

    .input_error {
        color: red;
        margin-left: 10px;
    }

    label {
        color: #4c7480;
        font-weight: 500;
    }

    .table-responsive {
        min-height: 200px;
        border-radius: 10px;
        /*overflow-x: visible !important;
        overflow-y: visible !important;*/
    }

    .table-responsive_no_dropdown {
        min-height: 200px;
        /*overflow-x: visible !important;
        overflow-y: visible !important;*/
    }

    /* Progress Bar */
    .nomargin {
        margin: 0px !important;
    }

    .progress {
        position: relative;
        height: 4px;
        display: block;
        width: 100%;
        background-color: #acece6;
        border-radius: 2px;
        background-clip: padding-box;
        margin: 0.5rem 0 1rem 0;
        overflow: hidden;
    }

    .progress .determinate {
        position: absolute;
        background-color: inherit;
        top: 0;
        bottom: 0;
        background-color: #26a69a;
        transition: width .3s linear;
    }

    .progress .indeterminate {
        background-color: #26a69a;
    }

    .progress .indeterminate:before {
        content: '';
        position: absolute;
        background-color: inherit;
        top: 0;
        left: 0;
        bottom: 0;
        will-change: left, right;
        -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
        animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    }

    .progress .indeterminate:after {
        content: '';
        position: absolute;
        background-color: inherit;
        top: 0;
        left: 0;
        bottom: 0;
        will-change: left, right;
        -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        -webkit-animation-delay: 1.15s;
        animation-delay: 1.15s;
    }

    @-webkit-keyframes indeterminate {
        0% {
            left: -35%;
            right: 100%;
        }

        60% {
            left: 100%;
            right: -90%;
        }

        100% {
            left: 100%;
            right: -90%;
        }
    }

    @keyframes indeterminate {
        0% {
            left: -35%;
            right: 100%;
        }

        60% {
            left: 100%;
            right: -90%;
        }

        100% {
            left: 100%;
            right: -90%;
        }
    }

    @-webkit-keyframes indeterminate-short {
        0% {
            left: -200%;
            right: 100%;
        }

        60% {
            left: 107%;
            right: -8%;
        }

        100% {
            left: 107%;
            right: -8%;
        }
    }

    @keyframes indeterminate-short {
        0% {
            left: -200%;
            right: 100%;
        }

        60% {
            left: 107%;
            right: -8%;
        }

        100% {
            left: 107%;
            right: -8%;
        }
    }


    /*comment box*/
    .comment_box {
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100%;
        padding: 10px;
    }

    .comment {
        margin-bottom: 10px;
        margin-top: 10px;
        border-bottom: 1px solid #dfdfdf;
        min-height: 80px;
    }

    .comment_user_photo {
        width: 30px;
        border-radius: 50%;
        float: left;
    }

    .comment_user_name {
        margin-left: 10px;
        margin-bottom: 0px;
    }

    .comment_date {
        margin-left: 10px;
        color: #cecece;
    }

    .comment_text {
        padding: 10px;
        margin-top: 5px;
    }

    .comment_customer_visit_img {
        width: 100px;
    }

    #add_new_comment_card {
        max-width: 800px;
    }

    .product_title_in_table {
        max-width: 300px;
        word-wrap: break-word;
    }

    .cart_item_title {
        font-size: 13px;
        color: #17a2b8;
        font-weight: 600;
        margin-bottom: 2px;

    }

    .card-body_custom {
        padding: 10px 10px 10px 10px;
    }

    .topright_sr_no {
        position: absolute;
        top: 8px;
        right: 16px;
        font-size: 18px;
        background-color: #6b6b6b;
        color: white;
        padding: 10px;
        margin-top: -8px;
        margin-right: -15px;
        border-radius: 0px 0px 0px 10px;
        font-size: 12px;
    }

    /* /task style/ */
    @media (min-width: 992px) {
        .left-border-lg {
            border-left: 1px solid grey;
        }
    }

    /* user name with dp */
    .user_name_with_dp {
        width: fit-content;
        background: #046d6d1f;
        border-radius: 60px 0px 60px 60px;
        color: black;
        padding-right: inherit;
        height: fit-content;
    }

    .task_view_th {
        font-weight: 500;
        color: #363636;
    }

    /* task_view.php mode note */
    .model_note {
        text-align: end;
        font-size: small;
        color: #130000;
        font-weight: 500;
        background: #e2cbcb;
        max-width: fit-content;
        padding-right: 10px;
        padding-left: 10px;
        border-radius: 0px 30px 30px 0px;
        margin-left: -18px;
        margin-bottom: 5px;
    }

    .modal-header-dark {
        background-color: #18a2b8;
        color: #fff;
    }

    #GPS_ON {
        text-align: right;
        color: red;
    }

    @-webkit-keyframes blinker {
        from {
            opacity: 1.0;
        }

        to {
            opacity: 0.0;
        }
    }

    .blink {
        text-decoration: blink;
        -webkit-animation-name: blinker;
        -webkit-animation-duration: 0.6s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-direction: alternate;
    }

    .dates::after {
        content: "DD-MM-YYYY";
        color: gray;
        font-size: 10px;
        margin-left: 10px;
    }

    .product_subheading {
        font-size: 18px;
        color: #004084;
        margin-bottom: 0px;
        font-weight: 500;
    }

    .status_msg_div {
        max-width: fit-content;
        background: #f5f5e2;
        border-radius: 0px 30px 30px 50px;
        padding-left: 30px;
        font-size: small;
        font-weight: 300;
        color: black;
        padding-right: 5px;
        margin-top: 0px;
        border: 1px solid #d2d2d2;
    }

    .product_code {
        margin-left: 5px;
    }

    .product_details_tech_spec_td {
        background-color: #f3f3f3;
    }

    .product_details_price {
        color: red;
        font-size: 20px;
    }

    /* filter navbar MUST IN SYNC WITH ERP AND CUSTOMER*/
    .sidenav1 {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;
        background-color: #FFF;
        overflow-x: hidden;
        transition: 0.5s;
        color: #000;
        box-shadow: -18px 4px 27px -4px rgba(0, 0, 0, 0.63);
        -webkit-box-shadow: -18px 4px 27px -4px rgba(0, 0, 0, 0.63);
        -moz-box-shadow: -18px 4px 27px -4px rgba(0, 0, 0, 0.63);
        font-size: 15px;
    }

    .filter_value {
        width: 12px;
        height: 12px;
    }

    #filter_div {
        padding: 20px 10px 30px 10px;
    }

    .filter_field {
        color: #0080FF;
        font-size: 14px;
        margin-bottom: 1px;
        margin-top: 5px;
    }

    .filter_label {
        font-size: 12px;
        margin-bottom: 0px;
    }

    .sidenav1 .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

    .filter_tag,
    .search_tag_nonclikable {
        background-color: #a4e2f0;
        margin-left: 8px;
        border-radius: 8px;
        padding: 0px 8px 0px 8px;
    }

    .filter_tag_heading {
        float: left;
    }

    .filter_values_div {
        margin-left: 10px;
        max-height: 300px;
        overflow: auto;
        max-width: 95%;
    }

    /* width */
    .custom_scrollbar::-webkit-scrollbar {
        width: 8px;
    }

    /* Track */
    .custom_scrollbar::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 10px;
    }

    /* Handle */
    .custom_scrollbar::-webkit-scrollbar-thumb {
        background: grey;
        border-radius: 10px;
    }

    /* Handle on hover */
    .custom_scrollbar::-webkit-scrollbar-thumb:hover {
        background: #E5E5E5;
    }

    .permission_description {
        color: #868686;
        font-style: italic;
        margin-top: 3px;
    }

    .permission_heading {
        font-weight: 600;
    }

    .image_product_list {
        max-width: 70px;
    }

    .invoice_total_row {
        font-weight: bolder;
        font-size: 15px;
        background-color: #2b5f4c !important;
        color: white;
    }

    .form_info_div {
        padding: 5px;
        border: 1px solid #cacaca;
        background-color: whitesmoke;
        border-radius: 7px;
    }


    .select2-container .select2-selection--single .select2-selection__rendered {
        white-space: normal !important;
        width: 100% !important;
    }

    .select2-container--default .select2-selection--single {
        overflow: hidden !important;
    }

    #prodcution_required_bom_div {
        border: 1px solid grey;
        overflow: auto;
        max-height: 1000px;
    }

    .datetime_date {
        width: fit-content;
        display: inline-flex;
    }

    .modal-full_screen {
        max-width: none;
        margin: 10px 10px 10px 10px;
    }

    input[type=text],
    input[type=password],
    input[type=number] {
        max-width: 600px;
    }

    .sample_val {
        width: 100%;
        max-width: 100px !important;
    }

    .page_btns {
        text-align: right;
    }

    .invalid {
        border: 2px solid red;
    }

    .form_note {
        background-color: #970000;
        padding: 5px;
        margin: 5px 0px 5px 0px;
        color: white;
    }

    .general_note {
        background-color: #ffac7b;
        padding: 5px;
        margin: 5px 0px 5px 0px;
    }


    /*atwho starts*/
    .atwho-view {
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        margin-top: 18px;
        background: white;
        color: black;
        border: 1px solid #DDD;
        border-radius: 3px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        min-width: 120px;
        z-index: 11110 !important;
    }

    .atwho-view .atwho-header {
        padding: 5px;
        margin: 5px;
        cursor: pointer;
        border-bottom: solid 1px #eaeff1;
        color: #6f8092;
        font-size: 11px;
        font-weight: bold;
    }

    .atwho-view .atwho-header .small {
        color: #6f8092;
        float: right;
        padding-top: 2px;
        margin-right: -5px;
        font-size: 12px;
        font-weight: normal;
    }

    .atwho-view .atwho-header:hover {
        cursor: default;
    }

    .atwho-view .cur {
        background: #3366FF;
        color: white;
    }

    .atwho-view .cur small {
        color: white;
    }

    .atwho-view strong {
        color: #3366FF;
    }

    .atwho-view .cur strong {
        color: white;
        font: bold;
    }

    .atwho-view ul {
        /* width: 100px; */
        list-style: none;
        padding: 0;
        margin: auto;
        max-height: 200px;
        overflow-y: auto;
    }

    .atwho-view ul li {
        display: block;
        padding: 5px 10px;
        border-bottom: 1px solid #DDD;
        cursor: pointer;
        /* border-top: 1px solid #C8C8C8; */
    }

    .atwho-view small {
        font-size: smaller;
        color: #777;
        font-weight: normal;
    }

    /*atwho ends*/

    .not_icon {
        font-size: 20px;
        cursor: pointer;
        color: #ff7171;
    }

    .menu-chat-icon {
        font-size: 25px;
        color: #4f6ce7;
        cursor: pointer;
    }

    .q_item_p_code {
        font-size: 12px;
        font-style: italic;
    }

    .dp_item_table th {
        background-color: white;
    }

    .dp_item_table td {
        background-color: white;
    }

    .btn-sm {
        padding: .1rem 0.4rem !important;
        margin: 1px;
    }

    .plus-minus:before,
    .plus-minus.collapsed:before {
        display: inline-block;
        width: 1em;
        font-family: arial;
        font-weight: bold;
        text-align: center;
        position: relative;
        cursor: pointer;
    }

    .plus-minus:before {
        content: "-";
        top: -1px;
    }

    .plus-minus.collapsed:before {
        content: "+";
        top: 0;
    }


    .flow_diagram {
        padding: 10px;
        text-align: center;
        border: 1px solid #d0d0d0;
        -webkit-box-shadow: 0px 18px 19px -15px rgba(0, 0, 0, 0.71);
        -moz-box-shadow: 0px 18px 19px -15px rgba(0, 0, 0, 0.71);
        box-shadow: 0px 18px 19px -15px rgba(0, 0, 0, 0.71);

    }

    .flow_diagram_step {
        background-color: #e4d3f4;
        padding: 10px;
        border-radius: 10px 100px 100px 10px;
        border-right: 10px red solid;
    }

    .flow_diagram_step_completed {
        background-color: green !important;
        color: white !important;
    }

    /* Sidebar Styling */
    .sidebar{
        box-shadow: inset -11px 0px 8px 0px rgba(0, 0, 0, 0.1);
    }
    #sidebar_new {
        min-width: 220px;
        max-width: 220px;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        box-shadow: inset -11px 0px 8px 0px rgba(0, 0, 0, 0.1);
        background: #ffffff;
    }
    #sidebar_new.active {
        margin-left: -220px;
      }

    .sidebar_toggle::after {
        content: '' !important;
    }

    @media (max-width: 991.98px) {
        #sidebarCollapse span {
            display: none;
        }
    }


      @media (max-width: 991.98px) {
        #sidebar_new {
          margin-left: -220px;
        }
      
        #sidebar_new.active {
          margin-left: 0;
        }
      }

    main {
        background: #f8f9fa;
        /*overflow-y: auto;*/
        width: 100%;
        padding: 0;
        min-height: 100vh;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        min-width: 300px;
    }

    body {
        overflow-x: hidden;
    }

    .navbar-brand {
        font-size: 1.05rem;
    }

    .navbar {
        padding: 0.2rem;
    }

    .table-responsive {
        font-weight: 0.9rem;
    }

    .nav-link:hover {
        background-color: #eeeeee !important;
    }
    .search-box input {
        width: 200px;
        transition: width 0.3s ease-in-out;
    }

    .search-box input:focus {
        width: 300px;
        outline: none;
    }