*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* border: 1px solid red; */
}

:root {
    /* Font variables */
    --font-family-one: Inter;
    --font-family-two: Nunito Sans;
    --font-size-base: 14px;
    --font-size-one: 18px;
    --font-size-two: 16px;
    --font-size-three: 24px;
    --font-size-four: 48px;
    --font-size-five: 12px;
    --font-color: rgba(50, 52, 56, 0.8);
     
    --tab-negative-margin: -3.25em;

    /* Text inputs and Dropdowns */
    --form-input-width: 85%;
    --form-input-border-radius: 8px;
    --form-input-border: 1px solid #323438;
    --form-input-color: #323438CC;
    --form-input-outline: none;
    --form-textarea-width: 100%;
    --form-textarea-height: 164px;

    /* Colors */
    --clr-primary:#0071C1;
    --clr-primary-light: rgba(0, 113, 193, 0.1);
    --clr-secondary: rgba(169, 169, 169, 1.0);
    --clr-text-one: #323438;
    --clr-head-light: rgba(0, 113, 193, 0.05);

}
/* main color of the website declared here */
.bg-primary{
    background-color: #0071C1 !important;
}
.btn-primary{
    background-color: #0071C1 !important;
}

.sell-tab-negative-margin {
    margin-left: var(--tab-negative-margin);
}

.sell-input-item {
    width: var(--form-input-width);
    border-radius: var(--form-input-border-radius);
    border: var(--form-input-border);
    color: var(--form-input-color);
    outline: var(--form-input-ouline);
}

.sell-textarea {
    width: var(--form-textarea-width);
    height: var(--form-textarea-height);
    border-radius: var(--form-input-border-radius);
    border: var(--form-input-border);
    color: var(--form-input-color);
    outline: var(--form-input-ouline);
}

.sell-modal-button-container {
    width: 80%;
    margin: 0 auto;
}

.sell-modal-button-links {
    background-color: var(--clr-primary);
    border-radius: 8px;
    color: #fff;
    display: block;
}
.sell-modal-button-links:hover {
    color: #fff;
}
.sell-modal-button-links-grey:hover {
    color: #000;
}

.sell-modal-button-links-grey {
    background-color: var(--clr-secondary);
    border-radius: 8px;
    color: #000;
    display: block;
    width: 70%;
}

.sell-fs-base {
    font-size: var(--font-size-base);
}

.sell-clr-primary {
    color: var(--clr-primary);
}

.sell-clr-bg-primary {
    background-color: var(--clr-primary);
}

.sell-clr-secondary {
    background-color: var(--clr-secondary);
}

.sell-text-color {
    color: var(--clr-text-one);
}

.sell-promote-ad-select {
    border: 1px solid rgba(50, 52, 56, 1);
    border-radius: 8px;
    color: var(--clr-text-one);
}

.sell-badge {
    background-color: var(--clr-primary-light) !important;
    color: var(--clr-primary);
    cursor: pointer;
}

.sell-badge-outlined {
    background: none !important;
    border: 1px solid var(--clr-primary);
    color: var(--clr-primary);
    cursor: pointer;
    
}

.sell-terms-width {
    width: 25rem;
}

.sell-categories {
    width: 29em;
    height: 300px;
    border: 1px solid red;
    border-radius: 0px 0px 5px 5px;
    /* border: 1px solid rgb(218, 215, 215); */
    overflow: scroll;
    overflow-x: hidden;
}
.sell-categories::-webkit-scrollbar {
    width: 0.5em;
    display: none;
  }
  .sell-categories::-webkit-scrollbar-thumb {
    background: rgba(108, 108, 108, 0.2);
  }
  /* .sell-categories::-webkit-scrollbar-track {
    padding: 1rem;
  } */
  .sell-categories::-webkit-scrollbar-corner {
    display: none;
  }
.sell-category-item {
    width: 95%;
    
}
.sell-category-item:hover {
    background: rgba(0, 113, 193, 0.05);
}
.sell-category-label {
    margin-top: 0.2em;
}
.sell-arrow-right {
    margin-bottom: 0.1em;
}
.sell-select-background:first-of-type{
    border-radius: 20px 20px 0 0;
}
.sell-header{
    display: flex;
    /* align-items: center; */
    /* align-content: center; */
    /* background-color: #525863; */
    /* color: white; */
}
.topic{
    font-size: 17px;
   
}


/* .sell-select-background:last-of-type{
    border-radius: 0 0 20px 20px;
} */

