/********** Template CSS **********/
:root {
  --primary: #EF9B1D;
  --light: #F0F3F3;
  --dark: #02314B;
  --red: #FF4343;
  --green: #13A36E;
  --blue: #335FD9;
  --bg-light: #FFFF;
  /* instapay */
  --lit-blue:#627CBF;
  --d-blue:#263470;
  --orange:#EF6000;
}
body{
  font-family: 'Roboto', sans-serif;
  color: var(--dark);
  font-size: 14px;
  overflow: hidden;
}
label{
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0.25rem;
}
.is-waring{
	color: red;
}
.w-60{
  width: 60%;
}
.w-30{
  width: 25%;
}
p{
  font-size: 13px;
}
.greenStatus{
 color: var(--green);
}
.redStatus{
  color: var(--red);
}
.orangeStatus{
  color: var(--orange);
}
.btn{
  font-size: 13px;
  border-radius: 10px;
  padding: 0.475rem 0.75rem;
  font-weight: bold;
}
.btn-check:focus + .btn, .btn:focus {
  outline: 0;
  box-shadow: unset;
}
.btn-primary:focus{
  background: var(--orange);
  border: 1px solid var(--orange);
}
a{
  font-size: 13px;
  color: var(--primary);
  font-weight: 500;
}
a:hover {
  color: var(--primary);
}
.w-25{
  width: 25%;
}
.btn-primary{
  letter-spacing: 1px;
  background: var(--orange) ;
  border-radius: 10px;
  color: #FFFFFF;
  border: 1px solid var(--orange);
  text-transform: uppercase;
  width: 200px;
  font-weight: 700;
}
.btn-primary-edit{
  letter-spacing: 1px;
  background: var(--blue) ;
  border-radius: 10px;
  color: #FFFFFF;
  border: 1px solid var(--blue);
  text-transform: uppercase;
  width: 200px;
  font-weight: 700;
}
.reset-btn{
	    font-weight: 700;
}
.btn-primary:hover{
  color: #FFFFFF ;
  background: var(--orange) ;
  border: 1px solid var(--orange);
}
.btn-secondary{
  border-radius: 10px;
}
.form-label{
  font-size: 13px ;
  margin-bottom: 0.2rem;
  font-weight: 600;
  text-transform: capitalize;
}

.form-control{
  border-radius: 10px;
  border: 1px solid #999797;
  padding: 4px 10px;
  font-size: 13px ;
  color: var(--dark);
  height: 35px;
  background-color: #fff;
}
.form-control:disabled{
  background-color: #e9ecef;
}
.form-control[readonly]{
  background-color: #fff;
}
.form-select{
  border-radius: 10px;
  border: 1px solid #999797;
  /* padding: 0.43rem 10px; */
  font-size: 13px ;
  color: var(--dark);
}
.required{
  color: var(--red);
}
.form-control:focus{
  border-color: #999797;
    box-shadow: unset;
}
.form-check-input[type=checkbox] {
  border: 0.01px solid var(--dark);
  padding: 0;
}
.form-check-input[type=radio]{
  padding: 0;
}
.form-check-input{
  border: 1px solid var(--dark);
}
.form-check-input:focus {
  outline: 0;
  box-shadow: unset;
}
.form-check-input:checked[type=checkbox] {
  background-color: var(--green);
  border-color: var(--green);
}
h6, .h6 {
  font-size: 13px;
}
h5, .h5 {
  font-size: 1.2rem;
}
h5 strong {
  font-weight: 500;
}
.f-Weight-900{
  font-weight: 900;
}

.card{
  border-radius: 15px;
}
.card-btn{
  text-align:left;
}
.card-btn button{
  width: 25%;
}
.btn-outline{
  border: 1px solid var(--orange);
  background: #fff;
  color: var(--orange);
  border-radius: 10px;
  text-transform: uppercase;
}
.btn-outline:hover{
  color: var(--orange) ;
  background-color: #fff ;
  border-color: var(--orange);
}
.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: unset;
}
.btn-primary:active{
  color: #fff;
  border-color: var(--orange);
  background: var(--orange);
}
.btn-orange:active{
  background: #EF9B1D;
  border-color: #EF9B1D;
  color: #fff;

}
.form-select:focus {
  border: 1px solid #ccc;
  outline: 0;
  box-shadow: unset;
}
 .fw-600{
  font-weight: 600;
 }
 .fw-500{
  font-weight: 500;
 }
 .b-text{
  color: var(--blue);
 }
/* .iti__flag.iti__za{
  height: 20px !important;
  border-radius: 50px;
} */
.iti__country-list{
  z-index: 9999;
}
ul{
  list-style-type: none !important;
}
.border-radius-10{
  border-radius: 10px;
}
.was-validated .form-control:invalid, .form-control.is-invalid{
  background-image: unset;
}
.custom_datatable .fa-trash{
  color: var(--red) !important;
}
.btn-orange{
  background: #EF9B1D;
  border-color: #EF9B1D;
  color: #fff;
}
.btn-orange:hover{
  background: #EF9B1D;
  border-color: #EF9B1D;
  color: #fff;
}
em.fa-eye,
em.fa-eye-slash {
  position: absolute;
  cursor: pointer;
  right: 10px;
  top: 11px;
    }
    input.form-control.is-invalid {
      background-image: unset !important;
  }

