/* boot */
.back-bio {
  background-color: #d5d5d5;
  border-radius: 10px;
}
.ProfilBody{
width: 80%;
margin-left: 10%;
padding-top: 3%;
}
.cardd {
  width: 100%;
  height: 100%;
  display: flex;
  border-radius: 40px;
  overflow: hidden;
}

#card-repet {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 1fr);
}

.ImgGalerie {
  width: 100%;
  height: 100%;
  border-radius: 10%;
}

#EditAbout {
  font-size: 20px;
  color: #425e8f;
  position: absolute;
  margin-top: -1.5%;
  margin-left: 5%;
  cursor: pointer;
}

#EditAbout:hover {
  font-size: 25px;
  color: gray;
}

.gradient-custom-2 {
  /* fallback for old browsers */
  background: #fbc2eb;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, rgba(251, 194, 235, 1), rgba(166, 193, 238, 1));

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, rgba(251, 194, 235, 1), rgba(166, 193, 238, 1))
}

/* ============================ajoute un photo======================================= */
.button {
  position: relative;
  width: 150px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: none;
  border-radius: 10px;
  background-color: #3aa856;
}

.button,
.button__icon,
.button__text {
  transition: all 0.3s;
}


.button .button__text {
  transform: translateX(30px);
  color: #fff;
  font-weight: 600;
}


.button .button__icon {
  position: absolute;
  transform: translateX(109px);
  height: 100%;
  width: 33px;
  border-radius: 10px;
  background-color: #34974d;
  display: flex;
  align-items: center;
  justify-content: center;
}


.button .svg {
  width: 30px;
  stroke: #fff;
}


.button:hover {
  background: #34974d;
}

.button:hover .button__text {
  color: transparent;
}

.button:hover .button__icon {
  width: 138px;
  transform: translateX(0);
}


.button:active .button__icon {
  background-color: #2e8644;
}

.button:active {
  border: 1px solid #2e8644;
}

.buttonD {
  position: relative;
  width: 150px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border: none;
  background-color: #e50000;
  overflow: hidden;
  border-radius: 10px;

}

.buttonD,
.buttonD__icon,
.buttonD__text {
  transition: all 0.3s;
}

.buttonD .buttonD__text {
  transform: translateX(35px);
  color: #fff;
  font-weight: 600;
}

.buttonD .buttonD__icon {
  position: absolute;
  transform: translateX(109px);
  height: 100%;
  width: 39px;
  background-color: #cc0000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;

}

.buttonD .svg {
  width: 20px;
}

.buttonD:hover {
  background: #cc0000;
}

.buttonD:hover .buttonD__text {
  color: transparent;
}

.buttonD:hover .buttonD__icon {
  width: 148px;
  transform: translateX(0);
}

.buttonD:active .buttonD__icon {
  background-color: #b20000;
}

.buttonD:active {
  border: 1px solid #b20000;
}

/* _______________________delete botton______________________________________ */

.noselect {
  width: 150px;
  height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  background: red;
  border: none;
  border-radius: 5px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
  background: #e62222;
}

.noselect,
.noselect span {
  transition: 200ms;
}

.noselect .text {
  transform: translateX(35px);
  color: white;
  font-weight: bold;
}

