@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap');

:root {
    --accent: #106f57;
}

.text-accent{
  color:var(--accent)!important;
}

.navbar-brand{
  margin-right: 0px;
}

.navbar-brand figure img{
  width: 100px;
}

.container{
  max-width: 1140px!important;
}

.main-header{
    background-image: url(../images/header-bg.png);
    background-position: top center;
}

.nav-links{
    display: flex;
    gap:20px;
}

.nav-links a{
    text-decoration: none;
    color:black;
}

.nav-links a:hover, .nav-links a.active{
    color:var(--accent);     
}

.nav-links a:hover svg, .nav-links a.active svg{
    fill: var(--accent);
}

.main-menu{
    display: flex;
    justify-content: space-between;
}

.main-menu a{
    box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.1);
    background-color: white;
    border-radius: 20px;
    width: 200px;
    height: 150px;
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    text-decoration: none;
    color:var(--accent);
    text-transform: uppercase;
    font-weight: bold;
    padding-left: 20px;
    font-size: 20px;
}

.data-entry .main-menu a{
  width: 100%!important;
  height: 70px!important;
  margin-bottom: 20px;
  font-size: 14px;
}

.main-menu a:hover, .main-menu a.active{
    background-color: var(--accent);
    color:white;
}

.main-menu a.members{
    background-image: url(../images/nav-members.png);
    background-position: 50px 10px;
}

.main-menu a.myaccount{
  background-image: url(../images/nav-myaccount.png);
  background-position: 110px 0;
}

.main-menu a.username{
  background-image: url(../images/nav-username.png);
  background-position: 90px 0;
}

.main-menu a.password{
  background-image: url(../images/nav-password.png);
  background-position: 100px 0;
}

.main-menu a.products{
    background-image: url(../images/nav-products.png);
    background-position: 100px 0;
}

.main-menu a.invoicing{
    background-image: url(../images/nav-invoicing.png);
    background-position: 100px 0;
}

.main-menu a.payouts{
    background-image: url(../images/nav-payouts.png);
    background-position: 100px 10px;
}

.main-menu a.reports{
  background-image: url(../images/nav-reports.png);
  background-position: 50px 0;
}

.sc-title{
    border: 2px solid var(--accent);
    border-radius: 100px;
    width: fit-content;
    padding:5px 10px;
    margin:0 auto;
}

.data-entry .sc-title{
  margin:0px!important;
}

.sc header{
    display: flex;
}

.sc header .date{
    color:var(--accent);
    font-weight: bold;
}

.main-sc{
    box-shadow: 0px 0px 15px 7px rgba(0,0,0,0.1);
    background-color: white;
    border-radius: 20px;
    padding:15px;
}

.main-sc header{
    display: flex;
    gap:10px;
    /*border-bottom: 1px solid rgb(212, 212, 212);*/
}

.invoices-page .main-sc header{
  border-bottom: none;
  display: block!important;
}

.invoices-page .main-sc header > div{
  padding-bottom: 20px;
}

.invoices-page .member-detail{
  border:none!important;
}

.invoices-page .sponsor-pic img, .members-list .sponsor-pic img{
  width: 40px!important;
  height: 40px!important;
  border-width: 2px;
}

.invoices-page .invoice-detail{
  border: 1px solid #d6d6d6!important;
  border-radius: 10px;
  padding: 10px;
}

.invoices-page .form-btns{
  padding-bottom: 0px!important;
  display: block;
}

.data-entry .main-sc header{
  justify-content: space-between;
  align-items: center;
}

.profile-pic img, .s-result img{
    width: 70px;
    height: 70px;
    border-radius: 100px;
    border:3px solid var(--accent);
    object-fit: cover       ;
}

.personal-info{
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}

.personal-info .name{
    color:var(--accent);
    font-weight: bold;
}

.personal-info .id-number{
    background-color: #c5c5c5;
    border-radius: 100px;
    color:#000;
    width: fit-content;
    padding:2px 5px;
    font-size: 8px;
}

.personal-info .post-date{
    color:#404040;
    font-size: 10px;
}

.main-sc footer{
    display: flex;
    justify-content: space-between;
}

/*
.admin .product-details{
  display: block;
  border-bottom: transparent;
}*/

.admin .product-details figure img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.product-details{
  display: flex;
  border-bottom: 1px solid rgb(212, 212, 212);
}

.product-details-more table tr td{
  font-size: 11px;
}

.product-details-more .notify-message, .main-sc .notify-message{
  font-size: 11px;
  line-height: 16px;
  display: inline-block;
  background-color: #fff9ec;
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding:5px 10px;
}

.product-details .prod-name{
    font-weight: bold;
    display: block;
}

.product-details .prod-desc{
    font-size: 12px;
    line-height: 18px;
    display: block;
}

.product-details figure img{
  width: 150px;
  height: 150px;
  object-fit: contain;
}

.product-details .prod-info{
  display: flex;
    flex-direction: column;
    justify-content: center;
}