.sell-multiselect {
    /* width: 32em; */
    /* margin-right: 10px; */
    border-radius: 8px;
    border: 1px solid rgb(218, 215, 215);
    
}
#multiselect-2{
    /* margin-left: 10%; */
}
.sell-label-transition {
    top: -10px;
    font-size: 12px !important;
    background-color: #fff;
}

.upload-container{
    /* border: 1px solid black; */
    height: auto;
    /* width: 100%; */
    /* display: flex; */
    /* align-items: center; */
}
.button-container{
    width: 100px;
    /* border: 1px solid black; */
}
.imageDisplay{
    /* border: 1px solid black; */
   /* max-width: 500px; */
    /* max-height: 85px; */
    /* overflow: hidden; */
}
.icon-plus{
    color: white;
  
}

/* Image upload */
.ha-imgUpload-each{
    width: 70px;
    height: 70px;
    background-position: center !important;
    background-size: cover !important;
    background-repeat:no-repeat !important;
    display:inline-block;
    position: relative;
    /* border: solid 1px #b9e2ff; */
}
.ha-imgUpload-each:hover{
    width: 75px;
    height: 75px;
    transition: all .2s ease-in-out;
    user-select: none;
}
.ha-del-image__item{
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    top: 3px;
    right:3px;
    padding-bottom: 1px;
    padding-left: 7.3%;
    padding-right: 7.3%;
    font-weight: bolder;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    user-select: none;
    
}
.ha-del-image__item:hover{
    background-color:rgba(0, 0, 0, 1);
    cursor: pointer;
    user-select: none;
}


  /* second button design */
  .large-button{
      display: grid;
      width: 7em;
      height: 7em;
      place-items: center;
      border-radius: 50%;
      background-color: rgb(180, 180, 180);
  }
  input[type="file"]{
      position: absolute;
      border-radius: 50%;
      width: 5em !important;
      height: 5em !important;
      /* background-color: blue; */
      opacity: 0;
     
  }

.heading{
    width: 100%;
    height: 7em;
    /* border: 1px solid black; */
    background-color: var(--clr-head-light);
}
.nav-content{
    width: 2.2em;
    height: 2em;
    background-color: white;
    border: 1px solid rgb(218, 215, 215);
    border-radius: 8px;
    text-align: center;


   
}
.user{
    background-color: #580273;
    margin-right: 15px;
}
.navigation{
    height: 7em;
    justify-content: space-between;
    align-items: center;
}
.sm-btn{
   height: 2.7em;
   width: 7em;
   font-size: var(--font-size-base);

}
.N-text{
font-size: var(--font-family-two);
}

/* saved page styling */
.main{
    background-color: rgba(0, 113, 193, 0.02);
}

.frame {
    height: 600px;
    background-color: rgba(0, 113, 193, 0.02);

}
.frame1 {
    height: 770px;
    background-color: rgba(0, 113, 193, 0.02);
}
.contact-detail{
    width: 100%;
    height: 181px;

 
}
.name{
    width: 5em;
    height: 4.5em;
    background-color: #580273;
  
}
.initial{
    font-size: 2.5em;
}
.myName{
    font-weight: 700;
    font-family: var(--font-family-one);
    font-size: 20px;
}
 .setting{
     width: 5em;
     height: 2em;
    
 }

.set{
    font-size: var(--font-size-five);
    font-family: var(--font-family-one);
}
.setting:hover{
    color: white;
    background-color: #919294;
    padding-top: 4px;
    border-radius: 4px;
}
.frame2{
    height: 676px;
}

.page-status{
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-family-one);

}
.support-btn{
   height: 6.5em;
   width: 6.5em;
   position:relative;
   left: 80%;
   bottom: 5%;
}
.btn-hide{
    width: 62px;
    color: black;
    background-color: #919294;
    font-size: 14px;
}
input[type ="button"]{
    font-size: 16px;
    /* height: 20px; */
    color: white;
}

button[value = "Hide 1"]{
   color: white;
}
.btn-hide:hover{
    background-color: #919294;
    color: white;
}
.btn-text{
    font-size: var(--font-size-base);
}
.response{
    font-family: inter;
}
.line1{
    width: 100%;
    height: 100%;
} 
.line2{
    width: 100%;
    height: 50px;
    
}
.tre{
    height: 87px;
}
.icon{
    font-size: 16px;
}
.list-text{
    font-family: inter;
    font-size: var(--font-size-two);
}
.no5{
    color: #580273;
}
.list{
    font-family: inter;
    font-size: var(--font-size-two);
    
}

/* styling for saved page 2 */

.save-heading{
    font-size: 20px;
}
.car-img{
    width: 30%;
}
.sell-img{
    width: 30%;
}
.left-content{
    width: 65%;
    background-color: rgba(0, 113, 193, 0.02);
}

