body{
	background-color: #e1e1e1;/*#eee*/
}
footer{
	position: relative;
	bottom: 1px;
	text-align: center;
	left: 50%;
	transform: translate(-50%);
}
.navigation{
       display: block;
}
.navbarbtn{
    display: none;
}
.navbar{
	border-radius: 0 0 22px 22px;
  	padding: 10px 15px;
  	direction: ltr;
  	align-items: center;
}
ul li{
  cursor: pointer;
}
ul li:hover{
	border-radius: 25px;
  background-color: #ff6868;
  color: #fff;
  padding: 4px 14px;
}
ul li:hover a{
	color: #fff;
}
select{
	cursor: pointer;
}
.active {
  border-radius: 25px;
  background-color: #ff8787;
  color: #fff;
  padding: 4px 14px;
}
.listnav{
	gap: 10px;
	list-style: none;
}
.controler{
	justify-content: center;
	align-items: center;
	display: grid;
	align-content: center;
}
.input{
	width: 600px;
	border-radius: 7px;
	display: grid;
	border: 4px solid #e8e8e8;
	box-shadow: 20px 10px 10px #888;
	background-color: #fff;
}
.writecode{
	border-radius: 4px 4px 0 0;
	border: none;
	resize: none;
}
.input:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(217,35,15,.25);
}
.form-select {
  border: none;
}
.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: none;
  outline: none;
  box-shadow: none;
  border: none;
}
.form-control-input{
	display:block;
  width:100%;
  padding:.375rem .75rem;
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  color:var(--bs-body-color);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-color:var(--bs-body-bg);
  background-clip:padding-box;
  border:var(--bs-border-width) solid var(--bs-border-color);
  border-radius:var(--bs-border-radius);
  transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.form-control-input:focus{
	color:var(--bs-body-color);
  background-color:var(--bs-body-bg);
  border-color:#ec9187;
  outline:0;
  box-shadow:0 0 0 .25rem rgba(217,35,15,.25)
}
.form-select-input{
  --bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23373a3c' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  display:block;
  width:100%;
  padding:.375rem 2.25rem .375rem .75rem;
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  color:var(--bs-body-color);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-color:var(--bs-body-bg);
  background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
  background-repeat:no-repeat;
  background-position:right .75rem center;
  background-size:16px 12px;
  border:var(--bs-border-width) solid var(--bs-border-color);
  border-radius:var(--bs-border-radius);
  transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.form-select-input:focus{
   border-color:#ec9187;
  outline:0;
  box-shadow:0 0 0 .25rem rgba(217,35,15,.25)
}
.form-select-input[multiple],
.form-select-input[size]:not([size="1"]) {
  padding-right:.75rem;
  background-image:none


}
.form-select-input:disabled {
  background-color:var(--bs-secondary-bg)
}
.bodyExampel{
	display: flex;
	gap: 5px;
	justify-content: center;
}
.btn-outline-secondary {
  color: #777;
  border-color: #777;
}
.analyz{
	width: 100%;
  height: 111px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: #d0d0d0;
  z-index: 1;
  align-items: center;
  color: #fff;
}
a{
	text-decoration: none;
	color: #222;
}
#login {
  width: 136px;
  border-radius: 55px;
  padding: 5px;
  color: #fff;
  background-color: #f75151;
  border: 1px solid #e1b0b0;
  box-sizing: border-box;
}
#login:hover{
	 box-shadow: 5px 7px 5px #c1bebe;
	 transition: all 0.125s;
	 margin-bottom: 1.5px;
}
.body-card-Q-A {
  direction: ltr;
  display: grid;
  background-color: #fff;
  border-radius: 15px;
  width: 750px;
  justify-content: start;
  box-shadow: 20px 10px 10px #c1c1c1;
}
.body-card-Q{
	font-size: 25px; 
	font-weight: bold;
}
.card{
	width: 750px;
	border-radius: 15px;
	box-shadow: 20px 10px 10px #c1c1c1;
	direction: ltr;
}
.body-q-a{
	display: grid;
	justify-content: center;
}
.font-bold{
	font-weight: bold;
}
.form-signin {
  width: 800px;
  background-color: #fff;
  border-radius: 15px;
  padding: 20px;
}
.mt-6{
	margin-top: 4.5rem;
}
.bodyabout{
  text-align: start;
  width: auto;
  min-width: 250px;
  max-width: 1050px;
  margin-top: 25px;
  padding: 15px;
}