/**********End Template CSS **********/
/* ===== Error Screen ===== */
.error_screen{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.invalid_img{
  width: 300px;
  margin-bottom: 2rem;
}
/* ===== End Error Screen ===== */
/* -------------------------- Home -----------------------------  */
.headDropdown{
  left: -45px !important;
}
.headDropdown li a img{
  width: 16px;
    margin-right: 5px;
}
.headDropdown li a:hover{
  color: #757575 !important;
}
.headDropdown li a:active{
  color: #fff;
}
.home-bg{
  background: url('../img/bg_image_cashflo1920px width.jpg')  #53776A5C fixed;
  height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover !important;
  background-color: #53776A5C;
  opacity: 1;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  overflow: auto;
}
.home-bg-opacity .logo{
 width: 250px;
}
.home-bg-opacity{
  background: #53776A5C;
}
/* -------------------------- Login -----------------------------  */
.login-page{
  background-color: rgba(60,141,188, 0.5);
  height: auto !important;
}
.card-box {
  /* background:transparent url('../img/Rectangle\ 1440@2x.png') 0% 0% no-repeat padding-box;  */
  width: 430px;
  height: auto;
  border: 1px solid #02314B1A;
  border-radius: 15px;
  opacity: 1;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  background: #ffffffa8;
}
.card-box .logo{
  width: 130px;
}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .card-box {
    backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  }
}
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .card-box {
    background: #ffffffa8;
    filter: blur(0px);
  }
}
.otp-input input {
  border: 1px solid #ccc;
  text-align: center;
  height: 41px;
  width: 40px;
  border-radius: 10px;
  margin-right: 0.5rem;
}
.password_div input{
  width: 150px;
  margin: auto;
  text-align: center;
  border-color: var(--green);
}
/* -------------------------- Sidebar Menu -----------------------------  */
.sideLogo{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.supplier{
  margin: 0;
    font-weight: 400;
    color: #fff;
}
.toggled .sidemenu-logo .bigLogo{
  display: none;
}
.sidemenu-logo .smallLogo{
  display: none;
}
.toggled  .sidemenu-logo{
  width: 35px;
}
.toggled  .sidemenu-logo .smallLogo{
  display: block;
}
.toggled .side_username{
  display: none;
}
.toggled .sidebar-brand{
  height: 9vh;
}
.toggled #sidebar-wrapper .sidebar-nav{
  position: relative;
    right: 10px;
}
.submenu-open{
  display: block !important
}
.sidebar-dropdown > a:after {
  font-family: "Font Awesome 5 Free", sans-serif;
  font-weight: 900;
  content: "\f107";
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background: 0 0;
  position: absolute;
  right: 25px;
  top: 11px;
  -webkit-transition: -webkit-transform .3s ease;
  transition: -webkit-transform .3s ease;
  transition: transform .3s ease;
  transition: transform .3s ease, -webkit-transform .3s ease; }
  .sidebar-dropdown .sidebar-submenu {
    display: none; }

    .sidebar-dropdown .sidebar-submenu ul {
      padding: 5px 0; }
      .sidebar-dropdown .sidebar-submenu li {
        font-size: 13px;
        width: fit-content;
        margin-left: 24px;
        padding: 3px 4px !important;
        padding-left: 25px;
      }
        .sidebar-dropdown .sidebar-submenu li a {
          /* overflow: hidden; */
          white-space: unset;
          text-overflow: ellipsis;
            margin-right: 13px;
            padding: 10px 0px 0px 0px !important;
           }
            .sidebar-dropdown .sidebar-submenu li a .badge,
            .sidebar-dropdown .sidebar-submenu li a .label {
              margin-left: auto; }
              .sidebar-dropdown.active > a:after {
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
                right: 15px;
                top: 12px;
              }
                #wrapper {
                  padding-left: 0;
                  /* transition: all 0.5s ease; */
                  position: relative;
                }

                #sidebar-wrapper {
                  z-index: 1000;
                  position: fixed;
                  left: 250px;
                  width: 0;
                  height: 100%;
                  margin-left: -250px;
                  overflow-y: auto;
                  overflow-x: hidden;
                  background: var(--d-blue);
                  /* transition: all 0.5s ease; */
                  box-shadow: 0px 3px 40px #02314B24;
                  border-right: 1px solid #ccc;
                }

                #wrapper.toggled #sidebar-wrapper {
                  width: 250px;
                }

                .sidebar-brand {
                  position: absolute;
                  top: 0;
                  width: 250px;
                  text-align: center;
                  padding: 20px 0;
                  background: var(--d-blue);
                  box-shadow: inset 0 -10px 20px -10px #02314b24;
                }
                .sidebar-brand h2 {
                  margin: 0;
                  font-weight: 600;
                  font-size: 24px;
                  color: #fff;
                }
                .side-middle{
                  height: 90vh;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  box-shadow: 0px 3px 40px #02314b24;
                }

                .sidebar-nav {
                  position: absolute;
                  top: 75px;
                  width: 250px;
                  margin: 0;
                  padding: 1rem 0.75rem;
                  list-style: none;
                  background: var(--d-blue);
                  box-shadow: 0px 0px 40px 0px #02314b24;

                }
                .sidebar-nav > li {
                  text-indent: 10px;
                  line-height: 30px;
                  position: relative;
                }
                .sidebar-nav > li a {
                  display: block;
                  text-decoration: none;
                  color: #fff;
                  font-size: 14px;
                }
  /* .sidebar-nav > li > a:hover,
  .sidebar-nav > li.active > a {
    text-decoration: none;
    color: #fff;
    background: #F8BE12;
    } */
    .sidebar-nav > li > a i.fa {
      font-size: 24px;
      width: 60px;
    }

    #navbar-wrapper {
      width: 100%;
      position: absolute;
      z-index: 2;
    }
    #wrapper.toggled #navbar-wrapper {
      position: absolute;
      margin-right: -250px;
    }
    #navbar-wrapper .navbar {
      border-width: 0 0 0 0;
      background-color: var(--lit-blue);
      font-size: 24px;
      margin-bottom: 0;
      border-radius: 0;
      top: 0;
      width: 100%;
      /* position: fixed;
      width: calc(100% - 250px); */
    }
    #navbar-wrapper .navbar a {
      color: #757575;
      cursor: pointer;
    }
    #navbar-wrapper .navbar a:hover {
      color: #F8BE12;
    }

    #content-wrapper {
      width: 100%;
      position: absolute;
      top: 50px;
    }
    #wrapper.toggled #content-wrapper {
      position: absolute;
      margin-right: -250px;
    }

    @media (min-width: 1536px) {
      .description{
        margin-bottom: 10px !important;
      }
    }

    @media (min-width: 992px) {
      #wrapper {
        padding-left: 250px;
      }

      #wrapper.toggled {
        padding-left: 60px;
      }

      #sidebar-wrapper {
        width: 250px;
      }

      #wrapper.toggled #sidebar-wrapper {
        width: 60px;
      }

      #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -190px;
      }

      #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -190px;
      }

      #navbar-wrapper {
        position: relative;
      }

      #wrapper.toggled {
        padding-left: 60px;
      }

      #content-wrapper {
        position: relative;
        top: 0px;
      }

      #wrapper.toggled #navbar-wrapper,
      #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 60px;
      }
    }
    /* === Ipad === */
    @media (min-width: 768px) and (max-width: 991px) {
      #wrapper {
        padding-left: 60px;
      }

      #sidebar-wrapper {
        width: 60px;
      }

      #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -250px;
      }

      #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -250px;
      }

      #navbar-wrapper {
        position: relative;
      }

      #wrapper.toggled {
        padding-left: 250px;
      }

      #content-wrapper {
        position: relative;
        top: 0;
      }

      #wrapper.toggled #navbar-wrapper,
      #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 250px;
      }
      .dashBg-img{
        padding: 2rem 1rem !important;
    }
    .total-box{
        margin-bottom: 1rem;
    }
    }
  /* === Mobile view === */
    @media (max-width: 767px) {
      #wrapper {
        padding-left: 0;
      }

      #sidebar-wrapper {
        width: 0;
      }

      #wrapper.toggled #sidebar-wrapper {
        width: 250px;
      }
      #wrapper.toggled #navbar-wrapper {
        position: absolute;
        margin-right: -250px;
      }

      #wrapper.toggled #content-wrapper {
        position: absolute;
        margin-right: -250px;
      }

      #navbar-wrapper {
        position: relative;
      }

      #wrapper.toggled {
        padding-left: 250px;
      }

      #content-wrapper {
        position: relative;
        top: 0;
      }

      #wrapper.toggled #navbar-wrapper,
      #wrapper.toggled #content-wrapper {
        position: relative;
        margin-right: 250px;
      }
    }
    .sidemenu-logo{
      width: 150px;
    }
    .sidemenu-logo img{
      width: 100%;
    }

    .sidebar-nav > li.active {
      background: var(--lit-blue);
      border-radius: 50px;
    }
    .sidebar-nav > li.sidebar-dropdown.active, .sidebar-nav > li.sidebar-dropdown:hover{
      border-radius: 25px;
    }
    .sidebar-nav > li:hover {
      background: var(--lit-blue);
      border-radius: 50px;
    }
    .btn-toggle-nav > li{
      padding-left: 3.5rem;
    }
    .btn-toggle-nav > li a:active, .btn-toggle-nav > li a:hover {
      color: #FFFFFF;
    }
    .btn-toggle-nav > li:active{
      background: #13A36E;
    }
    .btn-toggle-nav > li:hover{
      background: var(--d-blue);
      border-radius: 15px;
    }
