*{
    margin: 0;
	padding: 0;
}
:root{

    --light-green: rgba(181, 255, 184, 0.30);
    --green: #2ECC71;
    --dark-green: #016C2E;

    --light-blue: rgba(52, 152, 219, 0.35);
    --blue: #3498DB;
    --dark-blue: #1A4C6D;

    --light-yellow: #FCF3EC;
    --yellow: #FFD700;

    --red: #F00;

    --light-gray: #F5F5F5;
    --gray: #D9D9D9;
    --dark-gray: #808080;

    --white: #FFF;

    --light-black: #14171F;
    --black: #000;
}
body{
	font-size: 1rem !important;
	line-height: 1.625rem !important;
    font-weight: 400 !important;
	font-family: 'Roboto', sans-serif !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
h1,h2,h3,h4,h5,h6{
	font-family: 'Roboto', sans-serif !important;
    line-height: normal !important;
    font-weight: 700 !important;
    text-transform: capitalize !important;
}

/************** Global Code Start **************/
.btn-yellow{
    border-radius: 4px;
    color: var(--black) !important;
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
}
.btn-outline-yellow{
    border-radius: 4px;
    color: var(--white) !important;
    border: 1px solid var(--yellow) !important;
}
.btn-outline-yellow:hover{
    color: var(--black) !important;
    background-color: var(--yellow) !important;
    border: 1px solid var(--yellow) !important;
}
.btn-green{
    border-radius: 4px;
    color: var(--white) !important;
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}
.btn-blue{
    border-radius: 4px;
    color: var(--white) !important;
    background-color: var(--blue) !important;
    border-color: var(--blue) !important;
}
.btn-purple{
    border-radius: 4px;
    color: var(--white) !important;
    background-color: purple !important;
    border-color: purple !important;
}
span.stars, span.stars span {
    display: block;
    background: url(../icons/star-white.svg) 0 0 repeat-x;
    width: 80px; /* width of a star multiplied by 5 */
    height: 20px; /* the height of the star */
    background-size: 16px 16px;
}
span.stars span {
    background-position: 0 0;
    background-image: url(../icons/star.svg);
}
.first-card-blue{
    width: 100%;
    padding: 4rem 0;
}
.card-blue-header{
    width: 100%;
    background-color: var(--blue);
    border-radius: 8px 8px 0 0;
    padding: 1rem 2rem;
}
.card-blue-header__title{
    font-size: 1.5rem;
    color: var(--white);
    display: inline-block;
    margin-bottom: 0;
}
.card-blue-content{
    width: 100%;
    border-radius: 0 0 8px 8px;
    padding: 1.5rem 2rem;
}
.card-blue-content__titile{
    font-weight: 500;
    margin: .5rem 0;
}
.card-blue-content__sub-titile{
    font-weight: 400;
    margin: .5rem 0;
}
.card-blue-content__text{
    font-size: 0.875rem;
    color: var(--dark-gray);
    margin: .5rem 0;
}
.card-form{
    width: 100%;
    margin: 0.5rem 0;
}
.disabled-label{
    color: var(--dark-gray);
}
.disabled-input{
    color: var(--black) !important;
    background-color: transparent !important;
    border: 2px solid var(--gray) !important;
}
.other-card-blue{
    width: 100%;
    padding: 0 0 4rem;
}
.back-to-btn{
    width: 100%;
    margin-bottom: 4rem;
}
.back-to-btn--yellow{
    padding: 1rem 2rem !important;
}
/************** Global Code End **************/

/********************************************************/
/***************** Home Page Start Here *****************/
/********************************************************/

/************** header section code start **************/
.navbar{
    background-color: var(--dark-blue);
    padding: 0 !important;
}
.navbar-brand{
    padding: 8px 0;
}
.navbar-brand img{
    width: 100%;
    height: 100%;
}
.nav-item{
    padding: 0 0 0 30px !important;
}
.nav-link{
    color: var(--white) !important;
    font-size: 1rem;
    text-transform: capitalize !important;
    padding: 8px 0 !important;
    vertical-align: middle !important;
}
.navbar-nav .active, .nav-link:hover{
    color: var(--yellow) !important;
    text-decoration: none !important;
    font-weight: 700;
}
.nav-button:hover {
    color: var(--yellow) !important;
    text-decoration: none !important;
    font-weight: 700;
}
.btn-outline-primary{
    padding: 8px 24px;
}
.card{
    border: none !important;
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.15);
}
/************** header section code end **************/