.product-details-more table.table{
  margin-bottom: 0px!important;
}

.unit{
  text-align: center;
}

.main-sc footer .amount-paid, table .amount-paid, .available-balance strong{
    background-color: var(--accent);
    color:#fff;
    border-radius: 100px;
    padding:2px 10px;
    font-weight: bold;
}

.available-balance strong{
  display: inline-block;
}

table .amount-paid{
  font-size: 10px;
  padding:4px 10px;
}

.main-sc footer .weight, table .weight{
    border:1px solid var(--accent);
    color:var(--accent);
    border-radius: 100px;
    padding:2px 5px;
}

.sponsor-details, .sponsor{
    gap: 10px;
}

.sponsor-details .profile-pic img{
  width: 50px;
  height: 50px;
}


.sponsor .personal-info{
  font-size: 10px;
}

.sponsor{
    background-color: #fff9ec;
    border: 1px solid var(--accent);
    border-radius: 20px;
    padding:10px;
    margin-bottom: 20px;
}

.sponsor .weight{
    border:1px solid #404040;
    border-radius: 100px;
    padding:2px 10px;
    font-size: 10px;
}

.cashback-amount{
    border:2px solid var(--accent);
    color:var(--accent);
    border-radius: 100px;
    padding:2px 5px;
    font-size: 10px;
}

.sponsor-cashback table{
  margin-bottom: 0px;
}

.sponsor-cashback table tr td{
  padding:3px;
}

.sponsor-cashback table tr{
  border-bottom: transparent;
}

.paid.cashback-amount{
  color: green!important;
  border-color:green!important;
}

.profile-pic{
    margin:0px;
}

.transaction-details{
    background-color: var(--accent);
    color:#fff;
    border-radius: 10px;
    padding:10px;
}

.cashout-btn a{
    background-color: #fff;
    color:var(--accent);
    border-radius: 20px;
    font-weight: bold;
    font-size: 18px;
    text-decoration: none;
    padding:10px 20px;
    text-transform: uppercase;
}

.transaction-details .numbers span{
    font-size: 20px;
    font-weight: bold;
}

.transaction-details .numbers{
    gap: 20px;
}

.mobile-nav{
    min-height: 50px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    padding:0px!important;
    z-index: 3;
}

.mobile-nav a{
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    color:var(--accent);
    font-size: 12px;
    align-items: center;
    padding-top: 7px;
}

.mobile-nav a.active, .mobile-nav a.active svg{
    color:var(--accent);
}
.mobile-nav a.active svg{
    fill:var(--accent);
}


.mobile-nav a svg{
    width: 30px;
    height: 30px;
    margin:0 auto;
}

.mobile-nav a img{
  width: 20px!important;
  
}

.mobile-nav a small{
  font-size: 12px!important;
  font-weight: bold;
  text-transform: capitalize;
  margin-bottom: 10px;
}


.page.login{
    padding:30px 0;
    background-image: url(../images/login-bg2.jpg);
    background-size: cover;
    /*background: rgb(255,207,145);
    background: linear-gradient(153deg, rgba(255,207,145,1) 0%, rgba(255,255,255,1) 47%, rgba(255,207,145,1) 100%);*/
}

.page.login.v2{
    padding:30px 0;
    background-image: url(../images/login-bg3.jpg);
    background-size: cover;

}

.page.login .form-inputs{
    background-color: #ffffffed;
    padding: 30px;
    border-radius: 20px;
}

.page.login.signup .form-inputs{
    background-color: transparent;
}

.login .login-wrapper{
    color:#000;
}

.signup .signup-wrapper{
    color:#fff;
}

.page.signup{
    padding:30px 0;
    background-color: black;
    background-image: url(../images/login-bg.jpg);
    background-position: 0px -1000px;
}

.login-wrapper{
    color: #fff;
}

.form-inputs form input{
    border:2px solid white;
    background-color: transparent;
    color: white;
}

.form-inputs form input:focus,
.form-inputs form input:active {
         background: transparent;
         color: white;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none!important;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--accent)!important;
    opacity: .5; /* Firefox */
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--accent)!important;
    opacity: .5; /* Firefox */
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--accent)!important;
    opacity: .5; /* Firefox */
  }


  .prof-wrapper ::placeholder, .data-entry ::placeholder {
    color:black!important;
    opacity: .5; /* Firefox */
  }
.login-content{
    width: 40%;
    margin:0 auto;
    height: 100vh;
}

.iti{
    width: 100%;
}

input.mobile-num{
    text-indent: 70px;
}

.page.signup{
    font-family: 'Jost', sans-serif!important;
}

.mobile-reg{
    background-image: url(../images/mobile-reg-bg.jpg);
    height: 110vh;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Jost', sans-serif!important;
}

.otp-controls{
    gap:10px;
}

.otp-controls input{
    text-align: center;
}

