.upload-ses input{
  display: none;
}
.uploadBox {
    padding-top: 10px;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
width: 100%;
height:fit-content ;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 10px 10px;
  }
.upload-ses{
    align-self: flex-start;
    text-align: start;

  }
  
  .upload-containerr {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
    margin: auto;
    position: relative;
    top: -53px;
  }
  
  .upload-box {
    border: 2px dashed #ccc;
    border-radius: 10px;
    padding: 20px;
  }
  
  .image-placeholder {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    background-color: #e6e6e6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .image-placeholder img {
    width: 40px;
    height: 40px;
    opacity: 0.5;
  }
  
  p {
    margin: 5px 0;
    color: #333;
  }
  
  .size-limit {
    font-size: 0.9em;
    color: #777;
  }
  
  .upload-button {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 1em;
    text-decoration: none;
  }
  
  .upload-button input {
    display: none;
  }
  
  .upload-button:hover {
    background-color: #0056b3;
  }



start code sadegh








.groupCartDet {
  display: inline-block;
  padding: 12px 16px;
}

@media(max-width : 700px){
.connection{
    justify-content: space-around !important ;
    padding: 12px 16px;
}
.socialmedia{
    gap : 5px !important ;
    justify-content: space-around !important ;
    max-height: none;
    min-height: 260px;
    scrollbar-width: none;
}

.mediaList input{
    min-width : 138px;
    margin-top: 4px;
    min-width: 74px !important ;
    bottom: 10px !important ;
}
.upload-container{
    height : 200px !important ;
}

.upload-container::before{
background-size: 180% !important ;
background-position-x: left !important ;
background-position-y: top !important ;
}

button.scroll-button {
visibility: hidden;
}

.socialmedia{
overflow-y: clip;
}




}

end code sadegh

body{
text-align: right;
direction: rtl;
margin: 50px;
}
button img{
pointer-events: none;
}
.connection{
  display: flex;
  flex-direction: row;
  gap: 50px;
  flex-wrap: nowrap;
  justify-content: center;
  overflow-y: scroll;
  overflow-x: visible;
}
.socialmedia {
  display: flex;
  flex-direction: row;
  gap: 50px;
  flex-wrap: nowrap;
  justify-content: center;
  overflow-y: scroll;
  overflow-x: visible;
  padding-bottom: 25px;
}
.mediaList{
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  padding-bottom: 20px;
}
.mediaList .head{
width: 52px;
height: 52px;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
  background-color: white;
  border-radius: 100%;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
}


.mediaList button{
background-color: #6106A2;
border-radius: 8px;
}
.mediaList input{
  width: 143xpx;
  height: 38px;
  border-radius: 10px;
  position: absolute;
  bottom: -22px;
  min-width: 120px;
}
.mediaList input:focus{
  outline: none;
  border: none;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
}
.shadow{
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25); 
  border: none;
  background-color: white;
}
.connection button{
  border: none;
  background-color: transparent;
  width:154px ;
  height: 156px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  border-radius: 8px;

}



.form-group {
  margin-bottom: 15px;
  position: relative;
}
.form-group #title{
  width: 50%; 
  border-radius: 10px;
  border-color: #5E5E5E;
}
.form-group #url{
  width: 50%; 
  border-radius: 10px;
  border-color: #5E5E5E;
}
label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"], input[type="url"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

.upload-container {
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  position: relative;
  height: 350px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: transparent;
overflow: hidden;


}

.upload-container::before{
content: '';
width: 100%;
height: 100%;
background-image: url(./ASSET/Ellipse\ 19.png);
background-repeat:no-repeat ;
background-position: center;
background-size: cover;
position: absolute;
right: -21%;
z-index: -1;
}

.upload-container:hover{
  background-color: transparent !important;

}

.upload-container:hover {
  background-color: #f1f1f1;
}

.upload-container input[type="file"] {
  display: none;
}

 .upload-container img {
  max-width: 100%;
  max-height: 200px;
  margin-top: 10px;
  border-radius: 5px;
} 

.upload-container label {
  cursor: pointer;
  color: #007bff;

}

.upload-placeholder {
  color: #aaa;
  font-size: 14px;
}
.handel-Section {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.cart-info .handel-Section::before {
  content: "";
  width: 100%;
   height: 1px; 
  border: 1px solid #919191;
  position: absolute;
  z-index: -1;
top: 50%;
}
button.add-banner {
display: flex
;
    align-items: center;
    justify-content: center;
  background-color: #6106A2;
  border-radius: 7px;
}
button.deleteButton{
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background-color: white;
border: 1px solid black;
border-radius:8px ;
}


.choosed::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: black;
  position: absolute;

  opacity: 0;
  transition: opacity ease 0.3s;
}
.choosed:hover::after {
opacity: 0.7;
  transition: all ease 0.3s;
}
.choosed:hover .selected{
  display: block !important;
  z-index: 1000000;
}
button.selected {
  position: absolute;
pointer-events: painted;
  margin-right: 10%;
  background-color: transparent;
  border: none;
}
.choosed:hover button.selected {
  display: block !important;
  z-index: 1000000;

}