.noselect .icon {
  position: absolute;
  border-left: 1px solid #c41b1b;
  transform: translateX(110px);
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.noselect svg {
  width: 15px;
  fill: #eee;
}

.noselect:hover {
  background: #ff3636;
}

.noselect:hover .text {
  color: transparent;
}

.noselect:hover .icon {
  width: 150px;
  border-left: none;
  transform: translateX(0);
}

.noselect:focus {
  outline: none;
}

.noselect:active .icon svg {
  transform: scale(0.8);
}

/* section{
margin-top: 100px;
display: grid;
grid-template-columns: repeat(auto-fit , 20rem);
justify-content: center;
padding: 20px;
margin-bottom: 50px;
width: 100%;
gap: 20px;
} */
/* .carr {
padding: 5px;
margin-top: 0%;
margin-left: 5%;
max-height: 50vh;
overflow: scroll;
overflow-x: hidden;
display: grid;
grid-gap: 9px;
grid-template-columns: repeat(3,1fr);

} */
/* .box {
width: 40%;
background-color: #fff;
padding: 10px;
border-radius: 6px;
position: relative;
}

.img_principal {
width: 300%;
object-fit: cover;
height: 150px;
border-radius: 6px;
}
.delete_btn {
position: absolute;
top: 1px;
left: -5px;

}
.delete_btn img {
width: 40px;
height: 40px;
}
.box div {
font-size: 13px;
margin-top: 10px;
}
.message {
font-size: 30px;

} */
/* --------------------------------------------- */
.changeCouverture {
  position: absolute;
  top: 65%;
  right: 5%;
}

.file-inputt {
  position: absolute;
  top: 5%;
  color: white;
  border: none;
  left: 2%;
  width: 80%;
  background: rgba(3, 91, 236, 0.7);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(6.3px);
  -webkit-backdrop-filter: blur(6.3px);
}

/* .file-input__input {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;

} */


/* .file-input__label {
cursor: pointer;
display: inline-flex;
align-items: center;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #fff;
font-size: 14px;
padding: 10px 109px;
background-color: #0D6EFD;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
}

.file-input__label svg {
height: 16px;
margin-right: 4px;
} */

/* ============================photo profil=================================== */

.profile-pic {

  color: transparent;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  transition: all .3s ease;
  margin-left: 2%;
  margin-top: 38%;
  justify-content: center;
}

.profile-pic input {
  display: none;
}

.profile-pic img {
  border: 5px solid #fff;
  /* border-radius: 170px */
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
  width: 170px;
  height: 170px;
  -webkit-box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  z-index: 0;
}

.profile-pic .-label {
  cursor: pointer;
  width: 170px;
  height: 170px;
  margin-bottom: 0px;

}

.profile-pic:hover .-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
  color: #fafafa;
  -webkit-transition: background-color .2s ease-in-out;
  transition: background-color .2s ease-in-out;
  border-radius: 100px;

}

.profile-pic span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: .2em;
  height: 2em;
}


.profilVisite {

  color: transparent;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  transition: all .3s ease;
  margin-left: 2%;
  margin-top: 38%;
  justify-content: center;
}

.profilVisite input {
  display: none;
}

.profilVisite img {
  border: 5px solid #fff;
  /* border-radius: 170px */
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
  width: 170px;
  height: 170px;
  -webkit-box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  z-index: 0;
}

.profilVisite .-label {
  cursor: pointer;
  width: 170px;
  height: 170px;
  margin-bottom: 0px;

}

.profilVisite span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: .2em;
  height: 2em;
}

body a:hover {
  text-decoration: none;
}

/* ===============================Botton Edit nom==================================== */

.Btn-Edit {
  position: absolute;
  margin-top: -4%;
  margin-left: 45%;

}

.Btn-AddDlete {
  position: relative;
  display: flex;
  grid-gap: 10px;
  margin-bottom: 10%;

}

#div-name {
  margin-top: -8%;
  margin-left: 21%;
}

#div-name h2 {
  font-size: 40px;
  font-family: inherit;
}

#div-name h5 {
  font-size: 20px;
  font-family: inherit;
}

#Name-Edit {
  width: 100%;
  height: 70vh;
}

.tab-content {
  box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
  padding: 8%;
  border-radius: 5px;
  width: 100%;
  height: 49vh;
}

#btn-saveName {
  width: 40%;
  height: 8vh;
  margin-left: 30%;
  margin-top: 0%;
  border-radius: 10px;
}

/* =============================change photo de couverture======================================= */
.fa-solid fa-camera {
  color: #fff;
  margin-left: -70px;
}

/* =============================div de folowers======================================= */


.p-4 {
  width: 100%;

}

.f {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 15px;
  border-radius: 6px;
  width: 90%;
  height: 50vh;
}

label {
  margin-bottom: 10px;
}