/* .btn-toggle span{
  color: var(--dark);
  position: relative;
    left: 1px;
}
.btn-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0 !important;
    font-size: 14px;
    background-color: transparent;
    border: 0;
    } */
/* .btn-toggle::before {
    width: 1.25em;
    line-height: 0;
    content: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e);
    transition: transform .35s ease;
    transform-origin: 0.5em 50%;
    } */
    .user-type span{
      font-size: 14px;
      color: #FFFFFF;
      position: relative;
      top: 2px;
      margin-left: 5px;
    }
    .user-type .dropdown-toggle{
      padding: 0;
    position: relative;
    right: 20px;
    }
    .dropdown-toggle::after{
      display: none !important;
    }

    #sidebar-wrapper ul.menu {
      list-style-type: none;
    }
    #sidebar-wrapper ul.menu li {
      padding: 6px 4px;
      margin: 0.5em 0;
    }
    #sidebar-wrapper ul.menu li a {
      /* height: 28px; */
      line-height: 18px;
      display: block;
      margin-left: 5px;
      padding: 10px 0px 0px 28px;
      background: url("../img/instaPay_img/sprite_icons_admin.png") no-repeat; /* As all link share the same background-image */
      font-weight: 400;
    }
    #sidebar-wrapper ul.menu li a span{
      position: relative;
      bottom: 4px;
    }
    #sidebar-wrapper ul.menu li.a-1-icon a {
      background-position: 0 2px;
      background-size: 25px;
    }
    #sidebar-wrapper ul.menu li.a-2-icon a {
      background-position: 1px -35px;
      background-size: 25px;
    }
    #sidebar-wrapper ul.menu li.a-3-icon a {
      background-position: 1px -68px;
      background-size: 25px;
    }
    #sidebar-wrapper ul.menu li.a-4-icon a{
      background-position: 1px -104px;
      background-size: 25px;
    }
    #sidebar-wrapper ul.menu li.a-5-icon a{
      background-position: 1px -141px;
      background-size: 25px;
    }
    #sidebar-wrapper ul.menu li.a-6-icon a{
      background-position: 1px -175px;
      background-size: 25px;
    }
    #sidebar-wrapper ul.menu li.a-7-icon a{
      background-position: 1px -210px;
      background-size: 25px;
    }
    #sidebar-wrapper ul.menu li.a-8-icon a{
      background-position: 1px -245px;
      background-size: 25px;
    }
    #sidebar-wrapper ul.menu li.a-9-icon a{
      background-position:1px -282px;
      background-size: 25px;
    }
    #sidebar-wrapper ul.menu li.a-10-icon a{
      background-position: 1px -318px;
      background-size: 25px;
    }
    #sidebar-wrapper ul.menu li.a-11-icon a{
      background-position: 1px -354px;
      background-size: 25px;
    }
    #sidebar-wrapper ul.menu li.a-12-icon a{
      background-position: 1px -388px;
      background-size: 25px;
    }
    #sidebar-wrapper ul.menu li.a-13-icon a{
      background-position: 1px -425px;
      background-size: 25px;
    }
    #sidebar-wrapper ul.menu li.a-14-icon a{
      background-position: 1px -458px;
      background-size: 25px;
    }
    #sidebar-wrapper ul.menu li.a-15-icon a{
      background-position: 1px -492px;
      background-size: 25px;
    }
    .btn-toggle-nav  li a{
      background: unset !important;
    }
    /* .sidebar-footer{
      position: absolute;
      bottom: -5rem;
      margin: 0rem 1rem;
      padding-bottom: 1.5rem;
    } */
    #sidebar-wrapper .merchant-ul.menu li a{
      background: url("../img/instaPay_img/sprite_icon.png") no-repeat ; /* As all link share the same background-image */
    }
    #sidebar-wrapper ul.merchant-ul li.m-1-icon a {
      background-position: 0 2px !important;
      background-size: 25px !important;
    }
    #sidebar-wrapper ul.merchant-ul li.m-2-icon a {
      background-position: 0 -35px !important;
      background-size: 25px !important;
    }
    #sidebar-wrapper ul.merchant-ul li.m-3-icon a {
      background-position: 0 -70px !important;
      background-size: 25px !important;
    }
    #sidebar-wrapper ul.merchant-ul li.m-4-icon a {
      background-position: 0 -107px !important;
      background-size: 25px !important;
    }
    #sidebar-wrapper ul.merchant-ul li.m-5-icon a {
      background-position: 0 -142px !important;
      background-size: 25px !important;
    }
    #sidebar-wrapper ul.merchant-ul li.m-6-icon a {
      background-position: 0 -175px !important;
      background-size: 25px !important;
    }
    #sidebar-wrapper ul.merchant-ul li.m-7-icon a {
      background-position: 0 -210px !important;
      background-size: 25px !important;
    }
    #sidebar-wrapper ul.merchant-ul li.m-8-icon a {
      background-position: 0 -245px !important;
      background-size: 25px !important;
    }
    #sidebar-wrapper ul.merchant-ul li.m-9-icon a {
      background-position: 0 -285px !important;
      background-size: 25px !important;
    }
    #sidebar-wrapper ul.merchant-ul li.m-10-icon a {
      background-position: 0 -320px !important;
      background-size: 25px !important;
    }
    #sidebar-wrapper ul.merchant-ul li.m-11-icon a {
      background-position: 0 -355px !important;
      background-size: 25px !important;
    }
    #sidebar-wrapper ul.merchant-ul li.m-12-icon a {
      background-position: 0 -390px !important;
      background-size: 25px !important;
    }
    #sidebar-wrapper ul.merchant-ul li.m-13-icon a {
      background-position: 0 -387px !important;
      background-size: 25px !important;
    }
    .toggled #sidebar-wrapper ul.menu li a{
      margin-left: 12px !important;
    }
    .side_username p{
      text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        cursor: default;
    }
    /* -------------------------- Merchant -----------------------------  */

    .btn-trash{
      background: var(--red);
    border-color: var(--red);
    color: #fff;
    border-radius: 10px;
    height: 35px;
    }
    .btn-trash i{
      color: #ffff;
    font-size: 1rem;
    }

    .breadcrumb-item .pre-item{
      color: var(--lit-blue);
      text-decoration: none;
      opacity: 0.6;
    }
    .breadcrumb-item .pre-item i{
      color: var(--lit-blue);
      margin: 0 3px;
    }
    .breadcrumb-item a{
      color: var(--d-blue);
    font-weight: 500;
    text-decoration: unset;
    }
    .breadcrumb-item+.breadcrumb-item::before{
      color: #02314B;
      opacity: 0.6;
      content: none;
    }
    .btn-funtion{
      width: auto;
      height: 38px;
      padding: 0 1rem;
      font-weight: 600;
    }
    .btn-funtion i{
      font-size: 0.9rem;
      margin-right: 8px;
    }
    .common-table table{
      background: var(--light);
      color: var(--dark);
      border: 0.2px solid rgba(0, 0, 0, 0.125);
      border-radius: 15px;
    }
    .table > :not(caption) > * > *{
      border-bottom-width: inherit;
    }
    .table > :not(:first-child) {
      border-top: 1px solid rgba(0, 0, 0, 0.125);
    }
    table.dataTable.no-footer {
      border-bottom: 0.2px solid rgba(0, 0, 0, 0.125) !important;
    }
    table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd {
      background-color: unset !important;
    }
    table.dataTable tbody tr {
      background-color: unset !important;
    }
    table.dataTable thead th, table.dataTable thead td{
      border-bottom: 0.2px solid rgba(0, 0, 0, 0.125) !important;
    }
    table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
      border-top: unset !important;
    }
    table.dataTable tbody th, table.dataTable tbody td {
      padding: 10px 10px !important;
    }
    .btn-status{
      color: #ffff;
      border: transparent;
      font-size: 13px;
      padding: 4px 0px;
      border-radius: 10px;
      width: 85px;
    }
    .in-active{
      background: #A1A1A1;
    }
    .status-active{
      background: var(--green);
    }
    .paginate_button i{
  /* font-size: 1.2rem;
  border: 1px solid #ccc; */
  border-radius: 7px;
  color: #ccc;
  background: transparent;
  padding: 0;
}
.page-item.active .page-link{
  background-color: #fff;
    border: 1px solid #dee2e6;
    color: var(--dark);
}
.paginate_button i:hover, .paginate_button i:active{
  border: 1px solid var(--dark);
  color: var(--dark);
}
.paginate_button.current{
  background: transparent !important;
  border: 1px solid #ccc !important;
  padding: 2px 18px !important;
  position: relative;
  bottom: 5px;
  border-radius: 7px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  margin-left: 0;
}
.action-icon img{
  width: 20px;
  margin-right: 1.5rem;
}
/* ----------- View Merchant ---------------  */
.breadcrumb_pos{
  padding: 5px 15px;
}
.btn-custom-edit, .btn-custom-edit:hover{
  border: 1px solid var(--blue);
  color: var(--blue);
  text-transform: uppercase;
  font-weight: bold;
  /* width: 150px; */
}
.btn-custom-edit img{
  width: 18px;
}
.view-card.card{
  background-color: var(--light);
}
.view-card .card-header{
  background-color: unset;
}
.country-flag{
  width: 20px;
}
.card-body .table{
  background: #fff !important;
  border-radius: 15px !important;
  vertical-align: bottom;
}
.skip-step{
  color: var(--green) !important;
  font-weight: 600;
  float: right;
}
/* ---- Modal Box ------ */
.modal-header{
  border-bottom: transparent;
  padding-bottom: 0;
  padding-right: 1.5rem;
  padding-top: 1.5rem;
}
.modal-header .btn-close{
  background: unset;
  background-color: var(--dark);
  border-radius: 50px;
  color: #fff;
  opacity: unset;
  display: flex;
    align-items: center;
    justify-content: center;
}
.modal-header .btn-close span {
  font-size: 1.5rem;
}
.modal-header .btn-close i{
  position: relative;
  bottom: 2px;
}
.modal-content{
  background-color: #ECF2F2;
  border-radius: 10px !important;
}
.modal-body{
  padding: 1rem 2rem;
}
.bg-green {
  background-color: var(--green) !important;
}
table .bg-green{
    background-color: #CEF0E4 !important;
    color: #13A36E;
    border: 1px solid #13a36e78;
}

