:root {
    --color-default: #805020;
    --color-primary: #FFDF80;
    --color-background:#f5f6f8;
    --color-secondary: #313132;
    --color-text:#555;
    --color-p:#666;
    --color-h: #000;
    --color-white:#fff;
  }
    *{
   box-sizing:border-box;
}
.component-card{
    background-clip: padding-box;
   box-shadow: 0 0.25rem 1.125rem rgba(75, 70, 92, 0.1);

}

aside{
   width:260px;
   height:600px;

   display:inline-block;
   font-size:15px;
   vertical-align:top;
    border: 2px solid var(--color-background);
}
main{
   width:540px;
   height:600px;
   display:inline-block;
   font-size:15px;
   vertical-align:top;
}

aside header{
   padding:20px 10px;
}
.chat-search-input{
    border-left: 0;
    border-top-left-radius: 0;
   border-bottom-left-radius: 0;

}
.input-group-text i,.chat-search-input::placeholder{
color:#6f6b7d
}
.input-group-text,.chat-search-input{
    border-radius: 50rem;
}
[dir=rtl] .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu), [dir=rtl] .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
}
[dir=rtl] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-right: -1px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-left: 0px;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}
[dir=rtl] .input-group-text:first-child {
    border-left: 0;
}
[dir=rtl] .input-group.rounded-pill .input-group-text {
    border-top-right-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
}
[dir=rtl] .input-group.rounded-pill .form-control {
    border-top-left-radius: 50rem !important;
    border-bottom-left-radius: 50rem !important;
}
aside ul{
   padding-left:0;
   margin:0;
   list-style-type:none;
   overflow-y:scroll;
   height:450px;

}

aside li{
   padding:10px 0;
}
aside li:hover{
   background-color:var(--color-default);

}
aside li:hover h2,aside li:hover h3,aside li:hover .time{
    color: #fff;
    cursor: pointer;
}
h2,h3{
   margin:0;
}
aside li img{
   border-radius:50%;
   margin-left:8px;
   margin-right:8px;
    width: 55px;
    height: 55px;
    border: 4px solid var(--color-primary);
}

aside li h2,.time{
   font-size:14px;
   color:var(--color-secondary);
   font-weight:500;
   margin-bottom:5px;
}
aside li h3{
   font-size:12px;
   color:#7e818a;
   font-weight:normal;
}

.status{
   width:8px;
   height:8px;
   border-radius:50%;
   display:inline-block;
   margin-right:7px;
}
.green{
   background-color:#58b666;
}
.orange{
   background-color:#ff725d;
}


main header{

   padding:10px 20px 10px 30px;
    position: relative;
    border: 2px solid var(--color-background);
   transition: all 0.25s ease;
}
main header > *{
   display:inline-block;
   vertical-align:middle;
}
main header img:first-child{
   border-radius:50%;
    width: 55px;
   height: 55px;
   border: 4px solid var(--color-primary);
}

main header div{
   margin-left:10px;
   margin-right:10px;
}
main header h2{
   font-size:16px;
   margin-bottom:5px;
    color: var(--color-h);
}
main header h3{
   font-size:14px;
   font-weight:normal;
   color:#7e818a;
}

#chat{
   padding-left:0;
   margin:0;
   list-style-type:none;
   overflow-y:scroll;
   height:443px;
   border-top:2px solid #fff;
   border-bottom:2px solid #fff;
   overflow-x: hidden;
;
   -webkit-overflow-scrolling: touch;
   -ms-scroll-chaining: none;
   overscroll-behavior: contain;
   -ms-scroll-snap-type: y proximity;
   scroll-snap-type: y proximity;

}
#snap {
   scroll-snap-align: end;
  }