/************** hero section code start **************/
.hero{
    width: 100%;
    padding: 10rem 0;
    color: var(--white);
    background: url("../images/learn-quran-welcome.jpg") center top no-repeat;
	background-size: cover;
}
.hero-content{
    width: 100%;
}
.hero-content--title{
    font-size: 3rem;
    margin: 0 1rem 1rem 0;
}
.hero-content--text{
    font-size: 1.125rem;
    line-height: 1.75rem;
    margin: 0 0 2rem 0;
}
.hero-content--btn{
    padding: 1.125rem 2rem !important;
    margin: 0 1rem 0 0 !important;
}
/************** hero section code end **************/

/************** about section code start **************/
.about{
    width: 100%;
    padding: 8rem 0;
    color: var(--white);
    background: url("../images/about-bg.jpg") center top no-repeat;
	background-size: cover;
}
.about-content{
    width: 100%;
}
.about-content__title{
    font-size: 2.5rem;
    margin: 0 0 1.25rem 0;

}
.about-content__text{
    line-height: 1.625rem;
    padding-right: 5rem;
}
.about-content__img{
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
/************** about section code end **************/

/************** teacher section code start **************/
.teacher{
    width: 100%;
    background-color: var(--white);
    padding: 5rem 0 6rem;
    overflow-x: hidden;
}
.teacher-content{
    width: 100%;
    text-align: center;
    margin-bottom: 4rem;
}
.teacher-content__title{
    font-size: 2.5rem;
}
.owl-stage-outer { 
    overflow: visible !important;
}
.owl-item {
    opacity: 0;
    transition: opacity 500ms;
}
.owl-item.active {
    opacity: 1;
}
.owl-carousel .nav-btn{
    height: 36px;
    position: absolute;
    width: 36px;
    cursor: pointer;
    top: 35% !important;
}
.testimonial-carousel .nav-btn{
    top: 25% !important;
}
.next-slide {
    background-image: url("../icons/right.svg") !important;
    right: -3rem;
}
.prev-slide {
    background-image: url("../icons/left.svg") !important;
    left: -3rem;
}
.owl-theme .owl-dots .owl-dot.active span{
    background-color: var(--yellow) !important;
}
.teacher__card-title{
    font-size: 1.125rem;
    margin: 0 0 0.625rem 0;
}
.teacher__card-text{
    font-size: 1rem;
    line-height: normal;
    margin: 0 0 0.625rem 0;
}
.teacher__card-text span{
    font-weight: 700;
}
/************** teacher section code end **************/

/************** how it works section code start **************/
.how-it-works{
    width: 100%;
    padding: 6rem 0;
    background: url("../images/how-it-works-bg.jpg") center top no-repeat;
	background-size: cover;
}
.how-it-works-content{
    width: 100%;
}
.hiw-content__title{
    font-size: 2.5rem;
    text-align: center;
    margin: 0 0 6rem 0;
}
.how-it-works-inner-content{
    width: 100%;
}
.how-it-works-item {
    width: 100%;
    align-items: center;
    position: relative;
    padding-top: 56.25%;
    z-index: 1;
}
.how-it-works-inner-content__title{
    font-size: 2rem;
    margin: 0 0 1rem 0;
}
.how-it-works-inner-content__text{
    padding-right: 6rem;
    margin: 0;
}
.hiw-item__video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 10px;
    left: 0;
    border: none;
    object-fit: cover;
    border-radius: 8px;
}
.hiw-item__bg{
    width: 60%;
    height: 26rem;
    border-radius: 8px;
    background-color: var(--green);
    position: absolute;
    top: -2rem;
    right: -2rem;
    z-index: -1;
}
/************** how it works section code end **************/

