@media only screen and (max-width: 1200px) 
{

  .main-content
  {
    position: relative;
    top: 48px;
  }

  .product-info .product-info-container
  {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .product-info .product-info-container .product-info-card
  {
    width: 45%;
    background-color: #fff;
  }


  table {
    margin: auto;
  }
  
  .table-striped {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .table-striped a {
    margin: 10px 0px;
    padding: 5px 20px;
    background-color: var(--main-color);
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    margin-right: 20px;
    line-height: 35px;
    font-size: .9rem;
    font-family: Muli-Regular;
    text-align: center;
  }
  
  
  .table-striped tr td {
    font-size: .9rem;
    font-family: Muli-Regular;
  }
  
  .table-striped tr td:first-child {
    text-align: left;
  }
  
  .table-striped tr th:first-child {
    text-align: left;
  }
  
  
  .table-striped tr th {
    font-size: 1rem;
    font-family: Muli-Regular;
    text-align: center;
  }
  
  .main-content .table-striped .rest,
  .main-content .table-striped .rest {
    display: none;
    color: var(--main-color);
    background: none;
    margin: 0;
  }

}

@media only screen and (max-width: 1080px) 
{


  main .main-content .brands .brands-container .owl-nav .owl-prev {
    top: 35%;
    left: 0;
  }
  
  
  main .main-content .brands .brands-container .owl-nav .owl-next {
    top: 35%;
    right: 8%;
  }



  #nav-toggle:checked ~ main .main-content .brands .brands-container .owl-nav .owl-prev {
    top: 35%;
    left: 0;
  }
  
  
  #nav-toggle:checked ~ main .main-content .brands .brands-container .owl-nav .owl-next {
    top: 35%;
    right: 2%;
  }


  main .main-content .brands
  {
    top: 48px;
    margin-top: 20px;
  }




  .user-info
  {
    width: 95%;
    margin-bottom: 50px;
  }

  .user-info .user-info-container
  {
    padding: 10px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .user-info .user-info-container form
  {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
  }

  .user-info .user-info-container form input
  {
    border: 1px solid grey;
    outline: none;
    padding: 8px;
    width: 90%;
    margin-right: 0px;
  }

  .user-info .user-info-container form a
  {
    margin-top: 15px;
    width: 90%;
    padding: 10px 20px;
  }

  .user-info .user-info-container form a:last-child
  {
    margin-left: 0px;
  }

  .user-info .user-info-container form img
  {
    width: 15%;
    margin-bottom: 10px;
  }





  .manage-users a
  {
    padding: 10px 20px;
    font-size: .9rem;
    margin-right: 0px;
  }

  .search-user
  {
    margin-top: 10px;
  }

  .search-user h5
  {
    font-size: .8rem;
    font-family: Muli-Bold;
    text-transform: uppercase;
  }

  .search-user .search-user-container
  {
    font-size: .7rem;
    padding: 7px;
  }

  .search-user .search-user-container input
  {
    width: 31%;
    padding: 8px;
    margin-right: 10px;
    font-size: 1rem;
    font-family: Muli-Regular;
  }

  .search-user .search-user-container a
  {
    padding: 11px;
    background-color: var(--main-color);
    margin-right: 10px;
    color: #fff;
    text-decoration: none;
    font-size: .9rem;
    font-family: Muli-Regular;
  }

  .search-user .search-user-container .reset
  {
    margin-right: 0px;
  }



  .scheme-form table
  {
    margin: auto; 
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 20px;
  }

  .scheme-form .table-striped
  {
    width: 90%;
    text-align: center;
  }

  .scheme-form
  {
    margin-bottom: 60px;
  }

  .scheme-form .table-striped tr td
  {
    font-size: .9rem;
  }

  .scheme-form .table-striped tr th
  {
    font-size: .9rem;
  }





  table {
    margin: auto;
  }
  
  .table-striped {
    width: 80%;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .table-striped a {
    margin: 10px 0px;
    padding: 5px 8px;
    background-color: var(--main-color);
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    margin-right: 20px;
    line-height: 35px;
    font-size: .65rem;
    font-family: Muli-Regular;
    text-align: center;
  }
  
  
  .table-striped tr td {
    font-size: .8rem;
    font-family: Muli-Regular;
  }
  
  .table-striped tr td:first-child {
    text-align: left;
  }
  
  .table-striped tr th:first-child {
    text-align: left;
  }
  
  
  .table-striped tr th {
    font-size: .8rem;
    font-family: Muli-Regular;
    text-align: center;
  }
  
  .main-content .table-striped .rest,
  .main-content .table-striped .rest {
    display: none;
    color: var(--main-color);
    background: none;
    margin: 0;
  }








  .main-content .table-striped tr th .rest,
  .main-content .table-striped tr td .rest
  {
    display: inline-block;
    color: var(--main-color);
    background: none;
    margin: 0;
    font-size: 1rem;
  }


  .product-info .product-info-container
  {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .product-info .product-info-container .product-info-card
  {
    width: 45%;
    background-color: #fff;
  }



  .add-userform
  {
    width: 100%;
    margin-bottom: 60px;
  }


  .add-userform h4
  {
    font-family: Muli-Bold;
    font-size: 1.1rem;
    text-transform: uppercase;
  }

  .add-userform .add-userform-container
  {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row;
    flex-wrap: nowrap;
  }


  .add-userform .add-userform-container h5
  {
    color: #73B629;
    font-size: 1.1rem;
  }


  .add-userform .add-userform-container table tr td:first-child
  {

    text-align: right;
    padding: 5px 15px;
    font-family: Muli-Bold;
    font-size: 1rem;

  }

  .add-userform .add-userform-container table tr td:last-child
  {
    text-align: left;
    padding: 5px 15px;
    font-family: Muli-Regular;
    font-size: 1rem;
  }

  .add-userform .add-userform-container table tr td input[type='text']
  {
    text-align: center;
    padding: 10px 20px;
    font-family: Muli-Regular;
    width:250px;
  }


  .add-userform .add-userform-container table tr td input[type='checkbox']
  {
  width: 20px;
  height: 20px;
  
  }

  .add-userform .add-userform-container table tr:last-child td
  {
  padding-top: 15px;    
  }

  .add-userform .add-userform-container form tr td .verify
  {
    background-color: var(--main-color);
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    font-family: Muli-Regular;
    font-size: 1.1rem;
  }

  .add-userform .add-userform-container form tr td
  {
    font-size: 1rem;
  }

  .add-userform .add-userform-container form tr td .resend
  {
    color: #000;
    font-family: Muli-Regular;
    font-size: 1rem;
  }
  

  .add-userform .add-userform-container form tr .otp
  {
    text-align: center;
  }

  
  main .main-content .steps-bar1 .step .bullet::before,
  main .main-content .steps-bar1 .step .bullet::after {
    position: absolute;
    content: '';
    height: 2px;
    width: 610%;
    top: 50%;
    left: 29px;
    background: #fff;
  }

  main .main-content .steps-bar1 .step p {
    margin-top: 8px;
    font-size: .65rem;
    font-family: Muli-Light;
    text-transform: uppercase;
    
  }

  main .main-content .steps-bar2 .step .bullet::before,
  main .main-content .steps-bar2 .step .bullet::after {
    position: absolute;
    content: '';
    height: 2px;
    width: 800%;
    top: 50%;
    left: 29px;
    background: #fff;
  }


}


@media only screen and (max-width: 768px) 
{

  main .main-content .brands .brands-container .owl-nav .owl-prev {
    display: none;
  }


  main .main-content .brands .brands-container .owl-nav .owl-next {
    display: none;
  }

  .main-content .top-tid-brand {
    width: 95.5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 5px 15px;
    position: fixed;
    top: 95px;
  }


  .product-info .product-info-container
  {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .product-info .product-info-container .product-info-card
  {
    width: 45%;
    background-color: #fff;
  }


  .scheme-form table
  {
    margin: auto; 
    margin-top: -90px;
    margin-left: 0px;
  }

  .scheme-form .table-striped
  {
    width: 90%;
    text-align: center;
  }

  .scheme-form
  {
    margin-bottom: 60px;
  }

  .scheme-form .table-striped tr td
  {
    font-size: .9rem;
  }

  .scheme-form .table-striped tr th
  {
    font-size: .9rem;
  }


  .main-content .scheme-form .btn-proceed
  {
    padding: 5px 10px;
    color: #fff;
    font-size: 1rem;
    margin-top: 15px;
  }







  .scheme-form table
  {
    margin: auto; 
    margin-top: -50px;
  }

  #steps-bars1
  {
    margin-top: 175px;
  }


  main .main-content .brands .brands-container .single-card .content
  {
    font-size: .85rem;
    line-height: 13px;
  }

  main .main-content .brands .brands-container .single-card .logo
  {
    height: 70%;
    padding: 5px;
  }

  main .main-content .brands .brands-container .single-card .content
  {
    height: 30%;
    cursor: pointer;
  }



  #steps-bars
  {
    margin-top: 155px;
  }
  
  .main-content .submit
  {
    margin-bottom: 80px;
  }


  main .sidebar
  {
    display: none;
  }

  main .main-content
  {
    margin-left: 10px;
  }

  main .main-content
  {
    top: 48px;
    margin-top: 50px;      
  }


  main .main-content .brands
  {
    top: 48px;
    margin-top: 20px;
  }

  .footer-navbar .footer-navbar-container
  {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    line-height: 20px;
  }

  .brands .brands-container .single-card
  {
    width: 144.5px;
    height: 144.5px;
  }
  .main-content
  {
    position: relative;
    top: 48px;
    margin-top: 50px;
  }



  header .navbar .search
  {
    display: none;
  }

  header .navbar
  {
    height: 47px;
  }

  header .navbar .search-mobile
  {
    width: 100%;
    background: var(--white-color);
    display: flex;
    justify-content: left;
    align-items: center;
    position: relative;
    text-align: center;
    font-family: Muli-Light;
    margin: 0 auto;
  }
  header .navbar .search-mobile form
  {
    width: 50%;
    font-family: Muli-Light;
  
  }
  header .navbar .search-mobile input[type='text']
  {
    padding: 10px;
    border: none;
    outline: none;
    width: 100%; 
    text-align: left;
    font-size: .8rem;
  }

  header .navbar .search-mobile button
  {
    width: 39px;
    height:39px;
    bottom: 0;
    right: 0;
    border: none;
    background: var(--secondary-color);
    color: var(--white-color);
    position: absolute
  }

  header .navbar .search-mobile button img
  {
    max-width: 18px;
    max-height: 18px;
  }

  header .navbar .logo .bars
  {
    display: none;      
  }

  header .navbar .logo img
  {
    max-width: 120px;
  }

  /* footer
  {
    display: none;
  } */

  .footer-navbar
  {
    display: block;
  }

  header .navbar .userProfile .subnav-content {
    display: none;
    position: absolute;
    right: .5rem;
    bottom: -2.5rem;
  }

  .product .product-container .product-card
  {
    width: 450px;
  }

  .product .product-container h2
  {
    font-family: Muli-Regular;
    font-size: 1.35rem;
    color: #000;
    text-transform: capitalize;
    
  }

  .product .product-container .product-card .content h5
  {
    font-size: 1rem;
    height: 40px;
    line-height: 35px;
  }

  .product .product-container .product-card .content a
  {
    margin-top: 10px;
    font-size: 1rem;
    height: 40px;
    line-height: 40px;
  }

  .product .product-container .product-card .content p
  {
    font-size: 1rem;
    height: 40px;
    line-height: 40px;
  }

  main .main-content .brands .brands-container .single-card
  {
    width: 100px;
    height: 100px;
    margin-bottom: 11px;
    margin-right: 11px;
  }

  main .main-content .brands .brands-container-tid .single-card
  {
    width: 100px;
    height: 100px;
    margin-bottom: 11px;
    margin-right: 11px;
    cursor: pointer;
  }

  main .main-content .brands .tidselection
  {
    font-size: 1rem;
  }

  main .main-content .steps-bar
  { 
    width: 97%;      
  }




  .user-info
  {
    width: 95%;
    margin-bottom: 50px;
  }

  .user-info .user-info-container
  {
    padding: 10px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: center;
  }

  .user-info .user-info-container form
  {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
  }

  .user-info .user-info-container form input
  {
    border: 1px solid grey;
    outline: none;
    padding: 8px;
    width: 90%;
    margin-right: 0px;
  }

  .user-info .user-info-container form a
  {
    margin-top: 15px;
    width: 90%;
    padding: 10px 20px;
  }

  .user-info .user-info-container form a:last-child
  {
    margin-left: 0px;
  }

  .user-info .user-info-container form img
  {
    width: 15%;
    margin-bottom: 10px;
  }



  .manage-users a
  {
    padding: 10px;
    font-size: .9rem;
    margin-right: 0px;
  }

  .search-user
  {
    margin-top: 10px;
  }

  .search-user h5
  {
    font-size: .8rem;
    font-family: Muli-Bold;
    text-transform: uppercase;
  }

  .search-user .search-user-container
  {
    font-size: .7rem;
    padding: 7px;
  }

  .search-user .search-user-container input
  {
    width: 30%;
    padding: 7px;
    margin-right: 10px;
    font-size: 1rem;
    font-family: Muli-Regular;
  }

  .search-user .search-user-container a
  {
    padding: 12px;
    background-color: var(--main-color);
    margin-right: 10px;
    color: #fff;
    text-decoration: none;
    font-size: .9rem;
    font-family: Muli-Regular;
  }

  .search-user .search-user-container .reset
  {
    margin-right: 0px;
    padding: 10px;
  }






  table {
    margin: auto;
  }
  
  .table-striped {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .table-striped a {
    margin: 10px 0px;
    padding: 5px 8px;
    background-color: var(--main-color);
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    margin-right: 20px;
    line-height: 25px;
    font-size: .6rem;
    font-family: Muli-Regular;
    text-align: center;
  }
  
  
  .table-striped tr td {
    font-size: .65rem;
    font-family: Muli-Regular;
  }
  
  .table-striped tr td:first-child {
    text-align: left;
  }
  
  .table-striped tr th:first-child {
    text-align: left;
  }
  
  
  .table-striped tr th {
    font-size: .65rem;
    font-family: Muli-Regular;
    text-align: center;
  }

  /* .table-striped tr .col1
  {
    display: none;
  } */
  
  
  .main-content .table-striped .rest,
  .main-content .table-striped .rest {
    display: none;
    color: var(--main-color);
    background: none;
    margin: 0;
  }

  .search-user .search-user-container input {
    padding: 5px;
    margin-right: 8px;
    font-size: .8rem;
  }
  
  
  .search-user .search-user-container input:last-child {
    padding: 5px;
    margin-right: 0px;
    font-size: .8rem;
  }
  
  
  .search-user .search-user-container .search {
    padding: 7px 15px;
    margin-right: 10px;
    font-size: .8rem;
  }
  
  .search-user .search-user-container .reset {
    padding: 5px 10px;
    font-size: .9rem;
  }



  

  
  







  .main-content .table-striped tr th .rest,
  .main-content .table-striped tr td .rest
  {
    display: inline-block;
    color: var(--main-color);
    background: none;
    margin: 0;
    font-size: 1rem;
  }

  .main-content .top-tid-brand {
    width: 97%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 5px 10px;
    top:100px;
  }

  main .main-content .steps-bar .step .bullet::before,
  main .main-content .steps-bar .step .bullet::after {
    position: absolute;
    content: '';
    height: 2px;
    width: 590%;
    top: 50%;
    left: 29px;
    background: #fff;
  }

  main .main-content .steps-bar .step:last-child .bullet::before,
  main .main-content .steps-bar .step:last-child .bullet::after {
    display: none;
  }


  .main-content .top-tid-brand h2 {
    font-size: .9rem;
  }

  .main-content .top-tid-brand label {
    font-size: .9rem;
  }

  .brands .brands-container .owl-nav .owl-prev {
    left: 0;
    font-size: 3rem;
  }
  
  .brands .brands-container .owl-nav .owl-next,
  .brands .brands-container button span {
    right: 0;
    font-size: 3rem;
  }


  .brands .brands-container .owl-nav .owl-prev {
    position: absolute;
    top: 25%;
    left: 0;
    line-height: 30px;
    transform: translateY(-50%);
    font-size: 4rem;
    color: #5A5A70;
    opacity: .8;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    /* border: 1px solid #7D7D8D;
    background-color: #F5F5F5; */
    box-shadow: 6px 6px 6px rgba(108, 61, 150, 0.1);
  }
  
  
  .brands .brands-container .owl-nav .owl-next {
    position: absolute;
    top: 25%;
    right: 5%;
    line-height: 30px;
    transform: translateY(-50%);
    color: #5A5A70;
    opacity: .8;
    border-radius: 50px;
    width: 25px;
    height: 25px;
    background-color: #F5F5F5;
    border: 1px solid #7D7D8D;
    background-color: #F5F5F5;
    box-shadow: 6px 6px 6px rgba(108, 61, 150, 0.1);
  }

  main .main-content .brands .brands-container .single-card .circle {
    position: absolute;
    background-color: var(--main-color);
    line-height: 25px;
    width: 25px;
    height: 25px;
    border-radius: 50px;
    margin: auto;
    text-align: center;
    color: #fff;
    left: 40%;
    bottom: -11%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
  }



  main .main-content .steps-bar2 .step .bullet::before,
  main .main-content .steps-bar2 .step .bullet::after {
    position: absolute;
    content: '';
    height: 2px;
    width: 500%;
    top: 50%;
    left: 29px;
    background: #fff;
  }



  .add-userform
  {
    width: 100%;
    margin-bottom: 60px;
  }


  .add-userform h4
  {
    font-family: Muli-Bold;
    font-size: 1.1rem;
    text-transform: uppercase;
  }

  .add-userform .add-userform-container
  {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row;
    flex-wrap: nowrap;
  }


  .add-userform .add-userform-container h5
  {
    color: #73B629;
    font-size: 1.1rem;
  }


  .add-userform .add-userform-container table tr td:first-child
  {

    text-align: right;
    padding: 5px 15px;
    font-family: Muli-Bold;
    font-size: 1rem;

  }

  .add-userform .add-userform-container table tr td:last-child
  {
    text-align: left;
    padding: 5px 15px;
    font-family: Muli-Regular;
    font-size: 1rem;
  }

  .add-userform .add-userform-container table tr td input[type='text']
  {
    text-align: center;
    padding: 10px 20px;
    font-family: Muli-Regular;
    width:250px;
  }


  .add-userform .add-userform-container table tr td input[type='checkbox']
  {
  width: 20px;
  height: 20px;
  
  }

  .add-userform .add-userform-container table tr:last-child td
  {
  padding-top: 15px;    
  }

  .add-userform .add-userform-container form tr td .verify
  {
    background-color: var(--main-color);
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    font-family: Muli-Regular;
    font-size: 1.1rem;
  }

  .add-userform .add-userform-container form tr td
  {
    font-size: 1rem;
  }

  .add-userform .add-userform-container form tr td .resend
  {
    color: #000;
    font-family: Muli-Regular;
    font-size: 1rem;
  }
  

  .add-userform .add-userform-container form tr .otp
  {
    text-align: center;
  }


  main .main-content .steps-bar1 .step .bullet::before,
  main .main-content .steps-bar1 .step .bullet::after {
    position: absolute;
    content: '';
    height: 2px;
    width: 450%;
    top: 50%;
    left: 29px;
    background: #fff;
  }


  main .main-content .steps-bar2 .step .bullet::before,
  main .main-content .steps-bar2 .step .bullet::after {
    position: absolute;
    content: '';
    height: 2px;
    width: 810%;
    top: 50%;
    left: 29px;
    background: #fff;
  }

  main .main-content .steps-bar2 .step:last-child .bullet::before,
  main .main-content .steps-bar2 .step:last-child .bullet::after {
    position: absolute;
    content: '';
    height: 2px;
    width: 0%;
    top: 50%;
    left: 29px;
    background: #fff;
  }


  main .main-content .steps-bar1 .step p {
    margin-top: 8px;
    font-size: .65rem;
    font-family: Muli-Light;
    text-transform: uppercase;
  }

  #userdetails
  {
    margin-top: 60px;
  }
  


}

  
@media only screen and (max-width: 610px) 
{

  main .main-content .steps-bar2 .step .bullet::before,
  main .main-content .steps-bar2 .step .bullet::after {
    position: absolute;
    content: '';
    height: 2px;
    width: 600%;
    top: 50%;
    left: 29px;
    background: #fff;
  }

}



@media only screen and (max-width: 580px) 
{

  main .main-content .brands .brands-container .owl-nav .owl-prev {
    display: none;
  }


  main .main-content .brands .brands-container .owl-nav .owl-next {
    display: none;
  }

  main .main-content .brands .brands-container-tid .single-card .content {
    width: 100%;
    height: 25%;
    cursor: pointer;
    font-size: 1rem;
    font-family: Muli-Bold;
  }
      
  main .main-content .brands .brands-container-tid .single-card .logo {
    width: 100%;
    height: 75%;
    padding: 10px;
    cursor: pointer;
  }


  main .main-content .brands .brands-container-tid .single-card .content {
    font-size: .6rem;
  }

  .product-info .product-info-container
  {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }
  .product-info .product-info-container .product-info-card
  {
    width: 45%;
    background-color: #fff;
  }

  .product-info .product-info-container h5 {
    font-size: .7rem;
  }
  
  .product-info .product-info-container p {
    font-size: .7rem;
  }



  .scheme-form table
  {
    margin: auto; 
    margin-top: -50px;
    margin-left: 0px;
  }

  .scheme-form .table-striped
  {
    width: 90%;
    text-align: center;
  }

  .scheme-form
  {
    margin-bottom: 60px;
    margin-left: 0px;
  }

  .scheme-form .table-striped tr td
  {
    font-size: .6rem;
  }

  .scheme-form .table-striped tr th
  {
    font-size: .6rem;
  }


  .main-content .scheme-form .btn-proceed
  {
    padding: 5px 10px;
    color: #fff;
    font-size: 1rem;
    margin-top: 15px;
  }


  .products .products-container .products-card .content h2 span:first-child
  {
    font-size: 1rem;
  }

  .products .products-container .products-card .content h2 span:last-child
  {
    font-size: .7rem;
  }

  .products .products-container .products-card .content h4
  {
    font-size: .8rem;
  }

  .products .products-container .products-card .content h4 span
  {
    font-size: .8rem;
  }

  .products .products-container .products-card .content h5
  {
    font-size: .8rem;
  }

  .products .products-container .products-card .content h5 span
  {
    font-size: .8rem;
  }



  #steps-bars1
  {
    margin-top: 150px;
    margin-bottom: 50px;
  }


  #steps-bars
  {
    margin-top: 150px;
  }

  main .main-content
  {
    top: 48px;
    margin-top: 50px;      
  }


  main .main-content .brands
  {
    top: 48px;
    margin-top: 20px;
  }

  header .navbar .userProfile .subnav-content {
    display: none;
    position: absolute;
    right: .5rem;
    bottom: -4rem;
  }

  header .navbar .search
  {
    display: none;
  }

  header .navbar
  {
    height: 47px;
  }

  .main-content
  {
    position: relative;
    top: 85px;
  }



  header .navbar .search-mobile
  {
    width: 100%;
    background: var(--white-color);
    display: flex;
    justify-content: left;
    align-items: center;
    position: relative;
    text-align: center;
    font-family: Muli-Light;
    margin: 0 auto;
  }
  header .navbar .search-mobile form
  {
    width: 98%;
    font-family: Muli-Light;
  }
  header .navbar .search-mobile input[type='text']
  {
    padding: 10px;
    border: none;
    outline: none;
    width: 100%; 
    text-align: left;
    font-size: .8rem;
  }

  header .navbar .search-mobile button
  {
    width: 39px;
    height:39px;
    bottom: 0;
    right: 0;
    border: none;
    background: var(--secondary-color);
    color: var(--white-color);
    position: absolute
  }

  header .navbar .search-mobile button img
  {
    max-width: 22px;
    max-height: 22px;
  }

  header .navbar .logo .bars
  {
    display: none;      
  }

  header .navbar .logo img
  {
    max-width: 120px;
  }

  /* footer
  {
    display: none;
  } */

  .footer-navbar
  {
    display: block;
  }

  .main-content .top-tid a
  {
    padding: 5px 10px;
    margin-right: 5px;
    font-size: .9rem;
  }

  .main-content .top-tid label
  {
    font-size: .9rem;
  }

  main .main-content .steps-bar .step p
  { 
    font-size: .7rem;
  }

  main .main-content .steps-bar .step .bullet
  { 
    position: relative;
    height: 35px;
    width: 35px;
  }

  main .main-content .steps-bar .step .bullet span
  { 
    font-size:1rem;
    line-height: 35px;
  }

  main .main-content .steps-bar .step .bullet::before,
  main .main-content .steps-bar .step .bullet::after
  {
    position: absolute;
    content: '';
    height: 2px;
    width: 1200%;
    top: 50%;
    left: 35px;
    background: #fff;
  }
  
  main .main-content .steps-bar .step:last-child .bullet::before,
  main .main-content .steps-bar .step:last-child .bullet::after
  {
    position: absolute;
    content: '';
    height: 2px;
    width:59%;
    top: 50%;
    left: 29px;
    background: #fff;
  }

  .products .products-container .products-card .logo
  {
    width: 20%;
    height: 100%;
  }

  .products .products-container .products-card .content
  {
    width: 80%;
    height: 100%;
  }

  .products .products-container .products-card
  {
    padding: 5px;
    margin-bottom: 20px;
    margin-right: 21px;
  }

  .product .product-container .product-card
  {
    width: 350px;
  }

  .product .product-container h2
  {
    font-family: Muli-Regular;
    font-size: 1.1rem;
    color: #000;
    text-transform: capitalize;
    
  }

  .product .product-container .product-card .content h5
  {
    font-size: .9rem;
    text-align: center;
    font-family: Muli-SemiBold;
    text-transform: uppercase;
    background-color: #EBEBEB;
    height: 30px;
    line-height: 25px;
    margin-bottom: 0;
    box-shadow: 6px 6px 6px rgba(108, 61, 150, 0.1);
    
  }

  .product .product-container .product-card .content a
  {
    height: 40px;
    line-height: 40px;
    background-color: var(--main-color);
    color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    font-size: .9rem;
    font-family: Muli-SemiBold;
    width: 100%;
    margin: auto;
  }

  .product .product-container .product-card .content p
  {
    font-size: .5rem;
    font-family: Muli-Light;
    width: 100%;
    background-color: #fff;
    text-align: center;
    height: 30px;
    line-height: 20px;
    margin-bottom: 0;
  }

  main .main-content .brands .brands-container .single-card
  {
    width: 85px;
    height: 85px;
    margin-bottom: 8px;
    margin-right: 8px;
  }

  main .main-content .brands .brands-container-tid .single-card
  {
    width: 76px;
    height: 76px;
    margin-bottom: 8px;
    margin-right: 8px;
    cursor: pointer;
  }

  main .main-content .brands .tidselection
  {
    font-size: .8rem;
  }

  main .main-content .brands .brands-container .single-card .content
  {
    font-size: .6rem;
    line-height: 20px;
  }

  main .main-content .brands .brands-container .single-card .logo
  {
    height: 75%;
    padding: 5px;
  }

  main .main-content .brands .brands-container .single-card .content
  {
    height: 25%;
    cursor: pointer;
  }

  main .main-content .steps-bar
  { 
    width: 99%;      
  }




  .user-info
  {
    width: 95%;
    margin-bottom: 50px;
  }

  .user-info .user-info-container
  {
    padding: 10px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .user-info .user-info-container form
  {
    width: 82%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
  }

  .user-info .user-info-container form input
  {
    border: 1px solid grey;
    outline: none;
    padding: 8px;
    width: 90%;
    margin-right: 0px;
  }

  .user-info .user-info-container form a
  {
    margin-top: 15px;
    width: 90%;
    padding: 10px 20px;
  }

  .user-info .user-info-container form a:last-child
  {
    margin-left: 0px;
  }

  .user-info .user-info-container form img
  {
    width: 15%;
    margin-bottom: 10px;
  }

  .manage-users a
  {
    padding: 5px 10px;
    font-size: .8rem;
    margin-right: 0px;
  }





  .search-user {
    width: 100%;
    text-align: left;
    margin: auto;
    margin-top: 10px;
    background-color: #fff;
    padding: 10px;
  }

  .search-user h5
  {
    font-size: .8rem;
    font-family: Muli-Bold;
    text-transform: uppercase;
  }

  .search-user .search-user-container
  {
    width: 60%;
    font-size: .7rem;
    padding: 7px;
    margin: auto;
  }

  .search-user .search-user-container input
  {
    width: 100%;
    padding: 5px;
    text-align: center;
    margin-right: 0px;
    margin-bottom: 10px;
    font-size: 1rem;
    font-family: Muli-Regular;
  }

  .search-user .search-user-container .search
  {
    width: 45%;
    padding: 10px 15px;
    background-color: var(--main-color);
    margin-right: 15px;
    margin-bottom: 10px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: .8rem;
    font-family: Muli-Regular;
    margin-top: 10px;
  }

  .search-user .search-user-container .reset
  {
    width: 45%;
    text-align: center;
    margin-right: 0px;
    padding: 9px 15px;
    font-size: .8rem;
    margin-top: 0;
  }






  table {
    margin: auto;
  }
  
  .table-striped {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .table-striped a {
    margin: 10px 0px;
    padding: 5px 8px;
    background-color: var(--main-color);
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    margin-right: 20px;
    line-height: 25px;
    font-size: .6rem;
    font-family: Muli-Regular;
    text-align: center;
  }
  
  
  .table-striped tr td {
    font-size: .65rem;
    font-family: Muli-Regular;
  }
  
  .table-striped tr td:first-child {
    text-align: left;
  }
  
  .table-striped tr th:first-child {
    text-align: left;
  }
  
  
  .table-striped tr th {
    font-size: .65rem;
    font-family: Muli-Regular;
    text-align: center;
  }

  /* .table-striped tr .col1
  {
    display: none;
  } */

  .table-striped tr .col3
  {
    display: contents;
  }

  
  
  .main-content .table-striped .rest,
  .main-content .table-striped .rest {
    display: none;
    color: var(--main-color);
    background: none;
    margin: 0;
  }












  .main-content .table-striped tr th .rest,
  .main-content .table-striped tr td .rest
  {
    display: inline-block;
    color: var(--main-color);
    background: none;
    margin: 0;
    font-size: 1rem;
  }




  .changepass
  {
    width: 330px;
    padding: 10px;
  }

  .changepass h5
  {
    font-family: Muli-Bold;
    font-size: .8rem;
    text-transform: uppercase;
  }

  .changepass .changepass-container
  {
    margin-top: 10px;
    width: 100%;
    height: 200px;
  }

  .changepass .changepass-container form input[type='text']
  {
    margin-bottom: 15px;
    padding: 5px 40px;
    text-align: center;
    font-size: .9rem;
  }

   .changepass .changepass-container form a
  {
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 8px 20px;
    font-size: .9rem;
  }


  .main-content .top-tid-brand {
    width: 97%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 5px 10px;
    top:100px;
  }

  .main-content .top-tid-brand h2 {
    font-size: .7rem;
  }

  .main-content .top-tid-brand label {
    font-size: .7rem;
  }


  .brands .brands-container .owl-nav .owl-prev {
    left: 0;
    font-size: 3rem;
  }
  
  .brands .brands-container .owl-nav .owl-next,
  .brands .brands-container button span {
    right: 0;
    font-size: 3rem;
  }


  .brands .brands-container .owl-nav .owl-prev {
    position: absolute;
    top: 25%;
    left: 0;
    line-height: 30px;
    transform: translateY(-50%);
    font-size: 4rem;
    color: #5A5A70;
    opacity: .8;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    /* border: 1px solid #7D7D8D;
    background-color: #F5F5F5; */
    box-shadow: 6px 6px 6px rgba(108, 61, 150, 0.1);
  }
  
  
  .brands .brands-container .owl-nav .owl-next {
    position: absolute;
    top: 25%;
    right: 5%;
    line-height: 30px;
    transform: translateY(-50%);
    color: #5A5A70;
    opacity: .8;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    border: 1px solid #7D7D8D;
    background-color: #F5F5F5;
    border: 1px solid #7D7D8D;
    background-color: #F5F5F5;
    box-shadow: 6px 6px 6px rgba(108, 61, 150, 0.1);
  }

  main .main-content .brands .brands-container .single-card .circle {
    position: absolute;
    background-color: var(--main-color);
    line-height: 18px;
    width: 18px;
    height: 18px;
    border-radius: 50px;
    margin: auto;
    text-align: center;
    color: #fff;
    left: 50%;
    /* bottom: -10%; */
    transform: translate(-50%, -50%);
    font-size: .5rem;
  }


  .add-userform
  {
    width: 100%;
    margin-bottom: 60px;
  }


  .add-userform h4
  {
    font-family: Muli-Bold;
    font-size: 1rem;
    text-transform: uppercase;
  }

  .add-userform .add-userform-container
  {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row;
    flex-wrap: nowrap;
  }


  .add-userform .add-userform-container h5
  {
    color: #73B629;
    font-size: .8rem;
  }


  .add-userform .add-userform-container table tr td:first-child
  {

    text-align: right;
    padding: 5px 15px;
    font-family: Muli-Bold;
    font-size: .8rem;

  }

  .add-userform .add-userform-container table tr td:last-child
  {
    text-align: left;
    padding: 5px 15px;
    font-family: Muli-Regular;
    font-size: .8rem;
  }

  .add-userform .add-userform-container table tr td input[type='text']
  {
    text-align: center;
    padding: 5px 15px;
    font-family: Muli-Regular;
    width:200px;
  }


  .add-userform .add-userform-container table tr td input[type='checkbox']
  {
  width: 20px;
  height: 20px;
  
  }

  .add-userform .add-userform-container table tr:last-child td
  {
  padding-top: 13px;    
  }

  .add-userform .add-userform-container form tr td .verify
  {
    background-color: var(--main-color);
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    font-family: Muli-Regular;
    font-size: .7rem;
  }

  .add-userform .add-userform-container form tr td
  {
    font-size: .7rem;
  }

  .add-userform .add-userform-container form tr td .resend
  {
    color: #000;
    font-family: Muli-Regular;
    font-size: .7rem;
  }
  

  .add-userform .add-userform-container form tr .otp
  {
    text-align: center;
  }


  main .main-content .steps-bar1 .step .bullet::before,
  main .main-content .steps-bar1 .step .bullet::after {
    position: absolute;
    content: '';
    height: 2px;
    width: 220%;
    top: 50%;
    left: 29px;
    background: #fff;
  }


  main .main-content .steps-bar2 .step .bullet::before,
  main .main-content .steps-bar2 .step .bullet::after {
    position: absolute;
    content: '';
    height: 2px;
    width: 350%;
    top: 50%;
    left: 29px;
    background: #fff;
  }

  main .main-content .steps-bar2 .step:last-child .bullet::before,
  main .main-content .steps-bar2 .step:last-child .bullet::after {
    position: absolute;
    content: '';
    height: 2px;
    width: 0%;
    top: 50%;
    left: 29px;
    background: #fff;
  }

  main .main-content .steps-bar1 .step p {
    margin-top: 8px;
    font-size: .65rem;
    font-family: Muli-Light;
    text-transform: uppercase;
  }



}














@media only screen and (max-width: 420px) 
{

  main .main-content .brands .brands-container {
    margin-top: 30px;
  }

  .product .product-container .product-card .content p {
    font-size: 1rem;
    font-family: Muli-Light;
    width: 100%;
    background-color: #fff;
    text-align: center;
    height: 30px;
    line-height: 25px;
    margin-bottom: 0;
  }


}







































@media only screen and (max-width: 378px) 
{


  #steps-bars1
  {
    margin-top: 175px;
  }
  .scheme-form table
  {
    margin: auto; 
    margin-top: -90px;
    margin-left: 0px;
  }

  .scheme-form .table-striped
  {
    width: 95%;
    text-align: center;
  }


}







@media only screen and (max-width: 360px) 
{

  main .main-content .brands .brands-container .owl-nav .owl-prev {
    display: none;
  }


  main .main-content .brands .brands-container .owl-nav .owl-next {
    display: none;
  }

  main .main-content .brands .brands-container .single-card
  {
    width: 76.5px;
    height: 76.5px;
    margin-bottom: 8px;
    margin-right: 8px;
  }

  main .main-content .brands .brands-container-tid .single-card
  {
    width: 76.5px;
    height: 76.5px;
    margin-bottom: 8px;
    margin-right: 8px;
    cursor: pointer;
  }

  .main-content  .submit a
  {
    padding: 7px 20px;
  }

  
  .main-content .submit
  {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 80px;
  }

  main .main-content .brands .brands-container .single-card .content
  {
    font-size: .55rem;
    line-height: 13px;
  }

  main .main-content .brands .brands-container .single-card .logo
  {
    height: 70%;
    padding: 5px;
  }

  main .main-content .brands .brands-container .single-card .content
  {
    height: 30%;
    padding-top: 10px;
    cursor: pointer;
  }


  main .main-content .brands .tidselection
  {
    font-size: .8rem;
  }

  main .main-content
  {
    top: 48px;
    margin-top: 50px;
  }

  main .main-content .brands
  {
    top: 48px;
    margin-top: 10px;
  }

  .main-content .top-tid a
  {
    padding: 5px 10px;
    margin-right: 5px;
    font-size: .7rem;
  }

  .main-content .top-tid label
  {
    font-size: .9rem;
  }

  header .navbar .userProfile .subnav-content {
    display: none;
    position: absolute;
    right: .5rem;
    bottom: -4rem;
  }


  .brands .brands-container .single-card
  {
    width: 100px;
    height: 100px;
  }

  .brands h2
  {
    font-size: 13px;
  }

  header .navbar .search
  {
    display: none;
  }

  main .main-content .steps-bar .step p
  { 
    font-size: .6rem;
  }

  main .main-content .steps-bar .step .bullet
  { 
    position: relative;
    height: 30px;
    width: 30px;
  }

  main .main-content .steps-bar .step .bullet span
  { 
    font-size:.9rem;
    line-height: 30px;
  }

  main .main-content .steps-bar .step .bullet::before,
  main .main-content .steps-bar .step .bullet::after
  {
    position: absolute;
    content: '';
    height: 2px;
    width: 1200%;
    top: 50%;
    left: 30px;
    background: #fff;
  }
  
  main .main-content .steps-bar .step:last-child .bullet::before,
  main .main-content .steps-bar .step:last-child .bullet::after
  {
    position: absolute;
    content: '';
    height: 2px;
    width:59%;
    top: 50%;
    left: 29px;
    background: #fff;
  }



  .product .product-container .product-card
  {
    width: 300px;
  }

  .product .product-container h2
  {
    font-family: Muli-Regular;
    font-size: 1.1rem;
    color: #000;
    text-transform: capitalize;
    
  }

  .product .product-container .product-card .content h5
  {
    font-size: .9rem;
    padding: 5px;
  }

  .product .product-container .product-card .content a
  {
    margin-top: 0px;
    padding: 8px;
    font-size: 1rem;
    height: 45px;
    line-height: 25px;
  }

  .product .product-container .product-card .content p
  {
    font-size: .9rem;
    padding: 5px;
  }

  main .main-content .products .products-container .product-card
  {
    width: 76.5px;
    height: 150px;
    margin-bottom: 8px;
    margin-right: 8px;
    padding: 5px;
  }

  main .main-content .products .product-card .content h3
  {
    font-size: 8px;
    font-family: Muli-Regular;
    color: var(--color-black);
  }

  main .main-content .products .products-container .product-card .image
  {
    width: 100%;
    height: 65%;
  }


  main .main-content .products .products-container .product-card .content
  {
    width: 100%;
    height: 35%;
    padding: 5px;
  }

  .products .products-container .products-card .content h2 span:first-child
  {
    font-size: 1rem;
  }

  .products .products-container .products-card .content h2 span:last-child
  {
    font-size: .7rem;
  }

  .products .products-container .products-card .content h4
  {
    font-size: .8rem;
  }

  .products .products-container .products-card .content h4 span
  {
    font-size: .8rem;
  }

  .products .products-container .products-card .content h5
  {
    font-size: .8rem;
  }

  .products .products-container .products-card .content h5 span
  {
    font-size: .8rem;
  }

  main .main-content .steps-bar
  { 
    width: 101%;      
  }

  .user-info
  {
    width: 95%;
    margin-bottom: 50px;
  }

  .user-info .user-info-container
  {
    padding: 10px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .user-info .user-info-container form
  {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
  }

  .user-info .user-info-container form input
  {
    border: 1px solid grey;
    outline: none;
    padding: 8px;
    width: 90%;
    margin-right: 0px;
  }

  .user-info .user-info-container form a
  {
    margin-top: 15px;
    width: 90%;
    padding: 10px 20px;
  }

  .user-info .user-info-container form a:last-child
  {
    margin-left: 0px;
  }

  .user-info .user-info-container form img
  {
    width: 15%;
    margin-bottom: 10px;
  }

  .search-user .search-user-container input
  {
    margin-bottom: 10px;
  }



  .search-user .search-user-container
  {
    width: 90%;
    font-size: .7rem;
    padding: 7px;
    margin: auto;
  }

  .search-user .search-user-container .search
  {
    width: 100%;
    padding: 10px 30px;
    background-color: var(--main-color);
    margin-bottom: 10px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: .9rem;
    font-family: Muli-Regular;
  }


  .search-user .search-user-container .reset {
    width: 100%;
    padding: 10px 30px;
  }





  table {
    margin: auto;
  }
  
  .table-striped {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .table-striped a {
    margin: 10px 0px;
    padding: 5px 8px;
    font-size: .6rem;
  }
  
  
  .table-striped tr td {
    font-size: .65rem;
    font-family: Muli-Regular;
  }
  
  .table-striped tr td:first-child {
    text-align: left;
  }
  
  .table-striped tr th:first-child {
    text-align: left;
  }
  
  
  .table-striped tr th {
    font-size: .65rem;
    font-family: Muli-Regular;
    text-align: center;
  }

  .table-striped tr .col1
  {
    display: none;
  }

  .table-striped tr .col2
  {
    display: none;
  }
  
  
  .main-content .table-striped .rest,
  .main-content .table-striped .rest {
    display: none;
    color: var(--main-color);
    background: none;
    margin: 0;
  }













  .main-content .top-tid
  {
    margin-bottom: -4px;

  }

  #steps-bars
  {
    margin-top: 143px;
  }

  #steps-bars1
  {
    margin-top: 175px;
  }

  .scheme-form table
  {
    margin: auto; 
    margin-top: -90px;
    margin-left: 0px;
  }

  .scheme-form .table-striped
  {
    width: 95%;
    text-align: center;
  }

  .scheme-form
  {
    margin-bottom: 400px;
  }

  .scheme-form .table-striped tr td
  {
    font-size: .5rem;
  }

  .scheme-form .table-striped tr th
  {
    font-size: .55rem;
  }


  .main-content .scheme-form .btn-proceed
  {
    padding: 5px 10px;
    color: #fff;
    font-size: 1rem;
    margin-top: 15px;
  }



  .manage-users a
  {
    padding: 5px 10px;
    font-size: .8rem;
    margin-right: 0px;
  }

  .search-user
  {
    margin-top: 5px;
  }

  .search-user h5
  {
    font-size: .8rem;
    font-family: Muli-Bold;
    text-transform: uppercase;
  }

  .search-user .search-user-container
  {
    font-size: .7rem;
    padding: 7px;
  }

  .search-user .search-user-container input
  {
    width: 100%;
    padding: 5px;
    margin-right: 0px;
    font-size: 1rem;
    font-family: Muli-Regular;
  }

  .search-user .search-user-container .search
  {
    padding: 10px 25px;
    background-color: var(--main-color);
    margin-right: 0px;
    color: #fff;
    text-decoration: none;
    font-size: .9rem;
    font-family: Muli-Regular;
  }

  .search-user .search-user-container .reset
  {
    margin-right: 0px;
  }




  table
  {
    margin: auto; 
  }

  .table-striped
  {
    width: 90%;
    text-align: center;
    margin-bottom: 50px;
  }

  .table-striped a
  {
    margin: 10px 0px;
    padding: 5px;
    font-size: .7rem;
  }


  .table-striped tr td
  {
    font-size: .6rem;
    font-family: Muli-Regular;
  }

  .table-striped tr th
  {
    font-size: .8rem;
    font-family: Muli-Regular;
    text-align: center;
  }

  .table-striped tr .col3
  {
    display: contents;
  }



  .main-content .table-striped tr th .rest,
  .main-content .table-striped tr td .rest
  {
    display: inline-block;
    color: var(--main-color);
    background: none;
    margin: 0;
    font-size: 1rem;
  }




  .changepass
  {
    width: 330px;
    padding: 10px;
  }

  .changepass h5
  {
    font-family: Muli-Bold;
    font-size: .8rem;
    text-transform: uppercase;
  }

  .changepass .changepass-container
  {
    margin-top: 10px;
    width: 100%;
    height: 200px;
  }

  .changepass .changepass-container form input[type='text']
  {
    margin-bottom: 15px;
    padding: 5px 40px;
    text-align: center;
    font-size: .9rem;
  }

   .changepass .changepass-container form a
  {
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 8px 20px;
    font-size: .9rem;
  }


  .main-content .top-tid
  {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: right;
    line-height: 1rem;
    padding-right: 15px;
  }

  .main-content .top-tid h3
  {
    font-size: .8rem;
  }

  .main-content .top-tid h3 a
  {
    text-transform: uppercase;
    color: var(--main-color);
    text-decoration:underline;
  }


  

  .add-userform
  {
    width: 100%;
    margin-bottom: 60px;
  }


  .add-userform h4
  {
    font-family: Muli-Bold;
    font-size: .9rem;
    text-transform: uppercase;
  }

  .add-userform .add-userform-container
  {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row;
    flex-wrap: nowrap;
  }


  .add-userform .add-userform-container h5
  {
    color: #73B629;
    font-size: .8rem;
  }


  .add-userform .add-userform-container table tr td:first-child
  {

    text-align: right;
    padding: 5px;
    font-family: Muli-Bold;
    font-size: .7rem;

  }

  .add-userform .add-userform-container table tr td:last-child
  {
    text-align: left;
    padding: 5px;
    font-family: Muli-Regular;
  }

  .add-userform .add-userform-container table tr td input[type='text']
  {
    text-align: center;
    padding: 5px;
    font-family: Muli-Regular;
    width:180px;
    font-size: .7rem;
  }


  .add-userform .add-userform-container table tr td input[type='checkbox']
  {
  width: 15px;
  height: 20px;
  
  }

  .add-userform .add-userform-container table tr:last-child td
  {
  padding-top: 13px;    
  }

  .add-userform .add-userform-container form tr td .verify
  {
    background-color: var(--main-color);
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    font-family: Muli-Regular;
    font-size: .9rem;
  }

  .add-userform .add-userform-container form tr td
  {
    font-size: .8rem;
  }

  .add-userform .add-userform-container form tr td .resend
  {
    color: #000;
    font-family: Muli-Regular;
    font-size: .8rem;
  }
  

  .add-userform .add-userform-container form tr .otp
  {
    text-align: center;
  }




  .product-info .product-info-container
  {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
  }
  .product-info .product-info-container .product-info-card
  {
    width: 100%;
    background-color: #fff;
  }


  .product-info .product-info-container h5 {
    font-size: .7rem;
  }
  
  .product-info .product-info-container p {
    font-size: .7rem;
  }



  main .main-content .brands .brands-container-tid .single-card .content {
    width: 100%;
    height: 25%;
    cursor: pointer;
    font-size: 1rem;
    font-family: Muli-Bold;
  }
      
  main .main-content .brands .brands-container-tid .single-card .logo {
    width: 100%;
    height: 75%;
    padding: 10px;
    cursor: pointer;
  }


  main .main-content .brands .brands-container-tid .single-card .content {
    font-size: .65rem;
  }

  .main-content .top-tid-brand {
    width: 97%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 5px 10px;
    top:100px;
  }

  .main-content .top-tid-brand h2 {
    font-size: .7rem;
  }

  .main-content .top-tid-brand label {
    font-size: .7rem;
  }

  .brands .brands-container .owl-nav .owl-prev {
    left: 0;
    font-size: 3rem;
  }
  
  .brands .brands-container .owl-nav .owl-next,
  .brands .brands-container button span {
    right: 0;
    font-size: 3rem;
  }
  

  .brands .brands-container .owl-nav .owl-prev {
    position: absolute;
    top: 25%;
    left: 0;
    line-height: 30px;
    transform: translateY(-50%);
    font-size: 4rem;
    color: #5A5A70;
    opacity: .8;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    /* border: 1px solid #7D7D8D;
    background-color: #F5F5F5; */
    box-shadow: 6px 6px 6px rgba(108, 61, 150, 0.1);
  }
  
  
  .brands .brands-container .owl-nav .owl-next {
    position: absolute;
    top: 25%;
    right: 5%;
    line-height: 30px;
    transform: translateY(-50%);
    color: #5A5A70;
    opacity: .8;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    border: 1px solid #7D7D8D;
    background-color: #F5F5F5;
    border: 1px solid #7D7D8D;
    background-color: #F5F5F5;
    box-shadow: 6px 6px 6px rgba(108, 61, 150, 0.1);
  }

  main .main-content .brands .brands-container .single-card .circle {
    position: absolute;
    background-color: var(--main-color);
    line-height: 18px;
    width: 18px;
    height: 18px;
    border-radius: 50px;
    margin: auto;
    text-align: center;
    color: #fff;
    left: 45%;
    bottom: -10%;
    transform: translate(-50%, -50%);
    font-size: .5rem;
  }

  main .main-content .steps-bar2 .step .bullet::before,
  main .main-content .steps-bar2 .step .bullet::after {
    position: absolute;
    content: '';
    height: 2px;
    width: 250%;
    top: 50%;
    left: 29px;
    background: #fff;
  }


  main .main-content .steps-bar1 .step .bullet::before,
  main .main-content .steps-bar1 .step .bullet::after {
    position: absolute;
    content: '';
    height: 2px;
    width: 220%;
    top: 50%;
    left: 29px;
    background: #fff;
  }

  main .main-content .steps-bar1 .step p {
    margin-top: 8px;
    font-size: .65rem;
    font-family: Muli-Light;
    text-transform: uppercase;
  }

  .user-info .user-info-container-msg h5 {
    font-size: 1.5rem;
  }

  .user-info .msg span {
    color: #73B629;
    font-size: .8rem;
    line-height: .8rem;
  }

  main .main-content .steps-bar2 .step p {
    margin-top: 8px;
    font-size: .65rem;
    font-family: Muli-Light;
    text-transform: uppercase;
  }

  #userdetails
  {
    margin-top: 60px;
  }
  

}