*{
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Now Text';
  font-weight: normal;
  font-style: normal;
}

body{
  margin: 0 0 55px 0;
  background-color: var(--secondary-color);
}

:root{
  --primary-color: #fff;
  --secondary-color: #e5ebf3;
  --dark-text:  #0F1420;
  --primary-text:  #0075BC;
  --bg-blue:  #213F82;
  --muted-dark-text: #676868;
  --border-color: #E1E4EA;
  --mode-blue: #375BAC;
  --notification-bg: #D5DCED;
  --progress-bg: #B7B7B9;
  --continue-text: #375BAC;
  --header-notification: rgba(252, 252, 253, 0.4);
  --accent: #FF6600;
  --scroll-bar: #FCFCFD;
  --scroll-bar-bg: #676868;
  --try-again: #B7B7B9;
  --try-again-text: #E1E4EA;
  --notifications-bg: #F6FAFB;
  --notification-border-blue: #21479B;
  --notification-border-grey: #B7B7B9;
  --notification-date: #B7B7B9;
  --green-text: #08821C;

}

.dark-theme{
  --primary-color: #161E30;
  --secondary-color: #0F1420;
  --dark-text:  #dbdbdc;
  --bg-blue:  #213F82;
  --muted-dark-text: #B7B7B9;
  --border-color: #263555;
  --mode-blue: #0075BC;
  --notification-bg: #D5DCED;
  --progress-bg: #263555;
  --continue-text: #DBDBDC;
  --header-notification: #263555;
  --accent: #FF6600;
  --scroll-bar: #161E30;
  --scroll-bar-bg: #263555;
  --try-again: #263555;
  --try-again-text: #B7B7B9;
  --notifications-bg: #263555;
  --notification-border-blue: #0075BC;
  --notification-border-grey: #B7B7B9;
  --green-text: #dbdbdc;
}

/*::-webkit-scrollbar{
    width: 4px !important;
}

::-webkit-scrollbar-track{
    background: var(--scroll-bar) !important;
}

::-webkit-scrollbar-thumb{
    background: var(--scroll-bar-bg) !important;
}

::-webkit-scrollbar-thumb:hover{
    background: var(--progress-bg) !important;
}*/

.clr{
  clear: both;
}

.alignleft{
  float: left;
}

.alignright{
  float: right;
}

.center{
  text-align: center;
}

.bg-bluel{
  background: #375BAC;
}

.bg-white{
  background: #FCFCFD;
}

.text-blue{
  color: #375BAC;
}

.g{
  background: var(--primary-color);
  color: var(--dark-text);
}

.my-button{
  min-width: 144px;
  min-height: 56px;
  border-radius: 100px;
  color: #DBDBDC;
  padding:  16px 32px
}

.my-button:hover{
  color: var(--accent);
}

.bg-blue{
  background: #213F82;
}

.bg-mode-blue{
  background: var(--mode-blue) !important;
}

.bg-try-again{
  background: var(--try-again);
  color: var(--try-again-text);
}

.bg-sec{
  background: var(--secondary-color);
}

.bg-pri{
  background: var(--primary-color);
}

.bg-green{
  background: #08821C !important;
}

.bg-brown{
  background: #A02724;
}

.bg-purple{
  background: #9747FF;
}

.bg-notification{
  background: var(--notifications-bg) !important;
}

.bg-progress{
  background: var(--notification-border-grey) !important;
}

.green-text{
  color: var(--green-text) !important;
}

.dark-text{
  color: var(--dark-text)!important;
}

.primary-text{
  color: var(--primary-text);
}

.white-mode-text{
  color: var(--primary-color);
}

.muted-text{
  color: var(--muted-dark-text);
}

.secondary-text{
  color: var(--secondary-color);
}

.mode-blue-text{
  color: var(--mode-blue) !important;
}

.accent-text{
  color: var(--accent) !important;
}


.my-rounded{
  border-radius: 10px;
}

a{
  text-decoration: none;
}

.hr{
  color: var(--progress-bg);
  border: 1px solid var(--progress-bg);
}

.table-border{
  border-bottom: 1px solid var(--progress-bg);
}

.phone{
  visibility: hidden;
}

.phone2{
  display: none;
}

.phone3{
  display: none;
}


/* Input style */
.style-form input[type=file]{
  color: var(--dark-text);
}

.style-form label{
  color: var(--dark-text);
  margin-bottom: 10px;
}

.style-form input[type=text]{
  height: 45px;
  padding: 10px;
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  color: var(--dark-text);
}

.style-form input[type=text]::-webkit-input-placeholder { /* Edge */
  color: var(--dark-text);
}

.style-form input[type=text] :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--dark-text);
}

.style-form input[type=text]::placeholder {
  color: var(--dark-text);
}

.style-form input[type=text]:focus {
  outline: none;
  border: 1px solid var(--border-color);
  border-right: none;
  color: var(--dark-text);
}

.style-form input[type=number]{
  height: 45px;
  padding: 10px;
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  color: var(--dark-text);
}

.style-form input[type=number]::-webkit-input-placeholder { /* Edge */
  color: var(--dark-text);
}

.style-form input[type=number] :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--dark-text);
}

.style-form input[type=number]::placeholder {
  color: var(--dark-text);
}