/************** testimonial section code start **************/
.testimonial{
    width: 100%;
    padding: 5rem 0 6rem;
    overflow-x: hidden;
}
.testimonial-content{
    width: 100%;
    text-align: center;
    margin-bottom: 2.5rem;
}
.testimonial-content__title{
    font-size: 2.5rem;
}
.testimonial__card-head{
    display: inline-block;
    width: 100%;
    margin: 1rem;
}
.testimonial__img{
    width: 100%;
    border-radius: 4px;
    margin: 0 auto;
}
.testimonial__card-body{
    width: 100%;
    padding: 1rem 1rem 1rem 0.5rem !important;
}
.testimonial__card-text{
    font-size: 0.875rem;
    line-height: normal;
    margin: 0;
}
/************** testimonial section code end **************/

/************** subscribe section code start **************/
.subscribe{
    width: 100%;
    height: 100%;
}
.subscribe-content{
    width: 100%;
    color: var(--white);
    padding: 5rem 0;
    text-align: center;
    background: url("../images/subscribe-bg.jpg") center top no-repeat;
	background-size: cover;
    border-radius: 16px;
    margin-bottom: 5rem;
}
.subscribe-content__title{
    font-size: 2.5rem;
    margin: 0 0 .5rem 0;
}
.subscribe-content__text{
    margin-bottom: 2.5rem;
}
.subscribe-content__form{
    position: relative;
    display: inline-block;
}
.subscribe-content__input{
    width: 25rem;
    padding: 1.2rem;
    border-radius: 4px;
    border: 1px solid var(--white);
    color: var(--black);
}
.subscribe-content__btn{
    padding: 0.625rem 1rem !important;
    position: absolute; 
    top: 0.625rem; 
    right: 0.625rem; 
}
/************** subscribe section code end **************/

/************** footer section code start **************/
.footer{
    width: 100%;
    background-color: var(--light-black);
    color: var(--white);
    margin-top: auto;
}
.footer-main{
    padding: 60px 0 30px;
}
.footer__widget{
    width: 100%;
}
.footer__widget--title{
    font-size: 1.5rem;
}
.footer__widget--logo{
    width: 4rem;
    height: 4rem;
    margin-bottom: 10px;
}
.footer__widget--link{
    display: block;
    color: var(--white);
    font-size: 1rem;
    font-weight: 400;
    text-transform: capitalize !important;
    margin-top: 10px;
}
.footer__widget--link:hover{
    color: var(--yellow);
    text-decoration: underline !important;
}
.footer__widget--social{
    width: 1.5rem;
    height: 1.5rem;
    margin: 10px 10px 0 0;
}
.footer__widget--social i {
    color: white;
}
.footer__widget--social:hover i {
    color: var(--yellow);
}
.footer__copyright{
    width: 100%;
    text-align: center;
    border-top: 1px solid var(--dark-blue);
    padding: 20px 0;
}
.footer__copyright p{
    margin: 0;
}
/************** footer section code end **************/

/********************************************************/
/****************** Home Page End Here ******************/
/********************************************************/

/********************************************************/
/************* Student List Page Start Here *************/
/********************************************************/