.profile-arthor, .profile-user {
  width: 45px;
  height: 45px;
  border: 2px solid #e1e1e1;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  background-color: #e1e1e1;
  color: #fff;
  cursor: pointer;
}
.continer-body{
  background-color: #fff7f7;
  width: 75%;
  height: 622px;
  border-radius: 15px;
  margin-left: 20px;
}
.list-nav {
  border-radius: 15px;
  background-color: #fff7f7;
  padding: 11px ;
  width: 20.8%;/*320px*/
}
.list-nav , .continer-body{
  background-color: #fff;
}
.list-nav li{
  list-style: none;
}
.list-group-item-light{
  --bs-list-group-bg: #eee;
}
.list-group-item-primary{
  --bs-list-group-bg: #ffa9a9;
}
.dark{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  z-index: 1050;
  top: 0;
  left: 0;
}
.form-user, .form-News, .form-questions,.form-page,.form-ai{
  background-color: #888;
  width: 550px;
  border-radius: 15px;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  z-index: 1052;
  top: 0;
  padding: 5px;
  color: #fff;
}
.form-user ul li{
  list-style: none;
}
.bodyThemeBtn{
  position: fixed;
  right: 27px;
  bottom: 27px;
}
.btn-circle{
  width: 55px;
  height: 55px;
  display: grid;
  justify-content: center;
  align-items: center;
}
.btn-circle-sm{
  width: 40px;
  height: 40px;
}
.btn-circle-sm span{
  font-size: 20px;
}
.body-message,.code-message{
  width: 600px;
  height: 655px;
  color: #555;
}
.border-none{
  border: none;
}
.right-3{
  right: 5px;
} 
.top-3{
  top: 5px;
}
.circle-close{
  width: 45px;
  height: 45px;
}
.radio-circle{
  border-radius: 50%;
  padding: 5px;
  color: #524;
  background-color: #000;
  border: 2px solid rgba(11, 20, 50, 0.0);
}
.navigation{
  width: 100%;
  height: 65px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1500;
  bottom: 5px;
}
.navigation ul{
  display: flex;
  width: calc(100% - 50px);
}
.navigation ul li{
  list-style: none;
  position: relative;
  width: calc(100% - 50px / 5);
  height: 60px;
  z-index: 2;
}
.navigation ul li a,.span{
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
  font-weight: 500;
}
.navigation ul li .span.icon{
  position: relative;
  display: block;
  line-height: 65px;
  font-size: 1.5em;
  transition: 0.5s;
  color: #222327;
}
.navigation ul li.active2 .span.icon{
  transform: translateY(-32px);
  color: #fb5353;
}
.navigation ul li .span.text{
  position: absolute;
  background-color: #fb5353;
  color: #fff;
  padding: 3px 8px;
  border-radius: 12px;
  font-weight: 400;
  font-size: 0.75em;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateY(15px);
}
.navigation ul li.active2 .span.text{
  transform: translateY(-4px);
  opacity: 1;
}
.indicator{
  position: absolute;
  top: -35px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #fff;
  z-index: 1;
  transition: 0.5s;
}
.indicator::before{
  content: '';
  position: absolute;
  top: 5px;
  left: -28px;
  width: 30px;
  height: 30px;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 15px 18px #fff;
}
.indicator::after{
  content: '';
  position: absolute;
  top: 5px;
  right: -28px;
  width: 30px;
  height: 30px;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: -15px 18px #fff;
}
.navigation ul li:nth-child(1).active2 ~ .indicator{
  transform: translateX(calc(70px * 0));
}
.navigation ul li:nth-child(2).active2 ~ .indicator{
  transform: translateX(calc(70px * 1));
}
.navigation ul li:nth-child(3).active2 ~ .indicator{
  transform: translateX(calc(70px * 2));
}
.navigation ul li:nth-child(4).active2 ~ .indicator{
  transform: translateX(calc(70px * 3));
}
.navigation ul li:nth-child(5).active2 ~ .indicator{
  transform: translateX(calc(70px * 4));
}
.noactive:hover {
  background-color: transparent;
  padding: 0;
}
.bold{
  font-weight: bold;
}
.body-slides-ai {
  width: 963px;
  height: 450px;
  justify-content: center;
  display: flex;
  align-items: center;
}
.item-image{
  justify-content: center;
  align-items: center;
  display: grid;
  text-align: center;
}
.item-image img {
  border-radius: 50%;
  width: 90px;
  height: 90px;
  margin: 0 auto;
}
.writeCodes{
  color: #fff;
}
.user-message {
  background-color: #8c1212;
  width: fit-content;
  border-radius:15px;
  padding:5px;
  color: #fff;
}
.ai-message {
  width: auto;
  border-radius: 15px;
  color: #fff;
  background-color: #555;
}
@media screen and (max-width: 500px){
  article , aside , footer{
    margin: 5px;
    font-size: 15px;
  }
  .card, .input{
    width: auto;
  }
  .form-signin {
    max-width: 360px;
    min-width: 300px;
  }
  .body-code-message{
    min-width: 300px;
    max-width: 390px;
  }
  .code-message{
    display: none;
  }
  .body-message{
    min-width: 300px;
    max-width: 390px;
  }
  .Bodylanguage , .center, .bodyprofile{
    display: none;
  }
  .navbarbtn{
    display: block;
  }
  .navigation{
       display: block;
  }
}