.style-form input[type=number]:focus {
  outline: none;
  border: 1px solid var(--border-color);
  border-right: none;
  color: var(--dark-text);
}

.style-form textarea{
  height: 180px;
  border: none;
  padding: 10px;
  border-radius: 10px;
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  color: var(--dark-text);
}

.style-form textarea:focus {
  outline: none;
  border: 1px solid var(--border-color);
  border-right: none;
  background: var(--primary-color);
  color: var(--dark-text);
}

.textarea2{
  border: none;
  padding: 10px;
  border-radius: 10px;
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  color: var(--dark-text);
}

.textarea2:focus {
  outline: none;
  border: 1px solid var(--border-color);
  border-right: none;
  background: var(--primary-color);
  color: var(--dark-text);
}

.side-menu{
  position: fixed;
  width: 13.7vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 20px;
}

.side-menu .brand-name{  
  position: relative;
  left: 25.17%;
  right: 34.17%;
}

.side-menu .brand-name img{
  width: 76px;
  height: 80px;
}

.side-menu ul{
  margin: 0;
  padding: 0;
}

.side-menu .logout-ul{
  position: absolute;
  bottom: 0;
}

.side-menu li a{
  font-family: 'Helvetica Now Text ';
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  padding: 10px 40px;
  color: #B7B7B9;
  display: flex;
  align-items: center;
}

.side-menu li a:hover{
  color: #FCFCFD; 
  border-left: 2px solid #fff;
  margin-top: 5px;
  margin-bottom: 5px;
  background: linear-gradient(90deg, rgba(23, 78, 202, 0.4) 20.41%, rgba(76, 119, 215, 0) 87.76%);
}

.active{
  font-size: 18px !important;
  font-weight: 700;
  font-style: normal;  
  line-height: 26px;
  padding: 10px 35px !important;
  border-left: 2px solid #FCFCFD;
  color: #FCFCFD !important;
  background: linear-gradient(90deg, rgba(23, 78, 202, 0.4) 20.41%, rgba(76, 119, 215, 0) 87.76%);
}

.content-container{
  position: absolute;
  right: 0;
  width: 86.3vw;
  height: 100vh;
  background: var(--secondary-color);
}

.content-container .header{
  position: fixed;
  top: 0;
  right: 0;
  width: 86.3vw;
  min-height: 10vh;
  background: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 35px;
  padding-bottom: 10px;
  /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
  z-index: 1;
}

.content-container .header .nav{
  width: 95%;
  display: flex;
  align-items: center;
}

.content-container .header .nav h5{
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 35px;
}

.content-container .header .nav .search{
  flex: 3;
  display: flex;
  justify-content: center;
}

.plan-active{
  font-size: 9px; 
  padding: 5px;
}

.content-container .header .nav input[type=text]{
  width: 50%;
  height: 45px;
  border: none;
  padding: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-right: none !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  background: var(--primary-color);
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  color: var(--dark-text);
}

.content-container .header .nav input[type=text]::-webkit-input-placeholder { /* Edge */
  color: var(--dark-text);
}

.content-container .header .nav input[type=text] :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--dark-text);
}

.content-container .header .nav input[type=text]::placeholder {
  color: var(--dark-text);
}

.content-container .header .nav input[type=text]:focus {
  outline: none;
  border: 1px solid var(--border-color);
  border-right: none;
  color: var(--dark-text);
}

.content-container .header .nav .search button{
  color: #999999;
  width: 45px;
  height: 45px;
  border: none;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-container .header .nav .user{
  flex: 1;
  display: flex;
  justify-content: space-around;
}

.content-container .header .nav .user .header-icons{
  background: var(--header-notification);
  padding: 2px 5px;
  border-radius: 5px;
}

.content-container .header .nav .user .header-icons a i{
  font-size: 0.9rem;
  color: var(--dark-text);
}

.content-container .header .nav .user .img-case{
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 100%;
}

.content-container .header .nav .user .img-case img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.content-container .content{
  position: relative;
  min-height: 90vh;
  margin-top: 10vh;
  background: var(--secondary-color);
  padding: 30px;
  padding-top: 2px;
}

.bottom-nav{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 55px;
  /*box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);*/
  background: var(--secondary-color);
  display: flex;
  overflow-x: auto;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.nav__link{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  min-width: 50px;
  overflow: hidden;
  white-space: nowrap;
  font-family: sans-serif;
  font-size: 13px;
  color: #444;
  text-decoration: none;
  -webkit-tap-highlight-color:  transparent;
  transition: background-color 0.1s ease-in-out;
}

.nav__link:hover{
  background-color: var(--primary-color);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  height: inherit;
}

.nav__link--active{
  color: #009578;
}


/*phone-header-logo*/
.vnav{
  width: 100%;
  margin: auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--primary-color);
}

.phone-header-logo{
  width: 50px;
  height: 50px;
}

.profile-pix{
  width: 50px;
  height: 50px;
  border-radius: 100%;
}

.img-case{
  width: 40px;
  height: 40px;
  border-radius: 100%;
}

.img-case img{
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

/* 3 row dashboard */
.left-menu{
  position: fixed;
  width: 15vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 40px;
}

.left-menu .brand-name{  
  position: relative;
  left: 25.17%;
  right: 34.17%;

}

.left-menu .brand-name img{
  width: 76px;
  height: 80px;
}

.left-menu ul{
  margin: 0;
  padding: 0;
}

.left-menu .logout-ul{
  margin-top: 29vh;
}

.left-menu li a{
  font-family: 'Helvetica Now Text ';
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  padding: 10px 40px;
  color: #B7B7B9;
  display: flex;
  align-items: center;
}

.left-menu li a:hover{
  color: #FCFCFD; 
  border-left: 2px solid #fff;
  margin-top: 5px;
  margin-bottom: 5px;
  background: linear-gradient(90deg, rgba(23, 78, 202, 0.4) 20.41%, rgba(76, 119, 215, 0) 87.76%);
}

.main-content-container{
  position: absolute;
  right: 0;
  width: 85vw;
  min-height: 100vh;
  background: var(--secondary-color);
}

.middle-content-container{
  position: absolute;
  width: 67vw;
  min-height: 100vh;
}

.middle-content-container .header{
  width: 100%;
  min-height: 10vh;
  background: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 25px;
  padding-bottom: 10px;
  /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
  z-index: 1;
}

.middle-content-container .header .nav{
  width: 95%;
  display: flex;
  align-items: center;
}

.middle-content-container .header .nav .search{
  flex: 3;
  display: flex;
  justify-content: center;
}

.middle-content-container .header .nav input[type=text]{
  width: 50%;
  height: 45px;
  border: none;
  padding: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-right: none !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  background: var(--primary-color);
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  color: var(--dark-text);
  margin-left: 42.3%;
}

.middle-content-container,.style-form .header .nav input[type=text]::-webkit-input-placeholder { /* Edge */
  color: var(--dark-text);
}

.middle-content-container .header .nav input[type=text] :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--dark-text);
}