.bg-blue {
  background-color: #2ECCCB !important;
}
.bg-red {
  background-color: var(--red) !important;
}
.bg-orange{
  background-color: orange !important;
}
.bg-green,
.bg-red, .bg-orange {
  border-radius: 10px !important;
}
.custom_datatable .bg-red {
  background-color: #ff434326 !important;
  color: var(--red);
  border: 1px solid;
}
/* ----- external page (privacy policy)------- */

.external .fa-arrow-left{
  background: #13a36e6e;
  padding: 10px 11px;
  font-size: 0.9rem;
  border-radius: 50px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-right: 1rem;
}
.external small{
  margin-left: 3.3rem;
}
.alert-info {
  color: var(--green);
  background-color: #13a36e12;
  border-color: #13a36e30;
}
.alert{
  border-radius: 15px;
}
.external p{
  font-size: 14px;
}
.questions ul li::marker {
  content: "• ";
  color: var(--primary);
  font-weight: bold;
  font-size: 2rem;
}
.questions ul li p{
  margin: 0;
  position: relative;
  bottom: 8px;
  left: 5px;
}
.short-head{
  background: var(--light);
  padding: 2rem;
  border-radius: 15px;
}
#button_align{margin-top: 10px;}
.btn-default {
  background-color: #fff;
  color: #444;
  border-color: #ccc;
}
/* #sidebar-wrapper ul.menu li .fw-bold active{
  background-color: #13a36e;
  color: #fff;
  width: 100%;
} */
/* ----- Dynamic search box and table ------ */
.new_row{
  background: var(--d-blue);
  margin: 0;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid #47474766;
  color: #fff;
}
.new_row .col-md-6{
  margin-bottom: 0.5rem;
}
#button_align button{
  width: 233px;
  border-radius: 10px;
  background: var(--orange);
  border-color: var(--orange);
  text-transform: uppercase;
}
#button_align #dt_reset_btn{
  margin-left: 1rem;
  background: #fff;
  border-color: var(--orange);
  color: var(--orange);
}
#container-new-arrivals .row{
  margin: 0;
}
#container-new-arrivals .row .col-sm-12{
  padding: 0;
}
.table-responsive{
  background: #fff;
  margin: 0;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0px 3px 20px #4747471A;
    border: 1px solid #47474766;
}
.table-responsive table tr td:first-child, .table-responsive table tr th:first-child {
  padding-left: 25px;
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
  --bs-table-accent-bg: transparent;
}
.table-responsive .table>tbody>tr:hover {
  --bs-table-accent-bg: #D6DCE0;
  color: #02314B;
  border: unset;
}
.table-bordered>:not(caption)>* {
  border-width: 1px 0;
  border: unset;
}
.table-bordered>:not(caption)>*>*{
  border: unset;
}
table .btn{
  padding: 0.25rem 0.5rem;
}
.table-responsive .custom_datatable{
  margin: 0;
}
.sidebar-dropdown .sidebar-submenu ul li.active{
  background: var(--d-blue);
  border-radius: 50px;
}
.sidebar-dropdown .sidebar-submenu ul li.active a{
  color: #fff ;
}
/** Custom Loader - Start **/
#divLoading {
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999999;
  background-color: rgba(255, 255, 255, 0.80);
}

