@font-face {
  font-family: "Merriweather";
  src: url("../Fonts/Merriweather/Merriweather-Light.ttf") format("truetype");
  font-weight: light;
  font-style: light;
}
@font-face {
  font-family: "Merriweather";
  src: url("../Fonts/Merriweather/Merriweather-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Merriweather";
  src: url("../Fonts/Merriweather/Merriweather-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: bold;
}
@font-face {
  font-family: "Merriweather";
  src: url("../Fonts/Merriweather/Merriweather-Black.ttf") format("truetype");
  font-weight: bolder;
  font-style: bolder;
}
@font-face {
  font-family: "WorkSans";
  src: url("../Fonts/Work_Sans/static/WorkSans-ExtraLight.ttf")
    format("truetype");
  font-weight: 200;
  font-style: lighter;
}
@font-face {
  font-family: "WorkSans";
  src: url("../Fonts/Work_Sans/static/WorkSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: light;
}
@font-face {
  font-family: "WorkSans";
  src: url("../Fonts/Work_Sans/static/WorkSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "WorkSans";
  src: url("../Fonts/Work_Sans/static/WorkSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "WorkSans";
  src: url("../Fonts/Work_Sans/static/WorkSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: bold;
}
@font-face {
  font-family: "WorkSans";
  src: url("../Fonts/Work_Sans/static/WorkSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: bold;
}
@font-face {
  font-family: "WorkSans";
  src: url("../Fonts/Work_Sans/static/WorkSans-ExtraBold.ttf")
    format("truetype");
  font-weight: 800;
  font-style: bolder;
}
@font-face {
  font-family: "WorkSans";
  src: url("../Fonts/Work_Sans/static/WorkSans-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: bolder;
}
:root {
  /*--second-main-color: #f1f2fd;*/
  --second-main-color: #f1f2fd6e;
  /*--main-color: #392c7d;*/
  --main-color: #0093d8;
  --second-main-color-text: #685f78;
  --sub-second-main-color-text: #0454a3;
  /*--sub-second-main-color-text: #ff4667;*/
}
* {
  box-sizing: border-box;
}
button {
  background-color: transparent;
  border: none;
  outline: none;
}
input {
  background-color: transparent;
  border: none;
  outline: none;
}
select {
  background-color: transparent;
  border: none;
  outline: none;
}
input::placeholder {
  color: #a1a1a1;
}
a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: none;
  color: inherit;
}
i {
  display: flex;
  align-items: center;
  justify-content: center;
}
body {
  font-family: "WorkSans", "Merriweather", Tahoma, Geneva, Verdana, sans-serif;
  /*background-color: var(--second-main-color);*/
}

.row {
  margin: 0px;
}
.header-auth {
  padding: 10px 20px;
  background-color: white;
  box-shadow: 0px 0px 10px 0px #6c6c6c39;
}
.logo-website {
  width: 100px;
}
.con-button-auth-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
.sign-up {
  background-color: var(--main-color);
  color: white;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 50px;
  padding: 10px 20px;
  min-width: 120px;
  line-height: 1;
  border: 2px solid transparent;
}
.sign-in {
  background-color: transparent;
  color: var(--main-color);
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 600;
  border-radius: 50px;
  padding: 10px 20px;
  border: 2px solid var(--main-color);
  margin: 0px 10px;
  min-width: 120px;
  line-height: 1;
}
.main-con-home-banner {
  /*background: url("../images/banner.png") no-repeat center center;*/
  background-size: cover;
  width: 100%;
  min-height: 450px;
  position: relative;
}
.main-banner-img-with-text {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 20px;
  height: 370px;
}
.banner-text p {
  font-size: 20px;
  color: var(--second-main-color-text);
  font-weight: 600;
  margin-bottom: 0px;
}
.banner-text h2 {
  font-size: 40px;
  font-weight: 700;
  color: var(--main-color);
  line-height: 55px;
  margin-bottom: 30px;
}
.banner-text h2 span {
  color: var(--sub-second-main-color-text);
}
.banner-text {
  max-width: 400px;
}
.main-banner-img-with-text > img {
  width: 400px !important;
  max-height: 410px;
}
.banner-text a {
  font-size: 20px;
  color: white;
  background: var(--main-color);
  padding: 10px 30px;
  border-radius: 50px;
  font-weight: 500;
}
.banner-img-only {
  max-height: 450px;
}
.wave {
  width: 100%;
  background: url(../images/Path\ 11.png) repeat-x left center;
  background-size: cover;
  height: 100px;
  overflow: hidden;
  position: absolute;
  bottom: -130px;
  left: 0px;
  z-index: 500;
}
.wave-with-opacty {
  width: calc(100% + 600px);
  background: url(../images/Path\ 12.png) repeat-x left center;
  background-size: cover;
  height: 100px;
  transform: translateX(-300px);
}
.main-con-courses {
  padding: 20px;
  background-color: white;
  /*padding-bottom: 100px;*/
}
.con-title-of-home-block-page {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-bottom: 40px;
}
/*.con-title-of-home-block-page h2 {*/
/*  font-size: 30px;*/
/*  font-weight: 600;*/
/*  color: var(--main-color);*/
/*  margin-bottom: 10px;*/
/*}*/
.con-title-of-home-block-page h2 {
    font-size: 25px;
    font-weight: 600;
    color: #0454a2;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid #0454a2;
}
.con-title-of-home-block-page p {
  font-size: 15px;
  color: var(--second-main-color-text);
  line-height: 20px;
  max-width: 400px;
  text-align: center;
  font-weight: 500;
  margin-bottom: 0px;
}
.main-con-course-box {
  background-color: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0px 0px 10px 1px #eee;
  margin: 10px;
  display: block;
}
.con-img-of-course {
  position: relative;
  margin-bottom: 10px;
}
.con-img-of-course img {
  width: 100%;
  height: 150px;
  box-shadow: 0px 0px 10px 0px #eee;
}
.con-course-count-course-box {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translate(-50%, 0%);
  background-color: white;
  display: flex;
  align-items: center;
  border-radius: 20px;
  padding: 7px 15px;
}
.con-course-count-course-box i {
  font-size: 13px;
  color: var(--second-main-color-text);
  margin-right: 10px;
}
.con-course-count-course-box span {
  white-space: nowrap;
  font-size: 15px;
  color: var(--second-main-color-text);
  line-height: 1;
  font-weight: 500;
}
.con-details-course-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10px;
}
.con-details-course-box p {
  font-size: 20px;
  color: var(--main-color);
  font-weight: 600;
  margin-bottom: 5px;
}
.con-teacher-count-course-box {
  display: flex;
  align-items: center;
}
.con-teacher-count-course-box i {
  font-size: 15px;
  color: var(--second-main-color-text);
  margin-right: 10px;
}
.con-teacher-count-course-box span {
  font-size: 15px;
  font-weight: 500;
  color: var(--second-main-color-text);
}
.course-home .owl-nav {
  position: absolute;
  top: 50%;
  left: -50px;
  transform: translate(0%, -50%);
  width: calc(100% + 100px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-home .owl-nav i {
  width: 40px;
  height: 40px;
  background-color: var(--second-main-color);
  border-radius: 50%;
  color: var(--second-main-color-text);
  font-size: 13px;
}
.course-home .owl-nav button:hover {
  background-color: transparent !important;
}
.course-home .owl-dot span {
  width: 8px !important;
  height: 8px !important;
  transition: 0.5s ease-in-out !important;
}
.course-home .owl-dot.active span {
  background-color: var(--main-color) !important;
  width: 30px !important;
}
.course-home .owl-dot {
  transition: 0.5s ease-in-out !important;
}
.main-con-lecture-card {
    position: relative;
    border: 1px solid #eee;
    border-radius: 12px;
}
.con-top-lecture-card img {
  /*width: calc(100% - 40px) !important;*/
  width: 100%;
  height: 200px;
  position: absolute;
  top: 20px;
  left: 50%;
  border: 10px solid var(--second-main-color);
  transform: translate(-50%, 0%);
  border-radius: 20px;
}
.con-top-lecture-card {
  height: 200px;
  position: relative;
}
.con-bottom-card-lecture {
  background-color: white;
  /*padding: 40px 10px 10px;*/
  padding: 25px 10px 10px;
  border-radius: 15px;
}
.con-publish-at-lecture-card {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.con-publish-at-lecture-card i {
  font-size: 13px;
  color: var(--second-main-color-text);
  margin-right: 10px;
}
.con-publish-at-lecture-card span {
  font-size: 13px;
  font-weight: 500;
  color: var(--second-main-color-text);
}
.con-bottom-card-lecture > p {
  font-size: 18px;
  font-family: "Merriweather", "WorkSans", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--main-color);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: normal;
}
.con-instractore-lecture-card {
  background-color: var(--second-main-color);
  border-radius: 15px;
  padding: 10px;
  display: flex;
  align-items: center;
}
.con-instractore-lecture-card img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  margin-right: 10px;
}
.instractor-details-lecture-card {
  flex-grow: 1;
  width: 30%;
}
.instractor-details-lecture-card p {
  font-size: 15px;
  color: var(--main-color);
  font-weight: 600;
  margin-bottom: 5px;
  line-height: 1;
  width: 80%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.instractor-details-lecture-card span {
  font-size: 13px;
  color: var(--second-main-color-text);
  font-weight: 600;
  margin-bottom: 5px;
  line-height: 1;
  font-family: "Merriweather", "WorkSans", Tahoma, Geneva, Verdana, sans-serif;
}
.lecture-card-price-lessons-count h2 {
  font-size: 25px;
  color: var(--sub-second-main-color-text);
  font-weight: 800;
  /*font-family: "Merriweather", "WorkSans", Tahoma, Geneva, Verdana, sans-serif;*/
  margin-bottom: 10px;
  line-height: 1;
}

.lecture-card-price-lessons-count span {
  font-size: 13px;
  color: var(--second-main-color-text);
  font-weight: 500;
  margin-bottom: 0px;
  line-height: 1;
}
.lecture-card-price-lessons-count {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-con-block-lecture-home {
  padding: 20px 20px 100px;
  background-color: var(--second-main-color);
  position: relative;
  background: url("../images/course-bg-1.png") no-repeat center center;
  background-size: cover;
  margin-bottom: 100px;
}
.border-bottom-arrow::after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: -100px;
  border: 0px solid transparent;
  border-left-color: #fff;
  border-bottom-color: #fff;
  border-bottom-width: 100px;
  border-right-width: 750px;
}
.border-bottom-arrow::before {
  content: "";
  position: absolute;
  right: 0px;
  bottom: -100px;
  border: 0px solid transparent;
  border-right-color: #fff;
  border-bottom-color: #fff;
  border-bottom-width: 100px;
  border-left-width: 750px;
}
.border-bottom-arrow {
  position: relative;
}
.main-con-group-teachers-home {
  background-color: white;
  padding: 50px 20px;
}
/*.con-teacher-details-teacher-card {*/
/*  position: absolute;*/
/*  bottom: 9px;*/
/*  right: 10px;*/
/*  width: calc(100% - 20px);*/
/*  height: 160px;*/
/*  background: url("../images/75c2937e6a06ed65d7f116efe19264w98.png") no-repeat*/
/*    top right;*/
/*  background-size: cover;*/
/*}*/
.con-teacher-details-teacher-card {
    position: absolute;
    bottom: 9px;
    right: 9px;
    width: calc(100% - 20px);
    height: 100px;
    background: url("../images/75c2937e6a06ed65d7f116efe19264w98.png") no-repeat top right;
    background-size: inherit;
}
.main-con-teacher-card-style-1 {
  border-radius: 15px;
  box-shadow: 0px 0px 10px 0px #eee;
  overflow: hidden;
  margin: 10px;
}
.con-teacher-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background-color: var(--sub-second-main-color-text);
  border-radius: 50%;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translate(-63%, 0px);
}
.con-teacher-lang > span {
  color: white;
  font-weight: 500;
  font-size: 15px;
  flex-direction: column;
  display: flex;
  align-items: center;
}
.con-teacher-lang > span span {
  font-size: 15px;
}
/*.main-con-teacher-details-teacher-card {*/
/*  width: calc(100% - 50px);*/
/*  position: absolute;*/
/*  bottom: 0px;*/
/*  right: 0px;*/
/*  height: calc(100% - 50px);*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  flex-direction: column;*/
/*}*/

.main-con-teacher-details-teacher-card {
    width: calc(100% - 50px);
    position: absolute;
    bottom: 0px;
    right: 0px;
    height: calc(100% - 25px);
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    padding: 0px 15px;
}
/*.main-con-teacher-details-teacher-card p {*/
/*  font-size: 20px;*/
/*  color: var(--main-color);*/
/*  font-weight: 600;*/
/*  margin-bottom: 10px;*/
/*  line-height: 1;*/
/*}*/
.main-con-teacher-details-teacher-card p {
    font-size: 17px;
    color: #0770a2;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1;
}
.main-con-teacher-details-teacher-card span {
  font-size: 15px;
  color: var(--second-main-color-text);
  font-weight: 600;
  margin-bottom: 0px;
  line-height: 1;
  font-family: "Merriweather", "WorkSans", Tahoma, Geneva, Verdana, sans-serif;
}
.main-con-banner-path {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*height: 250px;*/
  /*background: url("../images/banner.png") no-repeat center center;*/
  background-size: cover;
  padding:25px;
}
/*.main-con-banner-path h2 {*/
/*  font-size: 35px;*/
/*  color: #0454a2;*/
/*  font-weight: 600;*/
/*  font-family: "Merriweather", "WorkSans", Tahoma, Geneva, Verdana, sans-serif;*/
/*  margin-bottom: 0px;*/
/*  text-align: center;*/
/*}*/

.main-con-banner-path h2{
    font-size: 35px;
    color: #0454a2;
    font-weight: 600;
    /* font-family: "Merriweather", "WorkSans", Tahoma, Geneva, Verdana, sans-serif; */
    margin-bottom: 0px;
    text-align: center;
    border-bottom: 2px solid #0454a2;
    padding: 10px 0px;
    /*border-radius: 11px;*/
    font-size: 30px;
}
.follow{
    width: 90%;
    text-align: center;
    padding: 10px;
    background-color: #0093d8;
    margin-top: 10px;
    border-radius: 10px;
    color: #fff;
    font-weight: 800;
}
a.following {
    width: 90%;
    text-align: center;
    padding: 10px;
    margin-top: 10px;
    border-radius: 10px;
    color: #0093d8;
    font-weight: 400;
    border: 1px solid #0093d8;
}
.main-con-img-side-auth {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-con-img-side-auth img {
  width: 500px;
}
.main-con-form {
  background-color: white;
  padding: 50px 15px 20px;
  border-radius: 15px;
  margin: 40px auto;
  width: 100%;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.parent-main-con-form {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.main-con-form h2 {
  font-size: 30px;
  color: var(--main-color);
  font-weight: 600;
  font-family: "Merriweather", "WorkSans", Tahoma, Geneva, Verdana, sans-serif;
  margin-bottom: 50px;
}
.con-input-login-design {
  position: relative;
  border-bottom: 1px solid var(--second-main-color-text);
  display: flex;
  align-items: center;
  padding-bottom: 5px;
}
.con-input-login-design i {
  color: var(--sub-second-main-color-text);
  margin-right: 10px;
  font-size: 20px;
}
.con-input-login-design input {
  font-size: 15px;
  color: var(--second-main-color-text);
  font-weight: 500;
}
.with-error-con-input-login-design {
  width: 100%;
  max-width: 400px;
  margin-bottom: 30px;
}

.with-error-con-input-login-design > span {
  color: var(--sub-second-main-color-text);
  font-size: 13px;
  font-weight: 500;
}
.forget-password-link {
  width: 100%;
  max-width: 400px;
  font-size: 15px;
  font-weight: 600;
  color: var(--main-color);
}
.submit-button-form {
  width: 100%;
  padding: 13px 20px;
  background-color: var(--main-color);
  color: white;
  border-radius: 50px;
  max-width: 400px;
  margin-top: 30px;
  margin-bottom: 20px;
}
.con-last-message-form-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.con-last-message-form-auth p {
  font-size: 15px;
  font-weight: 500;
  margin: 5px 0px;
  color: var(--second-main-color-text);
}
.con-last-message-form-auth a {
  font-size: 16px;
  font-weight: 600;
  color: var(--main-color);
}
.con-register-input-design {
  width: 100%;
  max-width: 450px;
  position: relative;
}
.con-register-input-design label {
  display: block;
  font-size: 14px;
  color: var(--second-main-color-text);
  margin-bottom: 3px;
  width: 100%;
  font-weight: 600;
}
.con-register-input-design input {
  display: block;
  width: 100%;
  background-color: #eee;
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 15px;
  color: #a1a1a1;
  font-weight: 500;
}
.con-register-input-design textarea {
  display: block;
  width: 100%;
  background-color: #eee;
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 15px;
  color: #a1a1a1;
  font-weight: 500;
  border: none;
  outline: none;
}
.con-register-input-design select {
  display: block;
  width: 100%;
  background-color: #eee;
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 15px;
  color: #a1a1a1;
  font-weight: 500;
}
.con-register-input-design span {
  font-size: 13px;
  color: var(--sub-second-main-color-text);
  font-weight: 500;
  margin-top: 0px;
}
.con-register-input-design {
  margin-bottom: 10px;
}
.con-register-input-design i {
  position: absolute;
  top: 38px;
  font-size: 18px;
  color: #a1a1a1;
  right: 10px;
}
.main-con-upload-id label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: #eee;
  width: 100%;
  border-radius: 15px;
  border: 3px dashed var(--second-main-color-text);
  min-height: 150px;
}
.main-con-upload-id {
  width: 100%;
  max-width: 450px;
  margin-top: 20px;
}

.main-con-upload-id label span {
  font-size: 20px;
  color: #a1a1a1;
  margin-bottom: 15px;
  font-weight: 500;
}

.main-con-upload-id label i {
  font-size: 30px;
  color: var(--second-main-color-text);
}
.auth-msg {
  font-size: 15px;
  color: var(--second-main-color-text);
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
  max-width: 400px;
}
.con-input-login-design .flaticon-view {
  position: absolute;
  top: 5px;
  right: 10px;
  color: #a1a1a1;
  font-size: 17px;
}
.con-input-login-design .flaticon-hidden {
  position: absolute;
  top: 5px;
  right: 10px;
  color: #a1a1a1;
  font-size: 17px;
}
.main-con-inputs-opt {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  max-width: 450px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.main-con-inputs-opt input {
  width: 60px;
  height: 60px;
  background-color: #eee;
  text-align: center;
  font-size: 20px;
  line-height: 1;
  padding: 10px;
  border-radius: 15px;
  font-weight: 600;
}
.main-con-search-header {
  display: flex;
  align-items: center;
  background-color: #eee;
  border-radius: 15px;
  padding: 10px;
}
.main-con-search-header input {
  font-size: 15px;
  font-weight: 600;
  color: #a1a1a1;
}
.main-con-search-header i {
  font-size: 18px;
  color: #a1a1a1;
  margin-left: 10px;
}
.header-auth-success {
  padding: 10px 20px;
  background-color: white;
  box-shadow: 0px 0px 10px 0px #6c6c6c39;
}
.con-user-drop-down > button img {
  width: 45px;
  height: 45px;
  margin-left: 10px;
  border-radius: 45px;
  border: 1px solid #eee;
}
.main-con-header-links {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.main-con-header-links a {
  font-size: 15px;
  font-weight: 600;
  margin: 0px 20px;
  color: var(--main-color);
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  min-width: 80px;
  justify-content: center;
}
.main-con-header-links a.active::after {
  position: absolute;
  content: "";
  bottom: -10px;
  left: 0px;
  width: 100%;
  background-color: var(--sub-second-main-color-text);
  height: 3px;
  border-radius: 10px;
}
.main-con-header-links a.active {
  color: var(--sub-second-main-color-text);
}
.con-user-drop-down .dropdown-menu {
  border: none;
  border-radius: 15px;
  min-width: 250px;
}
.con-user-drop-deon-menu {
  display: flex;
  align-items: center;
  margin: 0px 10px;
  border-bottom: 1px solid #eee;
  padding: 10px 0px;
}
.con-user-drop-deon-menu img {
  width: 45px;
  height: 45px;
  border-radius: 45px;
  margin-right: 10px;
}
.con-user-drop-deon-menu a p {
  font-size: 15px;
  color: var(--main-color);
  font-weight: 600;
  margin-bottom: 5px;
  line-height: 1;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.con-user-drop-deon-menu a span {
  font-size: 13px;
  color: var(--second-main-color-text);
  font-weight: 500;
  margin-bottom: 0px;
  line-height: 1;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.con-user-drop-deon-menu a {
  flex-grow: 1;
  width: 50%;
}
.con-drop-down-one-item {
  display: flex;
  padding: 10px;
  align-items: center;
}
.con-drop-down-one-item i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #a1a1a1;
  background-color: var(--second-main-color);
  margin-right: 10px;
}

.con-drop-down-one-item span {
  font-size: 15px;
  color: var(--second-main-color-text);
  font-weight: 600;
}
.con-drop-down-one-item p {
  font-size: 15px;
  color: white;
  font-weight: 600;
  margin-bottom: 0px;
  background-color: var(--sub-second-main-color-text);
  padding: 5px 10px;
  border-radius: 5px;
  line-height: 1;
}
.con-noti-header {
  margin-left: 10px;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.con-noti-header i {
  font-size: 30px;
  color: var(--second-main-color-text);
}
.con-noti-header span {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--sub-second-main-color-text);
  border-radius: 50px;
  font-size: 10px;
  color: white;
  font-weight: 600;
  border: 3px solid white;
  cursor: pointer;
}
.main-con-banner-languages {
  position: relative;
}
.main-con-banner-languages::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #392c7d5e;
}
.main-con-banner-languages img {
  height: 250px;
  width: 100%;
}
.main-con-banner-languages h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  color: white;
  font-weight: 700;
  font-family: "Merriweather", "WorkSans", Tahoma, Geneva, Verdana, sans-serif;
}
.con-teacher-card-style-2 {
  background-color: white;
  padding: 10px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
  box-shadow: 0px 0px 10px 0px #eee;
  border: 1px solid #eee;
}
.con-teacher-card-style-2 img {
  width: 100%;
  /*height: 150px;*/
  border-radius: 15px;
  margin-bottom: 15px;
}
.con-teacher-card-style-2 p {
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 600;
  color: var(--main-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
  text-align: center;
}
.con-teacher-card-style-2 i {
  font-size: 13px;
  color: var(--second-main-color-text);
  margin-right: 10px;
}
.con-teacher-card-style-2 span {
  font-style: 13px;
  font-weight: 500;
  color: var(--second-main-color-text);
}
.main-con-teacher-of-subject {
  padding: 50px 0px;
  background-color: white;
}
.main-con-lecture-of-subject {
  padding: 50px 0px;
  min-height: 60vh;
}
.main-con-banner-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*background: url(../images/banner.png) no-repeat center center;*/
  background-size: cover;
  min-height: 250px;
  padding: 20px;
}
.con-search-box-search-page {
  background-color: #eee;
  padding: 5px 10px;
  border-radius: 15px;
  width: 100%;
  max-width: 700px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.con-search-box-search-page input {
  flex-grow: 1;
  width: 20%;
  font-size: 18px;
  font-weight: 600;
  color: var(--second-main-color-text);
  padding: 10px;
}
.con-search-box-search-page i {
  font-size: 20px;
  color: var(--second-main-color-text);
}
.main-con-banner-search > p {
  font-size: 20px;
  color: var(--main-color);
  font-weight: 600;
  margin-bottom: 0px;
  font-family: "Merriweather", "WorkSans", Tahoma, Geneva, Verdana, sans-serif;
}
.main-con-navigation-buttom-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 30px 0px;
}
.main-con-navigation-buttom-bar button {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main-color);
  border-radius: 50px;
  margin: 0px 10px;
}
.main-con-navigation-buttom-bar button:disabled {
  background-color: #eee;
  color: #a1a1a1;
}
.main-con-navigation-buttom-bar button:disabled i {
  color: #a1a1a1;
}
.main-con-navigation-buttom-bar button i {
  font-size: 15px;
  color: white;
}
.main-con-navigation-buttom-bar span {
  background-color: white;
  width: 45px;
  height: 45px;
  margin: 0px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 600;
  color: var(--second-main-color-text);
}
.main-con-navigation-buttom-bar span.active {
  background-color: var(--sub-second-main-color-text);
  color: white;
}

.main-con-table table {
  width: 100%;
}
.main-con-table {
  padding: 0px 15px 15px;
  overflow: auto;
}
/* .main-con-table table tr th {
  padding: 0px 10px;
} */
.circle-table-head {
  background-color: var(--main-color);
  width: 100%;
  padding: 10px;
  text-align: center;
  font-size: 18px;
  color: white;
  font-family: "Merriweather", "WorkSans", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 500;
  white-space: nowrap;
}
.main-con-my-orders {
  margin-top: 40px;
}
.main-con-wallet {
  background-color: white;
  padding: 15px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}
.main-con-wallet > div {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: var(--second-main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}
.main-con-wallet img {
  width: 100%;
  max-width: 130px;
}
.main-con-wallet p {
  font-size: 35px;
  color: var(--main-color);
  font-weight: 600;
}
.main-con-wallet p span {
  font-size: 20px;
  font-weight: 600;
  margin: 0px 5px;
}
.main-con-wallet button {
  width: 100%;
  border-radius: 15px;
  font-size: 15px;
  color: white;
  background-color: var(--main-color);
  margin-top: 20px;
  padding: 13px 20px;
  font-weight: 600;
}
.circle-table {
  background-color: #f1f2fd;
  padding: 10px;
  height: 100%;
  /* border-radius: 50px; */
  text-align: center;
  font-size: 14px;
  color: var(--second-main-color-text);
  font-weight: 600;
  /* margin: 5px 10px; */
  white-space: nowrap;
}
.circle-table-white {
  background-color: #fff;
  padding: 10px;
  height: 100%;
  /* border-radius: 50px; */
  text-align: center;
  font-size: 14px;
  color: var(--second-main-color-text);
  font-weight: 600;
  /* margin: 5px 10px; */
  white-space: nowrap;
}
.circle-table p {
  margin-bottom: 0px;
}
.main-con-progress-table {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-con-fill-of-pregress-table {
  flex-grow: 1;
  width: 20%;
  max-width: 150px;
  background-color: #eee;
  height: 10px;
  border-radius: 10px;
  margin: 0px 10px;
  position: relative;
  overflow: hidden;
}
.main-con-fill-of-pregress-table span {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--main-color);
  border-radius: 10px;
}
.main-con-lecture-details-right-block img {
  width: 100%;
  border-radius: 15px;
  margin-bottom: 30px;
}
.main-con-lecture-details-right-block ul {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0px;
  margin-bottom: 25px;
}
.main-con-lecture-details-right-block ul li {
  font-size: 15px;
  font-weight: 500;
  background-color: white;
  padding: 10px 30px;
  border-radius: 50px;
  margin-right: 20px;
  color: var(--second-main-color-text);
  margin-bottom: 5px;
  cursor: pointer;
}
.main-con-lecture-details-right-block ul li.active {
  background-color: var(--main-color);
  color: white;
}
.con-title-one-content {
  font-size: 25px;
  color: var(--main-color);
  font-weight: 700;
  margin-bottom: 35px;
  position: relative;
  width: fit-content;
}
/*.con-title-one-content::after {*/
/*  content: "";*/
/*  position: absolute;*/
/*  bottom: -10px;*/
/*  left: 0px;*/
/*  width: 70%;*/
/*  height: 5px;*/
/*  background-color: var(--sub-second-main-color-text);*/
/*  border-radius: 50px;*/
/*}*/
.main-con-description-lecture-details > p {
  font-size: 15px;
  color: var(--second-main-color-text);
  font-weight: 500;
  line-height: 30px;
}
.main-con-content-curculim-block-one {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 30px;
}
.main-con-content-curculim-block-one span {
  width: 45px;
  height: 45px;
  background-color: var(--second-main-color);
  color: #a1a1a1;
  border-radius: 50%;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin: 0px 10px;
}
.main-con-content-curculim-block-one i {
  width: 45px;
  height: 45px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--second-main-color-text);
  margin: 0px 10px;
  border-radius: 50%;
}
.main-con-content-curculim-block-one p {
  font-size: 15px;
  color: var(--second-main-color-text);
  font-weight: 500;
  background-color: white;
  border-radius: 15px;
  margin: 0px;
  height: 45px;
  display: flex;
  align-items: center;
  padding: 0px 15px;
  flex-grow: 1;
  width: 30%;
}
.main-con-content-curculim {
  position: relative;
}
.main-con-content-curculim .border-line {
  background-image: linear-gradient(#dfdddd 60%, rgba(255, 255, 255, 0) 0%);
  background-position: right;
  background-size: 7px 32px;
  background-repeat: repeat-y;
  position: absolute;
  top: 0px;
  height: 100%;
  z-index: -1;
  width: 10px;
  left: 26px;
}
.con-one-question-without-reply {
  display: flex;
  align-items: flex-start;
}
.con-one-question-without-reply img {
  width: 45px;
  height: 45px;
  border-radius: 15px;
  margin-right: 15px;
}
.con-one-question-without-reply .name {
  font-size: 15px;
  color: var(--main-color);
  font-weight: 600;
  margin-bottom: 0px;
}
.con-one-question-without-reply .dot {
  width: 8px;
  height: 8px;
  border-radius: 10px;
  margin: 0px 10px;
  background-color: #a1a1a1;
}
.con-one-question-without-reply .date {
  font-size: 11px;
  color: var(--second-main-color-text);
  font-weight: 500;
}
.con-content-of-one-question {
  background-color: white;
  padding: 10px;
  border-radius: 15px;
}
.con-content-of-one-question .question {
  margin-top: 10px;
  font-size: 13px;
  line-height: 30px;
  font-weight: 500;
  color: var(--second-main-color-text);
  margin-bottom: 0px;
}
.con-question-footer > div {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.con-question-footer > div p {
  font-size: 13px;
  color: #a1a1a1;
  font-weight: 500;
  margin-bottom: 0px;
}
.con-question-footer > div .dots {
  width: 5px;
  height: 5px;
  border-radius: 10px;
  margin: 0px 5px;
  background-color: #a1a1a1;
}

.con-question-footer > div .count {
  font-size: 13px;
  color: #a1a1a1;
  font-weight: 500;
  margin-bottom: 0px;
}
.main-con-one-question-with-reply {
  margin-bottom: 20px;
  position: relative;
}
.reply .con-one-question-without-reply {
  margin-top: 10px;
}
.con-one-question-without-reply {
  position: relative;
}
.main-con-one-question-with-reply.reply
  > .con-one-question-without-reply::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background-color: #a1a1a1;
  border-radius: 50px;
  left: 20px;
  top: 0px;
  z-index: -1;
}
.main-con-one-question-with-reply.reply
  > .con-one-question-without-reply::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 16px;
  width: 10px;
  height: 10px;
  border: 3px solid var(--second-main-color);
  background-color: #a1a1a1;
  border-radius: 50px;
}
.main-con-one-question-with-reply.reply
  > .con-one-question-without-reply
  .con-one-question-without-reply::after {
  content: "";
  position: absolute;
  top: 0px;
  left: -35px;
  width: 30px;
  height: 50px;
  border-left: 2px solid #a1a1a1;
  border-bottom: 2px solid #a1a1a1;
  border-radius: 0px 0px 0px 10px;
  transform: translate(0px, -50%);
  z-index: -1;
}
.main-con-of-lecture-details-page {
  padding: 50px 0px;
}
.main-con-lecture-details-side-bar {
  padding: 10px;
  border-radius: 15px;
  background-color: white;
}
.main-con-lecture-details-side-bar img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
}
.con-price-lecture-details h2 {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 0px;
  margin-right: 10px;
  color: var(--main-color);
}
.con-price-lecture-details .offer {
  font-size: 15px;
  color: var(--sub-second-main-color-text);
  font-weight: 500;
  text-decoration: line-through;
}
.con-price-lecture-details .offer-qnt {
  background-color: var(--sub-second-main-color-text);
  color: white;
  font-weight: 600;
  padding: 7px 10px;
  line-height: 1;
  border-radius: 10px;
  font-size: 13px;
}
.con-price-lecture-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.main-con-lecture-details-side-bar button {
  width: 100%;
  border-radius: 10px;
  border: 2px solid var(--main-color);
  padding: 10px 20px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 25px;
  background-color: var(--main-color);
}
.main-con-one-info-side-bar {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 5px 10px;
  border-bottom: 2px solid #eee;
  margin-bottom: 15px;
}
.main-con-one-info-side-bar:last-of-type {
  border-bottom: none;
  margin-bottom: 0px;
}
.main-con-one-info-side-bar i {
  font-size: 25px;
  margin-right: 10px;
  color: var(--second-main-color-text);
}
.main-con-one-info-side-bar p {
  font-size: 17px;
  flex-grow: 1;
  margin-bottom: 0px;
  font-weight: 600;
  color: var(--second-main-color-text);
}
.main-con-one-info-side-bar span {
  font-size: 15px;
  color: #a1a1a1;
  font-weight: 500;
}
.main-con-teacher-side-bar-teacher-page {
  padding: 10px;
  background-color: white;
  border-radius: 10px;
  margin-top: 20px;
}
.main-con-teacher-side-bar-teacher-page img {
  width: 100%;
  border-radius: 10px;
}
.main-con-teacher-side-bar-teacher-page p {
  text-align: center;
  font-size: 18px;
  color: var(--main-color);
  font-weight: 600;
  margin-bottom: 10px;
}
.main-con-teacher-side-bar-teacher-page .languages {
  font-size: 16px;
  color: var(--second-main-color-text);
  font-weight: 500;
  margin-bottom: 0px;
  display: block;
  text-align: center;
}
.main-con-teacher-side-bar-teacher-page .course-count {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: var(--sub-second-main-color-text);
  color: white;
  padding: 5px 10px;
  border-radius: 10px;
  font-weight: 500;
}
.main-con-select-pament-method {
  display: flex;
  align-items: center;
}
.con-one-method {
  /*min-height: 150px;*/
  background-color: white;
  padding: 15px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px 15px;
  justify-content: center;
  flex-grow: 1;
  cursor: pointer;
  border: 1px solid #0093d8;
}
.con-one-method img {
  width: 100%;
  max-width: 100px;
  margin-bottom: 15px;
  pointer-events: none;
}
.con-one-method p {
  font-size: 20px;
  color: var(--main-color);
  font-weight: 600;
  margin-bottom: 0px;
  pointer-events: none;
}
.main-con-payment-page {
  padding: 50px 0px;
}
.con-one-method.active {
  background-color: var(--sub-second-main-color-text);
  color: white;
}
.con-one-method.active p {
  color: white;
}
.con-one-payment-method-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0px;
}
.con-one-payment-method-content > img {
  width: 100px;
  margin-bottom: 20px;
}
.con-one-payment-method-content > button {
  width: 100%;
  max-width: 200px;
  font-size: 15px;
  color: white;
  font-weight: 600;
  background-color: var(--main-color);
  padding: 15px 20px;
  border-radius: 10px;
}
.con-copy-code button {
  background-color: white;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  border-radius: 10px;
  font-size: 15px;
  color: var(--second-main-color-text);
}
.con-copy-code button i {
  width: 40px;
  height: 30px;
  border-right: 2px solid #eee;
  margin-right: 10px;
}
.con-copy-code button span {
  font-size: 18px;
  color: var(--second-main-color-text);
  font-weight: 600;
}
.main-con-card-live {
  position: relative;
  margin: 0px auto 50px;
  width: fit-content;
}
.main-con-card-live img {
  width: 100%;
  max-width: 350px;
}
.main-con-card-live .number {
  position: absolute;
  top: 100px;
  left: 20px;
  font-size: 25px;
  color: #fff;
  font-weight: 500;
  word-spacing: 7px;
}
.main-con-card-live .name {
  position: absolute;
  top: 170px;
  left: 20px;
  font-size: 17px;
  color: #fff;
  font-weight: 400;
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.main-con-card-live .date {
  position: absolute;
  top: 140px;
  right: 25px;
  font-size: 20px;
  color: #fff;
  font-weight: 400;
}
.main-con-visa-form-inputs {
  margin-bottom: 15px;
}
.main-con-visa-form-inputs label {
  font-size: 14px;
  color: var(--second-main-color-text);
  font-weight: 600;
  margin-bottom: 3px;
  display: block;
  width: 100%;
}
.main-con-visa-form-inputs input {
  font-size: 15px;
  color: #a1a1a1;
  font-weight: 500;
  background-color: white;
  padding: 15px 20px;
  border-radius: 15px;
  display: block;
  width: 100%;
}
.main-con-visa-form-inputs span {
  font-size: 12px;
  color: var(--sub-second-main-color-text);
  font-weight: 500;
  margin-top: 5px;
  display: block;
  width: 100%;
}
.main-con-visa-form-inputs select {
  font-size: 15px;
  color: #a1a1a1;
  font-weight: 500;
  background-color: white;
  padding: 15px 20px;
  border-radius: 15px;
  display: block;
  width: 100%;
}
.main-con-expire-month-year {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.main-con-expire-month-year .main-con-visa-form-inputs {
  width: 45%;
}
.main-con-coupone-form {
  margin: 0px auto 50px;
  width: fit-content;
}
.main-con-coupone-form img {
  width: 200px;
}
.main-con-coupone-input {
  background-color: #fff;
  border-radius: 15px;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin: auto;
}
.main-con-coupone-input input {
  color: #a1a1a1;
  padding: 15px;
  font-size: 15px;
  font-weight: 500;
  width: 50%;
  flex-grow: 1;
  border: 1px solid;
  border-radius: 10px;
  margin: 0px 13px;
}
.main-con-coupone-input button {
  font-size: 15px;
  color: white;
  font-weight: 500;
  padding: 15px 20px;
  width: 20%;
  max-width: 200px;
  background-color: var(--main-color);
  border-radius: 15px;
  min-width: 100px;
}
.con-lecture-preview-payment-sidebar {
  background-color: white;
  padding: 15px;
  border-radius: 15px;
}
.con-lecture-preview-payment-sidebar > img {
  width: 100%;
  border-radius: 15px;
  margin-bottom: 15px;
}
.con-lecture-preview-payment-sidebar > p {
  font-size: 18px;
  color: var(--main-color);
  font-weight: 500;
  width: 90%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.payment-methods-title {
  font-size: 30px;
  color: var(--main-color);
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}
.main-con-lecture-purcahse {
  padding: 20px 0px;
  display: flex;
}
.con-lecture-side-bar-purchase {
  background-color: white;
  padding: 15px;
  border-radius: 15px;
  width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100vh - 40px);
  z-index: 1000;
}

.con-lecture-side-bar-purchase > img {
  width: 150px;
}
.con-lecture-side-bar-purchase > p {
  background-color: var(--second-main-color);
  padding: 13px;
  width: 100%;
  text-align: center;
  border-radius: 15px;
  font-size: 18px;
  font-weight: 600;
  color: var(--main-color);
}
.main-con-lecture-side-bar-all-contents {
  flex-grow: 1;
  height: 100%;
  overflow: auto;
  width: 100%;
}
.con-one-content-side-lecture-purcahse {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px 15px;
  margin-bottom: 10px;
  border-radius: 15px;
}
.con-one-content-side-lecture-purcahse.active {
  background-color: #392c7d24;
}
.con-one-content-side-lecture-purcahse i:not(.fa-check) {
  color: var(--second-main-color-text);
  font-size: 25px;
  margin-right: 15px;
}
.con-one-content-side-lecture-purcahse.active i:not(.fa-check) {
  color: var(--main-color);
}
.con-one-content-side-lecture-purcahse span {
  flex-grow: 1;
  width: 40%;
  color: var(--second-main-color-text);
  display: flex;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 600;
}
.con-one-content-side-lecture-purcahse.active span {
  color: var(--main-color);
}
.con-one-content-side-lecture-purcahse i.fa-check {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--second-main-color);
  font-size: 12px;
  color: transparent;
  border-radius: 5px;
}
.con-one-content-side-lecture-purcahse.passed i.fa-check {
  background-color: var(--main-color);
  color: white;
}
.con-one-content-side-lecture-purcahse.failed i.fa-check {
  background-color: var(--sub-second-main-color-text);
  color: white;
}
.con-teacher-of-lecture-side {
  display: flex;
  align-items: center;
  padding: 10px;
  width: 100%;
  border-radius: 15px;
  background-color: var(--second-main-color);
}
.con-teacher-of-lecture-side img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  margin-right: 10px;
}
.con-teacher-of-lecture-side p {
  font-size: 15px;
  color: var(--main-color);
  font-weight: 600;
  margin-bottom: 5px;
  line-height: 1;
}
.con-teacher-of-lecture-side span {
  font-size: 13px;
  color: var(--second-main-color-text);
  font-weight: 500;
  line-height: 1;
}
.section-side-bar {
  font-size: 18px;
  color: var(--second-main-color-text);
  font-weight: 600;
  margin-bottom: 5px;
  margin-top: 30px;
  padding: 0px 0px;
}
.main-con-lecture-side-bar-all-contents .section-side-bar:first-child {
  margin-top: 0px;
}
.main-con-content {
  width: 100%;
  min-height: calc(100vh - 100px);
}
.con-lecture-content-purchase {
  flex-grow: 1;
  width: calc(100% - 350px);
  padding: 0px 20px;
}
.main-con-content video {
  width: 100%;
  border-radius: 15px;
  margin-bottom: 0px;
  max-width: 1000px;
}
.con-navigation-lecture-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 20px;
}
.con-navigation-lecture-content i {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 15px;
  color: white;
  cursor: pointer;
}
.con-navigation-lecture-content i.flaticon-next {
  background-color: var(--main-color);
  color: white;
}
.con-navigation-lecture-content i.flaticon-previous {
  background-color: var(--main-color);
  color: white;
}
.con-lecture-side-bar-purchase hr {
  background-color: #747373;
  width: 100%;
}
.circle-container {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  width: 100%;
}
.circle-container .circle {
  margin: 20px;
}
/* configuration */
/* mixin */
/* placeholder */
.circle.percentage-51 .percentage-bar:after,
.circle.percentage-52 .percentage-bar:after,
.circle.percentage-53 .percentage-bar:after,
.circle.percentage-54 .percentage-bar:after,
.circle.percentage-55 .percentage-bar:after,
.circle.percentage-56 .percentage-bar:after,
.circle.percentage-57 .percentage-bar:after,
.circle.percentage-58 .percentage-bar:after,
.circle.percentage-59 .percentage-bar:after,
.circle.percentage-60 .percentage-bar:after,
.circle.percentage-61 .percentage-bar:after,
.circle.percentage-62 .percentage-bar:after,
.circle.percentage-63 .percentage-bar:after,
.circle.percentage-64 .percentage-bar:after,
.circle.percentage-65 .percentage-bar:after,
.circle.percentage-66 .percentage-bar:after,
.circle.percentage-67 .percentage-bar:after,
.circle.percentage-68 .percentage-bar:after,
.circle.percentage-69 .percentage-bar:after,
.circle.percentage-70 .percentage-bar:after,
.circle.percentage-71 .percentage-bar:after,
.circle.percentage-72 .percentage-bar:after,
.circle.percentage-73 .percentage-bar:after,
.circle.percentage-74 .percentage-bar:after,
.circle.percentage-75 .percentage-bar:after,
.circle.percentage-76 .percentage-bar:after,
.circle.percentage-77 .percentage-bar:after,
.circle.percentage-78 .percentage-bar:after,
.circle.percentage-79 .percentage-bar:after,
.circle.percentage-80 .percentage-bar:after,
.circle.percentage-81 .percentage-bar:after,
.circle.percentage-82 .percentage-bar:after,
.circle.percentage-83 .percentage-bar:after,
.circle.percentage-84 .percentage-bar:after,
.circle.percentage-85 .percentage-bar:after,
.circle.percentage-86 .percentage-bar:after,
.circle.percentage-87 .percentage-bar:after,
.circle.percentage-88 .percentage-bar:after,
.circle.percentage-89 .percentage-bar:after,
.circle.percentage-90 .percentage-bar:after,
.circle.percentage-91 .percentage-bar:after,
.circle.percentage-92 .percentage-bar:after,
.circle.percentage-93 .percentage-bar:after,
.circle.percentage-94 .percentage-bar:after,
.circle.percentage-95 .percentage-bar:after,
.circle.percentage-96 .percentage-bar:after,
.circle.percentage-97 .percentage-bar:after,
.circle.percentage-98 .percentage-bar:after,
.circle.percentage-99 .percentage-bar:after,
.circle.percentage-100 .percentage-bar:after {
  position: absolute;
  content: "";
  clip-path: inset(0 0 0 50%);
  transform: rotate(0deg);
  width: 60px;
  height: 60px;
  border: 7px solid var(--sub-second-main-color-text);
  background: transparent;
  border-radius: 100%;
  transition: width 0.2s ease-out, height 0.2s ease-out,
    border-width 0.2s ease-out;
}
.circle.percentage-51 .percentage-bar,
.circle.percentage-52 .percentage-bar,
.circle.percentage-53 .percentage-bar,
.circle.percentage-54 .percentage-bar,
.circle.percentage-55 .percentage-bar,
.circle.percentage-56 .percentage-bar,
.circle.percentage-57 .percentage-bar,
.circle.percentage-58 .percentage-bar,
.circle.percentage-59 .percentage-bar,
.circle.percentage-60 .percentage-bar,
.circle.percentage-61 .percentage-bar,
.circle.percentage-62 .percentage-bar,
.circle.percentage-63 .percentage-bar,
.circle.percentage-64 .percentage-bar,
.circle.percentage-65 .percentage-bar,
.circle.percentage-66 .percentage-bar,
.circle.percentage-67 .percentage-bar,
.circle.percentage-68 .percentage-bar,
.circle.percentage-69 .percentage-bar,
.circle.percentage-70 .percentage-bar,
.circle.percentage-71 .percentage-bar,
.circle.percentage-72 .percentage-bar,
.circle.percentage-73 .percentage-bar,
.circle.percentage-74 .percentage-bar,
.circle.percentage-75 .percentage-bar,
.circle.percentage-76 .percentage-bar,
.circle.percentage-77 .percentage-bar,
.circle.percentage-78 .percentage-bar,
.circle.percentage-79 .percentage-bar,
.circle.percentage-80 .percentage-bar,
.circle.percentage-81 .percentage-bar,
.circle.percentage-82 .percentage-bar,
.circle.percentage-83 .percentage-bar,
.circle.percentage-84 .percentage-bar,
.circle.percentage-85 .percentage-bar,
.circle.percentage-86 .percentage-bar,
.circle.percentage-87 .percentage-bar,
.circle.percentage-88 .percentage-bar,
.circle.percentage-89 .percentage-bar,
.circle.percentage-90 .percentage-bar,
.circle.percentage-91 .percentage-bar,
.circle.percentage-92 .percentage-bar,
.circle.percentage-93 .percentage-bar,
.circle.percentage-94 .percentage-bar,
.circle.percentage-95 .percentage-bar,
.circle.percentage-96 .percentage-bar,
.circle.percentage-97 .percentage-bar,
.circle.percentage-98 .percentage-bar,
.circle.percentage-99 .percentage-bar,
.circle.percentage-100 .percentage-bar {
  clip-path: none;
}
/* percentage circle style */
.circle {
  width: 60px;
  height: 60px;
  cursor: default;
}
.circle span {
  position: absolute;
  display: block;
  vertical-align: middle;
  width: 60px;
  height: 60px;
  text-align: center;
  color: var(--sub-second-main-color-text);
  line-height: 60px;
  font-size: 15px;
  transition: font-size 0.2s ease-out;
  font-weight: 500;
}
.circle:before {
  position: absolute;
  content: "";
  background-color: transparent;
  width: 60px;
  height: 60px;
  border: 7px solid #ffc5cf;
  background: transparent;
  border-radius: 100%;
  transition: width 0.2s ease-out, height 0.2s ease-out,
    border-width 0.2s ease-out;
}
.circle .percentage-bar {
  width: 60px;
  height: 60px;
  position: absolute;
  clip-path: inset(0 0 0 50%);
}
.circle .percentage-bar:before {
  position: absolute;
  content: "";
  clip-path: inset(0 50% 0 0);
  transform: rotate(0deg);
  width: 60px;
  height: 60px;
  border: 7px solid var(--sub-second-main-color-text);
  background: transparent;
  border-radius: 100%;
  transition: width 0.2s ease-out, height 0.2s ease-out,
    border-width 0.2s ease-out;
}
.circle:hover:before {
  width: 60px;
  height: 60px;
  border-width: 7px;
}
.circle:hover span {
  font-size: 15px;
}
.circle:hover .percentage-bar:before,
.circle:hover .percentage-bar:after {
  width: 60px;
  height: 60px;
  border-width: 7px;
}
.circle.percentage-1 .percentage-bar:before {
  transform: rotate(3.6deg);
}
.circle.percentage-2 .percentage-bar:before {
  transform: rotate(7.2deg);
}
.circle.percentage-3 .percentage-bar:before {
  transform: rotate(10.8deg);
}
.circle.percentage-4 .percentage-bar:before {
  transform: rotate(14.4deg);
}
.circle.percentage-5 .percentage-bar:before {
  transform: rotate(18deg);
}
.circle.percentage-6 .percentage-bar:before {
  transform: rotate(21.6deg);
}
.circle.percentage-7 .percentage-bar:before {
  transform: rotate(25.2deg);
}
.circle.percentage-8 .percentage-bar:before {
  transform: rotate(28.8deg);
}
.circle.percentage-9 .percentage-bar:before {
  transform: rotate(32.4deg);
}
.circle.percentage-10 .percentage-bar:before {
  transform: rotate(36deg);
}
.circle.percentage-11 .percentage-bar:before {
  transform: rotate(39.6deg);
}
.circle.percentage-12 .percentage-bar:before {
  transform: rotate(43.2deg);
}
.circle.percentage-13 .percentage-bar:before {
  transform: rotate(46.8deg);
}
.circle.percentage-14 .percentage-bar:before {
  transform: rotate(50.4deg);
}
.circle.percentage-15 .percentage-bar:before {
  transform: rotate(54deg);
}
.circle.percentage-16 .percentage-bar:before {
  transform: rotate(57.6deg);
}
.circle.percentage-17 .percentage-bar:before {
  transform: rotate(61.2deg);
}
.circle.percentage-18 .percentage-bar:before {
  transform: rotate(64.8deg);
}
.circle.percentage-19 .percentage-bar:before {
  transform: rotate(68.4deg);
}
.circle.percentage-20 .percentage-bar:before {
  transform: rotate(72deg);
}
.circle.percentage-21 .percentage-bar:before {
  transform: rotate(75.6deg);
}
.circle.percentage-22 .percentage-bar:before {
  transform: rotate(79.2deg);
}
.circle.percentage-23 .percentage-bar:before {
  transform: rotate(82.8deg);
}
.circle.percentage-24 .percentage-bar:before {
  transform: rotate(86.4deg);
}
.circle.percentage-25 .percentage-bar:before {
  transform: rotate(90deg);
}
.circle.percentage-26 .percentage-bar:before {
  transform: rotate(93.6deg);
}
.circle.percentage-27 .percentage-bar:before {
  transform: rotate(97.2deg);
}
.circle.percentage-28 .percentage-bar:before {
  transform: rotate(100.8deg);
}
.circle.percentage-29 .percentage-bar:before {
  transform: rotate(104.4deg);
}
.circle.percentage-30 .percentage-bar:before {
  transform: rotate(108deg);
}
.circle.percentage-31 .percentage-bar:before {
  transform: rotate(111.6deg);
}
.circle.percentage-32 .percentage-bar:before {
  transform: rotate(115.2deg);
}
.circle.percentage-33 .percentage-bar:before {
  transform: rotate(118.8deg);
}
.circle.percentage-34 .percentage-bar:before {
  transform: rotate(122.4deg);
}
.circle.percentage-35 .percentage-bar:before {
  transform: rotate(126deg);
}
.circle.percentage-36 .percentage-bar:before {
  transform: rotate(129.6deg);
}
.circle.percentage-37 .percentage-bar:before {
  transform: rotate(133.2deg);
}
.circle.percentage-38 .percentage-bar:before {
  transform: rotate(136.8deg);
}
.circle.percentage-39 .percentage-bar:before {
  transform: rotate(140.4deg);
}
.circle.percentage-40 .percentage-bar:before {
  transform: rotate(144deg);
}
.circle.percentage-41 .percentage-bar:before {
  transform: rotate(147.6deg);
}
.circle.percentage-42 .percentage-bar:before {
  transform: rotate(151.2deg);
}
.circle.percentage-43 .percentage-bar:before {
  transform: rotate(154.8deg);
}
.circle.percentage-44 .percentage-bar:before {
  transform: rotate(158.4deg);
}
.circle.percentage-45 .percentage-bar:before {
  transform: rotate(162deg);
}
.circle.percentage-46 .percentage-bar:before {
  transform: rotate(165.6deg);
}
.circle.percentage-47 .percentage-bar:before {
  transform: rotate(169.2deg);
}
.circle.percentage-48 .percentage-bar:before {
  transform: rotate(172.8deg);
}
.circle.percentage-49 .percentage-bar:before {
  transform: rotate(176.4deg);
}
.circle.percentage-50 .percentage-bar:before {
  transform: rotate(180deg);
}
.circle.percentage-51 .percentage-bar:before {
  transform: rotate(183.6deg);
}
.circle.percentage-52 .percentage-bar:before {
  transform: rotate(187.2deg);
}
.circle.percentage-53 .percentage-bar:before {
  transform: rotate(190.8deg);
}
.circle.percentage-54 .percentage-bar:before {
  transform: rotate(194.4deg);
}
.circle.percentage-55 .percentage-bar:before {
  transform: rotate(198deg);
}
.circle.percentage-56 .percentage-bar:before {
  transform: rotate(201.6deg);
}
.circle.percentage-57 .percentage-bar:before {
  transform: rotate(205.2deg);
}
.circle.percentage-58 .percentage-bar:before {
  transform: rotate(208.8deg);
}
.circle.percentage-59 .percentage-bar:before {
  transform: rotate(212.4deg);
}
.circle.percentage-60 .percentage-bar:before {
  transform: rotate(216deg);
}
.circle.percentage-61 .percentage-bar:before {
  transform: rotate(219.6deg);
}
.circle.percentage-62 .percentage-bar:before {
  transform: rotate(223.2deg);
}
.circle.percentage-63 .percentage-bar:before {
  transform: rotate(226.8deg);
}
.circle.percentage-64 .percentage-bar:before {
  transform: rotate(230.4deg);
}
.circle.percentage-65 .percentage-bar:before {
  transform: rotate(234deg);
}
.circle.percentage-66 .percentage-bar:before {
  transform: rotate(237.6deg);
}
.circle.percentage-67 .percentage-bar:before {
  transform: rotate(241.2deg);
}
.circle.percentage-68 .percentage-bar:before {
  transform: rotate(244.8deg);
}
.circle.percentage-69 .percentage-bar:before {
  transform: rotate(248.4deg);
}
.circle.percentage-70 .percentage-bar:before {
  transform: rotate(252deg);
}
.circle.percentage-71 .percentage-bar:before {
  transform: rotate(255.6deg);
}
.circle.percentage-72 .percentage-bar:before {
  transform: rotate(259.2deg);
}
.circle.percentage-73 .percentage-bar:before {
  transform: rotate(262.8deg);
}
.circle.percentage-74 .percentage-bar:before {
  transform: rotate(266.4deg);
}
.circle.percentage-75 .percentage-bar:before {
  transform: rotate(270deg);
}
.circle.percentage-76 .percentage-bar:before {
  transform: rotate(273.6deg);
}
.circle.percentage-77 .percentage-bar:before {
  transform: rotate(277.2deg);
}
.circle.percentage-78 .percentage-bar:before {
  transform: rotate(280.8deg);
}
.circle.percentage-79 .percentage-bar:before {
  transform: rotate(284.4deg);
}
.circle.percentage-80 .percentage-bar:before {
  transform: rotate(288deg);
}
.circle.percentage-81 .percentage-bar:before {
  transform: rotate(291.6deg);
}
.circle.percentage-82 .percentage-bar:before {
  transform: rotate(295.2deg);
}
.circle.percentage-83 .percentage-bar:before {
  transform: rotate(298.8deg);
}
.circle.percentage-84 .percentage-bar:before {
  transform: rotate(302.4deg);
}
.circle.percentage-85 .percentage-bar:before {
  transform: rotate(306deg);
}
.circle.percentage-86 .percentage-bar:before {
  transform: rotate(309.6deg);
}
.circle.percentage-87 .percentage-bar:before {
  transform: rotate(313.2deg);
}
.circle.percentage-88 .percentage-bar:before {
  transform: rotate(316.8deg);
}
.circle.percentage-89 .percentage-bar:before {
  transform: rotate(320.4deg);
}
.circle.percentage-90 .percentage-bar:before {
  transform: rotate(324deg);
}
.circle.percentage-91 .percentage-bar:before {
  transform: rotate(327.6deg);
}
.circle.percentage-92 .percentage-bar:before {
  transform: rotate(331.2deg);
}
.circle.percentage-93 .percentage-bar:before {
  transform: rotate(334.8deg);
}
.circle.percentage-94 .percentage-bar:before {
  transform: rotate(338.4deg);
}
.circle.percentage-95 .percentage-bar:before {
  transform: rotate(342deg);
}
.circle.percentage-96 .percentage-bar:before {
  transform: rotate(345.6deg);
}
.circle.percentage-97 .percentage-bar:before {
  transform: rotate(349.2deg);
}
.circle.percentage-98 .percentage-bar:before {
  transform: rotate(352.8deg);
}
.circle.percentage-99 .percentage-bar:before {
  transform: rotate(356.4deg);
}
.circle.percentage-100 .percentage-bar:before {
  transform: rotate(360deg);
}
.con-header-lecture-content {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.con-header-lecture-content h2 {
  font-size: 25px;
  color: var(--main-color);
  font-weight: 500;
  text-align: center;
  flex-grow: 1;
  width: 40%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.main-con-start-exam {
  width: 100%;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-con-start-exam button {
  background-color: var(--main-color);
  color: white;
  padding: 15px 30px;
  border-radius: 15px;
  font-size: 15px;
  font-weight: 500;
  width: 100%;
  max-width: 200px;
}
:root {
  --smaller: 0.75;
}

/* * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
} */

/* html,
body {
  height: 100%;
  margin: 0;
}
.container {
  color: #333;
  margin: 0 auto;
} */

/* h1 {
  font-weight: normal;
  letter-spacing: 0.125rem;
  text-transform: uppercase;
}

li {
  display: inline-block;
  font-size: 1.5em;
  list-style-type: none;
  padding: 1em;
  text-transform: uppercase;
}

li span {
  display: block;
  font-size: 3.5rem;
} */

.emoji {
  display: none;
  padding: 1rem;
}

.emoji span {
  font-size: 4rem;
  padding: 0 0.5rem;
}

/* @media all and (max-width: 768px) {
  h1 {
    font-size: calc(1.5rem * var(--smaller));
  }

  li {
    font-size: calc(1.125rem * var(--smaller));
  }

  li span {
    font-size: calc(3.375rem * var(--smaller));
  }
} */
.exam-tit {
  font-size: 25px;
  color: var(--main-color);
  font-weight: 600;
  text-align: center;
  margin-bottom: 30px;
}
.main-con-one-question {
  width: 100%;
  background-color: white;
  padding: 15px;
  margin: 15px auto;
  border-radius: 15px;
  max-width: 800px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.main-con-one-question > span {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  background-color: #eee;
  border-radius: 50%;
  font-size: 20px;
  color: var(--second-main-color-text);
  font-weight: 500;
}
.main-con-one-question > p {
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--main-color);
  text-align: center;
  font-weight: 500;
}
.main-con-one-question > img {
  width: 100%;
  border-radius: 15px;
  max-width: 300px;
}
.con-one-answer {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 10px 0px;
}
.main-con-answers {
  width: 100%;
  margin-top: 20px;
}
.con-one-answer span {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 10px;
  background-color: var(--second-main-color);
  font-weight: 500;
  color: var(--second-main-color-text);
}
.con-one-answer p {
  font-size: 15px;
  margin-bottom: 0px;
  font-weight: 700;
  width: 50%;
  flex-grow: 1;
  text-align: start;
  color: var(--second-main-color-text);
  background-color: var(--second-main-color);
  padding: 10px;
  border-radius: 10px;
}
.con-essay {
  width: 100%;
  margin-top: 20px;
}
.con-essay textarea {
  width: 100%;
  background-color: var(--second-main-color);
  color: var(--second-main-color-text);
  font-size: 15px;
  font-weight: 500;
  border: none;
  outline: none;
  border-radius: 15px;
}
.con-one-answer img {
  width: 100%;
  height: 45px;
  border-radius: 10px;
}
.con-one-answer.selected span {
  background-color: var(--main-color);
  color: white;
}
.con-one-answer.selected > div {
  position: relative;
}
.con-one-answer.selected > div {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.con-one-answer.selected p {
  position: relative;
  overflow: hidden;
}

.main-con-exam-questions {
  min-height: calc(100vh - 50px);
}
.con-finsh-exam-button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.con-finsh-exam-button button {
  background-color: var(--main-color);
  color: white;
  padding: 15px 20px;
  font-size: 15px;
  font-weight: 500;
  width: 100%;
  max-width: 200px;
  border-radius: 15px;
  margin: 20px 0px;
}
.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
}

.single-chart {
  width: 120px;
  justify-content: space-around;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circular-chart {
  display: block;
  margin: 10px auto;
  max-width: 80%;
  max-height: 250px;
  background-color: white;
  border-radius: 50%;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: 3.8;
}

.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.orange .circle {
  stroke: #ff9f00;
}

.circular-chart.green .circle {
  stroke: #4cc790;
}

.circular-chart.blue .circle {
  stroke: #3c9ee5;
}

.percentage {
  fill: #666;
  font-family: sans-serif;
  font-size: 0.5em;
  text-anchor: middle;
}
.main-con-lecture-exam-result-card {
  position: relative;
  background-color: white;
  margin: 75px auto 0px;
  width: 100%;
  border-radius: 15px;
  max-width: 500px;
  padding: 75px 15px 15px;
}
.con-one-info-exam-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  width: 100%;
  padding: 15px;
}
.con-one-info-exam-result:last-of-type {
  border-bottom: none;
}
.con-one-info-exam-result p {
  font-size: 16px;
  color: var(--main-color);
  font-weight: 500;
  margin-bottom: 0px;
}

.con-one-info-exam-result span {
  font-size: 13px;
  color: var(--second-main-color-text);
  font-weight: 500;
}
.con-one-info-exam-result span.status {
  font-weight: 600;
  font-size: 18px;
}
.main-con-lecture-exam-result-card.fail .circular-chart .circle {
  stroke: var(--sub-second-main-color-text);
}
.main-con-lecture-exam-result-card.success .circular-chart .circle {
  stroke: #3da35d;
}
.main-con-lecture-exam-result-card.fail .con-one-info-exam-result span.status {
  color: var(--sub-second-main-color-text);
}
.main-con-lecture-exam-result-card.success
  .con-one-info-exam-result
  span.status {
  color: #3da35d;
}
.main-con-re-exam {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.main-con-re-exam button {
  background-color: transparent;
  border: 2px solid var(--main-color);
  width: 100%;
  max-width: 200px;
  padding: 12px 10px;
  border-radius: 15px;
  font-size: 15px;
  font-weight: 600;
  color: var(--main-color);
}
.main-con-one-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 20px;
}
.main-con-one-file img {
  width: 100px;
  margin-bottom: 15px;
}
.main-con-one-file > p {
  font-size: 15px;
  color: var(--main-color);
  font-weight: 500;
  margin-bottom: 10px;
}
.main-con-one-file > span {
  font-size: 13px;
  margin-bottom: 20px;
  color: var(--second-main-color-text);
  font-weight: 500;
}
.main-con-one-file button {
  background-color: var(--main-color);
  color: white;
  padding: 13px 20px;
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
}
.mobile-header {
  position: fixed;
  bottom: 0px;
  width: 100%;
  display: flex;
  align-items: center;
  left: 0px;
  justify-content: space-between;
  background-color: white;
  z-index: 1000;
  padding: 10px;
}
.main-con-one-icon-header img {
  width: 35px;
  height: 35px;
  border-radius: 10px;
  border: 1px solid #eee;
}
.main-con-one-icon-header.active i {
  color: var(--main-color);
}
.main-con-one-icon-header.active span {
  color: var(--main-color);
}
.main-con-one-icon-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-con-one-icon-header i {
  font-size: 20px;
  color: var(--second-main-color-text);
  margin-bottom: 0px;
}
.main-con-one-icon-header span {
  font-size: 12px;
  color: var(--second-main-color-text);
  font-weight: 500;
}
.main-con-one-file button i {
  font-size: 15px;
  color: white;
  margin: 0px 10px;
}
.main-con-profile-page-img-stu {
  background-color: white;
  padding: 15px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 350px;
  margin: auto;
  margin-bottom: 15px;
}
.main-con-profile-page-img-stu .pro-img {
  width: 100%;
  height: 200px;
  border-radius: 15px;
  margin-bottom: 10px;
}
.main-con-profile-page-img-stu .bar-code {
  width: 150px;
  margin-top: 15px;
}
.main-con-profile-page-img-stu p {
  font-size: 20px;
  font-weight: 600;
  color: var(--main-color);
  margin-bottom: 5px;
}
.main-con-profile-page-img-stu i {
  color: var(--second-main-color-text);
  margin: 0px 5px;
  font-size: 15px;
}
.main-con-profile-page-img-stu span {
  color: var(--second-main-color-text);
  font-size: 15px;
  font-weight: 500;
}
.main-con-links-profile {
  background-color: white;
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  border-radius: 15px;
  padding: 10px;
}
.main-con-links-profile i:not(.flaticon-next) {
  font-size: 20px;
  /* color: var(--main-color); */
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eeeeee;
  border-radius: 50%;
}
.main-con-links-profile p {
  margin-bottom: 0px;
  flex-grow: 1;
  margin: 0px 10px;
  font-size: 18px;
  font-weight: 600;
  /* color: var(--main-color); */
}
.main-con-links-profile.active i:not(.flaticon-next) {
  color: var(--main-color);
}
.main-con-links-profile.active p {
  color: var(--main-color);
}
.main-con-links-profile .flaticon-next {
  font-size: 12px;
  color: var(--second-main-color-text);
}
.main-con-profile-page-img-stu a {
  width: 100%;
  padding: 15px;
  border-radius: 15px;
  background-color: var(--main-color);
  color: #fff;
  text-align: center;
  margin-top: 20px;
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.main-con-profile-page-img-stu label {
  width: 100%;
  padding: 15px;
  border-radius: 15px;
  background-color: var(--main-color);
  color: #fff;
  text-align: center;
  margin-top: 20px;
  display: block;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  justify-content: center;
}
.main-con-profile-page-img-stu label i {
  font-size: 25px;
  color: white;

  margin: 0px 10px;
}
.main-con-progress-persentage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 10px;
  border-radius: 15px;
  margin-bottom: 10px;
}
.main-con-progress-persentage > div > p {
  font-size: 17px;
  color: var(--main-color);
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1;
}
.main-con-progress-persentage > div > span {
  font-size: 14px;
  color: var(--second-main-color-text);
  font-weight: 500;
  margin-bottom: 0px;
}
.main-con-teacher-my-teachers {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 10px;
  border-radius: 15px;
  margin-bottom: 10px;
}
.main-con-teacher-my-teachers img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.main-con-teacher-my-teachers div a {
  font-size: 15px;
  color: var(--main-color);
  margin-bottom: 10px;
  line-height: 1;
  font-weight: 600;
  display: block;
}
.h2-separator {
  font-size: 20px;
  color: var(--second-main-color-text);
  font-weight: 600;
  margin: 20px 0px;
}
.main-con-form-edit-profile form {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background-color: white;
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 30px;
}
.main-con-form-edit-profile form h2 {
  position: relative;
  width: fit-content;
  font-size: 25px;
  font-weight: 600;
  color: var(--main-color);
  margin-bottom: 30px;
}
.main-con-form-edit-profile form h2::after {
  content: "";
  position: absolute;
  left: 0%;
  top: 50%;
  width: 75px;
  height: 3px;
  background-color: var(--main-color);
  transform: translate(calc(-100% - 20px), -50%);
}
.main-con-form-edit-profile form h2::before {
  content: "";
  position: absolute;
  right: 0px;
  top: 50%;
  width: 75px;
  height: 3px;
  background-color: var(--main-color);
  transform: translate(calc(100% + 20px), -50%);
}
.con-input-form-edit-profile {
  width: 100%;
  margin-bottom: 20px;
}
.con-input-form-edit-profile label {
  display: block;
  width: 100%;
  font-size: 15px;
  color: var(--second-main-color-text);
  font-weight: 500;
  margin-bottom: 5px;
}
.con-input-form-edit-profile input {
  width: 100%;
  background-color: #eee;
  border-radius: 10px;
  padding: 10px;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 2px;
}
.main-con-change-profile-image label {
  width: 100%;
  min-height: 150px;
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 2px dashed #a1a1a1;
  border-radius: 15px;
  justify-content: center;
}
.main-con-change-profile-image label p {
  font-size: 17px;
  color: var(--second-main-color-text);
  font-weight: 600;
  margin-bottom: 0px;
}
.main-con-change-profile-image label i {
  font-size: 30px;
  color: var(--second-main-color-text);
  margin-bottom: 10px;
}
.main-con-change-profile-image {
  width: 100%;
}
.con-header-lecture-content i {
  width: 40px;
  height: 40px;
  background-color: var(--main-color);
  border-radius: 15px;
  margin: 0px 10px;
  color: white;
  font-size: 15px;
  position: relative;
  z-index: 1022;
}

.con-input-form-edit-profile span {
  font-size: 11px;
  color: #ff4667;
  font-weight: 500;
}
.main-con-teacher-my-teachers span {
  font-size: 13px;
  color: var(--second-main-color-text);
  font-weight: 500;
  line-height: 1;
  display: block;
}
.main-con-form-edit-profile form button {
  padding: 10px 15px;
  font-size: 15px;
  color: white;
  background-color: var(--main-color);
  border-radius: 13px;
  margin-top: 20px;
  min-width: 150px;
}
.main-con-one-icon-contact {
  position: fixed;
  bottom: 15px;
  left: 15px;
}
.main-con-one-icon-contact a {
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-con-one-icon-contact i {
  font-size: 30px;
}
.form-contanct-us {
  width: 100%;
}
.form-contanct-us textarea {
  width: 100%;
  background-color: #eee;
  border: none;
  outline: none;
  padding: 15px;
  font-size: 15px;
  color: var(--second-main-color-text);
  border-radius: 15px;
  font-weight: 500;
}
.main-con-table-card {
  background-color: white;
  border-radius: 15px;
  margin-top: 40px;
}
.main-con-table-card.hide .main-con-table {
  display: none;
}
.main-con-total-of-exam {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  cursor: pointer;
  /* border-bottom: 1px solid #eee;
  margin-bottom: 15px; */
}
.main-con-total-of-exam p {
  font-size: 20px;
  color: var(--main-color);
  font-weight: 500;
  margin-bottom: 0px;
  margin: 0px 10px;
}
.main-con-total-of-exam i {
  font-size: 15px;
  color: var(--second-main-color-text);
  transform: rotate(90deg);
}
.main-con-table-card.hide .main-con-total-of-exam i {
  transform: rotate(0deg);
}
.form-contanct-us button {
  width: 100%;
  max-width: 150px;
  font-size: 15px;
  color: white;
  background-color: #392c7d;
  border-radius: 13px;
  padding: 10px 20px;
}
.form-contanct-us .BTN_CLOSE {
  background-color: var(--second-main-color-text);
}
.main-con-one-file-page {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 10px;
}
.main-con-one-file-page img {
  width: 100px;
}
.main-con-one-file-page p {
  font-size: 15px;
  color: var(--second-main-color-text);
  font-weight: 600;
  margin-bottom: 10px;
}
.main-con-one-file-page button {
  background-color: var(--main-color);
  color: white;
  padding: 13px 20px;
  width: 100%;
  max-width: 150px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
}
.main-con-files-page {
  margin-top: 40px;
}
.main-con-one-file-page button i {
  font-size: 15px;
  color: white;
  margin: 0px 10px;
}
.main-con-tabs-exam {
  display: flex;
  align-items: center;
  background-color: white;
  width: 100%;
  max-width: 600px;
  border-radius: 15px;
  padding: 0px;
  margin: 0px auto;
  margin-bottom: 15px;
  list-style: none;
  display: none;
  position: sticky;
  top: 10px;
  z-index: 1000;
}
.main-con-tabs-exam li {
  flex-grow: 1;
  width: 50%;
  padding: 15px;
  text-align: center;
  font-size: 15px;
  color: var(--second-main-color-text);
  font-weight: 600;
  border-radius: 15px;
}
.main-con-lecture-purcahse.open-half .con-lecture-side-bar-purchase > img {
  width: 50px;
}
.timer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 30px auto;
  max-width: 700px;
  list-style: none;
}
.timer li {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  color: var(--main-color);
  font-weight: 600;
  letter-spacing: 2px;
}
.main-con-one-question .degree {
  position: absolute;
  top: 10px;
  width: auto;
  border-radius: 5px;
  background-color: var(--second-main-color);
  left: 10px;
  padding: 5px 5px;
  height: auto;
  font-size: 15px;
  color: var(--second-main-color-text);
}
.main-con-one-question.success > span {
  background-color: #3da35d;
  color: white;
}
.main-con-one-question.success .degree {
  background-color: #3da35d;
  color: white;
}
.main-con-one-question .correct-ans span {
  display: none;
}
.main-con-one-question .wrong-ans span {
  display: none;
}
.con-one-answer i {
  display: none;
}
.correct-ans i {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 10px;
  background-color: var(--second-main-color);
  color: var(--second-main-color-text);
}
.wrong-ans i {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 10px;
  background-color: var(--second-main-color);
  color: var(--second-main-color-text);
}

.con-one-answer p {
  position: relative;
  overflow: hidden;
}

.con-one-answer > div {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.con-one-answer.correct-ans > div::after {
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #3da35d24;
}
.con-one-answer.wrong-ans > div::after {
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(57, 44, 125, 0.474);
}
.main-con-one-question.fail .degree {
  background-color: var(--sub-second-main-color-text);
  color: white;
}
.main-con-one-question.fail > span {
  background-color: var(--sub-second-main-color-text);
  color: white;
}
.con-one-answer.correct-ans p::after {
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #3da35d24;
}
.main-con-contact-teacher-numbers {
  background-color: white;
  padding: 15px;
  display: flex;
  align-items: center;
  flex-direction: column;
  border-radius: 15px;
  margin-top: 20px;
}
.main-con-contact-teacher-numbers h2 {
  font-size: 20px;
  color: var(--second-main-color-text);
  font-weight: 600;
  margin-bottom: 20px;
}
.main-con-contact-teacher-numbers > div {
  width: 100%;
  margin-bottom: 10px;
}
.main-con-contact-teacher-numbers i {
  color: #4cc790;
  font-size: 20px;
  width: 45px;
  height: 45px;
  background-color: var(--second-main-color);
  border-radius: 15px;
}
.main-con-contact-teacher-numbers span {
  font-size: 18px;
  font-weight: 600;
  margin: 0px 10px;
  color: var(--main-color);
}

.con-one-answer.wrong-ans p::after {
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #ff466724;
}
.con-one-answer.selected p::after {
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(57, 44, 125, 0.474);
}
.con-one-answer.selected > div::after {
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(57, 44, 125, 0.474);
}
.main-con-one-question .correct-ans i {
  background-color: #3da35d;
  color: white;
}
.main-con-one-question .wrong-ans i {
  background-color: var(--sub-second-main-color-text);
  color: white;
}
.main-con-message-status {
  min-height: 80vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.main-con-message-status img {
  width: 100%;
  max-width: 550px;
}
.main-con-message-status h2 {
  font-size: 35px;
  color: var(--main-color);
  margin-bottom: 10px;
  font-weight: 600;
}
.main-con-success-image-send-message {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.main-con-success-image-send-message img {
  width: 200px;
  margin-bottom: 30px;
}
.main-con-success-image-send-message p {
  font-size: 17px;
  color: var(--second-main-color-text);
  margin-bottom: 15px;
  font-weight: 500;
}
.main-con-success-image-send-message h2 {
  font-size: 35px;
  color: var(--main-color);
  margin-bottom: 0px;
  font-weight: 600;
}
.main-con-write-question {
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 10px;
  margin: 20px 0px;
  padding: 5px;
}
.con-top-lecture-card {
  position: relative;
}
.con-top-lecture-card span {
  position: absolute;
  top: 20px;
  left: 50%;
  padding: 5px 15px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 50px;
  border: 5px solid var(--second-main-color);
  transform: translate(-50%, -50%);
  color: white;
}
.con-top-lecture-card span.expoired {
  background-color: #ff4667;
}
.con-top-lecture-card span.mine {
  background-color: #3da35d;
}
.main-con-message-status p {
  font-size: 20px;
  color: var(--second-main-color-text);
  margin-bottom: 0px;
  font-weight: 500;
}
.main-con-one-question {
  position: relative;
}
.con-comic-image img {
  width: 100%;
  margin-bottom: 20px;
  border-radius: 15px;
  max-height: 400px;
  max-width: 300px;
  margin: 0px auto 20px;
}
.con-comic-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.timer li span {
  font-size: 45px;
  color: var(--sub-second-main-color-text);
  font-weight: 600;
  margin-bottom: 0px;
}
.main-con-tabs-exam li.active {
  background-color: var(--main-color);
  color: white;
}
.main-con-bubble-sheet {
  height: 100vh;
  position: sticky;
  top: 10px;
  background-color: white;
  padding: 15px;
  border-radius: 15px;
}
.con-one-bubble {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  background-color: var(--second-main-color);
  padding: 10px;
  border-radius: 10px;
  margin: 15px 0px;
}
.main-con-book-card-details {
  display: flex;
  align-items: center;
  background-color: white;
  padding: 10px;
  border-radius: 15px;
  margin-bottom: 10px;
  justify-content: space-between;
}
.main-con-book-card-details img {
  width: 100px;
  height: 100px;
  border-radius: 15px;
}
.main-con-book-book {
  margin-top: 30px;
}
.book-details span {
  padding: 5px;
  border-radius: 10px;
  background-color: #eee;
  color: var(--second-main-color-text);
  font-size: 13px;
  font-weight: 500;
  margin: 5px;
}
.book-details p {
  font-size: 15px;
  font-weight: 600;
  color: var(--main-color);
  margin-bottom: 10px;
  white-space: nowrap;
  width: 90%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.main-con-form-buy-book {
  background-color: white;
  padding: 15px;
  border-radius: 15px;
}
.book-details {
  width: 30%;
  flex-grow: 1;
}
.book-quantity {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.book-quantity p {
  font-size: 25px;
  color: var(--sub-second-main-color-text);
  font-weight: 700;
  margin-bottom: 10px;
}
.book-quantity div {
  display: flex;
  align-items: center;
}
.book-quantity div span {
  font-size: 13px;
  color: var(--second-main-color-text);
  font-weight: 600;
}
.book-quantity div select {
  background-color: #eee;
  color: var(--second-main-color-text);
  border-radius: 10px;
  padding: 10px;
  font-size: 15px;
  font-weight: 500;
  margin: 0px 10px;
}
.main-con-sammry-books {
  background-color: white;
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 15px;
  position: sticky;
  top: 10px;
}
.con-one-details-summary-books {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 10px;
  border-bottom: 1px solid #eee;
}
.con-one-details-summary-books p {
  font-size: 15px;
  color: var(--second-main-color-text);
  font-weight: 500;
  margin-bottom: 0px;
}
.main-con-total-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 10px;
}
.main-con-sammry-books h2 {
  font-size: 20px;
  color: var(--second-main-color-text);
  font-weight: 600;
  margin-bottom: 15px;
  position: relative;
  margin: 0px auto 15px;
  position: relative;
  width: fit-content;
}
.main-con-sammry-books h2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0px;
  background-color: var(--second-main-color-text);
  width: 50px;
  transform: translate(calc(-100% - 10px), -50%);
  height: 2px;
}

.main-con-sammry-books h2::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0px;
  background-color: var(--second-main-color-text);
  width: 50px;
  transform: translate(calc(100% + 10px), -50%);
  height: 2px;
}

.main-con-form-buy-book h2 {
  font-size: 25px;
  color: var(--second-main-color-text);
  font-weight: 600;
  margin-bottom: 25px;
  position: relative;
  margin: 0px auto 25px;
  position: relative;
  width: fit-content;
}
.main-con-form-buy-book h2::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0px;
  background-color: var(--second-main-color-text);
  width: 50px;
  transform: translate(calc(-100% - 10px), -50%);
  height: 2px;
}
.main-con-form-buy-book button {
  background-color: var(--main-color);
  color: white;
  font-size: 15px;
  padding: 10px 35px;
  font-weight: 600;
  border-radius: 10px;
}
.main-con-form-buy-book button:disabled {
  background-color: #eee;
  color: #a9a4b1;
}
.main-con-form-buy-book h2::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0px;
  background-color: var(--second-main-color-text);
  width: 50px;
  transform: translate(calc(100% + 10px), -50%);
  height: 2px;
}
.main-con-total-summary p {
  font-size: 18px;
  color: var(--second-main-color-text);
  font-weight: 500;
  margin-bottom: 0px;
}
.main-con-total-summary span {
  font-size: 15px;
  color: var(--second-main-color-text);
  font-weight: 600;
}
.con-one-details-summary-books span {
  font-size: 13px;
  color: var(--second-main-color-text);
  font-weight: 600;
}
.main-con-write-question input {
  padding: 15px;
  flex-grow: 1;
  width: 30%;
  font-size: 15px;
  color: var(--second-main-color-text);
}
.main-con-write-question button i {
  font-size: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--main-color);
  color: white;
}
.main-con-write-question label i {
  font-size: 25px;
  color: var(--second-main-color-text);
  margin: 0px 20px;
}
.con-one-bubble p {
  font-size: 18px;
  color: var(--main-color);
  font-weight: 600;
  margin-bottom: 0px;
}
.con-one-bubble span {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 50%;
  font-size: 15px;
  color: var(--second-main-color-text);
  font-weight: 600;
}
.con-one-bubble span.selected {
  background-color: #392c7d;
  color: white;
}
.con-teacher-image-noti {
  position: relative;
}
.con-teacher-image-noti img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.con-teacher-image-noti i {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: -5px;
  right: -5px;
  background-color: var(--second-main-color);
  border-radius: 50%;
  font-size: 12px;
}
.noti-teacher-name {
  font-size: 15px;
  color: var(--main-color);
  font-weight: 600;
  margin-bottom: 0px;
}
.dot-noti {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #eee;
  margin: 0px 5px;
}
.noti-drop-down-menu .dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 10px;
}
.date-noti {
  font-size: 11px;
  color: var(--second-main-color-text);
  font-weight: 500;
}
.noti-content {
  font-size: 13px;
  color: var(--second-main-color-text);
  font-weight: 500;
  margin-bottom: 0px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unread {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--main-color);
  margin: 0px 5px;
}
.main-con-lecture-purcahse.open-half .con-lecture-side-bar-purchase {
  width: 80px;
}
.main-con-lecture-purcahse.open-half .section-side-bar {
  display: none;
}
.main-con-lecture-purcahse.open-half
  .con-one-content-side-lecture-purcahse
  span {
  display: none;
}
.main-con-lecture-purcahse.open-half
  .con-one-content-side-lecture-purcahse
  i.fa-check {
  display: none;
}
.main-con-lecture-purcahse.open-half .con-teacher-of-lecture-side p {
  display: none;
}
.main-con-lecture-purcahse.open-half .con-teacher-of-lecture-side span {
  display: none;
}
.main-con-lecture-purcahse.open-half .con-teacher-of-lecture-side img {
  width: 30px;
  height: 30px;
}
@media (max-width: 992px) {
  .logo-website {
    width: 110px;
  }
  .main-con-book-card-details {
    flex-direction: column;
  }
  .book-quantity {
    margin-top: 15px;
  }
  .main-con-book-card-details img {
    width: 100%;
    height: auto;
    max-width: 250px;
  }
  .book-details {
    width: 100%;
    margin-top: 20px;
    max-width: 250px;
  }
  .sign-up {
    font-size: 12px;
    padding: 10px;
    min-width: auto;
    max-width: none;
    white-space: nowrap;
  }
  .header-auth {
    padding: 10px 0px;
  }
  .main-con-banner-path {
    height: 100px;
  }
  .main-con-banner-path h2 {
    font-size: 25px;
  }
  .main-con-form h2 {
    font-size: 25px;
    margin-bottom: 30px;
  }
  .with-error-con-input-login-design > span {
    font-size: 13px;
  }
  .forget-password-link {
    font-size: 13px;
  }
  .submit-button-form {
    font-size: 15px;
    padding: 11px 20px;
  }
  .con-last-message-form-auth a {
    font-size: 14px;
  }
  .con-last-message-form-auth p {
    font-size: 13px;
  }
  .con-register-input-design span {
    font-size: 13px;
  }
  .main-con-upload-id label span {
    font-size: 18px;
  }
  .main-con-upload-id label i {
    font-size: 25px;
  }
  .main-con-form {
    padding: 30px 15px 15px;
  }
  .auth-msg {
    font-size: 13px;
  }
  .main-con-inputs-opt input {
    width: 48px;
    height: 48px;
  }
  .border-bottom-arrow::after {
    border-right-width: 500px;
  }
  .border-bottom-arrow::before {
    border-left-width: 500px;
  }
  .sign-in {
    font-size: 12px;
    min-width: auto;
    padding: 10px 15px;
    margin: 0px 5px;
  }
  .main-banner-img-with-text {
    height: auto;
    min-height: 350px;
    flex-direction: column-reverse;
    align-items: center;
    padding: 40px;
  }
  .main-banner-img-with-text > img {
    margin: 0px;
    margin-bottom: 20px;
    width: 200px !important;
  }
  .banner-text h2 {
    font-size: 25px;
    text-align: center;
    margin-bottom: 10px;
    line-height: 45px;
  }
  .banner-text a {
    display: block;
    width: fit-content;
    margin: 0px auto 80px;
    min-width: 250px;
    text-align: center;
    font-size: 15px;
  }
  .banner-text p {
    font-size: 13px;
    text-align: center;
  }
  .lecture-card-price-lessons-count span {
    font-size: 11px;
  }
  .instractor-details-lecture-card p {
    margin-bottom: 0px;
  }
  .con-title-of-home-block-page h2 {
    font-size: 25px;
    text-align: center;
  }
  .banner-img-only {
    height: 350px;
  }
  .main-con-home-banner {
    min-height: auto;
  }
  .con-title-of-home-block-page p {
    font-size: 13px;
  }
  .main-con-courses {
    padding: 20px 0px;
  }
  .course-home .owl-nav {
    left: 0px;
    width: calc(100%);
  }
  .course-home .owl-nav button {
    margin: 0px !important;
  }
  .main-con-course-box {
    margin: 0px;
    box-shadow: none;
    border: 1px solid #eee;
  }
  .course-home .owl-nav i {
    width: 30px;
    height: 30px;
  }
  .con-course-count-course-box span {
    font-size: 12px;
  }
  .con-course-count-course-box {
    padding: 7px 10px;
  }
  .con-details-course-box p {
    font-size: 16px;
  }
  .con-teacher-count-course-box i {
    font-size: 13px;
  }
  .con-teacher-count-course-box span {
    font-size: 13px;
  }
  .con-img-of-course img {
    height: 120px;
  }

  .course-home .owl-dots {
    margin-top: 10px;
  }
  .main-con-block-lecture-home {
    padding: 20px 0px 100px;
  }
  .con-bottom-card-lecture > p {
    font-size: 15px;
  }
  .con-publish-at-lecture-card span {
    font-size: 11px;
  }
  .con-publish-at-lecture-card i {
    font-size: 11px;
  }
  .con-instractore-lecture-card img {
    width: 35px !important;
    height: 35px !important;
    border-radius: 50%;
    margin-right: 5px;
  }
  .lecture-card-price-lessons-count h2 {
    font-size: 18px;
  }
  .con-top-lecture-card {
    height: 170px;
  }
  .con-top-lecture-card img {
    height: 170px;
  }
  .con-teacher-details-teacher-card {
    height: 130px;
    /* background: url(../images/75c2937�Kw98.png) no-repeat top left; */
    background-position: top left;
  }
  .con-teacher-lang {
    width: 50px;
    height: 50px;
    top: 10px;
  }
  .main-con-teacher-details-teacher-card p {
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 90%;
    overflow: hidden;
  }
  .main-con-teacher-details-teacher-card {
    width: calc(100% - 30px);
  }
  .main-con-teacher-details-teacher-card span {
    font-size: 12px;
  }
  .main-con-teacher-card-style-1 img {
    height: 200px;
  }
  .con-teacher-lang > span span {
    font-size: 12px;
  }
  .wave {
    bottom: 0px;
  }
  .main-con-search-header {
    display: none;
  }
  .con-user-drop-down > button img {
    width: 40px;
    height: 40px;
  }
  .header-auth-success {
    padding: 10px 0px;
  }
  .main-con-group-teachers-home {
    padding: 50px 0px;
  }
  body {
    padding-bottom: 50px;
  }
  .main-con-lecture-details-right-block ul li {
    margin-right: 10px;
    font-size: 13px;
    padding: 10px 20px;
  }
  .main-con-lecture-details-side-bar {
    margin-bottom: 20px;
  }
  .main-con-one-info-side-bar p {
    font-size: 15px;
  }
  .main-con-one-info-side-bar i {
    font-size: 20px;
  }
  .main-con-one-info-side-bar span {
    font-size: 13px;
  }
  .con-title-one-content {
    font-size: 25px;
  }
  .main-con-teacher-side-bar-teacher-page {
    margin-top: 20px;
  }
  .con-lecture-preview-payment-sidebar {
    margin-bottom: 20px;
  }
  .main-con-select-pament-method {
    /*flex-wrap: wrap;*/
  }
  .con-one-method {
    width: 100%;
    margin-bottom: 10px;
    margin: 0px 4px;
  }
  .con-one-method p{
      font-size:15px;
  }
  .con-lecture-side-bar-purchase {
    position: absolute;
    top: 10px;
    left: -350px;
  }
  .con-lecture-content-purchase {
    padding: 0px;
  }
  .con-header-lecture-content h2 {
    font-size: 20px;
  }
  .circle:before,
  .circle,
  .circle .percentage-bar:before,
  .circle.percentage-51 .percentage-bar:after,
  .circle.percentage-52 .percentage-bar:after,
  .circle.percentage-53 .percentage-bar:after,
  .circle.percentage-54 .percentage-bar:after,
  .circle.percentage-55 .percentage-bar:after,
  .circle.percentage-56 .percentage-bar:after,
  .circle.percentage-57 .percentage-bar:after,
  .circle.percentage-58 .percentage-bar:after,
  .circle.percentage-59 .percentage-bar:after,
  .circle.percentage-60 .percentage-bar:after,
  .circle.percentage-61 .percentage-bar:after,
  .circle.percentage-62 .percentage-bar:after,
  .circle.percentage-63 .percentage-bar:after,
  .circle.percentage-64 .percentage-bar:after,
  .circle.percentage-65 .percentage-bar:after,
  .circle.percentage-66 .percentage-bar:after,
  .circle.percentage-67 .percentage-bar:after,
  .circle.percentage-68 .percentage-bar:after,
  .circle.percentage-69 .percentage-bar:after,
  .circle.percentage-70 .percentage-bar:after,
  .circle.percentage-71 .percentage-bar:after,
  .circle.percentage-72 .percentage-bar:after,
  .circle.percentage-73 .percentage-bar:after,
  .circle.percentage-74 .percentage-bar:after,
  .circle.percentage-75 .percentage-bar:after,
  .circle.percentage-76 .percentage-bar:after,
  .circle.percentage-77 .percentage-bar:after,
  .circle.percentage-78 .percentage-bar:after,
  .circle.percentage-79 .percentage-bar:after,
  .circle.percentage-80 .percentage-bar:after,
  .circle.percentage-81 .percentage-bar:after,
  .circle.percentage-82 .percentage-bar:after,
  .circle.percentage-83 .percentage-bar:after,
  .circle.percentage-84 .percentage-bar:after,
  .circle.percentage-85 .percentage-bar:after,
  .circle.percentage-86 .percentage-bar:after,
  .circle.percentage-87 .percentage-bar:after,
  .circle.percentage-88 .percentage-bar:after,
  .circle.percentage-89 .percentage-bar:after,
  .circle.percentage-90 .percentage-bar:after,
  .circle.percentage-91 .percentage-bar:after,
  .circle.percentage-92 .percentage-bar:after,
  .circle.percentage-93 .percentage-bar:after,
  .circle.percentage-94 .percentage-bar:after,
  .circle.percentage-95 .percentage-bar:after,
  .circle.percentage-96 .percentage-bar:after,
  .circle.percentage-97 .percentage-bar:after,
  .circle.percentage-98 .percentage-bar:after,
  .circle.percentage-99 .percentage-bar:after,
  .circle.percentage-100 .percentage-bar:after,
  .circle span {
    width: 50px;
    height: 50px;
  }
  .circle span {
    line-height: 50px;
  }
  .circle {
    margin-left: 10px;
  }
  .con-navigation-lecture-content i {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }
  .main-con-profile-page-img-stu {
    max-width: none;
  }
  .main-con-tabs-exam {
    display: flex;
  }
  .main-con-lecture-purcahse.open-mobile .con-lecture-side-bar-purchase {
    height: 100vh;
  }
  .con-lecture-side-bar-purchase {
    width: 300px;
  }
  .main-con-lecture-purcahse.open-mobile .con-lecture-side-bar-purchase {
    position: absolute;
    left: 0px;
    top: 0px;
  }
}
@media (max-width: 767px) {
  .border-bottom-arrow::after {
    border-right-width: 350px;
  }
  .border-bottom-arrow::before {
    border-left-width: 350px;
  }
}