.middle-content-container .header .nav input[type=text]::placeholder {
  color: var(--dark-text);
}

.middle-content-container .header .nav input[type=text]:focus {
  outline: none;
  border: 1px solid var(--border-color);
  border-right: none;
  color: var(--dark-text);
}

.middle-content-container .header .nav .search button{
  color: #999999;
  width: 45px;
  height: 45px;
  border: none;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top: 1px solid var(--border-color);
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.middle-content-container .content{
  position: relative;
  min-height: 90vh;
  margin-top: -17vh;
  background: var(--secondary-color);
  padding: 30px;
}



/*right menu*/
.right-menu{
  position: absolute;
  right: 0;
  width: 18vw;
  height: 100vh;
  background: var(--secondary-color);
}

.right-menu .header{
  width: 18vw;
  min-height: 10vh;
  background: var(--primary-color);
  border-top-left-radius: 30px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 35px;
  padding-left: 30%;
  padding-bottom: 10px;
  /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
  z-index: 1;
}

.right-menu .header .nav{
  width: 95%;
  display: flex;
  align-items: center;
}

.right-menu .header .nav .user{
  flex: 1;
  display: flex;
  justify-content: space-around;
}

.right-menu .header .nav .user .header-icons{
  background: var(--header-notification);
  padding: 2px 5px;
  border-radius: 5px;
}

.right-menu .header .nav .user .header-icons a i{
  font-size: 0.9rem;
  color: var(--dark-text);
}

.right-menu .header .nav .user .img-case{
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 100%;
}

.right-menu .header .nav .user .img-case img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

.right-menu .content{
  position: relative;
  min-height: 100vh;
  margin-top: 0vh;
  padding: 10px;
}

.glesson{
  background: var(--primary-color);
  color: var(--dark-text);
}

/* Create Course */
#create-form2,#prev-btn{
  display: none;
}

/* Home Page */
.stats .reminder{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
}

.stats h6{
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.stats2 h6{
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
}

.stats-h6{
  margin-bottom: 8px;
}

.learners-stats {
  height: 56vh;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-columns: 3px;
  column-gap: 0px;
  margin-bottom: 10px;
  background-color: var(--primary-color);
}

/* .grid-item {
  border: 1px solid rgba(0, 0, 0, 0.1);
} */

.bell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-item h6{
  font-size: 12px;
  font-weight: 500;
  line-height: 17.64px;
  color: var(--dark-text);
}

.grid-item h6 span{
  color: var(--primary-color);
}

.grid-item p{
  font-style: normal;
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
  margin-bottom: 0 !important;
  color: var(--muted-dark-text);
}

.grid-item span{
  font-style: normal;
  font-size: 8px;
  font-weight: 400;
  color: var(--muted-dark-text);
}

.notification-case{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: var(--notification-bg);
  margin-left: -1px !important;
}

.notification-case i{
  font-size: 20px;
  color: var(--mode-blue);
}

.play-case{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #FDDECA;
  margin-left: -1px !important;
}

.play-case i{
  font-size: 20px;
  color: #FF6600;
}

.quiz-case{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #DDD5ED;
  margin-left: -1px !important;
}

.quiz-case i{
  font-size: 20px;
  color: #6337AC;
}

.project-case{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #CBE4D0;
  margin-left: -1px !important;
}

.project-case i{
  font-size: 20px;
  color: #08821C;
}


/*Pick up where you left off*/
.stat2-h6{
  margin-bottom: 16px;
}

.activity-stats {
  min-height: 45vh;
}

.actvity-house{
  padding-top: 24px;
  padding-left: 14px !important;
  padding-right: -20px !important;
}

.activity-grid-container{
  display: grid;
  grid-template-columns: auto auto auto;
  /*padding: 10px;*/
}

.activity-grid-item{
  width: 18.5vw;
  height: 245px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 !important;
  border-radius: 10px;
}

.activity-grid-item{
  background-size: cover;
  background-repeat: no-repeat;
}

.activity-grid-item .last_lesson{
  margin-top: 27vh;
  padding: 8px;
}

.activity-grid-item .last_lesson h6{
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: #FCFCFD;
}

.activity-grid-item .last_lesson p{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #FCFCFD;
}

/* My course */
.my-course-grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-auto-columns: 3px;
  column-gap: 0px;
  margin-bottom: 10px;
  background-color: var(--primary-color);
}