::-webkit-file-upload-button {
  background-image: linear-gradient(to right, #e91e63, #f44336);
  padding: 10px 25px;
  color: #fff;
  border-radius: 6px;
  border: 0;
  cursor: pointer;
}

input,
textarea {
  margin-bottom: 20px;
  padding: 10px;
  resize: none;
  outline: 0;
  border-radius: 6px;
}

input[type='file'] {
  padding: 32px 0;
}

input[type="submit"] {
  margin-bottom: 0;
  background-image: linear-gradient(to right, #e91e63, #f44336);
  color: #fff;
  border: 0;

}

.profilVisite {

  color: transparent;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  transition: all .3s ease;
  margin-left: 2%;
  margin-top: 38%;
  justify-content: center;
}

.profilVisite input {
  display: none;
}

.profilVisite img {
  border: 5px solid #fff;
  /* border-radius: 170px */
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
  width: 170px;
  height: 170px;
  -webkit-box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  z-index: 0;
}

.profilVisite .-label {
  cursor: pointer;
  width: 170px;
  height: 170px;
  margin-bottom: 0px;

}

.profilVisite span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: .2em;
  height: 2em;
}

.cardd {
  width: 100%;
  height: 100%;
  display: flex;
  border-radius: 40px;
  overflow: hidden;
}






/* ______________________________________________________________________________________________ */
/* ______________________________________________________________________________________________ */
/* ______________________________________________________________________________________________ */
/* ______________________________________________________________________________________________ */
/* ______________________________________________________________________________________________ */
/* ______________________________________________________________________________________________ */








@media screen and (min-width: 0px) {
  .ProfilBody{
    width: 90%;
    margin-left: 5%;
    padding-top: 3%;
    }
  #card-repet {

    grid-template-columns: repeat(2, 1fr);
  }

  .profilVisite,
  .profile-pic {
    margin-left: -3vh;
    margin-top: 27vh;
  }

  .profilVisite img,
  .profile-pic img {

    width: 100px;
    height: 100px;

  }

  .changeCouverture {
    top: 55%;
    right: 15%;
  }

  .file-inputt {
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
  }

  #outputt {
    height: 200px;
  }

  #div-name {
    margin-top: 1vh;
    margin-left: 20vh;
  }

  #div-name h2 {
    font-size: 15px;
  }

  #div-name h5 {
    font-size: 15px;
  }

  #btnAddDelete {
    position: relative;
    margin-top: 10vh;
    width: 110%;
    margin-left: 0vh;
  }

  .Btn-Edit {
    position: relative;
    margin-top: 10%;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 5px;
    margin-left: 9%;
  }



  .file-input {
    position: absolute;
    top: 55%;
    left: 85%;
    width: 2%;

  }

  .file-input__label {
    font-weight: 600;
    border: none;
    color: #fff;
    font-size: 14px;
    padding: 10px 10px;
    background-color: #0D6EFD;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
  }

  .card {
    padding-bottom: -51%;
  }



}

@media (min-width: 576px) {
  .ProfilBody{
    width: 90%;
    margin-left: 5%;
    padding-top: 3%;
    }
  #card-repet {

    grid-template-columns: repeat(2, 1fr);
  }

  .file-input {
    position: absolute;
    top: 55%;
    left: 85%;
    width: 2%;

  }

  .file-input__label {
    font-weight: 600;
    border: none;
    color: #fff;
    font-size: 14px;
    padding: 10px 10px;
    background-color: #0D6EFD;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
  }

  .card {
    padding-bottom: -51%;
  }

  .Btn-Edit {
    margin-top: 5vh;
    margin-left: 20vh;
  }

  #div-name {
    margin-top: 2vh;
    margin-left: 20vh;
  }

  #div-name h2 {
    font-size: 15px;
  }

  #div-name h5 {
    font-size: 15px;
  }

  .changeCouverture {
    position: absolute;
    top: 55%;
    right: 10%;
  }

  .file-inputt {
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
  }

  #outputt {
    height: 200px;
  }

  .profilVisite,
  .profile-pic {
    margin-left: -2vh;
    margin-top: 29vh;
  }

  .profilVisite img,
  .profile-pic img {

    width: 110px;
    height: 110px;

  }

  #btnAddDelete {
    position: relative;
    margin-top: 10vh;
    width: 80%;
    margin-left: 10vh;
  }

}