/************ student list section code Start ************/
.student-list{
    width: 100%;
    padding: 3rem 0;
}
.std-list-header{
    width: 100%;
    background-color: var(--blue);
    border-radius: 8px 8px 0 0;
    padding: 1rem 2rem;
}
.std-list-header__title{
    font-size: 1.5rem;
    color: var(--white);
    display: inline-block;
    margin-bottom: 0;
}
.std-list-header__btn{
    right: 2%;
}
.std-list-content{
    width: 100%;
    background-color: var(--light-gray);
    border-radius: 0 0 8px 8px;
    padding: 2rem;
}
.std__card {
    padding-top: .75rem;
}
.std-card__head {
    background-color: var(--dark-blue);
    border-radius: 4px 4px 0 0;
    padding: 1rem;
}
.std-card__div {
    border-radius: 4px 4px 0 0;
    padding: 1rem;
}
.std-card__img{
    display: inline-block;
    border-radius: 50%;
    margin-right: 0.5rem;
}
.std-card__head-title{
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    color: var(--white);
    margin: 0;
}
.std-card-body__text{
    font-size: 1rem;
    line-height: normal;
    margin: 0 0 0.625rem 0;
}
.std__card-btn {
    width: 100%;
    display: flex;
    gap: 1rem;
    padding-top: 0.625rem;
}
.std__card-btn--green{
    padding: .5rem !important;
}
.std__card-btn--yellow{
    padding: .25rem .5rem !important;
}
.all-std-card__head{
    background-color: var(--white) !important;
    padding-bottom: 0 !important;
}
.card__badge{
    gap: 0.25rem;
}
.card__badge--danger, .card__badge--warning {
    padding: 0.25rem !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    border-radius: 4px !important;
}
.std__card__badge--danger, .std__card__badge--warning {
    position: absolute;
    top: 0;
    right: 0;
    margin: .5rem .5rem 0rem 0rem;
    padding: 0.25rem !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    border-radius: 4px !important;
}
.std__card__badge--online {
    position: absolute;
    top: 0;
    padding: 0.35rem 0.65rem !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    border-radius: 4px 0px 10px 0px !important;
    background-color: #009E60;
}
/************* student list section code end *************/

/********************************************************/
/************** Student List Page End Here **************/
/********************************************************/

/********************************************************/
/************** Student Page Start Here **************/
/********************************************************/

/********** suggested student section code start **********/
.suggested-student{
    width: 100%;
    margin-top: 4rem;
}
.suggested-std-head{
    width: 100%;
    background-color: var(--light-blue);
    border-radius: 8px 8px 0 0;
    padding: 2rem 2rem 0;
}
.suggested-student--title{
    font-size: 1.5rem;
    margin-bottom: 0;
}
.suggested-std-body{
    width: 100%;
    background-color: var(--light-blue);
    border-radius: 0 0 8px 8px;
    padding: 2rem;
}
/********** suggested student section code end **********/