/* .my-course-grid-item {
  border: 1px solid rgba(0, 0, 0, 0.1);
} */

.my-course-grid-item img{
  width: 9vw;
  height: 18vh;
}

.my-course-grid-item h6{
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  text-align: left;
  color: var(--dark-text);
}


.my-course-grid-item p{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted-dark-text);
}

.my-course-grid-item span{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: var(--muted-dark-text);
}

.my-course-grid-item .progress{
  min-width: 19vw;
  height: 12px;
  background: var(--progress-bg);
}

.my-course-grid-item .progress-bar{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background: var(--mode-blue);
}

.continue-arrow{
  display: flex;
  align-items: center;
  justify-content: center;
}

.continue-arrow h6{
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  color: var(--continue-text);
}

.continue-arrow h6 i{
  font-style: normal;
  font-size: 12px;
}


/* Course details */
.course-details h3{
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 30px;
  color: var(--mode-blue);
  margin-bottom: 0;
}

.course-details-grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-auto-columns: 3px;
  column-gap: 0px;
  margin-bottom: 10px;
  margin-top: 30px;
  background-color: var(--primary-color);
}

/* .course-details-grid-item {
  border: 1px solid rgba(0, 0, 0, 0.1);
} */

.course-details-grid-item h6{
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  text-align: left;
  color: var(--dark-text);
}

.course-details-grid-item .selected{
  background-image: linear-gradient(var(--mode-blue) 0 0);
  background-position: bottom center;
  background-size: 15% 2px;
  background-repeat: no-repeat;
  padding-bottom: 4px;
  background-position: bottom left;
}

#overview_content{
  display: block;
}

#section_content{
  display: none;
}

#review_content{
  display: none;
}


.overview-content p{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}


/* Course review container*/
.course-content{
  padding: 130px !important; 
  padding-top: 30px !important;
}

.course-details{
  padding: 25px;
  padding-top: 2px;
}

.course-review-grid-container{
  display: grid;
  grid-template-columns: auto auto auto;
  grid-auto-columns: 3px;
  column-gap: 0px;
  margin-bottom: 10px;
  background-color: var(--primary-color);
  border: 1px solid var(--border-color);
}

/* .course-review-grid-item {
  border: 1px solid rgba(0, 0, 0, 0.1);
} */

.course-review-grid-item h6{
  font-size: 12px;
  font-weight: 500;
  line-height: 17.64px;
  color: var(--dark-text);
}

.course-review-grid-item h6 span{
  color: var(--primary-color);
}

.course-review-grid-item p{
  font-style: normal;
  font-size: 10px;
  font-weight: 400;
  line-height: 15px;
  margin-bottom: 0 !important;
  color: var(--muted-dark-text);
}

.course-review-grid-item span{
  font-style: normal;
  font-size: 8px;
  font-weight: 400;
  color: var(--muted-dark-text);
}

.course-review-grid-container .review-image{
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.course-review-grid-container .review-image img{
  width: 82px;
  height: 82px;
  margin-bottom: 10px;
}

.course-review-grid-container .review-image h6{
  font-style: normal;
  font-size: 10px;
  font-weight: 400;
}

.fa-star,.star{
  color: var(--accent);
}

.course-review-grid-container .review{
  padding: 15px;
  border-left: 1px solid var(--border-color);
}

.course-review-grid-container .review h6{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.course-review-grid-container .review p{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
}

.course-review-grid-container .rating{
  padding-top: 15px;
}

.course-review-grid-container h6{
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
}

/* Section div */
.section-table{
  border: none;
}

.section-table tr th{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--muted-dark-text);
}

.section-table tr td h6{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--muted-dark-text);
}

.section-table p{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--muted-dark-text);
}

.section-table tr td .completed{
  color: var(--mode-blue);
}

.section-table tr td .accordion{
  width: 49vw;
  background: var(--secondary-color);
}

.section-table tr td .accordion-item{
  background: var(--primary-color);
  border: 1px solid var(--progress-bg);
  color: var(--dark-text);
}

.section-table tr td .accordion-item:focus{
  border: none;
}

.section-table tr td .accordion-button{
  background: var(--primary-color);
  color: var(--dark-text);
  border-bottom: 1px soild red !important;
}

.section-table tr td .accordion-button:focus{
  box-shadow: none !important;
}