.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}
.modal button {
  margin: 5px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.confirm {
  background-color: #4CAF50;
  color: white;
}
.cancel {
  background-color: #f44336;
  color: white;
}
.add-section{
position: relative;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.add-section:before{
content: '';
border: 1px dashed #919191;
width: 100%;
position: absolute;
z-index: -1;
}
.new-section{

width: 136px;
height: 44px;
display: flex;
align-items: center;
justify-content: space-evenly;
background-color: white;
border: 1px solid #6106A2;
border-radius: 10px;
z-index: 1000;
}
.deletesec{
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.deleteB{
width: 115px;
height: 48px;
border: none;
border-radius: 10px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
}
.deleteB p{
font-size: 16px;
color: #6106A2;
}
.new-section{
border: none;
}
.slider{
width: 292px;
height: 252px;
padding: 16px;
}
.slogan{
margin-top: 10px;
}
.slogan input{
border-radius: 10px;
width: 250px;
height: 38px;
}
.sliderimg{
width: 292px;
height: 252px;
height: fit-content;
padding: 20px !important;
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.upload-containerSl {
overflow: hidden;
width: 260px;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border: 2px solid black;
border-radius: 16px;
position: relative;
}
.upload-containerSl input{
display: none;
}
.upload-containerSl img{
z-index: 2;
}
.upload-containerSl #preview{
z-index: 2;
}
.upload-containerSl label{
cursor: pointer;
color: #007bff;
z-index: 2;

}
.slidlink{
width: 100%;
border-radius: 10px;
}
.upload-containerSl::before{
content: '';
width: 100%;
height: 100%;
background-image: url(./ASSET/Ellipse\ 18.png);
position: absolute;

}
.scroll{
display: flex;
flex-direction: row;
overflow: auto;
gap: 34px;
min-height: 420px;
padding-bottom: 28px;

}
.sliders{
position: relative;
}

button#scrollRight {
position: absolute;
right: -40px;
top: 50%;
z-index: 100;
background-color: transparent;
border: none;
}
button#scrollLeft {
position: absolute;
left: -40px;
top: 50%;
z-index: 100000;
background-color: transparent;
border: none;
}

 sadegh 

.upload-section {
text-align: center;
min-width: 554px;
max-width: 554px;
}
.upload-section {
text-align: center;
}


.upload-img {
min-width: 530px;
max-width: 530px;
min-height: 212px;
max-height: 212px;
border: 0.5px solid #5E5E5E;
border-radius: 6px;
margin: 12px 0px;
padding: 16px 10px;
background-image: url(file:///C:/Users/MANESH-IT2/Downloads/Ellipse%2016.png);
background-size: 90%;
background-repeat: no-repeat;
background-position-x: right;
background-position-y: bottom;
}

.title-link-product {
text-align: right;
}

input.inp-title-link-product , input.inputs-up-section-ferst {
width: 100%;
border: 0.5px solid #5E5E5E;
border-radius: 10px;
min-height: 34px;
max-height: 34px;
padding: 10px 12px;
margin: 6px 0px;
}

.ferst-section-dub {

font-family: 'IRANSANS';
}


.img-uploaded {
min-height: 64px;
max-height: 64px;
min-width: 64px;
max-width: 64px;
margin-bottom: 20px;
}
.shadowHigh{
box-shadow: 0px 4px 10px 0px rgb(0 0 0 / 25%);
}
.shadowsoft{
box-shadow: 0px 1px 10px 0px rgb(0 0 0 / 25%);
}

.sec-ferst-upload {
display: flex
;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 24px;
min-width: 554;

}
.t-bakhsh {
max-width: 554;
min-width: 554;
}

.lbl-link{
color: #4457FF ;
}

@media(max-width : 700px){
.upload-img{
    min-width: 240px;
    max-width: 240px;
}
.upload-section{
min-width: 225px;
max-width: 255px;}
}





@media(min-width : 700px){
.upload-container {
    top:0 !important;
}    
    
}
.slid {
    position: relative;
}
.choosed {
    padding: 0px !important;
    /* display: block; */
}
.choosed .upload-placeholder img {
    max-width: 100% !important;
    width: 100% !important;
    margin-top: 0px;
    display: block;
    max-height: 100%;
    object-fit: fill;
}
.upload-placeholder {
    width: 100% !important;
    height: 100% !important;
}