@media (min-width: 768px) {
  .ProfilBody{
    width: 80%;
    margin-left: 10%;
    padding-top: 3%;
    }
  #card-repet {

    grid-template-columns: repeat(3, 1fr);
  }

  #btnAddDelete {
    /* background-color: green; */
    position: relative;
    margin-top: 10vh;
    width: 80%;
    margin-left: 10vh;
  }

  .Btn-Edit {
    margin-top: 5vh;
    margin-left: 30vh;
  }

  .profilVisite,
  .profile-pic {
    margin-left: -1vh;
    margin-top: 29vh;
  }

  .profilVisite img,
  .profile-pic img {

    width: 120px;
    height: 120px;

  }

  .changeCouverture {
    top: 55%;
    right: 15%;
  }

  .file-inputt {
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
  }

  #outputt {
    height: 200px;
  }

  #div-name {
    margin-top: 1vh;
    margin-left: 20vh;
  }

  #div-name h2 {
    font-size: 15px;
  }

  #div-name h5 {
    font-size: 15px;
  }


  .file-input {
    position: absolute;
    top: 55%;
    left: 85%;
    width: 2%;

  }

  .file-input__label {
    font-weight: 600;
    border: none;
    color: #fff;
    font-size: 14px;
    padding: 10px 10px;
    background-color: #0D6EFD;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25);
  }

  .card {
    padding-bottom: -51%;
  }
}

@media (min-width: 992px) {
  .ProfilBody{
    width: 80%;
    margin-left: 10%;
    padding-top: 3%;
    }
  #card-repet {

    grid-template-columns: repeat(3, 1fr);
  }

  #outputt {
    height: 400px;
  }

  .profilVisite,
  .profile-pic {
    margin-left: 4vh;
    margin-top: 55vh;
  }

  .profilVisite img,
  .profile-pic img {
    width: 170px;
    height: 170px;

  }

  #div-name {
    margin-top: 1vh;
    margin-left: 30vh;
  }

  #div-name h2 {
    font-size: 20px;
  }

  #div-name h5 {
    font-size: 20px;
  }

  .changeCouverture {
    top: 60%;
    right: 10%;
  }

  .file-inputt {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
  }

  #btnAddDelete {
    width: 40%;
    margin-left: 40vh;
  }

  .Btn-Edit {
    margin-top: 5vh;
    margin-left: 40vh;
  }

}

@media (min-width: 1200px) {
  .ProfilBody{
    width: 80%;
    margin-left: 10%;
    padding-top: 3%;
    }
  #card-repet {

    grid-template-columns: repeat(4, 1fr);
  }

  #outputt {
    height: 400px;
  }

  .profilVisite,
  .profile-pic {
    margin-left: 3vh;
    margin-top: 55vh;
  }

  .profilVisite img,
  .profile-pic img {
    width: 170px;
    height: 170px;

  }

  #div-name {
    margin-top: 1vh;
    margin-left: 30vh;
  }

  #div-name h2 {
    font-size: 20px;
  }

  #div-name h5 {
    font-size: 20px;
  }

  .changeCouverture {
    top: 60%;
    right: 10%;
  }

  .file-inputt {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
  }

}

@media (min-width: 1400px) {
  .ProfilBody{
    width: 80%;
    margin-left: 10%;
    padding-top: 3%;
    }
  #card-repet {

    grid-template-columns: repeat(5, 1fr);
  }

  #outputt {
    height: 400px;
  }

  .profilVisite,
  .profile-pic {
    margin-left: 3vh;
    margin-top: 60vh;
  }

  .profilVisite img,
  .profile-pic img {
    width: 170px;
    height: 170px;

  }

  #div-name {
    margin-top: 1vh;
    margin-left: 40vh;
  }

  #div-name h2 {
    font-size: 20px;
  }

  #div-name h5 {
    font-size: 20px;
  }

  .changeCouverture {
    top: 60%;
    right: 10%;
  }

  .file-inputt {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
  }

  #btnAddDelete {
    width: 100%;
    margin-left: 3%;
  }


}