.section-table tr td .accordion-button::icon{
  color: red !important;
}

.section-table tr td .accordion-header{
  border: none !important;
}

.section-table tr td .accordion-header{
  border: none !important;
}

.accordion-collapse{
  border-top: 1px soild red !important;
}

.accordion-body .lesson-link h6{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--primary-text);
}

.accordion-body .lesson-link:hover{
  text-decoration: underline;
  text-decoration-color: var(--muted-dark-text);
}

.accordion-body .lesson-link p{
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  color: var(--muted-dark-text);
}

/* Lesson page */
.lesson-div h6{
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
}

.lesson-div p{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

#close_translation{
  display: none;
}

.translation{
  height: 50vh;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: justify;
}

.translation p{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-text);
}

.next-div .lesson-link h6{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--primary-text);
}

.next-div .lesson-link p{
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  color: #B7B7B9;
}

.completed-div .lesson-link h6{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--dark-text);
}

.completed-div .lesson-link p{
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  color: #B7B7B9;
}

/*quiz page*/
.quiz-div h6{
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 20px;
  color: var(--mode-blue);
  margin-bottom: 0 !important;
}

.quiz-div .date-due{
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-text);
}

.quiz-div h5{
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.quiz-div p{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.button-div{
  margin-top: 21%;
}

.quiz-modal-body h3{
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 47px;
  color: var(--dark-text);
}

.quiz-modal-body h3 i{
  font-style: normal;
  font-weight: 500;
  font-size: 40px;
  line-height: 47px;
  color: #FF0000;
}

.quiz-modal-body p{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--muted-dark-text);
}

/* Quiz page */
/* .quiz-question ol li{
  
} */

.quiz-question label {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--muted-dark-text);
}

.quiz-question .quiz-checkbox{
  width: 15px;
  height: 15px;
  margin-right: 10px;
}

.quiz-question .quiz-radio{
  width: 17px;
  height: 17px;
  margin-right: 10px;
}

/* Quiz response */
.quiz-response-grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-auto-columns: 3px;
  column-gap: 0px;
  margin-bottom: 10px;
  background-color: var(--primary-color);
  align-items: center;
  justify-content: center;
}

/* .quiz-response-grid-item {
  border: 1px solid rgba(0, 0, 0, 0.1);
} */

.quiz-response-grid-item .score-case{
  width: 100px;
  height: 100px;
  left: 453px;
  top: 321px;
  border: 5px solid #32E04E;
  border-radius: 100%;
  margin: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-response-grid-item .score-case h6{
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  color: #32E04E;
}
  
  /* Poor score */
.quiz-resumes{
  color: #DD1818;
}

.quiz-response-grid-item .poor-score-case{
  border: 5px solid #DD1818;
}

.quiz-response-grid-item .poor-score-case h6{
  color: #DD1818;
}

.quiz-response-grid-item p{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-text);
  text-align: justify !important;
}

.project-div input[type=text]{
  height: 57px;
  border: none;
  padding: 10px;
  border-radius: 10px;
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  color: var(--dark-text);
}

.project-div input[type=text]:focus {
  outline: none;
  border: 1px solid var(--border-color);
  border-right: none;
  color: var(--dark-text);
}

.project-div .url{
  color: var(--mode-blue) !important;
}

.project-div textarea{
  height: 180px;
  border: none;
  padding: 10px;
  border-radius: 10px;
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  color: var(--dark-text);
}

.project-div textarea:focus {
  outline: none;
  border: 1px solid var(--border-color);
  border-right: none;
  background: var(--primary-color);
  color: var(--dark-text);
}

/* Notifications */
.notification {
  min-height: 88px;
  padding: 16px 24px;
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  border-left: 12px solid var(--notification-border-grey);
}

.notification h6{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-text);
}

.notification p{
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
}

.notification .notification-due{
  color: var(--notification-border-grey);
}

.unread{
  background: var(--notifications-bg);
  border-left: 12px solid var(--notification-border-blue);
}

/* Notifications page */
.notification-list{
  padding: 15px;
  min-height: 70vh;
}

.notification-list h3{
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 30px;
  color: var(--mode-blue);
  margin-bottom: 0;
}

.notification-list h5{
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 35px;
  color: var(--dark-text);
}

.notification-list .sent-date{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--notification-border-grey);
}

.reply-time{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--notification-border-grey);
}

.notification-list .notification-details{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted-dark-text);
}

.feedback-form{
  display: none;
}

.feedback-form textarea{
  min-height: 180px;
  border: none;
  padding: 10px;
  border-radius: 10px;
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  color: var(--dark-text);
}

.feedback-form textarea:focus {
  outline: none;
  border: 1px solid var(--border-color);
  border-right: none;
  background: var(--primary-color);
  color: var(--dark-text);
}

/* My Courses */
.course-details h2{
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 47px;
  color: var(--mode-blue);
}

.my-courses-nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.my-courses-nav li{
  float: left;
  min-width: 9vw;
  height: 46px;
  padding: 10px;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;  
  color: var(--dark-text);
}

.my-courses-nav .selected-course{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: var(--primary-color);
}

