body{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background: #f1f2f3 !important;
}
.artwork{
    position: fixed;
    right: 0;
    top: 0;
    z-index: 0;
    background-color: #084c3f;
    height: 100%;
}
.login-page-conatiner{
    background-color: #084c3f;
    display: flex;
    min-height: 100vh;
}
.login-page-content{
    width: 468px;
    background: white;
    border-radius: 8px;
    margin: 3vw 10vw;
    height: 100%;
}
.login-card{
    padding-top: 80px;
    padding-bottom: 10px;
    padding-right: 40px;
    padding-left: 40px;
}
.login-card-header{
    margin-bottom: 50px;
}
.login-card-logo{
    width: 170px;
    margin: 0 auto;
}
.login-card-logo img{
    width: 100%;
}
.ui-heading{
    font-size: 23px;
    line-height: 1.2em;
    margin-bottom: 0.2rem;
    font-weight: 500;
    margin-top: 0;
}
.ui-desc{
    color: rgb(109, 113, 117);
    margin: 0;
    font-size: 15px;
    margin-bottom: 20px;
}
.login--input,
.forget--input{
    border: 1px solid rgb(109, 113, 117);
    border-radius: 2px;
    position: relative;
    margin-bottom: 14px;
    width: 100%;
}
.login--input label,
.forget--input label{
    padding: 1px 12px 0;
    margin: 0;
    font-size: 14px;
    color: #6f7287;
    position: absolute;
}
.login--input input,
.forget--input input{
    border: none;
    outline: none;
    font-size: 14px;
    min-height: 22px;
    padding: 20px 12px 6px;
    color: #39364f;
    width: 100%;
}
.ui-submit-btn{
    box-shadow: 0 1px 0 rgb(0 0 0 / 5%), inset 0 -1px 0 rgb(0 0 0 / 20%);
    background: rgb(0, 128, 96 , 1);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 16px 24px;
    margin: 12px 0;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}
.help-link{
    color: rgb(109, 113, 117);
    font-size: 13px;
}
.help-link a{
    color: rgb(0, 128, 96 , 1);
    text-decoration: none;
}
.help-link a:hover{
    text-decoration: underline;
}
.login-footer{
    padding:4px 1.2rem 2rem 1.2rem;
    display: flex;
    justify-content: flex-end;
}
.login-footer-link{
    color: rgb(109, 113, 117);
    font-size: 14px;
    margin-right: 12px;
    text-decoration: none;
}
.login-footer-link:hover{
    text-decoration: underline;
}
.change-email-container{
    display: flex;
    padding: 10px 0;
    justify-content: space-between;
    align-items: center;
}
.change-email{
    padding-right: 10px;
    margin-top: 8px;
    margin-left: 8px;
    font-size: 13px;
}
.change-email-btn{
    margin-top: 8px;
    margin-left: 8px;
}
.change-email-btn a{
    color: #008060;
    font-size: 13px;
    text-decoration: none;
}
.change-email-btn a:hover{
    text-decoration: underline;
}

/* =========homepage========= */