/********** all student section code start **********/
.all-student{
    width: 100%;
    margin-top: 4rem;
    padding: 0 0 4rem;
}
.all-student__filter{
    width: 100%;
}
.all-student__filter-head{
    width: 100%;
    color: var(--white);
    background-color: var(--dark-blue);
    border-radius: 8px 8px 0 0;
    padding: 1rem;
}
.all-student__filter-head-title{
    font-size: 1.25rem;
    margin: 0;
}
.btn-clear{
    color: var(--yellow) !important;
}
.all-student__filter-content{
    width: 100%;
    border-radius: 0 0 8px 8px;
}
.filter__dropdown{
    width: 100%;
    margin: 1px 0;
}
.filter__dropdown-head{
    width: 100%;
    background-color: var(--dark-blue);
    padding: 1rem;
}
.filter__dropdown-btn{
    color: var(--white);
}
.filter__dropdown-content--icon {
    background: url(../icons/down.svg) 0 0 no-repeat;
    width: 1.5rem;
    height: 1.5rem;
    background-size: 1.5rem;
}
.filter__dropdown-head--icon {
    background: url(../icons/down.svg) 0 0 no-repeat;
    width: 1.5rem;
    height: 1.5rem;
    background-size: 1.5rem;
}
.rotate-180 {
    transform: rotate(180deg);
}
.filter__dropdown-head[aria-expanded="true"] > .filter__dropdown-head--icon {
    transform: rotate(180deg);
}
.filter__dropdown-body{
    width: 100%;
}
.dropdown-body__form-check{
    width: 100%;
    padding: .5rem 1rem;
}
.chosen-container {
    width: 100% !important;
}
.form-check-input{
    border: 2px solid var(--dark-gray) !important;
}
.form-check-input:checked {
    background-color: var(--green) !important;
    border: var(--green) !important;
}
.all-student-sort{
    width: 100%;
    margin-bottom: 2rem;
}
.input-group-text{
    font-size: 1rem !important;
    color: var(--white) !important;
    background-color: var(--dark-blue) !important;
    border: none !important;
}
.sort__dropdown-btn{
    font-size: 1rem !important;
    text-align: left !important;
    background-color: transparent !important;
    border: 1px solid var(--dark-blue) !important;
    border-radius: 0 4px 4px 0 !important;
    padding: .625rem !important;
}
.sort-btn-yellow{
    padding: 0.5rem !important;
}
.btn-check:checked+.btn{
    border: none !important;
    background-color: var(--yellow) !important;
}
.std-card-body__text span{
    margin: 0 0.25rem;
}
.all-student-pagination{
    width: 100%;
    margin: 2rem 0 0;
}
.page-link{
    color: var(--black) !important;
    background-color: transparent !important;
    border: 1px solid var(--dark-gray) !important;
    padding: 0.75rem !important;
}
.active>.page-link, .page-link.active {
    z-index: 1 !important;
    color: var(--black) !important;
    background-color: var(--yellow) !important;
    border-color: var(--yellow) !important;
}
/********** all student section code end **********/

/********************************************************/
/************** Student Page End Here **************/
/********************************************************/

/********************************************************/
/************** teacher Info Page Start Here **************/
/********************************************************/