.sm-btn2{
    height: 2.0em;
    width: 5em;
    font-size: var(--font-size-base);
    /* font-weight: 600; */
 
 }
 /* look at this,it was initially styled witha class and diplay none doset work */
 #more-box{
     border: 1px solid #6c757d!important;
     width: 85%;
     height: 50px;
    
 }
 .ret{
     display: block;
 }
 
 
 .icon2{
     font-size: 12px;
 }
.title{
    font-size: var(--font-size-one);
    font-family: inter;
    font-style: regular;
}
.tiny{
    display: inline;
    position:relative;
    left: 90%;
    bottom: 2%;
    padding-top: 2%;
}
.amount{
    font-size: var(--font-size-two);
}
.location{
    font-size: var(--font-size-base);
    font-weight: 400;
}
.gray-btn{
    font-size: var(--font-size-five);
    font-weight: 400;
}
.mylist{
    font-family: inter;
    font-style: Regular;
    font-size: var(--font-size-two);

}

 /* styling message page */
 
 .right-t{
    width: 35%;
    background-color: blue;
    /* padding-left: 2%; */
   
 }
 .left-t{
     width: 60%;
     z-index: -20;
     /* margin-left: 3%; */

     
 }
 .mini-header{
     width: 100%;
     height: 75px;
    
    
 }
.myrow{
    height: 612px;
}

 .menu{
     border-bottom: 1px solid rgb(218, 210, 210);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     padding: 0 8%;
    height: 75px;
}
.message{
    font-size: var(--font-size-one);
    font-family: var(--font-family-one);
}
.drop-it-menu{
    width: 7.5em;
    height: 7.1em;
    /* border: 1px solid black; */
    left: 32%;
    top: 34%;
    z-index: 20;
    display: none;
}
li>.dropdown-item{
    font-size: var(--font-size-five);
    font-family: var(--font-family-one);
}
.avater{
    margin-top: 20%;
}
.avater-text{
    font-size: var(--font-size-one);
    font-family: var(--font-family-one);
}
.chat-space{
    height: 540px;
    /* border: 1px solid black; */
    background-color: rgba(0, 113, 193, 0.01);
  
}
.advert{
    top: 50%;
}
.line{
    display: block;
    width: 100%;
    border-top: 0.2px solid rgb(184, 176, 176);
    margin-top: 7.5%;

}
.fa-bars{
   color: #323438;
}

/* styling chat list */
.chats{
   overflow: hidden;

    
}
.main-chat{
    /* border: 1px solid blue; */
    width: 100%;
    height: 8em;
    border-bottom:1px solid grey;
    background-color: rgba(169, 169, 169, 0.2);
    
    
}
.chat1{
  border-top:1px solid grey;
}
.identity{
    width: 2.3em;
    height: 2.1em;;
}
.conversation{
    font-family: var( --font-family-one);
    line-height: 10px;
   
}
.p1{
    font-size: var(--font-size-two);
}
.product-n{
    font-size: var(--font-size-two);
    font-weight: 600;
}
.p2{
    font-size: var(--font-size-base);
}
.fa-ellipsis-v{
    color: white;
    
}
.drop{
    display: none;
   z-index: 20;
}







@media only screen and (min-width:280) and (max-width: 704px){
   .logo{
       width: 30%;
   }
   .frame2{
    width: 100%;
    height: 676px;
    margin-left: 0;
    /* border: 1px solid black; */
  }
  .frame1 {
    /* border: 1px solid black; */
    width: 100%;
    margin-left: 0;
   
    /* box-shadow: white; */

  }
   .frame {
    /* border: 1px solid black; */
    width: 100%;
  }
  .support-btn{
    left: 70%;
  }
  .tiny{
    left: 80%;
    
  }
  .right-t{
    width: 100%;
    /* border: 1px solid black; */
  }
  .left-t{
    width: 100%;
   
 }
 .drop-it-menu{
    left: 70%;
   
 }
 .right-t{
   
    padding: 1%;
   
 }
 .left-t{
    padding: 1%;
     margin-left: 0;
     
 }
 .myrow{
     margin-top: 30px;
 }
 
 .sell-categories {
    /* width: 100%; */
    /* margin-right: 10px; */

    
  } 
}
@media only screen and (max-width: 770px){
    .icon{
        margin-left: 15px;
    }
   
    .sell-categories {
      width: 18em;
      /* margin-right: 10px; */
  
      
    } 
  }

 
@media only screen and (min-width:800px) and (max-width: 1028px){
    
.sell-categories {
    width: 24em;
    

    
  }
}