#divLoading .corona-page-preloader {
  position: fixed;
  top: 40%;
  left: 50%;
  padding: 10px 45px 10px 10px;
  margin-left: -60px;
  z-index: 1005;
  /* font-family: Poppins; */
  font-size: 16px
}
/** Custom Loader - End **/
/* .col-md-12{
  margin-bottom: 1rem;
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;} */


  /* ------ Working hours modal box -------  */
  .modal-logo .logo{
    width: 130px;
  }
  .fa-arrow-left{
    background: #13a36e6e;
    padding: 7px 8px;
    font-size: 0.9rem;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-right: 0.5rem;
}
.btn-light{
  background: #fff;
  color: var(--dark);
  border-color: #b7b3b3;
}
.btn-light:hover{
  background: #fff;
  color: var(--dark);
  border-color: #b7b3b3;
}
.btn-dark {
  color: #fff !important;
  background-color: var(--green) !important;
  border-color: var(--green) !important;
}
.btn-dark:hover, .btn-dark:active{
  color: #fff !important;
  background-color: var(--green) !important;
  border-color: var(--green) !important;
}
.add-plus{
  background: var(--orange);
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
}
.add-plus:hover{
  color: #fff;
}
.modal-header .close{
  background: transparent;
    color: var(--dark);
    border: transparent;
    font-size: 1.5rem;
    padding: 0 1rem;
}
.footer-btn button{
  width: 150px;
}
.day-align{
  justify-content: space-between;
    display: flex;
    padding-right: 3rem !important;
}