.header-container{
    position: fixed;
    z-index: 512;
    top: 0;
    display: flex;
    height: 3.6rem;
    background-color: #fff;
    transition: background-color .2s ease-in-out;
    width: 100%;
    border-bottom: 1px solid rgb(222, 222, 223, 1);
}
.header-logo-container{
    width: 15rem;
    display: flex;
    height: 100%;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0 .8rem;
}
.header-logo-container img{
    width: 112px;
}
.header-search-bar-container{
    z-index: 10;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.serach-bar-container{
    padding: 0 1.2rem;
    margin-left: calc(50% - 30.9rem);
}
.search-feild-container{
    z-index: 519;
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    border: 1px solid transparent;
    width: 36rem;
}
.search-feild-container input{
    height: 2.5rem;
    width: 100%;
    padding: 0 0 0 2.6rem;
    font-size: 16px;
    background: #f1f2f3;
    border: none;
    border-radius: 4px;
}
.search-feild-container svg{
    position: absolute;
    height: 1.2rem;
    width: 1.2rem;
    fill: rgb(92, 95, 98, 1);
    left: 10px;
}
.search-feild-container input:focus{
    outline: 2px solid rgb(69, 143, 255, 1);
    border-radius: 4px;
}
.user-dropdown svg{
    width: 2rem;
    color: rgb(79, 41, 31, 1);
    background: rgb(253, 201, 208, 1);
    border-radius: 50%;
}
.user-dropdown-btn{
    background: transparent;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    border: none;
    margin-right: 10px;
}
.user-dropdown-btn:focus{
    outline: none;
}
.user-dropdown .dropdown-toggle::after{
    display: none !important;
}
.user-dropdown .dropdown-menu{
    background: #202123 !important;
    top: 12px !important;
}
.user-dropdown .dropdown-item{
    color: rgb(227, 229, 231, 1) !important;
    display: flex !important;
    align-items: center;
    padding: 8px 16px !important;
    font-weight: 400;
    margin-bottom: 4px;
    font-size: 14px;
}
.user-dropdown .dropdown-item i{
    font-size: 16px;
    margin-right: 14px;
}
.user-dropdown .dropdown-item:hover{
    background: #3e4043;
}
.header-drop-border{
    border-bottom: 1px solid rgb(69 71 73);
    padding-bottom: 8px;
}
.sidebar-container{
    position: fixed;
    top: 58px;
    background: #f1f2f3;
    height: 100%;
    overflow: scroll;
    border-right: 1px solid rgb(201 204 207);
}
.sidebar-navigation-container{
    width: 222px;
    height: 100%;
}
.sidebar-navigation{
    padding-top: 12px;
    display: flex;
    flex-direction: column;
}
.navigation-content-container{
    padding-bottom: 22px;
    margin: 0;
    padding-left: 0;
}
.navigation-list-item{
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}
.list-item-content{
    display: flex;
    align-items: center;
    padding-left: 14px;
    padding-right: 4px;
    position: relative;
    font-size: 14px;
    color: rgb(32, 34, 35, 1);
    width: 100%;
    margin-left: 6px;
    margin-right: 12px;
    font-weight: 500;
}
.list-item-content:hover{
    text-decoration: none;
    color: inherit;
    background: rgb(237, 238, 239, 1);
}
.list-item-content svg{
    width: 24px;
    height: 24px;
    fill: rgb(92, 95, 98, 1);
    margin-right: 18px;
    margin-top: 6px;
    margin-bottom: 6px;
}
.list-item-content svg:active{
    fill: rgb(0, 123, 92, 1);
}
.active-side-bar::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6px;
    height: 100%;
    width: 3px;
    background: rgb(0, 123, 92, 1);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}