/******* teacher profile section code start *******/
.teacher-profile-content__info--name{
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}
.teacher-profile-content__info--review{
    font-size: 0.875rem;
    padding: 0;
    margin: .5rem 0;
}
.teacher-profile-content-sm{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.teacher-profile-content__btn{
    padding: 0.25rem 1rem !important;
    margin-right: .5rem;
}
.teacher-profile-content__about{
    width: 100%;
    padding: 1.5rem 0 0;
}
.teacher-profile-content__about-text{
    border: 2px solid var(--gray);
    border-radius: 4px;
    padding: 1rem;
}
.teacher-profile-content__sub-title{
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}
.teacher-profile-content-other-btn-sm{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.border-bottom-padding{
    border-bottom: 1px solid var(--dark-gray);
    padding: 1rem 0;
}
.border-bottom-none{
    padding: 1rem 0 .5rem;
}
.bottom-border{
    border-bottom: 1px solid var(--dark-gray);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.card__badge--success{
    padding: 0.25rem !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    border-radius: 4px !important;
    background-color: var(--green);
}
/******* teacher profile section code end *******/

/******* review section code start *******/
.review-sub-title{
    width: 100%;
    gap: .5rem;
    vertical-align: middle;
    margin: auto 0;
}
.review-sub-title p{
    margin: 0;
}
span.review-star, span.review-star span {
    display: inline-block;
    background: url(../icons/star-white.svg) 0 0 repeat-x;
    width: 100px; /* width of a star multiplied by 5 */
    height: 20px; /* the height of the star */
    background-size: 20px 20px;
}
span.review-star span {
    background-position: 0 0;
    background-image: url(../icons/star.svg);
}
/******* review section code end *******/

/********************************************************/
/************** teacher Info Page End Here **************/
/********************************************************/

/********************************************************/
/**************** teacher Page Start Here ****************/
/********************************************************/

/******* all teacher section code start *******/
.filter-package__dropdown-btn{
    border: 1px solid var(--dark-gray) !important;
    padding: .5rem 2rem !important;
}

/* Create two equal columns that floats next to each other */
.card-column {
    float: left;
    width: 50%;
    padding: 10px;
}
  
/* Clear floats after the columns */
.card-row:after {
    content: "";
    display: table;
    clear: both;
}
  
.teacher-card__head-text{
    font-size: 0.875rem;
    font-weight: 500;
}
.teacher-card__head-text span{
    margin: 0 .25rem;
}
.student-card__head-text {
    font-size: 0.875rem;
    font-weight: 500;
}
.card-list-body-inner{
    width: 100%;
}
.card-list-body--btn{
    margin-top: auto 0;
}
.teacher-card-body__text{
    font-size: 1rem;
    margin-bottom: 0.625rem;
}
.teacher-card-body__text span{
    font-size: 1.25rem;
    font-weight: 700;
}

/******* all teacher section code end *******/
/********************************************************/
/**************** teacher Page End Here ****************/
/********************************************************/

/********************************************************/
/********** Messenger Student Page Start Here ***********/
/********************************************************/

/******* messenger section code Start *******/
.messenger{
    width: 100%;
    margin: 4rem 0;
}
.messenger-head{
    width: 100%;
    background-color: var(--blue);
    border-radius: 8px 8px 0 0;
    padding: 1rem 2rem;
}
.messenger-head__title{
    font-size: 1.5rem;
    color: var(--white);
    margin: 0;
}
.messenger-content{
    width: 100%;
    border-radius: 0 0 8px 8px;
    padding: 2rem;
}
.messenger-content-head {
    margin-left: 1.25rem;
}
.messenger-content-head-btn {
    display: block;
    text-decoration: none;
    color: var(--dark-gray);
    background-color: var(--light-gray);
    border-radius: 4px 4px 0px 0px;
    padding: 0.5rem 0.75rem;
}
.active>.messenger-content-head-btn, .messenger-content-head-btn.active, .messenger-content-head-btn:hover{
    color: var(--white);
    background-color: var(--green);
}
.messenger-content-head-btn span {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: var(--red);
    vertical-align: middle;
    margin-right: .25rem;
}
.message-content-inner {
    height: 60vh;
}
.messenger-chat {
    border-top: 1px solid var(--bs-secondary-bg);
    border-left: 1px solid var(--bs-secondary-bg);
    border-bottom: 1px solid var(--bs-secondary-bg);
    border-right: 1px solid var(--bs-secondary-bg);
    border-radius: 8px 8px 4px 4px;
}
.messenger-chat-content {
    height: 54vh;
    overflow: auto;
}
.welcome-message {
    margin-top: 35%;
    text-align: center;
    color: #2C3E50;
}
.message-option {
    width: 100%;
    background-color: rgba(181, 255, 184, 0.50);
    padding: .5rem 2rem;
    border-bottom: 1px solid var(--dark-blue);
}
.message-option-head{
    margin: auto 0;
}
.message-option-head-text{
    margin: auto 0;
}
.message-body {
    border-top: 1px solid var(--bs-secondary-bg);
    border-left: 1px solid var(--bs-secondary-bg);
    border-bottom: 1px solid var(--bs-secondary-bg);
    border-right: 1px solid var(--bs-secondary-bg);
    border-radius: 8px 8px 4px 4px;
}
.message-body-inner{
    width: 100%;
    padding: 1.25rem 2rem;
}
.chat-box-body {
    height: 42.3vh;
    font-size: 13px;
    padding: 10px 30px;
    overflow: auto;
}
.message-body-inner-content{
    width: 100%;
}
.message-body-inner-time{
    width: 100%;
    font-size: 0.625rem;
    text-align: center;
    margin-bottom: 0.625rem;
}
.message-body-inner-badge{
    display: inline-block !important;
    font-size: 0.625rem !important;
    font-weight: 400 !important;
    border-radius: 50px !important;
    margin-bottom: 0.625rem;
}
.message-body-inner-wrap{
    display: block;
}
.message-body-inner-wrap-inner{
    display: inline-block;
}
.message-body-inner-text{
    display: inline-block;
    color: var(--white);
    background-color: var(--green);
    padding: 0.625rem 1.5rem;
    border-radius: 50px;
    margin-bottom: 0.625rem;
}
.message-body-inner-wrap-inner a{
    visibility: hidden;
}
.message-body-inner-wrap-inner:hover > a{
    visibility: visible;
}
.message-body-inner-content-right{
    text-align: right;
    margin-top: 0.625rem;
}
.message-body-inner-badge-right{
    background-color: var(--dark-blue);
}
.message-body-inner-text-right{
    background-color: var(--blue);
}
.message-body-inner-icon-right{
    margin-right: 0.5rem;
}
.messenger-chat-head {
    color: var(--white);
    background-color: var(--blue);
    padding: 0.85rem 2rem;
    margin: 0;
    border-radius: 8px 8px 0px 0px;
}
#messenger-chat-btn {
    display: flex;
    align-items: center;
    color: var(--dark-gray);
    border-bottom: 1px solid var(--dark-gray);
    padding: 0.25rem 0.25rem;
}
.active>#messenger-chat-btn, #messenger-chat-btn.active, #messenger-chat-btn:hover{
    color: var(--white);
    background-color: var(--green);
}
.chat-box-footer {
    border: 1px solid var(--dark-gray);
    border-radius: 4px;
    padding: 1.25rem;
    margin-top: 0.25rem;
    height: 11vh;
}
.chat_msg_input {
    padding: 0 !important;
    border: none !important;
    resize: none;
}
.chat_msg_input:focus{
    box-shadow: none !important;
}
/******* messenger section code end *******/

/******* messenger footer section code end *******/
.messenger-footer{
    margin-top: 4rem;
}
/******* messenger footer section code end *******/

/********************************************************/
/********** Messenger Student Page End Here ***********/
/********************************************************/

/********************************************************/
/********** Enroll Information Page Start Here ***********/
/********************************************************/


/********************************************************/
/********** Enroll Information Page End Here ***********/
/********************************************************/

/******* Chat box code start *******/
.chat-body {
    position: fixed !important;
    bottom: -5px;
    width: 350px;
}
.chat-option {
    width: 100%;
    background-color: var(--dark-blue);
    border-radius: 4px 4px 0 0;
    padding: .5rem 1rem;
}
.chat-option-head-text {
    color: var(--white);
    margin: auto 0;
}
.chat-menu-btn .btn{
    color: var(--white);
    padding: 0 2px;
}
.chat-menu-btn .btn:hover{
    color: var(--white);
}
.chat-body-inner {
    width: 100%;
    padding: 1.25rem 1rem;
}
.chat-body-inner-wrap-inner {
    display: inline-block;
    padding: 0 4px;
}
.chat-body-inner-box {
    height: 250px;
    overflow: auto;
}
.chat-body-inner-text {
    display: inline-block;
    color: var(--white);
    background-color: var(--green);
    padding: 0.5rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}
.chat-body-inner-text-right {
    background-color: var(--blue);
}
.chat-body-inner-input {
    width: 100%;
    margin-top: 0.5rem;
}
.chat-body-inner-input-btn{
    margin: auto 0;
    padding: .5rem 1rem !important;
}
/******* Chat box code end *******/
/******* Additional online/offline style *******/
.profile__card__badge--online {
    padding: 0.10rem 0.50rem !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    border-radius: var(--bs-border-radius) !important;
    background-color: var(--dark-green);
    color: var(--white);
}
.image-container {
    position: relative;
    display: inline-block;
}
.green-dot {
    position: absolute;
    bottom: 2px;
    right: 5px;
    width: 11px;
    height: 11px;
    background-color: green;
    border-radius: 50%;
    border: 2px solid white;
}
.hover-link:hover {
    text-decoration: underline !important;
    color: var(--yellow) !important;
}