@media (max-width: 575.98px) {

header .navbar{
  display: flex;
  justify-content: center;
}

  .top-search{
    width: 100%!important;
  }
  .header-invoice{
    gap: 15px;
  }
  .item-select{
    overflow-x:scroll;
  }
  .item-select table{
    width: 600px;
  }
  .immediateHead{
    margin-bottom: 15px;
  }
  .data-entry .main-sc header{
    flex-direction: column!important;
  }

  .form-btns{
    margin-bottom: 10px;
  }
  .data-entry .sc-title{
    margin:0 0 0px!important;
  }
    .login-content{
        width: 100%;
        margin:0 auto;
    }
    .page.signup{
        background-image: url(../images/login-bg-mobile.jpg);
        background-position: top center;
    }
    .pn-ProductNav_Link{
        padding-left: 0px!important;
    }

    .cashout-btn a{
      font-size: 14px;
    }
    .transaction-details .numbers span{
      font-size: 18px;
    }

    .admin-nav .mobile-view a{
      color: var(--accent);
      font-weight: bold;
      text-transform: uppercase;
      text-decoration: none;
      font-size: 12px;
      align-items: center;
      gap:5px;
    }

    .admin-nav .mobile-view a img{
      width: 50px;
      height: 50px;
      background-color: white;
      border-radius: 100px;
      object-fit: cover;
    }

}

@media (max-width: 767.98px) {}

@media (max-width: 991.98px) {}

@media (max-width: 1199.98px) {}

@media (max-width: 1399.98px) {}


.login-content .login-btn{
    border-radius: 100px;
    color:#fff;
    text-transform: uppercase;
    font-weight: bold;
    padding:10px 40px;
    width: 100%;
    background-color: #0f9774;
    border: 1px solid #0f9774;
}


.resend-link{
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
}

.number-sent{
    color: var(--accent);
}

.reg-title{
    font-weight: bold;
}

.card-button {
    margin-bottom: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0 8px 6px -6px #898989;
    -moz-box-shadow: 0 8px 6px -6px #898989;
    box-shadow: 0 8px 6px -6px #898989;
}

.card-button.card-8 {
    border: 2px solid #2c7387;
}

.card-button-content{
    padding:20px;
    background-color: #fff;
    border-radius: 0px 0px 20px 20px ;
}

header.head-bg{
    border-radius:16px 16px 0 0;
}

.card-button.card-8 {
    border: 2px solid #2c7387;
  }
  
  .card-8 header.head-bg {
    background-color: #2c7387;
    background-image: url(../images/account-bg-image-account.png);
  }
  
  .card-8.v2 header.head-bg {
    background-color: #2c7387;
    background-image: url(../images/account-bg-image-account1.png);
  }
  
  .card-button.card-9 {
    border: 2px solid #7b2c87;
  }
  
  .card-9 header.head-bg {
    background-color: #7b2c87;
    background-image: url(../images/account-bg-image-about.png);
  }
  
  .card-9.v2 header.head-bg {
    background-color: #7b2c87;
    background-image: url(../images/account-bg-image-about1.png);
  }
  
  
  .card-button.card-10 {
    border: 2px solid #7f94b4;
  }
  
  .card-10 header.head-bg {
    background-color: #7f94b4;
    background-image: url(../images/account-bg-image-settings.png);
  }
  
  .card-10.v2 header.head-bg {
    background-color: #2c873b;
    background-image: url(../images/account-bg-image-subscribe1.png);
  }
  
  .card-button.card-11 {
    border: 2px solid #01947e;
  }
  
  .card-11 header.head-bg {
    background-color: #01947e;
    background-image: url(../images/account-bg-image-username.png);
  }
  
  .card-11.v2 header.head-bg {
    background-color: #01947e;
    background-image: url(../images/account-bg-image-username1.png);
  }
  
  .card-button.card-12 {
    border: 2px solid #940131;
  }
  
  .card-12 header.head-bg {
    background-color: #940131;
    background-image: url(../images/account-bg-image-password.png);
  }
  
  .card-12.v2 header.head-bg {
    background-color: #940131;
    background-image: url(../images/account-bg-image-password1.png);
  }
  
  .card-button.card-13 {
    border: 2px solid #78b0af;
  }
  
  .card-13 header.head-bg {
    background-color: #78b0af;
    background-image: url(../images/account-bg-image-utilities.png);
  }

.page.account.dash-home{
  background-color: #fff6ec;
}

.account-card-buttons header{
    padding: 10px;
    color: #fff;
}
.account-card-buttons header h4 {
    margin: 15px 0 0 0 !important;
    padding: 0 !important;
    text-align: left;
    font-size: 18px;
}

.account-card-buttons .card-button figure {
    padding: 10px;
    margin: 0 !important;
    width: 50px !important;
    height: 50px !important;
}

.card-button figure {
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background-color: #fff;
    text-align: center;
    margin: -35px auto 0 auto;

}

.card-button .edit_button {
    margin: 15px 0;
    font-size: 14px;
    padding: 0 !important;
    text-align: right;
}