.course-content-house{
  min-height: 60vh;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.in-Progress-content{
  height: 60vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.completed-content{
  height: 60vh;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
}

.recommended-content{
  height: 50vh;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Settings Page */
.setting-content{
  margin-top: 7% !important;
}

.setting-content h3{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--mode-blue);
}

.setting-content .profile-picture-holder{
  justify-content: center;
  justify-items: center;
}

.setting-content .profile-picture-holder h6{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-text);
  margin-bottom: 24px;
}

.setting-content .profile-picture{
  width: 11.5vw;
  height: 11.5vw;
  border-radius: 100%;
}

.setting-content .profile-picture img{
  width: 100%;
  height: 100%;
}

.setting-content .profile-picture-holder p{
  border: 1px solid var(--border-color);
}

.setting-content .profile-picture-holder p:hover{
  color: var(--accent);
}

.setting-content input[type=text]{
  height: 60px;
  border: none;
  padding: 10px;
  border-radius: 10px;
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  color: var(--dark-text);
}

.setting-content input[type=text]::-webkit-input-placeholder { /* Edge */
  color: var(--dark-text);
}

.setting-content input[type=text] :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--dark-text);
}

.setting-content input[type=text]::placeholder {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--muted-dark-text);
}

.setting-content input[type=text]:focus {
  outline: none;
  border: 1px solid var(--border-color);
  color: var(--dark-text);
}

.setting-content label{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--dark-text);
}


.profile-picture-update input[type=file]{  
  border: none;
  border-radius: 10px;
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  color: var(--dark-text);
}

.profile-picture-update input[type=file]::-webkit-input-placeholder { /* Edge */
  color: var(--dark-text);
}

.profile-picture-update input[type=file] :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--dark-text);
}

.profile-picture-update input[type=file]::placeholder {
  color: var(--dark-text);
}

.profile-picture-update input[type=file]:focus {
  outline: none;
  border: 1px solid var(--border-color);
  border-right: none;
  color: var(--dark-text);
}

.setting-width{
  width: 24.2vw;
}

.peferences h6{
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-text);
}

.selectdiv{
  position: relative;
  float: left;
  min-width: 200px;
}

.selectdiv:after{
    content: '\f078';
    font: normal normal normal 17px/1 FontAwesome;
    /*content: '\f078';*/
    font-style: normal;
    font-weight: 400;
    font-size: 17px;
    line-height: 24px;
    color: var(--dark-text);
    right: 11px;
    top: 6px;
    height: 58px;
    padding: 15px 0px 0px 8px;
    border-left: 1px solid var(--border-color);
    position: absolute;
    pointer-events: none;
}

select::-ms-expand{
  display: none;
}

.selectdiv select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  width: 24.2vw;
  max-width: 100vw;
  height: 60px;
  float: right;
  margin: 5px 0px;
  padding: 0px 24px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-text);
  background-color: var(--primary-color);
  background-image: none;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  -ms-word-break: normal;
  word-break: normal;
}


.theme-check-house{
  border: 2px solid var(--border-color);
  border-radius: 10px;
  height: 60px;
}

.theme-check-house label{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  display: block;
  color: var(--dark-text);
}

.theme-checkbox{
  width: 20px;
  height: 20px;
  display: inline-block;
}

/* Profile Page */
.setting-content .profile-pix-holder{
  align-items: center;
  justify-content: center;
}

.setting-content .profile-pix{
  width: 14.5vw;
  height: 14.5vw;
  border-radius: 100%;
}

.setting-content .profile-pix img{
  width: 100%;
  height: 100%;
}

.user-details{
  margin-bottom: 15% !important;
}

.user-details h6{
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 35px;
  color: var(--dark-text);
  text-align: center;
}

.user-details p{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 15px;
  color: var(--muted-dark-text);
}

.user-details span{
  border: 1px solid var(--mode-blue);
  border-radius: 100%;
  padding: 3px;
  padding-left: 5px;
  margin: 8px;
}

.user-details span a{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--mode-blue);
}

.edit-profile a{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--mode-blue);
}

.certificates-house h3{
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 35px;
}

.certificates-house .certificate{
  padding: 5px 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  margin-bottom: 10px;
}

.certificates-house .certificate h6{
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: var(--dark-text);
}

.certificates-house .certificate p{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted-dark-text);
}

.certificate-link{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: var(--mode-blue);
}

.cert_navigation{
  background: var(--notifications-bg);
  border-radius: 100%;
  padding: 5px;
}

/* .cert_navigation i{
} */

.certificate-holder{
  display: none;
}

.mainC{
  display: block;
}

.projects{
  overflow: hidden;
}

.project-house{
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  padding-bottom: 10px;
  margin-bottom: 30px;
  /*scrollbar-width: none;*/
}

.hide-scroll{
  /*IE, Edge and Firefox*/
  -ms-overflow-style: none;
  /*IE and Edge*/
  scrollbar-width: none !important;
}

.projects h3{
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 35px;
  color: var(--mode-blue);
  margin-bottom: 15px;
}

.project{
  width: 20vw;
  background: none;
  display: inline-block;
  white-space: normal;
  margin: 5px;
}

.project .project-img{
  height: 173px;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 10px;
}


.project h6{
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-text);
}

.project p{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--muted-dark-text);
}

.project .project-completed{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
}

.project a{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
}