#capcha-element{
      margin-top: 17px;
    margin-left: -2px;
}

.slick-slide img{
  display: block !important;
}

/* Loader */
#divLoading {
  position:fixed;
  width:100%;
  left:0;right:0;top:0;bottom:0;
  background-color: rgba(255,255,255,0.7);
  z-index:9999;
  display:none;
}

@-webkit-keyframes spin {
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}

#divLoading::after {
  content:'';
  display:block;
  position:absolute;
  left:48%;top:40%;
  width:40px;height:40px;
  border-style:solid;
  border-color:black;
  border-top-color:transparent;
  border-width: 4px;
  border-radius:50%;
  -webkit-animation: spin .8s linear infinite;
  animation: spin .8s linear infinite;
}
.error{color: red;}


    .upload-icon{
      background: url(../img/icons/export.svg) var(--blue);
      width: 40px;
      color: #ffff;
      background-repeat: no-repeat;
      padding: 10px 20px;
      background-position: center;
      border-radius: 10px !important;
      border: transparent !important;
      height: 35px;
  }

  .upload-icon:hover, .upload-icon:active{
      /* background: var(--blue);  */
      background: url(../img/icons/export.svg) var(--blue);
      background-repeat: no-repeat;
      padding: 10px 20px;
      background-position: center;
  }
  .admin-icon{
    background: #13a36e;
  }
  .btn-warning{
    border-radius: 10px;
  }
  .head_userpic{
    width: 34px;
    height: 34px;
    border-radius: 50px;
  }
  .h-wallet{
    color: #fff;
    text-align: center;
    width: max-content;
    display: grid;
    position: relative;
    right: 3rem;
  }
  .h-wallet .spinner-border{
    display: block ;
    margin: auto;
  }
  .h-wallet p{
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
  }
  .h-select{
    width: 250px;
    border-radius: 50px;
    background-color: #0000001f;
    color: #fff;
    border: transparent;
    height: 33px;
    position: relative;
    left: 1.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")
  }
  .h-select option{
    background: #fff;
    color: var(--dark);
  }

 /* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */

/* total width */
.scrollbar::-webkit-scrollbar {
  background-color: transparent;
  width: 5px;
}

/* background of the scrollbar except button or resizer */
.scrollbar::-webkit-scrollbar-track {
  background-color:transparent
}
.scrollbar::-webkit-scrollbar-track:hover {
  background-color:#f4f4f4
}

/* scrollbar itself */
.scrollbar::-webkit-scrollbar-thumb {
  background-color:#babac0;
  border-radius:16px;
  /* border: 5px solid var(--light); */
}
.scrollbar::-webkit-scrollbar-thumb:hover {
  background-color:#a0a0a5;
  border:4px solid #f4f4f4
}

/* set button(top and bottom of the scrollbar) */
.scrollbar::-webkit-scrollbar-button {display:none}

/* div box */
.scrollbar {
  overflow-y: scroll;
  height: 90vh;
  overflow-x: hidden;
  display: flex;
    flex-direction: column;
}
#content-wrapper{
  flex: 1 0 auto;
}

.footer a{
  color: var(--dark);
    text-decoration: unset;
    font-size: 13px;
    font-weight: 600;
}

/* ===== Invoice ===== */
.btn-success{
  height: 35px;
}
.invoice_view_td .table{
  border: 1px solid #ccc;
}
.invoice_logo{
  width: 150px;
    margin: 0rem auto 1rem;
}
.invoice_logo img{
  width: 100%;
}
.printableArea{
  background: #fff !important;
    box-shadow: 0px 1px 20px #02314b14;
    border: 1px solid #D6DCE0;
}
.printableArea .g-text{
  font-weight: 500 !important;
}
.invoice-tb thead tr{
  background: #13a36e;
    color: #fff;
}
.invoice-scan{
  width: 170px;
}
.invoice-head{
  display: flex;
  padding: 5px 1.5rem;
    align-items: center;
}
.user-logo{
  width: 55px;
    height: 55px;
    margin-right: 1rem;
}
.user-logo img{
    border-radius: 50px;
    height: 100%;
}
.invoice-banner img{
  width: 100%;
}
.invoice-btn{
  margin: auto;
  display: flex;
}
.invoice-btn .btn-primary{
  align-items: center;
  display: flex;
  justify-content: center;
}
.invoice-btn .btn-primary img{
  width: 22px;
  margin-right: 10px;
}
.in_date{
  width: 20px;
}

/* ===== Privacy Policy ===== */
@media (min-width:641px) {
  .short-head{
    display: none;
  }
}
@media (min-width:961px) {
  .short-head{
    display: block;
  }
}
/* ===== End Privacy Policy ===== */
/* ===== Responsive Tablet ===== */
@media (min-width: 768px) and (max-width: 991px) {
  #reg_div{
    width: 70% !important;
  }
  #ipad-height{
    height: 100% !important;
  }
  .sidebar-brand {
    height: auto !important;
  }
}
/* ===== End Responsive Tablet ===== */

@media (min-width: 1730px) and (max-width: 1920px) {
  .form-label{
    font-size: 16px;
  }
  .sidebar-brand{
    width: 280px;
  }
  #sidebar-wrapper {
    width: 280px;
    left: 280px;
    margin-left: -280px;
  }
  .sidebar-nav{
    width: 280px;
  }
  #wrapper {
    padding-left: 280px;
  }
  .form-control{
    font-size: 15px;
  }
  .form-select{
    font-size: 15px;
  }
  .sidebar-nav > li a{
    font-size: 16px;
  }
  p {
    font-size: 16px !important;
  }
}
.share_i{
  width: 20px;
}
.sa_company_div .table tbody tr td {
    vertical-align: middle;
}
#colorSelector .offer_bgColor{
  background-color: rgb(20, 20, 120);
}
.masked_mobile_number{
  display: flex;
  gap: 0.5em;
  align-items: baseline;
}
.number-view-icon{
  margin: 0;
  color: orange;
}

.mobile-number-view-icon {
  margin: 0 !important;
  color: orange;
  float: unset !important;
}
.email-view-icon {
  margin: 0 !important;
  color: orange;
  float: unset !important;
}
.applicant-docs-view-icon {
  margin: 0 !important;
  color: orange;
  float: unset !important;
}

.dir_docs_action .directors-document-view,.dir_docs_action .directors-edit {
  margin: 0;
  color: rgb(38, 0, 255);
  float: unset;
}
.dir_docs_action .uploaded-document-view,.dir_docs_action .uploaded-edit-document {
  margin: 0;
  color: rgb(38, 0, 255);
  float: unset;
}
.dir_docs_action{
  display: flex;
  gap: 15px;
}

em.fa-edit{
    position: relative;
    cursor: pointer;
}

.make_portal_admin{
  width: 65%;
}

/* #request-list-datatable tr td:first-child,
#reject-list-datatable tr td:first-child,
#approve-list-datatable tr td:first-child{
  display: inline-block;
    width: 300px;
    white-space: nowrap;
    overflow: hidden!important;
    text-overflow: ellipsis;
} */
.btn-blue-primary{
  background: var(--blue);
    border: unset;
    border-radius: 10px;
    width: auto;
}
.b-receipt{
  width: 24px;
}
.t-whiteIcon{
  background: var(--blue);
    border: unset;
    border-radius: 20px;
    width: 65px;
    margin: 1rem auto;
    padding: 10px;
}
.px-6{
  padding-right: 5rem !important;
    padding-left: 5rem !important;
}