.card-button .edit_button a{
    color: #fff !important;
    text-decoration: none;
}

body.account .main-header{
    background-size: cover;
}

.form_wrapper{
    margin-bottom: 100px;
}

.form_wrapper .controls input.inp, .form_wrapper .controls textarea.inp {
    padding-left: 34px;
    width: 100%;
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    color: #000 !important;
    font-size: 12px !important;
    -moz-box-sizing: border-box;
    height: 100%;
    margin: 5px 0;
    margin-bottom: 20px;
    font-weight: bold;
}

.inp_wrap{
    position: relative;
}

label.small-gray {
    font-size: 10px;
    color: rgb(155, 155, 155);
    position: absolute;
    top: 0px;
    left: 25px;
    background-color: #fff;
    padding: 0px 10px;
}



.orange_solid {
    text-decoration: none;
    padding: 12px 25px;
    font-size: 12px;
    border: 1px solid #106f57;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    display: inline-block;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
    font-weight: bold;
    color: #ffffff;
    background-color: #106f57;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#0f9774), to(#106f57));
    background-image: -webkit-linear-gradient(top, #0f9774, #106f57);
    background-image: -moz-linear-gradient(top, #0f9774, #106f57);
    background-image: -ms-linear-gradient(top, #0f9774, #106f57);
    background-image: -o-linear-gradient(top, #0f9774, #106f57);
    background-image: linear-gradient(to bottom, #0f9774, #106f57);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#0f9774, endColorstr=#106f57);
    /*box-shadow: 6px 9px 20px 0px rgba(0, 0, 0, 0.5);*/
    box-shadow: 2px 3px 9px 0px rgba(0, 0, 0, 0.5);
}

.pdf-export{
  background-color: #de2323!important;
  border: 1px solid #de2323;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e81919), to(#bc1515));
  background-image: -webkit-linear-gradient(top, #e81919, #bc1515);
  background-image: -moz-linear-gradient(top, #e81919, #bc1515);
  background-image: -ms-linear-gradient(top, #e81919, #bc1515);
  background-image: -o-linear-gradient(top, #e81919, #bc1515);
  background-image: linear-gradient(to bottom, #e81919, #bc1515);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#e81919, endColorstr=#bc1515);
  /*box-shadow: 6px 9px 20px 0px rgba(0, 0, 0, 0.5);*/
}

.xls-export{
  background-color: #09a528!important;
  border: 1px solid #09a528;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#01a021), to(#068820));
  background-image: -webkit-linear-gradient(top, #01a021, #068820);
  background-image: -moz-linear-gradient(top, #01a021, #068820);
  background-image: -ms-linear-gradient(top, #01a021, #068820);
  background-image: -o-linear-gradient(top, #01a021, #068820);
  background-image: linear-gradient(to bottom, #01a021, #068820);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#01a021, endColorstr=#068820);
  /*box-shadow: 6px 9px 20px 0px rgba(0, 0, 0, 0.5);*/
}

.orange_solid.small{
  padding: 8px 10px!important;
}

.prof-wrapper .orange_solid{
  border-radius: 100px!important;
  width: fit-content;
  box-shadow: none;
}

.account .block {
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 30%);
    padding: 20px 30px;
    -webkit-border-radius: 15px !important;
    -moz-border-radius: 15px !important;
    border-radius: 15px !important;
    margin-bottom: 30px;
    color: #000;
}

.module-title.m-201 {
    background-color: var(--accent);
    color: #fff;
    border-bottom: none;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    line-height: 20px;
    padding: 15px 20px;
    display: inline-block !important;
    font-size: 18px;
}

.vertical-carousel.with-pic .nav-cap,
.search-data-wrapper .nav-cap {
  padding: 5px;
  font-size: 11px;
  text-align: center;
}

.row.no-padding>div[class^="col"] {
  padding: 0px;
}

.vertical-carousel.mobile-version.with-pic .pn-ProductNav_Link,
.small-horizontal-carousel.mobile-version.with-pic .pn-ProductNav_Link {
  width: 50px !important;
}

.vertical-carousel.with-pic.mobile-version .pn-ProductNav_Link,
.small-horizontal-carousel.with-pic.mobile-version .pn-ProductNav_Link {
  height: 30px;
  position: relative;
}

.vertical-carousel.mobile-version .pn-ProductNav_Link,
.small-horizontal-carousel.mobile-version .pn-ProductNav_Link {
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}

.vertical-carousel.mobile-version .pn-ProductNav_Contents img,
.vertical-carousel.with-pic.mobile-version .item a div img,
.small-horizontal-carousel.mobile-version .pn-ProductNav_Contents img,
.small-horizontal-carousel.with-pic.mobile-version .item a div img {
  width: 50px;
  height: 50px;

  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}

.v-carousel-wrapper {
  height: 600px;
  overflow: scroll;
}

.v-carousel-wrapper .pn-ProductNav_Link.active:after,
.small-carousel-wrapper .pn-ProductNav_Link.active:after {
  content: "\2713";
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 100%;
  border: 2px solid #fff;
  background-color: var(--accent);
  z-index: 2;
  position: absolute;
  bottom: -10px;
  right: -10px;
  font-size: 20px;
  font-weight: bold;
  padding-left: 5px;
}
.ap .vertical-carousel.with-pic.side-nav .pn-ProductNav_Link {
    height: 100px;
    width: 150px;
    flex-direction: column;
    padding:0px;
    margin-bottom: 20px;
    margin-left: 11px;
    position: relative;
  }
  
  .ap .vertical-carousel.with-pic.side-nav .item a div img {
    height: 70px;
  }

  .pn-ProductNav_Link.active {
    background-color: var(--accent);
    color: #fff;
  }
.block h5{
    font-size: 14px;
}

.vertical-carousel .pn-ProductNav_Contents img, .vertical-carousel.with-pic .item a div img, .search-data-wrapper .item a div img, .small-horizontal-carousel .pn-ProductNav_Contents img, .small-horizontal-carousel.with-pic .item a div img {
    object-fit: cover;
    height: 100px;
}

.with-pic .pn-ProductNav_Link img, .with-pic .item a div img, .search-data-wrapper .t-link div img, .report-item a div img {
    width: 100%;
    -webkit-border-radius: 20px 20px 0 0;
    -moz-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
}

.vertical-carousel.with-pic .nav-cap, .search-data-wrapper .nav-cap {
    padding: 5px;
    font-size: 11px;
    text-align: center;
}

.with-pic .nav-cap, .report-item .nav-cap {
    padding: 10px;
    font-size: 12px;
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.pn-ProductNav_Link.active:after {
    content: "\2713";
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 100%;
    border: 2px solid #fff;
    background-color: var(--accent);
    z-index: 2;
    position: absolute;
    bottom: -10px;
    right: -10px;
    font-size: 40px;
    font-weight: bold;
}

.small-carousel-wrapper .item a p {
    margin-top: 5px;
    color: #333;
    text-align: center;
    margin-bottom: 0px;
    white-space: nowrap;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.with-pic .item>a {
    display: inline-block;
}

.with-label{
    position: relative;
    margin-bottom: 20px;
}

[include*="form-input-select()"]::before {
    bottom: 75%;
    border-width: 0 6.5px 8px 6.5px;
    border-bottom-color: #d6d6d6;
}
[include*="form-input-select()"]::before, [include*="form-input-select()"]::after {
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
    border: 1px solid transparent;
    width: 0;
    height: 0;
    right: 16px;
}

[include*="form-input-select()"] select {
    border: 1px solid #adb5bd;
    border-radius: 0;
    font-weight: 400;
    color: #000;
    padding: 5px 15px;
    line-height: normal;
    transition: border-color 0.2s ease, outline 0.2s ease;
}

[include*="form-input-select()"] select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border: 1px solid transparent;
    font-size: 12px;
    outline: none;
}

.form_wrapper .controls select.inp {
    padding: 15px 15px 15px 34px;
    width: 100%;
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    color: #000 !important;
    font-size: 12px !important;
    -moz-box-sizing: border-box;
    height: 100%;
    margin-top: 5px;
    font-weight: bold;
}

.account .label-title {
    background-color: #fff;
    color: #9b9b9b;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    line-height: 20px;
    padding: 0px 8px;
    margin-bottom: 10px;
    font-weight: bold;
    top: -5px;
    position: absolute;
    font-size: 10px;
    margin-left: 15px;
}

[include*="form-input-select()"]:hover::before, [include*="form-input-select()"]:hover::after {
    border-bottom-color: #005ba6;
}

[include*="form-input-select()"]::before {
    bottom: 75%;
    border-width: 0 6.5px 8px 6.5px;
    border-bottom-color: #d6d6d6;
}

.with-label [include*="form-input-select()"]::before {
    bottom: 50%;
}

with-label [include*="form-input-select()"]::after {
    top: 45%;
}

[include*="form-input-select()"]::after {
    border-width: 8px 6.5px 0 6.5px;
    border-top-color: #d6d6d6;
    top: 55%;
}

[include*="form-input-select()"]::after, [include*="form-input-select()"]::before{
    right: 30px;
}


.payment-wrap p span {
    font-weight: bold;
  }
  
  .payment-wrap h3 {
    margin-top: 0px;
  }
  
  .plans .except {
    margin-left: 30px;
  }
  
  .plans h3 {
    color: #2c7387;
    font-weight: bold;
    margin-top: 0px;
    font-size: 26px;
  }
  
  .plans .limit {
    background-color: #2c7387;
    color: #fff;
    padding: 5px 15px;
    -webkit-border-radius: 15px !important;
    -moz-border-radius: 15px !important;
    border-radius: 15px !important;
    font-weight: bold;
  }
  
  .plans .small-home h3 {
    color: #7b2c87;
  }
  
  .plans .small-home .limit {
    background-color: #7b2c87;
  }
  
  .plans .small-business h3 {
    color: #2c873b;
  }
  
  .plans .small-business .limit {
    background-color: #2c873b;
  }
  
  .plans .mid-size h3 {
    color: #01947e;
  }
  
  .plans .mid-size .limit {
    background-color: #01947e;
  }
  
  .plans .large-biz h3 {
    color: #e04f1e;
  }
  
  .plans .large-biz .limit {
    background-color: #e04f1e;
  }
  
  .plans .unlimited h3 {
    color: #940148;
  }
  
  .plans .unlimited .limit {
    background-color: #940148;
  }
  
  .plans .icon {
    font-weight: bold;
    font-size: 16px;
    line-height: 30px;
  }
  
  .plans .except .icon {
    font-weight: normal;
  }
  
  .plans .price {
    padding-top: 80px;
  
  }
  
  .plans .price h4 {
    letter-spacing: -2px;
    margin-bottom: 0px;
  }
  
  .plans .price h4 {
    font-size: 36px;
    font-weight: bold;
  }
  
  .plans .price-btn {
    font-weight: bold;
    color: #fff;
    border-bottom: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 5px 40px;
    display: inline-block !important;
    font-size: 20px;
    text-decoration: none;
  }
  
  .plans .small-home.active {
    border: 4px solid #7b2c87;
  }
  
  .plans .free.active .price-btn,
  .plans .small-home.active .price-btn,
  .plans .small-business.active .price-btn,
  .plans .mid-size.active .price-btn,
  .plans .large-biz.active .price-btn,
  .plans .unlimited.active .price-btn {
    background-color: #737373;
    border: none;
    color: #fff;
    cursor: not-allowed;
  }
  
  .free .price-btn {
    border: 2px solid #2c7387;
    color: #2c7387;
  }
  
  .plans .free.active {
    border: 4px solid #2c7387;
  }
  
  .small-home .price-btn {
    border: 2px solid #2c7387;
    color: #2c7387;
  }
  
  
  .small-business .price-btn {
    border: 2px solid #2c873b;
    color: #2c873b;
  }
  
  .plans .small-business.active {
    border: 4px solid #2c873b;
  }
  
  
  .mid-size .price-btn {
    border: 2px solid #2c7387;
    color: #01947e;
  }
  
  .plans .mid-size.active {
    border: 4px solid #2c7387;
  }
  
  
  .large-biz .price-btn {
    border: 2px solid #e04f1e;
    color: #e04f1e;
  }
  
  .plans .large-biz.active {
    border: 4px solid #e04f1e;
  }
  
  .unlimited .price-btn {
    border: 2px solid #940148;
    color: #940148;
  }
  
  .plans .unlimited.active {
    border: 4px solid #940148;
  }

  .transaction-details.desktop-view{
    width: 500px;
  }
  


  .toast-notify{
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  .toast-notify .name{
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50px;
  }
  
  .toast-notify .profile-pic img{
    width: 50px;
    height: 50px;
  }
  

  .feeds .toast, .toast{
    margin-bottom: 20px;
    width: 100%;
    border: none;
    border-radius: 20px;
  }

  .feeds .toast .new-member{
    background-color: var(--accent)!important;
    color:#fff!important;
  }

.prof-wrapper{
  margin-bottom: 100px;
}

.prof-wrapper .form-control, .data-entry .form-control{
  margin-bottom: 15px;
  border-radius: 50rem !important;
  font-size: 14px!important;
  /*padding: 0.75rem 0.5rem 0.75rem 0.5rem !important;*/
  height: 40px;
}

table .form-control{
  margin-bottom: 0px!important;
}


.prof-wrapper .prof-pic{
  border-radius: 100%;
  border: 3px solid #eee;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}

.prof-pic.bigger {
  width: 150px!important;
  height: 150px!important;
}


.uploader {
	display: block;
	clear: both;
	margin: 0 auto;
	width: 100%;
	max-width: 600px;
  }
  

  .products-page .uploader{
    max-width: 100%!important;
    width: 200px;
    margin:0!important;
  }
  .uploader label {
	float: left;
	clear: both;
	width: 100%;
	padding: 2rem 1.5rem 1rem 1.5rem;
	text-align: center;
	background: #fff;
	border-radius: 7px;
	border: 3px solid #e19f00;
	transition: all 0.2s ease;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
	position: relative;
  }

  .products-page .uploader label{
    float: none;
  }

  .products-page .uploader img.uploaded-img{
    border-radius: 100px;
  }

  .close-upload{
	  background-color: white;
	  position: absolute;
    left: 55%;
	  -webkit-box-shadow: 1px 1px 7px 1px rgb(129, 129, 129);
box-shadow: 1px 1px 7px 1px rgb(129, 129, 129);
-webkit-border-radius: 100px 100px 100px 100px;
border-radius: 100px 100px 100px 100px;
width:20px;
height:20px;
font-weight: bold;
line-height: 17px;
color:rgb(83, 83, 83)!important;
  }

  .product-details-more td figure img{
    border-radius: 100px;
    border: 3px solid var(--accent);
    width: 80px!important;
  }

  .prod-info strong{
    font-size: 14px;
  }

  .uploader label:hover {
	border-color: #eee;
  }
  .uploader label.hover {
	border: 3px solid #454cad;
	box-shadow: inset 0 0 0 6px #eee;
  }
  .uploader label.hover #start i.fa {
	-webkit-transform: scale(0.8);
			transform: scale(0.8);
	opacity: 0.3;
  }
  .uploader #start {
	float: left;
	clear: both;
	width: 100%;
  }
  .uploader #start.hidden {
	display: none;
  }
  .uploader #start i.fa {
	font-size: 50px;
	margin-bottom: 1rem;
	transition: all 0.2s ease-in-out;
  }
  .uploader #response {
	float: left;
	clear: both;
	width: 100%;
  }
  .uploader #response.hidden {
	display: none;
  }
  .uploader #response #messages {
	margin-bottom: 0.5rem;
  }
  .uploader #file-image {
	display: inline;
	margin: 0 auto 0.5rem auto;
	width: auto;
	height: auto;
	max-width: 180px;
  }
  .uploader #file-image.hidden {
	display: none;
  }
  .uploader #notimage {
	display: block;
	float: left;
	clear: both;
	width: 100%;
  }
  .uploader #notimage.hidden {
	display: none;
  }
  .uploader progress,
  .uploader .progress {
	display: inline;
	clear: both;
	margin: 0 auto;
	width: 100%;
	max-width: 180px;
	height: 8px;
	border: 0;
	border-radius: 4px;
	background-color: #eee;
	overflow: hidden;
  }
  .uploader .progress[value]::-webkit-progress-bar {
	border-radius: 4px;
	background-color: #eee;
  }
  .uploader .progress[value]::-webkit-progress-value {
	background: linear-gradient(to right, #393f90 0%, #454cad 50%);
	border-radius: 4px;
  }
  .uploader .progress[value]::-moz-progress-bar {
	background: linear-gradient(to right, #393f90 0%, #454cad 50%);
	border-radius: 4px;
  }
  .uploader input[type="file"] {
	display: none;
  }
  .uploader div {
	margin: 0 0 0.5rem 0;
	color: #5f6982;
  }
  .uploader a.btn{
	  color:#fff!important;
  }
  .uploader .btn {
	display: inline-block;
	margin: 0.5rem 0.5rem 1rem 0.5rem;
	clear: both;
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	text-transform: initial;
	border: none;
	border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
	outline: none;
	padding: 0 1rem;
	height: 36px;
	line-height: 36px;
	color: #fff;
	transition: all 0.2s ease-in-out;
	box-sizing: border-box;
	
	cursor: pointer;
  }

.form-icon{
  position: absolute;
  top: 10px;
  left: 10px;
}

.prod-img img{
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 0px;
}

.product-details-more td figure{
  margin-bottom: 0px;
}

.member-detail{
  gap: 10px;
}

.member-item p{
  font-size: 12px;
  margin-bottom: 10px;
}

.members-list header{
  border: none!important;
}

.new-form.member input{
  margin-bottom: 20px;
}

.prod-images img {
  width: 50px;
  margin-bottom: 5px;
}

.prod-images img.delete {
  width: auto;
}

.prod-images span {
  position: relative;
}


.prod-images span a {
  position: absolute;
  top: -25px;
  left: -10px;
}

.form-btns{
  display: flex;
  gap: 10px;
}

.profile-info p{
  font-size: 12px;
}

.profile-info h6{
  font-size: 13px;
}

.tbl-invoices td, .tbl-invoices th{
  font-size: 14px;
}

table .dd .ddTitle .ddTitleText img{
  margin-bottom: 0px;
}

.item-select{
  padding-bottom: 100px;
}

.item-select .ddlabel{
  display: inline-block;
}

.main-sc a{
  text-decoration: none;
  color: inherit;
}

.dd .description{
  font-size: 10px;
}

.ddTitleText{
  padding-left: 10px!important;
}

.inputInvoice{
  gap: 20px;
}
.inputInvoice .dd{
  width: 250px!important;
}

.view-invoice td .profile-pic img{
  width: 40px!important;
  height: 40px!important;
}

.view-cashouts .badge{
  font-size: 13px;
}

.btn-add.small{
  padding:5px;
}

.top-search{
  padding-left:30px;margin-bottom: 0px;
  width: 350px;
}


.top-search-result {
  position: absolute;
  top: 42px;
  left: 30px;
  z-index: 1000;
  padding: 10px;
  background-color: #fff;
  width: 89% !important;
  border: 1px solid #ccc;
  margin: 0 auto;
  box-shadow: 0px 12px 10px 0px rgb(0 0 0 / 40%);
}

.top-search-result.mobile {
  top: 65px;
  left: 20px;
}

.top-search-result .s-result {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.top-search-result .s-result:last-child {
  border-bottom: 0px;
}

.top-search-result .s-result .b-name {
  text-align: left;
}


.s-result {
  text-align: center;
  padding: 10px;
}

.s-result a{
  text-decoration: none;
  text-align: left;
}

.s-result img.user-profile-image {
  max-width: 50px !important;
  max-height: 50px !important;
}

.s-result .prof-pic-side {
  text-align: center;
}

.s-result .b-name {
  font-size: 12px;
  text-align: center;
  margin-bottom: 0px;
}

.s-result .user-bio {
  margin-bottom: 0px;
}

.s-result .b-brief {
  margin-bottom: 0px;
}

.s-more .user-bio {
  padding: 30px 0 !important;
}

.invoice-bg{
  background-color: #55585e;
  padding:40px 100px;
}

.invoice-paper{
  background-color: #fff;
  padding:50px;
}

.close-btn{
  top: -20px;
  right:-10px;
  font-size: 40px;
  color:var(--accent);
}

.close-btn:hover{
  cursor: pointer;
}

.invoice-wrapper{
  font-size: 80%!important;
}

.invoice-wrapper strong{
  font-weight:  bold!important;
}

select.inp{
  padding: 15px 15px 15px 34px;
  width: 100%;
  border: 1px solid #bdbdbd;
  border-radius: 5px;
  color: #000 !important;
  font-size: 12px !important;
  -moz-box-sizing: border-box;
  height: 100%;
  margin: 0px 0px 5px 0;
  margin-bottom: 20px;
  font-weight: bold;
}

.report-range .inp{
  border-color: var(--accent);
  border-width: 2px;
  text-indent: 20px;
}

.report-range i, .report-range label{
  font-size: 14px;
}

.report-range i{
  position: relative;
    top: 30px;
    left: -20px;
}

#date-range-modal .modal-dialog{
  max-width: 40%;
}

#date-range-modal button{
  border-radius: 100px;
}

#date-range-modal .continue-btn{
  background-color: var(--accent);
  border-color: var(--accent);
}

.reports-wrapper .main-sc{
  text-align: center;
  margin-bottom: 20px;
}

.main-sc .reports-links p {
  line-height: 22px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

.r-icon {
  background-color: #e0f1ff;
  width: 70px;
  text-align: center;
  margin: 0 auto;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  padding: 7px;
}

.reports-table th, .reports-table td{
  font-size: 10px;
}

.account .profile-cover{
  margin-bottom: 0px;
}

.account .profile-cover img{
  min-height: 350px;
  object-fit: cover;
  width: 100%!important;
}

.account .divider{
  margin-top: -120px;
  z-index: 2;
  position: relative;
}

.profile-cover{
  z-index: 1;
}

.profile-cover .photo-upload{
  position: absolute;
  right: 20px;
  top:20px;
}

.profile-cover .photo-upload a{
  color:#fff;
  text-decoration: none;
  font-size: 20px;
}
.account .account-wrapper {
  position: relative;
  z-index: 2;
  margin-top: -50px;
}

.membership-status span{
  border: var(--accent) 1px solid;
  border-radius: 100px;
  padding:5px 10px;
  color:var(--accent);
  font-weight: bold;
}

.member-list.platinum{
  border:5px solid #a892b7;
}

.member-list .text-end small{
  font-size: 10px;
}

.member-list .membership-stat{
  text-transform: uppercase;
  font-weight: bold;
  font-size: 20px;
}

.member-list figure{
  margin-bottom: 0px;
}

.platinum .membership-status span{
  border:1px solid #a892b7!important;
  color:#a892b7;
}

.platinum .membership-points{
  background-color: #a892b7;
  color:#fff;
}

.platinum .profile-pic img{
  border-color:#a892b7;
}

.platinum .name{
  color:#a892b7;
}

.platinum .available-balance strong{
  background-color: #a892b7!important;
}

.member-list.gold{
  border:5px solid var(--accent);
}

.gold .membership-status span{
  border:1px solid var(--accent)!important;
  color:var(--accent);
}

.gold .membership-points{
  background-color: var(--accent);
  color:#fff;
}

.gold .profile-pic img{
  border-color:var(--accent);
}

.gold .name{
  color:var(--accent);
}

.gold .available-balance strong{
  background-color: var(--accent)!important;
}

.member-list.silver{
  border:5px solid #a2a2a2;
}

.silver .membership-status span{
  border:1px solid #a2a2a2!important;
  color:#a2a2a2;
}

.silver .membership-points{
  background-color: #a2a2a2;
  color:#fff;
}

.silver .profile-pic img{
  border-color:#a2a2a2;
}

.silver .name{
  color:#a2a2a2;
}

.silver .available-balance strong{
  background-color: #a2a2a2!important;
}