/*Edit Project modal*/
.edit-project-modal-body label{
  color: var(--dark-text);
}

.edit-project-modal-body input[type=text]{
  height: 57px;
  border: none;
  padding: 10px;
  border-radius: 10px;
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  color: var(--dark-text);
}

.edit-project-modal-body input[type=text]:focus {
  outline: none;
  border: 1px solid var(--border-color);
  border-right: none;
  color: var(--dark-text);
}

.edit-project-modal-body .url{
  color: var(--mode-blue) !important;
}

.edit-project-modal-body textarea{
  height: 180px;
  border: none;
  padding: 10px;
  border-radius: 10px;
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  color: var(--dark-text);
}

.edit-project-modal-body textarea:focus {
  outline: none;
  border: 1px solid var(--border-color);
  border-right: none;
  background: var(--primary-color);
  color: var(--dark-text);
}

.edit-project-modal-body h3{
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 47px;
  color: var(--dark-text);
}

.edit-project-modal-body h3 i{
  font-style: normal;
  font-weight: 500;
  font-size: 40px;
  line-height: 47px;
  color: #FF0000;
}

/* Shareable profile */
.shareable-profile{
  padding: 50px;
}

.shareable{
  width: 53%;
  padding: 0 !important;
}

.shareable-profile .profile-details .user-details{
  padding-top: 5% !important;
  margin-left: 0 !important;
}

.shareable-profile .profile-details .user-details h6{
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 35px;
  color: var(--dark-text);
  text-align: left;
}

.shareable-profile .profile-details .user-details p{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--muted-dark-text);
  text-align: left;
}

.shareable-profile .profile-details .user-details span{
  border: 1px solid var(--mode-blue);
  border-radius: 100%;
  padding: 3px;
  padding-left: 5px;
  margin: 8px;
}

.shareable-profile .profile-details .user-details span a{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--mode-blue);
}

.shareable-facebook{
  margin-left: -60% !important;
}

/* Menu modal */
#menuModal .menuModal{
  width: 80vw !important;
} 

.menuModal .modal-logo{
  width: 56px;
  height: 60px;
}

.menuModal ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.menuModal li{
  margin-bottom: 30px;
}

.menuModal li a{
  font-style: normal;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  padding: 10px 40px !important;
  color: #B7B7B9;
}

.menuModal li a:hover{
  color: #FCFCFD; 
  border-left: 4px solid #fff;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 20px;
  background: linear-gradient(90deg, rgba(23, 78, 202, 0.4) 20.41%, rgba(76, 119, 215, 0) 87.76%);
}

.menuModal .active{
  font-size: 22px !important;
  font-weight: 700;
  font-style: normal;  
  line-height: 26px;
  padding: 10px 35px !important;
  border-left: 4px solid #FCFCFD;
  color: #FCFCFD !important;
  background: linear-gradient(90deg, rgba(23, 78, 202, 0.4) 20.41%, rgba(76, 119, 215, 0) 87.76%);
}

/* Team Plan */
.teamModal h6{
  font-style: normal;
  font-weight: 500;
  font-size: 25px;
  line-height: 18px;
}

.teamModal img{
  height: 25px;
}

.teamModal input[type=text]{
  height: 60px;
  border: none;
  padding: 10px;
  border-radius: 10px;
  background: var(--primary-color);
  border: 1px solid var(--border-color);
  color: var(--dark-text);
}

.teamModal input[type=text]::-webkit-input-placeholder { /* Edge */
  color: var(--dark-text);
}

.teamModal input[type=text] :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--dark-text);
}

.teamModal input[type=text]::placeholder {
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--muted-dark-text);
}

.teamModal input[type=text]:focus {
  outline: none;
  border: 1px solid var(--border-color);
  color: var(--dark-text);
}

/* Login Page */
.p-login{
  padding: 5rem;
} 

/* .login-div-holder{
  height: 100vh;
} */

.first-login-div{
  background-image: url('../images/illustration.png');
  background-repeat: no-repeat;
  background-size: 12%;
  height: 100vh;
  border-bottom-right-radius: 10%;
}

.first-login-div img{
  width: 60vh;
  height: 60vh;
}

.first-login-div h1{
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 71px;
  color: #FCFCFD;
}

.first-login-div p{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #FCFCFD;
}

.second-login-div{
  height: 100vh;
  border-top-left-radius: 10%;
  padding-top: 25vh;
}

.second-login-div h1{
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 20px;
}

.google-btn{
  width: 100%;
  height: 60px;
  padding: 10px;
  background-color: #FCFCFD;
  box-shadow: 0px 1px 2px rgb(236, 231, 231);
  border-radius: 10px;
  border: none;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #0F1420;
  margin-bottom: 30px;
}

.login-form input[type=email],input[type=password],input[type=text]{
  width: 100%;
  height: 50px;
  border: none;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--primary-color);
  color: #0F1420;
}

.login-form input[type=email],input[type=password]::-webkit-input-placeholder { /* Edge */
  color: var(--dark-text) !important;
}

.login-form input[type=email] :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--dark-text) !important;
}

.login-form input[type=email]::placeholder {
  color: var(--dark-text) !important;
}

.login-form input[type=password]::placeholder {
  color: var(--dark-text) !important;
}