/* .applicant-uploaded-document-view a{
  background: url(../img/noimage.png) no-repeat;
    height: 100px;
    width: 100px;
    display: block;
    background-size: cover;
} */
#verify_login_form code{
  font-family: 'Roboto', sans-serif;
  color: var(--red);
}

#table_no_data{
  text-align: center;
}

.commision_rate_text{
  /*color: #fff;*/
}
.checkSetDefault .form-check-input:checked[type=checkbox] {
  background-color: var(--lit-blue);
  border-color: var(--lit-blue);
}
.listOne{
  margin: 0em 0 1em;
}
.listOne a.selected{
  border: 0px solid var(--orange);
    background: #fff;
    padding: 1em;
    border-radius: 20px;
    box-shadow: 0px 0px 10px #ccc;
}
.listOne a{
  text-decoration: unset;
    color: var(--dark);
    font-weight: 600;
    font-size: 1.13em;
    width: 100%;
    display: flex;
    /* padding: 1em; */
    align-items: center;
    justify-content: space-between;
}
.listOne .form-check-input:checked[type=checkbox] {
  background-color: var(--orange);
  border-color: var(--orange);
}
.listOne a img{
  width: 75px;
    height: 75px;
    border-radius: 50px;
    margin-right: 1em;
}
.innerCard{
  background: #fff;
    margin-bottom: 1.5em;
    padding: 1em;
    border-radius: 10px;
}
.uploaded-document-view {
  top: 2px !important;
  right: 0 !important;
}
.dir_docs_action{
  position: relative;
}
.dir_docs_action a{
  position: relative;
}
.directors-document-view{
  left: 25px;
  top: 0 !important;
}

.dstv_max_amount_static_text{
  margin-left: 15%;
}
#new-directory #add_directors_form .solo-date .upload-field{
  width: 45px;
  height: 35px;
}

.deactivate_mobilenumber{
  padding-right: 56px !important;
}
.deactivate_comments{
  height: 0%;
}

.merchant_login_mobile_number{
  padding-right: 55px !important;
}

#deactive_form .iti--allow-dropdown .iti__flag-container,#deactive_form  .iti--separate-dial-code .iti__flag-container{
  height: 35px;
}

.customer_deactive_form .iti--allow-dropdown .iti__flag-container,.customer_deactive_form  .iti--separate-dial-code .iti__flag-container{
  height: 35px;
}

.merchant_login_form .iti--allow-dropdown .iti__flag-container,.merchant_login_form  .iti--separate-dial-code .iti__flag-container{
  height: 35px;
}

.product_instruction{
  background-color: #e8f5e8;
  box-shadow: 0 1px 3px #121111;
  text-align: center;
}

.labelIflex {
    display: flex;
    gap: 10px;
}

.nameIcon{
  position: relative;
  display: flex;

}
.nameIcon em{
  top: 4px;
  left: 10px;
  position: relative;
}
#btnConfirmLogin{
  margin-left: 13%;
}

.dynamic-view-icon{
  margin: 0;
  color: orange;
}

.progress-bar-danger{
  background-color: red !important;
}
.progress-bar-warning{
  background-color: orange !important;
}
.progress-bar-success{
  background-color: green !important;
}

.tooltiptextForm li {
    background-color: #555;
    color: #fff;
    word-break: break-all;
    text-align: left;
    padding: 0px 15px;
    line-height: 24px;
    font-size: 12px;
}

.tooltiptextForm {
    visibility: hidden;
    position: absolute;
    width: max-content;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 10px 12px;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s;
    top: 24%;
    left: 44%;
}
.changepass {
    top: 26%;
    left: 44%;
}
.tooltiptextForm ul {
    padding: 0;
    list-style-type: none;
}
.tooltiptextForm::after {
    content: "";
    position: absolute;
    top: 25%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

.tooltipForm:hover .tooltiptextForm {
    visibility: visible;
    opacity: 1;
}

#logs_view_table, #logs_view_table th, #logs_view_table td,#logs_view_table tr {
  border: 1px solid black;
  border-radius: 10px;
}

.account-number-view-icon{
  right: 35% !important;
  top: 15% !important;
}
.user-email-view-icon{
  right: 0% !important;
    top: 0% !important;
    position: relative !important;
}
.inputEyeicon{
  position: relative;
  display: flex;
}
.inputEyeicon em{
  position: absolute;
    right: 12px;
    left: unset;
    top: 12px;
    color: #000;
}
.picker__table{
  color: var(--dark);
}

.paySuccess .img-failed{
  width: 150px;
  margin: 0 auto;
}
.paySuccess .img-success{
  width: 90px;
  margin: 1rem auto 2rem;
}
.paySuccess table{
  border: 1px solid #ccc;
  border-radius: 10px;
}
.paySuccess table td{
  border-right:1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.footerLogo{
  width: 100px;
  margin: 1rem auto 0;
}

.login_company_list_label{
  font-weight: bold;
}
#push_cancel_button{
  width: 200px;
}
.edit_business_information{
  margin: 0;
  color: rgb(38, 0, 255);
  float: unset;
}

#edit_business_form .btn-secondary,#edit_business_form .btn-primary{
  width: 100px;
}

.border.p-4.shadow.rounded-3 ul {
  padding-left: 1rem;
}

.border.p-4.shadow.rounded-3 ul li {
  list-style: disc;
  margin-bottom: 10px;
}