html,
body {
  position: relative;
}

body {
  background: #fff;
  font-family: 'Calibri';
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
  color: #000;
  margin: 0;
  padding: 0;
}

body.help div {
  border: 1px solid red !important;
}

body.help div > div:nth-child(2) {
  border-color: blue !important;
}

body.help div > div:nth-child(3) {
  border-color: green !important;
}

body.help div > div:nth-child(4) {
  border-color: yellow !important;
}

a {
  text-decoration: unset;
  color: unset;
}

.header-container{
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-radius: 0 0 50px 50px;

  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background: white;

}

.header-left-side{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin: auto 0;
}

.header-left-side img{
  width: 100%;
  border-radius: 50%;
  background-color: #A0243F;
}

.header-right-side{
  display: flex;
  padding: 5px;
  border-radius: 50px;
  border: 2px solid #F6F6F6;
  margin: auto 0;
}

.header-toggle-button{
  position: relative;
  display: flex;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.header-toggle-button img{
  margin:auto;
}

.header-toggle-active{
  background-color:#F6F6F6;
}

.header-notification-indicator{
  background-color: #FCC735;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  right: 8px;
}

.img-icon{
  width: 24px;
  height: 24px;
}

.stories-carousel{
  overflow: auto;
  margin: 24px 12px 24px 12px;
}

.stories-carousel-overflow{
  display: flex;
  width: max-content;
}

.stories-container{
  margin: 0px 6px;
}

.stories-container:first-child{
  margin-left: 0px;
}

.stories-container:last-child{
  margin-right: 0px;
}

.stories-thumbnail{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid #00BCD4;
  padding: 3px;
}

.stories-thumbnail img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.stories-alias{
  text-align: center;
  margin-top: 5px;
}

.input-container{
  display: flex;
  margin: 10px;
  background-color: #F6F6F6;
  padding: 15px;
  border-radius: 50px;
}

.input-container input{
  width: 100%;
  margin-left: 10px;
  background: #F6F6F6;
  border: 0px;
}

.input-container img{
  margin:auto;
}

.feed-card{
  background-color: #f6f6f6;
  margin: 12px;
  border-radius: 20px;
  padding: 20px;
}

.feed-post-header{
  display: flex;
  justify-content: space-between;
}

.feed-post-author{
  display: flex;
}

.feed-post-thumbnail{
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-right: 6px;
}

.feed-post-thumbnail img{
  width: 36px;
  height: 36px;
  background-size: contain;
  background-position: center;
  background-color: #F3CB60;
  border-radius: 50%;
}

.feed-post-alias{
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-left: 6px;
  font-weight: bold;
}

.feed-post-date{
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.feed-post-content{
  margin: 12px 0px;
}

.feed-post-media{
  width: 100%;
}

.feed-post-media img{
  width: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
}

.feed-post-text{
  width: 100%;
  margin-top: 12px;
}

.feed-post-footer{
  width: 100%;
}

.feed-footer-interactions{
  display: flex;
}

.feed-footer-like{
  display: flex;
  margin-right: 6px;
}

.feed-footer-icon{
  width: 24px;
  height: 24px;
}

.feed-footer-counter{
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  flex-flow: column;
  text-align: center;
}

.feed-footer-comments{
  display: flex;
  margin-right: 6px;
  margin-left: 6px;
}








.return-container{
  display: flex;
  justify-content: space-between;
  padding: 5px;
  border-radius: 50px;

  position: sticky;
  top: 10px;
  left: 0;
  right: 0;
  background: white;

}
.retour{
  position: relative;
  display: flex;
  width: 130px;
  height: 55px;
  border-radius: 50px;
}
.retour p{
  width: 100%;
  margin-left: 55px;
  font-weight: bold;
}
.arrow{
  margin: 5px;
  position: absolute;
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #F6F6F6;
}
.arrow img{
  display: block;
  position: sticky;
  width: 25px;
  height: 25px;
  margin: auto;

}

.more{
  margin: 5px;
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.more img{
  display: block;
  position: sticky;
  width: 30px;
  height: 30px;
  margin: auto;

}

.post-ar{
  background-color: white;
  margin: 5px;
  padding: 5px;
  margin-top: 30px;
  border-bottom: 2px solid #F6F6F6;
}

.feed-footer-counter1{
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  flex-flow: column;
  text-align: center;
  color:#808080;
}

.feed-footer-comments1{
  display: flex;
  margin-right: 6px;
  margin-left: 6px;
}

.feed-footer-like1{
  display: flex;
  margin-right: 6px;
  color:#808080;
}



.answer1{
background-color: white;
  margin: 5px;
  padding: 5px;
  margin-top: 10px;
  border-bottom: 2px solid #F6F6F6;

}
.answer2{
  background-color: white;
  margin: 5px;
  padding: 5px;
  margin-top: 10px;
  border-bottom: 2px solid #F6F6F6;
}

.feed-post-footer1{
  width: auto;
  margin-left: 48px;
}
.feed-post-text1{
  width: auto;
  margin-top: 12px;
  margin-left: 48px;
}
.reply-container{
  position: relative;
  bottom: 0;
  display: flex;
  margin: 10px;
  margin-top: 50px;
  background-color: #F6F6F6;
  padding: 15px;
  border-radius: 50px;
  width: auto; 
}

.reply-container input{
  width: 100%;
  margin-left: 10px;
  background: #F6F6F6;
  border: 0px;
}

.reply-container img{
  margin:auto;
}