.login-form input[type=email]:focus {
  outline: none;
  border: 1px solid var(--border-color);
  border-right: none;
  color: var(--dark-text);
  background: #E1E4EA;
}

.login-form input[type=password]:focus {
  outline: none;
  border: 1px solid var(--border-color);
  border-right: none;
  color: var(--dark-text);
  background: #E1E4EA;
}

.login-btn{
  width: 100%;
  height: 60px;
  background-color: #375BAC;
  border-radius: 100px;
  border: 1px solid #375BAC;
  font-style: normal;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: #FCFCFD;
}

.login-info{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  color: #676868;
}

/* Forgot password */
.first-forgot-div{
  min-height: 100vh;
}

.first-forgot-div img{
  width: 75vh;
  height: 75vh;
}

.first-forgot-div h1{
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 71px;
  color: #FCFCFD;
}

.second-forgot-div{
  min-height: 100vh;
}

.second-forgot-div p{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #0F1420;
}

.reset-div{
  margin-top: 22vh;
}

/* Success Reset */
.first-reset-div{
  min-height: 100vh;
  border-bottom-right-radius: 10%;
}

.first-reset-div img{
  width: 65vh;
  height: 65vh;
}

.first-reset-div h1{
  font-style: normal;
  font-weight: 700;
  line-height: 71px;
  color: #FCFCFD;
}

.first-reset-div p{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #FCFCFD;
}

.second-reset-div{
  min-height: 100vh;
  border-top-left-radius: 10%;
}

.success-div{
  margin-top: 12vh;
}

.second-reset-div h1{
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 20px;
}

/* Learning outcomes */
.objective{
  display: block;
  padding: 5px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.learning-outcomes .objective i{
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
}

/* Course Sections */
.section-holder .accordion{
  width: 49vw;
  background: var(--secondary-color);
}

.section-holder .accordion-item{
  background: var(--primary-color);
  border: 1px solid var(--progress-bg);
  color: var(--dark-text);
}

.section-holder .accordion-item:focus{
  border: none;
}

.section-holder .accordion-button{
  background: var(--primary-color);
  color: var(--dark-text);
  border-bottom: 1px soild red !important;
}

.section-holder .accordion-button:focus{
  box-shadow: none !important;
}

.section-holder .accordion-button::icon{
  color: red !important;
}

/* Project pages */
.project-image{
  height: 50vh;
}

.featured-image{
  height: 40vh;
  background-size: cover;
  background-repeat: no-repeat;
}

.featured-image input{
  margin: 28%;
}

/* Testimonial page */
.testifyer-img{
  width: 30px;
  height: 30px;
  border-radius: 100%;
}

.testifyer-img img{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}

/*new e-learning analytics*/
.eAnalytics{
  min-height: 25.2vh;
  background-repeat: no-repeat;
  background-position: bottom right;
}

.eAnalytics h5{
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: var(--muted-dark-text);
}

.eAnalytics h3{
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 35px;
}

#Individual, #Teams{
  display: none;
}

.eAnalyticsValue{
  font-size: 18px;
}

.progresStat{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;

}

.top-selling{
  height: 285px;
}

.grid-container2 {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-columns: 3px;
  column-gap: 0px;
  margin-bottom: 10px;
}

/*Recent Activities*/
.activity-case{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  margin-left: -1px !important;
  margin-right: .5rem;
}

.cover-up{
  visibility: hidden;
}

.collapseA{
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--dark-text);
}

.collapseA:hover{
  background-color: var(--mode-blue);
  color: #fff;
  padding: 0.3rem;
  border-radius: 5px;
}

/* Blog */
.blog-content-holder{
  padding-right: 0.7rem !important;
}

.blog-content{
  min-height: 126vh;
}

.SEO p{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted-dark-text);
  margin-bottom: 0.6rem;
}

.blog-post p{
  text-align: justify-all !important;
}

.replies-house{
  display: none;
}

.reply-form label{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: var(--dark-text);
}

.reply-form .form-control{
  height: 50px;
}

.reply-form textarea{
  height: 20vh !important;
}

.comment-house{
  border-bottom: 1px solid var(--secondary-color);
  padding-bottom: 0.5rem !important;
  margin-bottom: 1rem;
}

.comment-house p{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: justify;
  color: var(--dark-text);
}

.comment-house .read-more{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.comment-house .like-btn{
  background: none;
  font-size: 1.1rem;
  border: none;
}

.comment-house .reply{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--brand-blue);
}

.comment-house .author-sign{
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  color: #fff;
  margin: 1rem auto auto 1rem;
  padding: 0.5rem;
  border-radius: 100px;
  background: var(--mode-blue);
}

.admin-pix2{
  width: 9.3vh;
  height: 9.3vh;
  border-radius: 100%;
}

.admin2 p{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.admin2 span{
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
}

.admin2 .social{
  margin-top: 0.9rem;
}

.admin2 .social a{
  font-style: normal;
  font-weight: 400;
  font-size: 23px;
  line-height: 25px;
  color: #676868;
}

.admin2 .social a:hover{
  color: var(--accent);
}

.reply-form label{
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 30px;
  color: #000;
}

.reply-form .form-control{
  height: 50px;
  border: 1px solid #ccc;
}

.reply-form textarea{
  height: 20vh !important;
}