.active-side-bar{
    background: rgb(200, 201, 202);
    color: rgb(0, 123, 92, 1);
}
.list-item-text{
    width: 100%;
}
.order-numbers{
    background: rgb(228, 229, 231, 1);
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 50%;
}
.list-item-btn{
    background: transparent;
    border: none;
    padding-right: 0;
}
.list-item-btn:focus{
    outline: none;
}
.list-item-btn svg{
    width: 24px;
    height: 24px;
    fill: rgb(92, 95, 98, 1);
    margin: 0;
}
.main-content-container{
    padding-top: 58px;
    padding-left: 240px;
    background: #f1f2f3;
}
.main-content-container-wrap{
    padding: 0 32px;
    width: 100%;
}
.content-page-header{
    padding-top: 22px;
    display: flex;
    align-items: center;
}
.page-header-text{
    width: 50%;
    font-size: 20px;
    font-weight: 500;
}
.page-header-btn{
    width: 50%;
    text-align: right;
}
.export-btn{
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 600;
    padding: 10px;
    margin-right: 10px;
}
.export-btn:hover{
    background: rgb(237 238 239);
    border-radius: 4px;
}
.add-product-btn{
    border: none;
    font-size: 14px;
    font-weight: 400;
    padding: 8px 12px;
    background: rgb(0, 128, 96, 1);
    border-radius: 4px;
    color: #fff;
}
.add-product-btn:hover{
    background: rgb(0 110 82) !important;
}
.export-btn:focus,
.add-product-btn:focus{
    outline: none;
}
.content-page-container{
    margin-top: 18px;
}
.content-tabel-container{
    margin-top: 16px;
    background: #fff;
    border: 1px solid #dee2e6;
    padding-bottom: 50px;
    border-radius: 4px;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link,
.nav-tabs{
    border: none !important;
}
.nav-link{
    color: rgb(109, 113, 117, 1) !important;
    font-size: 14px;
    position: relative;
}
.nav-link.active {
    color: #000 !important;
}
.nav-tabs .nav-item {
    margin-bottom: 0px !important;
}
.content-tabel-nav{
    border-bottom: 1px solid #dee2e6;
    padding: 0 8px;
}
.nav-link.active::before{
    content: "";
    position: absolute;
    top: 42px;
    left: 0;
    height: 3px;
    width: 100%;
    background: rgb(0, 123, 92, 1);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
.nav-item{
    padding: 8px 4px;
}
.filter-order-conatiner{
    padding: 16px 16px 8px;
    display: flex;
}
.filter-order-search-conatiner{
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    border: 1px solid rgb(201, 204, 207, 1);
    border-radius: 3px;
    margin-right: 12px;
}
.filter-order-search-conatiner input{
    height: 2.5rem;
    width: 100%;
    padding: 0 0 0 2.6rem;
    font-size: 16px;
    background: #fff;
    border: none;
    border-radius: 4px;
}
.filter-order-search-conatiner svg{
    position: absolute;
    height: 1.2rem;
    width: 1.2rem;
    fill: rgb(92, 95, 98, 1);
    left: 10px;
}
.filter-order-search-conatiner input:focus{
    outline: none;
}
.filter-order-conatiner .dropdown-toggle{
    background: transparent;
    height: 2.6rem;
    border: 1px solid rgb(201, 204, 207, 1);
    font-size: 14px;
    font-weight: 500;
    padding: 0 18px;
    border-right: 0px;
}
.filter-order-conatiner .dropdown-menu{
    padding: 16px;
    min-width: 8rem;
}
.filter-order-conatiner .dropdown-menu ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.filter-order-conatiner .dropdown-menu li{
    display: flex;
    align-items: center;
}
.filter-order-conatiner .dropdown-menu input{
    width: 16px;
    height: 16px;
    margin-right: 8px;
}
.filter-order-conatiner .dropdown-menu label{
    margin: 0;
}
.filter-order-conatiner .dropdown-menu button{
    background: transparent;
    border: none;
}
.more-filter{
    background: transparent;
    height: 2.6rem;
    border: 1px solid rgb(201, 204, 207, 1);
    font-size: 14px;
    font-weight: 500;
    padding: 0 18px;
}
button:focus{
    outline: none !important;
}
.edit-view-btn{
    background: transparent;
    height: 2.6rem;
    border: 1px solid rgb(201, 204, 207, 1);
    font-size: 14px;
    font-weight: 500;
    padding: 0 18px;
    display: flex;
    align-items: center;
    margin-left: 12px;
    color: rgb(92, 95, 98, 1);
}
.edit-view-btn svg{
    width: 20px;
    height: 20px;
    margin-right: 4px;
    fill: rgb(92, 95, 98, 1);
}
.order-tabel-container th{
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #dee2e6 !important;
    border-top: none !important;
}
.order-tabel-container input{
    width: 16px;
    height: 16px;
    margin-right: 8px;
}
.order-tabel-container td{
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid #dee2e6;
}
.order-tabel-container .dropdown-toggle{
    background: transparent;
    border: none;
}
.order-tabel-container .dropdown-menu{
    padding: 16px;
    top: -13px !important;
}
.customer-details{
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 16px;
}
.customer-details h6{
    font-size: 14px;
}
.customer-details p{
    font-size: 14px;
    margin-bottom: 6px
}
.customer-details a{
    font-size: 14px;
}
.order-tabel-container .dropdown-menu button{
    background: transparent;
    border: 1px solid #dee2e6;
    font-size: 14px;
    padding: 6px 26px;
    border-radius: 4px;
    margin-top: 13px;
}
.dot-fill{
    background: rgb(92, 95, 98, 1);
    border-radius: 50%;
    margin-right: 4px;
    margin-top: 2px;
    width: 10px;
    height: 10px;
    border: 2px solid rgb(92, 95, 98, 1);
}
.paid-container{
    background: rgb(228, 229, 231, 1);
    border-radius: 100px;
    padding: 2px 10px;
    width: fit-content;
    display: flex;
    align-items: center;
}
.unfulfilled-container{
    background: #ffea8a;
    border-radius: 100px;
    padding: 2px 6px;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dot-unfilled{
    border-radius: 50%;
    margin-right: 4px;
    width: 10px;
    height: 10px;
    border: 2px solid rgb(92, 95, 98, 1);
}
.learn-more-about-container{
    margin: 2rem;
}
.learn-more-about svg{
    width: 20px;
    fill: rgb(0, 160, 172);
    margin-right: 6px;
}
.learn-more-about{
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.learn-more-about a{
    text-decoration: underline;
    margin-left: 4px;
}
.learn-more-about a svg{
    fill: #007bff;
}

/*============= lead ========== */
.lead-input-title{
    text-align: center;
    font-size: 24px;
    margin-top: 34px;
    font-weight: 600;
}
.lead-input-container{
    width: 100%;
    margin: 0 auto;
    margin-top: 40px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 24px;
}
.input-feild label{
    font-size: 14px;
    margin-bottom: 6px;
}
.input-feild select,
.input-feild input,
.input-feild textarea{
    border: 1px solid rgb(201 204 207);
    width: 100%;
    border-radius: 4px;
    padding: 15px 20px;
    font-size: 13px;
}
input,
select:focus,
label:focus,
button:focus,
textarea:focus{
    outline: none;
}
.input-feild-container{
    display: flex;
    justify-content: space-between;
}
.input-feild{
    width: 23%;
}
.width-50{
    width: 49% !important;
}
.w-30{
    width: 30%;
}
.para-text{
    margin: 0;
    text-align: center;
}
.mt-8px{
    margin-top: 8px;
}
.submit-btn{
    border: none;
    font-size: 18px;
    font-weight: 400;
    padding: 8px 12px;
    background: rgb(0, 128, 96, 1);
    border-radius: 4px;
    color: #fff;
    width: 100%;
    margin-top: 40px;
}
.input-feild-container-wrap p{
    margin: 0;
    margin-top: 22px;
    text-align: center;
}
.bb-g{
    border-bottom: 2px solid grey;
    padding-bottom: 30px;
}
.input-feild-container-wrap h6{
    font-size: 18px;
    font-weight: 400;
}
.input-feild-container-wrap h4{
    font-size: 21px;
    font-weight: 400;
}
.mt-22{
    margin-top: 22px;
}
.input-feild-radio{
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.input-feild-radio input{
    width: 16px;
    height: 16px
}
.input-feild-radio label{
    margin: 0;
    margin-left: 12px;
}
.input-feild-container-radio{
    margin-top: 22px;
}
.input-feild-container-radio p{
    text-align: left !important;
    margin: 0 !important;
    margin-bottom: 6px !important;
}
.w-800{
    width: 800px;
}
canvas {
    width: 50% !important;
    margin: 0 auto;
	background: #fff;
	display: block;
	cursor: crosshair;
    border: 1px solid rgb(201 204 207);
    width: 100%;
    border-radius: 4px;
    padding: 15px 20px;
    height: 150px
}
.controls {
    margin: 0 auto;
    width: 50%;
    text-align: right;
}
.clear-sign-btn{
    background: transparent;
    color: #000 !important;
    outline: none;
	font-size: 16px;
    width: max-content;
    border: none;
    margin-top: 4px;
}
.f-jsb-fw-w{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.w-47{
    width: 47%;
}
.bt-2b{
    border-top: 2px solid #000;
    padding-top: 16px;
    margin-top: 24px;
}
.br-b2{
    border-right: 2px solid #000;
    padding-right: 22px; 
}
.lender-defi-container{
    width: 500px;
    margin: 36px auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding-top: 80px;
    padding-bottom: 40px;
    padding-right: 40px;
    padding-left: 40px;

}
.lender-input-conntainer{
    display: flex;
    align-items: center;
}
.lender-input-conntainer label{
    margin-bottom: 0;
    width: 28%;
}
.lender-input-conntainer input,
.lender-input-conntainer textarea{
    border: 1px solid rgb(201 204 207);
    border-radius: 4px;
    padding: 4px 14px;
    width: 100%;
}
.mb-32{
    margin-bottom: 32px;
}
.logo-container{
    text-align: center  ;
    margin-bottom: 50px;
}
.logo-container img{
    width: 200px;
}
.lender-desc{
    color: rgb(109, 113, 117);
    margin: 0;
    font-size: 18px;
    margin-bottom: 20px;
}
.lender-submit-btn{
    box-shadow: 0 1px 0 rgb(0 0 0 / 5%), inset 0 -1px 0 rgb(0 0 0 / 20%);
    background: rgb(0, 128, 96 , 1);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 9px 24px;
    font-size: 18px;
    margin-top: 30px;
    width: 100%;    
}
.table{
    background: #fff;
}
.update-btn{
    background: #87b14b;
    border: none;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
}
.del-btn{
    background: #d92424;
    border: none;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
}
@media only screen and (min-width: 320px) and (max-width: 768px) {
    .sidebar-container{
        display: none;
    }
    .serach-bar-container{
        display: none;
    }
    .header-container{
        justify-content: space-between;
    }
    .header-search-bar-container{
        flex: unset;
    }
    .main-content-container{
        padding-left: 0;
    }
    .input-feild-container{
        display: block;
    }
    .br-b2{
        border: none;
        padding: 0;
    }
    .width-50{
        width: 100% !important;
    }
    .w-47{
        width: 100%;
    }
    .input-feild{
        margin-top: 8px !important;
    }
    .mt-8px{
        margin: 0;
    }
     .lender-defi-container{
        width: 100%;
    }
    .lender-input-conntainer{
        display: block;
    }
    .lender-input-conntainer input, 
    .lender-input-conntainer textarea{
        width: 100%;
    }
       .lender-select select{
        margin-bottom: 18px;
        margin-right: 0;
    }
    .lender-select-conntainer{
         display: block !important;
    }
      .lender-input{
        display: block;
        width: 100%;
    }
    .lender-input label{
        width: auto;
    }
    .lender-input-conntainer label{
        width: 100%;
    }
    .artwork{
        display: none;
    }
    .login-page-content{
        width: 100%;
        margin: 3vw 7vw;
    }
    .login-card{
        padding-right: 20px;
        padding-left: 20px;
    }
}

.bg-g{
    background: #769945 !important;
    border: none !important;
}
.bg-r{
    background: #e52424 !important;
    border: none !important;
}
.panel{
    margin: 40px 0;
}
.table-responsive{
    width: 100%;
    background: #fff !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 14px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
    padding: 2px 12px !important;
}
.dataTables_wrapper .dataTables_paginate{
    padding-top: 0.755em !important;
}
.dataTables_wrapper .dataTables_filter input{
    padding: 2px 6px !important;
    border: 1px solid #ced4da !important;
}
.dataTables_wrapper .dataTables_length select{
    padding: 2px !important;
}
table.dataTable.no-footer{
    border-bottom: none !important;
}
.table td, .table th {
    border-bottom: 1px solid #dee2e6 !important;
    border-top: none !important;
    text-align: center;
}
.drop-input-container{
    width: 100%;
    margin: 36px auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding-top: 80px;
    padding-bottom: 40px;
    padding-right: 40px;
    padding-left: 40px;
}
.lender-input-conntainer select{
    border: 1px solid rgb(201 204 207);
    border-radius: 4px;
    padding: 4px 14px;
    width: 100%;
    margin-right: 22px;
}
.lender-input-conntainer select:last-child{
    margin-right: 0;
}
.d-fjc-c{
    display: flex;
    justify-content: center;
}
.lender-input-checkbox label{
    margin-bottom: 0;
    margin-right: 22px;
    width: 30%;
}
.lender-input-checkbox input{
    width: 16px;
    height: 16px;
}
.lender-select-conntainer{
    display: flex;
    align-items: center;
}
.lender-select{
    width: 100%;
    margin-right: 22px;
}
.lender-select label{
    margin-bottom: 0;
    margin-right: 12px;
}
.lender-select select{
    border: 1px solid rgb(201 204 207);
    border-radius: 4px;
    padding: 4px 14px;
    width: 100%;
}
.lender-input label{
    margin-bottom: 0;
    margin-right: 12px;
    width: 28%;
}
.lender-input input{
    border: 1px solid rgb(201 204 207);
    border-radius: 4px;
    padding: 4px 14px;
    width: 100%;
}
.lender-input{
    display: flex;
    align-items: center;
    width: 40%;
    margin-bottom: 18px;
}
.error{
    color:red;
}
.ta-c{
    text-align: center;
}
.d-none{
    display: none;
}
.dh-none{
    display: none;
}
.forget-btn,
.login-btn{
    color: rgb(0, 128, 96 , 1);
    font-size: 14px;
    cursor: pointer;
}
.lender-tabel td,
.lender-tabel th{
    text-align: left;
}
.lender-tabel input[type=checkbox], input[type=radio]{
    margin-right: 12px;
}