#chat li{
   padding:10px 20px;
}
#chat h2,#chat h3{
   display:inline-block;
   font-size:13px;
   font-weight:normal;
}
#chat h3{
   color:#bbb;
}
#chat .entete{
   margin-bottom:5px;
}
#chat .message,.chat-message-text{
   padding:20px;
   color:#fff;
   line-height:25px;
   /* max-width:90%; */
   display:inline-block;
   text-align:left;
   border-radius:5px;
}
#chat .message{
   display:inline-block;
}
#chat .me{
   text-align:right;


}
[dir="ltr"] .me .chat-message-wrapper{
   display: grid;
   justify-content: right;
   justify-items: end;
}
[dir="rtl"] .me .chat-message-wrapper{
   display: grid;
   justify-content: left;
   justify-items: end;
}
.chat-message-text p{
    color: #fff;
}
#chat .me .entete  {
    justify-content: right;
}
[dir="rtl"] #chat .me .entete  {
    justify-content: left;
}
[dir="rtl"] #chat .me .message{
    text-align: right;
}
#chat .you .message{
   background-color:var(--color-primary);
}
#chat .me .message,#chat .me .chat-message-text{
   background-color:#727272;
}
#chat .you .chat-message-text{
   background-color:#ffdf80;
}
[dir="rtl"] #chat .you .chat-message-text{
text-align: right;
}
#chat .triangle{
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 10px 10px 10px;
}
#chat .you .triangle{
    border-color: transparent transparent #ffdf80 transparent;
   margin-left: 15px;
       margin-right:10px;
}

#chat .me .triangle{
       border-color: transparent transparent #727272 transparent;
       margin-left:95%;
}
[dir="rtl"] #chat .me .triangle{
   margin-right:95%;
}
.chat-history-footer{
    background-color: #fff;
    padding: 0.575rem 0.5rem;
   margin: 0 1.5rem;
   border-radius: 0.375rem;
}

.input-group-text {
    background-clip: padding-box;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   background-color: transparent;
}
.avatar-sm {
   width: 2rem;
   height: 2rem;
}
.avatar img {
   width: 100%;
   height: 100%;
}
.p-cuser{
    cursor: pointer;
}
.chat-contact-list li.active {
   background-color: var(--color-default);
}
.message-image {
   display: block;
   width: 100px;
   height: 100px;
   object-fit: cover;
   border-radius: 5px;
   margin-left: 10px;
}
.chat-text{
   background-color: #727272;

}
@media (max-width: 991.98px) {
    main {
   width: 390px;
    }
}
@media (min-width:1000px) and (max-width:1024px){
    main {
   width: 360px;
    }
}
@media  (max-width: 1200px)   {
   aside {
       width: 100%;
       height: max-content
   }
   .chat-contact-list{
       display: flex;
       height: max-content;
   }
   main {
       width: 100%;
   }
   .time{
       display: none;
   }
}

@media (min-width:1999px) and (max-width:1216px) {
   main {
       width: 65%;

}
}
@media (min-width:1500px) {
   main {
       width: 67%;
   }

}
/****student-dashboard-booking**/

.table-Lectures{
   max-height: 20.08rem;
   overflow: auto;
}
.table-Lectures::-webkit-scrollbar{
   width: 0px;
}
.img-Packages img{
   object-fit: contain;
   height: 150px;
   border-radius: 20px;
}
.card-courses{
   width: 100%;
}
/***student****/
.nav-tabs-student{
   border-bottom:0px
}
.nav-tabs-student button{
   color: var(--color-secondary);
   font-size: 18px;
}
.nav-tabs-student .nav-link.active {
color: var(--color-default);
font-weight: bold;
border: 0px;
border-bottom:2px solid var(--color-default) ;
}
.nav-tabs-student .nav-link:focus,.nav-tabs-student .nav-link:hover {
   color: var(--color-primary);
   border: 0ox;
}
.w-15{
   width: 50px;
}
.img-profile-m{
   width: 100px;
   height: 100px;
}
@media (max-width:550px) {
   .fs-degree{
       width:100%;
       text-align: center;
   }

}
/**/
.img-porfoil {
   position: relative;
}
.avatar-edit {
   position: absolute;
   z-index: 700;
   bottom: 2px;
}
.avatar-edit {
   left: 54%;
}
.avatar-edit input {
   display: none;
}
.avatar-edit input + label {
   display: inline-block;
   width: 34px;
   height: 34px;
   margin-bottom: 0;
   border-radius: 100%;
   background: #FFFFFF;
   border: 1px solid transparent;
   box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 12%);
   cursor: pointer;
   font-weight: normal;
   transition: all 0.2s ease-in-out;
}
.avatar-preview {
   width: 130px;
   height: 130px;
   position: relative;
   border-radius: 100%;
   border: 6px solid var(--theme-color);
   box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 10%);
   margin: 0 auto;
   z-index: 20;
}
.avatar-preview > div {
   width: 100%;
   height: 100%;
   border-radius: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.alert-warning{
   background-color: #ffdf80cd;
   text-align: center;
   font-size: 20px;
   font-weight: bold;
}