/* General Style Start */

/*
        ******    *******
          **      ** * **
          **  **  **   **
*/

html {
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff;
}

/*SCROLLBAR CSS START*/
/* ::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #fcdd57;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-orange);
  border-radius: 4px;
} */

/*SCROLLBAR CSS END*/
.form-select:focus,
.uneditable-input:focus,
input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="datetime"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
textarea:focus {
  box-shadow: none !important;
  outline: 0 !important;
}

.row {
  margin: 0px;
}

* {
  font-family: "Expletus Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (min-width: 1200px) {
  .container {
    width: 1238px;
  }
}

@media (min-width: 1400px) {
  .container {
    width: 1338px;
  }
}

.slick-slider {
  overflow: hidden;
}

:root {
  --main_color: #221444;
  --second_color: #ffde5a;
  --black_color: #292929;

  --lessonOfflineRedColor: #dc1219;
  --lessonOnlineGreenColor: #1ac42d;
}

/* General Style End */
/* menu start */
.menu_outher {
  width: 100%;
  min-height: 10px;
  background-color: var(--main_color);
  background-size: 100px;
  background-position: center;
  padding: 15px 0;
  position: fixed;
  top: 0;
  z-index: 999;
}

.menu_inner {
  width: 100%;
  min-height: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.logoAndText {
  display: flex;
  align-items: center;
  gap: 5px;
}

.logo_menu {
  width: 200px;
  height: auto;
  object-fit: contain;
  position: absolute;
  z-index: 10;
  left: calc(50% - 100px);
  top: -37px;
}

.logo_text {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}

.menuRightEndIcons {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.menu_items {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 15px;
}

.white_menu_cls {
  color: #fff !important;
  font-size: 14px;
  text-decoration: none !important;
}

.white_menu_cls:hover {
  transform: translateY(-5px);
  transition: ease 0.5s all;
}

.menu_searchAnd_button {
  width: 100%;
  min-height: 10px;
  background: rgb(0, 0, 0);
  background: linear-gradient(97deg,
      rgba(0, 0, 0, 1) 3%,
      rgba(43, 29, 76, 1) 40%);
  padding: 15px 0;
}

.searchLeeft_For_menu {
  flex: 1;
  height: 50px;
  display: flex;
  gap: 10px;
  border: 2px solid #fff;
  border-radius: 5px;
  align-items: center;
}

.search_Input {
  flex: 1;
  background: none;
  border: none !important;
  padding: 0 15px;
  font-size: 20px;
  color: #fff;
  height: 100%;
  outline: 0 !important;
}

.search_Input::placeholder {
  color: #f5f5f5;
}

.btn_search {
  width: 130px;
  height: 55px;
  background: linear-gradient(97deg,
      rgba(255, 180, 0, 1) 23%,
      rgba(255, 222, 90, 1) 77%);
  margin-top: auto;
  margin-right: -10px;
  border: none !important;
  border-radius: 5px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  font-size: 18px;
  font-weight: 700;
  color: var(--main_color);
}

.rightSeachedMenu {
  flex: 2;
  display: flex;
  justify-content: flex-end;
  gap: 30px;
}

.loginAndRegister_button {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  color: #333 !important;
  text-decoration: none !important;
}

.buttonCircle_menu {
  width: 40px;
  height: 40px;
  background: linear-gradient(97deg,
      rgba(255, 180, 0, 1) 23%,
      rgba(255, 222, 90, 1) 77%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 21px;
}

.loginAndRegister_button>span {
  font-size: 13px;
  color: #fff !important;
  text-decoration: none !important;
  text-align: center;
}

.loginAndRegister_button:hover .buttonCircle_menu {
  transform: translateX(-5px);
  transition: ease 0.5s all;
}

/* menu end */
/* login start */

.login_outher {
  width: 100%;
  min-height: 90vh;
  background-image: url("../images/system/bgPattern.png");
  background-size: 400px;
  padding: 30px 0;
  padding-top: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login_left_menu {
  width: 100%;
  min-height: 10px;
  background-color: var(--main_color);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("../images/system/splashTop.png");
  background-size: cover;
  padding: 15px;
}

.login_left_menu img {
  width: 80%;
  height: auto;
  object-fit: contain;
}

.login_left_menu>h1 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--second_color);
  font-size: 32px;
}

.login_left_menu>span {
  color: #dadada;
  font-size: 18px;
}

.left_buttons_LoginPage {
  display: flex;
  gap: 15px;
  width: 100%;
}

.active_button_Register {
  flex: 1;
  height: 50px;
  background: linear-gradient(97deg,
      rgba(255, 180, 0, 1) 23%,
      rgba(255, 222, 90, 1) 77%);
  border: none !important;
  border-radius: 5px;
  outline: 0 !important;
  font-size: 20px;
  color: var(--main_color);
  font-weight: 700;
}

.pasive_button_loginPage {
  flex: 1;
  height: 50px;
  background-color: #333;
  border: none !important;
  border-radius: 5px;
  outline: 0 !important;
  font-size: 20px;
  color: #fff;
  font-weight: 600;
}

.pasive_button_loginPage:hover {
  background: linear-gradient(97deg,
      rgba(255, 180, 0, 1) 23%,
      rgba(255, 222, 90, 1) 77%);
  transition: ease 0.5s all;
}

.right_loginPage {
  width: 100%;
  min-height: 120px;
  background-color: #fff;
  border-radius: 10px;
  padding: 35px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border: 1px solid #dadada;
}

.inputAndName_loginPage {
  width: 100%;
  min-height: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.inputAndName_loginPage>span {
  color: var(--main_color);
  font-size: 15px;
}

.inputAndName_loginPage input {
  width: 100%;
  height: 55px;
  outline: 0 !important;
  color: #333;
  padding: 0 15px;
  border-radius: 5px;
  border: none;
  border: 1.5px solid var(--main_color);
}

.inputAndName_loginPage input::placeholder {
  color: #dadada;
}

.end_loginButton {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.end_loginButton>a {
  color: #333 !important;
  text-decoration: none !important;
  font-size: 15px;
}

.bottomrowsButtons {
  width: 100%;
  min-height: 10px;
  display: flex;
  gap: 15px;
}

.button_logins {
  flex: 1;
  height: 55px;
  background: linear-gradient(97deg,
      rgba(255, 180, 0, 1) 23%,
      rgba(255, 222, 90, 1) 77%);
  border: none !important;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  color: #333 !important;
  font-weight: 500;
  font-size: 16px;
  border: 1px solid #dadada;
  text-decoration: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loginCustom {
  width: 250px;
  height: 55px;
  border: 1px solid #dadada;
  font-size: 16px;
}

.center_loginRighr {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  gap: 5px;
}

.center_loginRighr a {
  color: #333 !important;
  text-decoration: none !important;
  font-weight: 700;
}

/* login end */
/* index start */
.sliderMains {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 0 !important;
  margin-top: 80px;
}

.sliderMains .slick-dots {
  bottom: 15px !important;
}

.sliderMains .slick-dots li button:before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: var(--main_color);
  border-radius: 50%;
}

.images_slidernde {
  width: 100%;
  height: auto;
}

.slider_bottomAdj {
  width: 100%;
  display: flex;
  padding: 10px 0;
}

.in_slider_bottom_Adj {
  flex: 1;
  border-right: 1px solid var(--main_color);
  height: 80px;
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: center;
}

.in_slider_bottom_Adj i {
  font-size: 42px;
  color: var(--main_color);
}

.in_slider_bottom_Adj span {
  font-size: 16px;
  color: var(--main_color);
  font-weight: 700;
  text-align: center;
}

.in_slider_bottom_Adj:last-child {
  border-right: none !important;
}

.indexTopCard {
  width: 100%;
  height: 250px;
}

.indexTopCard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.btn_menu_right {
  color: #fff !important;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none !important;
  font-weight: 700;
  border-radius: 5px;
  font-size: 30px;
  padding: 10px;
  background-color: #9190937a;
  border: none !important;
}

.fixedOpenMenu {
  width: 100%;
  height: 100vh;
  background-color: #00000094;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999999;
  display: none;
  justify-content: flex-end;
  transition: fade 0.5 all;
}

.logo_bottom_menu {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.textbottomLogo {
  color: #333;
  font-size: 20px;
  font-weight: 700;
}

.end_Logo_menus {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  position: absolute;
  bottom: 10px;
  left: 0;
}

.right_menuOpen {
  width: 500px;
  height: 100%;
  background-color: #fff;
  padding: 25px;
  background-image: url("../images/system/bgPattern.png");
  background-size: 250px;
  position: relative;
}

.SeacrhMenu_inLeftMenu {
  width: 100%;
  height: 55px;
  background-color: #fff;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  border-radius: 5px;
  display: flex;
}

.searched_leftMenu {
  background: linear-gradient(97deg,
      rgba(255, 180, 0, 1) 23%,
      rgba(255, 222, 90, 1) 77%);
  width: 55px;
  height: 55px;
  border: none;
  font-size: 24px;
  color: #fff;
  border-radius: 5px;
}

.SeacrhMenu_inLeftMenu input {
  flex: 1;
  border: none;
  padding: 0 15px;
  letter-spacing: 1px;
  outline: 0 !important;
}

.menu_all_buttons {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.buttonTop_left_menu {
  width: 100%;
  min-height: 10px;
  display: flex;
  gap: 10px;
}

.button_loginRegister {
  flex: 1;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--main_color);
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
}

.timesIcons {
  width: 70px;
  height: 70px;
  background-color: #36206d;
  border-radius: 0 0 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 36px;
}

/* index end */
/* footer start */
.footer_manin {
  width: 100%;
  background-color: var(--main_color);
  min-height: 10px;
  padding: 15px;
}

.footerManin_cls {
  width: 100%;
  min-height: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footerManin_cls img {
  width: 150px;
  height: auto;
}

.text_ovnerText {
  color: #fff;
  font-size: 22px;
}

.footerManin_cls p {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.footerManin_cls span,
.footer_icons_text span {
  margin: 0 !important;
  padding: 0 !important;
  color: #f5f5f5;
  font-size: 14px;
  font-weight: 400;
}

.footer_icons_text {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
}

.circleIcons_foo {
  width: 30px;
  height: 30px;
  background-color: #ffffff6b;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer_contact_inputMain {
  width: 100%;
  min-height: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.footer_contact_inputMain input {
  width: 100%;
  height: 45px;
  background-color: #ffffff6b;
  color: #fff;
  padding: 0 10px;
  letter-spacing: 1px;
  font-size: 15px;
  border: none !important;
  outline: 0;
  border-radius: 5px;
}

.footer_contact_inputMain textarea {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 100px;
  background-color: #ffffff6b;
  color: #fff;
  padding: 10px;
  letter-spacing: 1px;
  font-size: 15px;
  border: none !important;
  outline: 0;
  border-radius: 5px;
}

.footerSubmit_btn {
  width: 100%;
  height: 45px;
  background: linear-gradient(97deg,
      rgba(255, 180, 0, 1) 23%,
      rgba(255, 222, 90, 1) 77%);
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 700;
}

.newIconMenus {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #dadada !important;
  text-decoration: none !important;
  border-radius: 5px;
  font-size: 22px;
  border: none !important;
  background: none !important;
  position: relative;
}

.footer_right_end {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  height: 100%;
}

.buttonFoooterNew {
  width: 200px;
  height: 50px;
  background: none !important;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 14px;
  position: relative;
  margin-bottom: 30px;
}

.buttonFoooterNew:before {
  content: "Bizimle İletişime Geçin";
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  position: absolute;
  left: 10px;
  top: 10px;
  background-color: var(--main_color);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: ease 0.5s all;
}

.footer_right_end span {
  color: #fff;
  font-size: 14px;
}

.buttonFoooterNew:hover:before {
  left: 0;
  top: 0;
}

/* footer end */
/* index start */
.lineTopIndexIntroduce {
  background-color: #f5f5f5;
  padding: 30px;
}

.index_topDetailLine {
  width: 100%;
  display: flex;
  gap: 15px;
}

.colorsTextAlert {
  width: 250px;
  min-height: 10px;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: cente;
  background-color: var(--main_color);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  font-size: 15px;
}

.spanOne_Adj {
  flex: 1;
  color: #333;
  font-size: 16px;
}

.index_product_card {
  margin-top: 25px;
  width: 100%;
  min-height: 300px;
  background-color: #fff;
  border: 1px solid #dadada;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: ease 0.5s all;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.image_productCard_top {
  color: #333 !important;
  text-decoration: none !important;
  position: relative;
}

.abs_İcons_text {
  width: 120px;
  height: 35px;
  background-color: #d0ffd0;
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  font-weight: 600;
}

.image_productCard_top img {
  width: 100%;
  height: 250px;
  border-radius: 5px;
  object-fit: cover;
  transition: ease 0.5s all;
}

.index_product_card:hover .image_productCard_top img {
  content: url("../images/system/hav2.webp");
  transition: ease 0.5s all;
}

.productedCard_detail {
  flex: 1;
  width: 100%;
  padding: 15px 0;
  padding-bottom: 0 !important;
}

.productedCard_detail p {
  margin: 0 !important;
  font-weight: 400;
  font-size: 16px;
}

.line_bottom_tro {
  width: 100%;
  height: 2px;
  background-color: #dadada;
  margin: 15px 0;
}

.card_price {
  font-weight: 700;
  font-size: 24px;
}

.row_line_button {
  width: 100%;
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.cardDetailProducted {
  flex: 1;
  height: 45px;
  background: linear-gradient(97deg,
      rgba(255, 180, 0, 1) 23%,
      rgba(255, 222, 90, 1) 77%);
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dadada;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

.card_buttonbasked {
  width: 130px;
  height: 45px;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  background: rgb(0, 0, 0);
  background: linear-gradient(97deg,
      rgba(0, 0, 0, 1) 3%,
      rgba(43, 29, 76, 1) 40%);
}

.SearchLineHomPage {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.productSearch {
  width: 500px;
  height: 55px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.productSearch input {
  flex: 1;
  border: none;
  border-bottom: 2px solid var(--main_color);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  height: 100%;
  outline: 0 !important;
}

.productSearch button {
  width: 130px;
  height: 45px;
  background: rgb(24, 73, 103);
  background: linear-gradient(167deg,
      rgba(24, 73, 103, 0.9920343137254902) 0%,
      rgba(40, 36, 80, 1) 27%,
      rgba(43, 29, 76, 1) 66%,
      rgba(24, 73, 103, 1) 100%);
  border: none !important;
  border-radius: 5px;
  color: #fff;
  font-size: 15px;
}

.select_items {
  width: 200px;
  height: 42px;
  padding: 0 10px;
  outline: 0 !important;
  border: 1px solid #dadada;
  border-radius: 3px;
}

.big_icons_href {
  margin-top: 25px;
  width: 100%;
  min-height: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  color: #333 !important;
  text-decoration: none;
}

.imagesGoes_diffrent {
  width: 220px;
  height: 220px;
  background-color: #fff;
  border-radius: 50%;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-size: cover;
}

.imagesGoes_diffrent:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--second_color);
  position: absolute;
  z-index: -1;
  left: 10px;
  top: 5px;
  border-radius: 50%;
}

.studentEducationImages:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--second_color);
  position: absolute;
  z-index: -1;
  left: 10px;
  top: 5px;
  border-radius: 50%;
}

.studentEducationImagesActive:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--lessonOnlineGreenColor);
  position: absolute;
  z-index: -1;
  left: 10px;
  top: 5px;
  border-radius: 50%;
}

.absCardCenerate i {
  font-size: 38px;
  color: var(--main_color);
}

.absCardCenerate>span {
  font-size: 26px;
  font-weight: 700;
  color: var(--main_color);
  text-align: center;
}

.absCardCenerate {
  width: 100%;
  height: 100%;
  background-color: #ffffffa3;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.big_icons_href:hover {
  transition: ease 0.5s all;
  transform: translateY(-10px);
}

/* index end */
/* product detail page start */
.productDetail_image {
  width: 100%;
  min-height: 10px;
}

.section_pad {
  width: 100%;
  margin-top: 120px;
  padding: 30px 0;
  min-height: 10px;
}

.lineSlider_productDetail {
  width: 100%;
  min-height: 10px;
}

.lineSlider_productDetail>img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 20px;
}

.sliderSecondLine {
  width: 100%;
  margin-top: 10px;
  min-height: 10px;
}

.bottomSlider {
  min-height: 5px;
  margin-right: 10px !important;
  border-radius: 10px;
  cursor: pointer;
}

.images_bottomSlider {
  height: 120px;
  width: 100%;
  border-radius: 10px;
}

.productDetail_right {
  width: 100%;
  min-height: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.productDetail_right p {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 700;
  font-size: 22px;
}

.endStokeCode {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
}

.line_right_productDetails {
  width: 100%;
  height: 2px;
  background-color: gray;
}

.pridePrdocut_detail {
  font-size: 22px;
  font-weight: 700;
}

.producted_detail {
  font-size: 16px;
  margin-top: -5px;
}

.lineDetail_page {
  font-size: 17px;
  font-weight: 500;
}

.lineDetail_page {
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 5px;
}

.line_circleColorsMain {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.circleColor_button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #dadada;
}

.produds_size_main {
  flex: 1;
  min-height: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.rowPlusAndMinus {
  width: 250px;
  height: 45px;
  border: 1px solid #dadada;
  display: flex;
}

.rowPlusAndMinus button {
  width: 55px;
  height: 45px;
  background: linear-gradient(97deg,
      rgba(255, 180, 0, 1) 23%,
      rgba(255, 222, 90, 1) 77%);
  border: none;
  outline: 0;
  border-radius: 5px;
  font-size: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inputTopReadr {
  flex: 1;
  height: 100%;
}

.rowPlusAndMinus input {
  text-align: center;
  color: #333;
  width: 100%;
  height: 100%;
  border: none !important;
  outline: 0;
  font-size: 20px;
}

.textStokken {
  font-size: 18px;
  font-weight: 600;
}

.addBaskedAndbuy {
  width: 100%;
  display: flex;
  gap: 15px;
  margin-top: 15px;
}

.buttonAddBasked_detail {
  width: 150px;
  height: 50px;
  background: linear-gradient(167deg,
      rgba(24, 73, 103, 0.9920343137254902) 0%,
      rgba(40, 36, 80, 1) 27%,
      rgba(43, 29, 76, 1) 66%,
      rgba(24, 73, 103, 1) 100%);
  color: #fff;
  border: none !important;
  border-radius: 5px;
}

.buttonAddBasked_detail:hover {
  transition: ease 0.5s all;
  transform: translateY(-5px);
}

.detail_productExplain {
  min-height: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 25px;
}

.detail_productExplain h1 {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--main_color);
  font-size: 42px;
}

.detail_productExplain span:first-letter {
  margin-left: 15px;
}

.headerCenter_smile {
  width: 100%;
  font-weight: 700;
  font-size: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.headerCenter_smile:before {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #dadada;
}

.headerCenter_smile:after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #dadada;
}

.sliderBottomImages {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.sliderProduct {
  width: 100%;
  min-height: 10px;
  margin-bottom: 30px;
}

/* product detail page end */
/* basket page start */
.BasketOpen {
  width: 500px;
  height: 100vh;
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  padding: 25px;
  display: flex;
  flex-direction: column;
  transform: translateX(-500px);
  transition: transform 0.3s ease;
}

.generate_basket>h1 {
  text-align: center;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 32px;
  margin-bottom: 15px !important;
}

.generate_basket {
  flex: 1;
  width: 100%;
  overflow-y: auto;
}

.button_buys_lineBasket {
  width: 100%;
  padding-top: 25px;
  min-height: 10px;
  border-top: 1px solid #dadada;
}

.header_for_basked {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header_for_basked>span {
  font-weight: 700;
}

.baskedBuyButtons {
  flex: 1;
  height: 50px;
  background: linear-gradient(97deg,
      rgba(255, 180, 0, 1) 23%,
      rgba(255, 222, 90, 1) 77%);
  border: none;
  outline: 0;
  border-radius: 5px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.product_basketCard {
  width: 100%;
  padding: 15px;
  border-bottom: 1px solid #dadada;
  display: flex;
  gap: 15px;
  border-radius: 10px;
}

.product_basketCard img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 2px;
  border-radius: 5px;
}

.flexibleRow {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flexibleRow>p {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 600;
  font-size: 15px;
}

.flexibleRow>span {
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 700;
  font-size: 17px;
}

.increaseAndDec {
  width: 100%;
  height: 40px;
  display: flex;
}

.increaseAndDec>button {
  width: 40px;
  height: 40px;
  background-color: gray;
  color: #fff;
  font-size: 32px;
  border: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 0 !important;
  border-radius: 2px;
}

.inputBasketLeft {
  width: 100%;
  height: 100%;
  border-top: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
  border-left: none;
  border-right: none;
  outline: 0 !important;
  text-align: center;
  font-size: 20px;
}

.noneBasketButton {
  flex: 1;
  height: 50px;
  background: linear-gradient(97deg, rgb(137 24 24) 23%, rgb(255 90 90) 77%);
  border: none;
  outline: 0;
  border-radius: 5px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  color: #fff;
}

.safe_buyModal {
  width: 100%;
  height: 100vh;
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #333333a3;
  display: none;
  justify-content: center;
  align-items: center;
}

.white_buyModal {
  width: 40%;
  min-height: 10px;
  max-height: 600px;
  padding: 15px;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 10px;
}

@media screen and (max-width: 990px) {
  .white_buyModal {
    width: 80%;
  }
}

.inputAll_buyPage {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-bottom: 15px;
}

.inputAndTextNumberBuyer {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.inputAndTextNumberBuyer>span {
  font-size: 17px;
  font-weight: 600;
}

.inputAndTextNumberBuyer input {
  width: 100%;
  height: 45px;
  border: 1px solid #dadada;
  padding: 0 15px;
  font-size: 14px;
  outline: 0 !important;
}

.inputAndTextNumberBuyer select {
  width: 100%;
  height: 45px;
  border: 1px solid #dadada;
  padding: 0 15px;
  font-size: 14px;
  outline: 0 !important;
}

/* Chrome, Safari, Edge, Opera */
.inputAndTextNumberBuyer input::-webkit-outer-spin-button,
.inputAndTextNumberBuyer input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.inputAndTextNumberBuyer input[type="number"] {
  -moz-appearance: textfield;
}

.closeModalCol {
  width: 100%;
  flex: 1;
  cursor: pointer;
}

/* basket page end */
.modal_chooseLang {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000000b8;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 15px;
}

.text_alertLogins {
  color: #fff;
  font-size: 22px;
}

.buttonChoose_tr {
  width: 200px;
  height: 45px;
  border: 1px solid #ffff;
  display: flex;
  justify-content: center;
  z-index: 1;
  background: none !important;

  position: relative;
}

.buttonChoose_tr:after {
  content: "Türkçe";
  width: 100%;
  height: 100%;
  background: none !important;
  position: absolute;
  left: 10px;
  top: 10px;
  border: 1px solid #ffff;
  z-index: -1;
  background-color: var(--main_color) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition: ease 0.5s all;
}

.buttonChoose_en {
  width: 200px;
  height: 45px;
  border: 1px solid #ffff;
  display: flex;
  justify-content: center;
  z-index: 1;
  background: none !important;

  position: relative;
}

.buttonChoose_en:before {
  content: "İngilizce";
  width: 100%;
  height: 100%;
  background: none !important;
  position: absolute;
  left: 10px;
  top: 10px;
  border: 1px solid #ffff;
  z-index: -1;
  background-color: var(--main_color) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition: ease 0.5s all;
}

.buttonChoose_en:hover:before {
  top: 0;
  left: 0;
}

.buttonChoose_tr:hover:after {
  top: 0;
  left: 0;
}

.canBeTeacher {
  padding: 10px 15px;
  background: linear-gradient(97deg,
      rgb(190 163 255) 23%,
      rgb(191 121 255) 77%);
  border: none !important;
  border-radius: 4px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* student menu start */
.studentLeft_menu {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  border: 1px solid #dadada;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 10px;
  padding: 15px;
  z-index: 1;
  position: relative;
}

.active_profilMenu {
  width: 100%;
  height: 50px;
  border-bottom: 2px solid var(--main_color);
  display: flex;
  align-items: center;
  text-decoration: none !important;
  color: var(--main_color);
  font-weight: 600;
  font-size: 16px;
}

.pasive_profilMenu {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #dadada;
  display: flex;
  align-items: center;
  text-decoration: none !important;
  color: gray;
  font-weight: 500;
  font-size: 16px;
  gap: 10px;
}

.pasive_profilMenu:hover {
  border-bottom: 2px solid var(--main_color);
  padding-left: 15px;
  color: var(--main_color);
  transition: ease 0.5s all;
  font-weight: 600;
}

.profileHeader {
  font-size: 24px;
  letter-spacing: 1px;
  font-weight: 600;
  color: var(--main_color);
  margin-bottom: 15px;
}

.profileInputAndName {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 15px;
}

.profileInputAndName span {
  font-size: 15px;
}

.profileInputAndName input {
  width: 100%;
  height: 45px;
  outline: 0 !important;
  border: 1px solid #dadada;
  font-size: 13px;
  padding: 0 10px;
  border-radius: 5px;
}

.profileInputAndName select {
  width: 100%;
  height: 45px;
  outline: 0 !important;
  border: 1px solid #dadada;
  font-size: 13px;
  padding: 0 10px;
  border-radius: 5px;
}

.checkedNone {
  height: 45px;
  display: flex;
  gap: 5px;
  align-items: center;
}

/* student menu end */
/* checkboz start */
.checkbox-wrapper-11 {
  --text: #414856;
  --check: #4f29f0;
  --disabled: #c3c8de;
  --border-radius: 10px;
  border-radius: var(--border-radius);
  position: relative;
  padding: 5px;
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
}

.checkbox-wrapper-11 label {
  color: var(--text);
  position: relative;
  cursor: pointer;
  display: grid;
  align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  transition: color 0.3s ease;
}

.checkbox-wrapper-11 label::before,
.checkbox-wrapper-11 label::after {
  content: "";
  position: absolute;
}

.checkbox-wrapper-11 label::before {
  height: 2px;
  width: 8px;
  left: -27px;
  background: var(--check);
  border-radius: 2px;
  transition: background 0.3s ease;
}

.checkbox-wrapper-11 label:after {
  height: 4px;
  width: 4px;
  top: 8px;
  left: -25px;
  border-radius: 50%;
}

.checkbox-wrapper-11 input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  height: 15px;
  width: 15px;
  outline: none;
  border: 0;
  margin: 0 15px 0 0;
  cursor: pointer;
  background: var(--background);
  display: grid;
  align-items: center;
}

.checkbox-wrapper-11 input[type="checkbox"]::before,
.checkbox-wrapper-11 input[type="checkbox"]::after {
  content: "";
  position: absolute;
  height: 2px;
  top: auto;
  background: var(--check);
  border-radius: 2px;
}

.checkbox-wrapper-11 input[type="checkbox"]::before {
  width: 0px;
  right: 60%;
  transform-origin: right bottom;
}

.checkbox-wrapper-11 input[type="checkbox"]::after {
  width: 0px;
  left: 40%;
  transform-origin: left bottom;
}

.checkbox-wrapper-11 input[type="checkbox"]:checked::before {
  -webkit-animation: check-01-11 0.4s ease forwards;
  animation: check-01-11 0.4s ease forwards;
}

.checkbox-wrapper-11 input[type="checkbox"]:checked::after {
  -webkit-animation: check-02-11 0.4s ease forwards;
  animation: check-02-11 0.4s ease forwards;
}

.checkbox-wrapper-11 input[type="checkbox"]:checked+label {
  color: var(--disabled);
  -webkit-animation: move-11 0.3s ease 0.1s forwards;
  animation: move-11 0.3s ease 0.1s forwards;
}

.checkbox-wrapper-11 input[type="checkbox"]:checked+label::before {
  background: var(--disabled);
  -webkit-animation: slice-11 0.4s ease forwards;
  animation: slice-11 0.4s ease forwards;
}

.checkbox-wrapper-11 input[type="checkbox"]:checked+label::after {
  -webkit-animation: firework-11 0.5s ease forwards 0.1s;
  animation: firework-11 0.5s ease forwards 0.1s;
}

@-webkit-keyframes move-11 {
  50% {
    padding-left: 8px;
    padding-right: 0px;
  }

  100% {
    padding-right: 4px;
  }
}

@keyframes move-11 {
  50% {
    padding-left: 8px;
    padding-right: 0px;
  }

  100% {
    padding-right: 4px;
  }
}

@-webkit-keyframes slice-11 {
  60% {
    width: 100%;
    left: 4px;
  }

  100% {
    width: 100%;
    left: -2px;
    padding-left: 0;
  }
}

@keyframes slice-11 {
  60% {
    width: 100%;
    left: 4px;
  }

  100% {
    width: 100%;
    left: -2px;
    padding-left: 0;
  }
}

@-webkit-keyframes check-01-11 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0px;
    top: 8px;
    transform: rotate(45deg);
  }

  100% {
    width: 5px;
    top: 8px;
    transform: rotate(45deg);
  }
}

@keyframes check-01-11 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0px;
    top: 8px;
    transform: rotate(45deg);
  }

  100% {
    width: 5px;
    top: 8px;
    transform: rotate(45deg);
  }
}

@-webkit-keyframes check-02-11 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0px;
    top: 8px;
    transform: rotate(-45deg);
  }

  100% {
    width: 10px;
    top: 8px;
    transform: rotate(-45deg);
  }
}

@keyframes check-02-11 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }

  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }

  51% {
    width: 0px;
    top: 8px;
    transform: rotate(-45deg);
  }

  100% {
    width: 10px;
    top: 8px;
    transform: rotate(-45deg);
  }
}

@-webkit-keyframes firework-11 {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0,
      0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0,
      14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0,
      -14px -8px 0 0px #4f29f0;
  }
}

@keyframes firework-11 {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0,
      0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0,
      14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0,
      -14px -8px 0 0px #4f29f0;
  }
}

/* checkboz end */
/* Chrome, Safari, Edge, Opera */
.profileInputAndName input::-webkit-outer-spin-button,
.profileInputAndName input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.profileInputAndName input[type="number"] {
  -moz-appearance: textfield;
}

.profileInputAndName textarea {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 135px;
  outline: 0 !important;
  border: 1px solid #dadada;
  font-size: 13px;
  padding: 10px;
  border-radius: 5px;
}

.updateOlcüm_buttons {
  background: linear-gradient(316deg, rgb(34 20 68) 23%, rgb(90 50 187) 77%);
  height: 45px;
  border: none;
  font-size: 14px;
  color: #fff;
  border-radius: 5px;
  padding: 0 15px;
}

.swal2-title {
  font-size: 18px !important;
}

.update_buttonProfile {
  width: 100%;
  height: 45px;
  margin-top: 15px;
  border: none !important;
  outline: 0 !important;
  background: linear-gradient(316deg, rgb(34 20 68) 23%, rgb(90 50 187) 77%);
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
}

.centerQuestionHeader {
  width: 100%;
  min-height: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  text-align: center;
  font-size: 22px;
  margim-bottom: 15px;
}

.question_active {
  width: 100%;
  height: 180px;
  margin-top: 20px;
  border-radius: 10px;
  border: 5px solid var(--second_color);
  cursor: pointer;
}

.question_pasive {
  width: 100%;
  height: 180px;
  margin-top: 20px;
  border-radius: 10px;
  border: 1px solid #dadada;
  cursor: pointer;
  opacity: 0.5;
}

.question_active img,
.question_pasive img,
mg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.question_pasive:hover {
  opacity: 1;
  transition: ease 0.5s all;
}

.inTimeQuestion {
  color: red;
  font-weight: 700;
  font-size: 38px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -5px;
}

.student_programmer_main {
  min-width: 100%;
  max-width: 200%;
  min-height: 10px;
  overflow-x: auto;
  display: flex;
}

.active_buttonDate {
  width: 80px !important;
  height: 100px;
  background-color: #cafdca;
  margin-right: 15px;
  border: none !important;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  justify-content: center;
  border: 1px solid #dadada;
}

.pasive_buttonDate {
  width: 80px !important;
  height: 100px;
  background-color: #dadada;
  margin-right: 15px;
  border: none !important;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  justify-content: center;
  border: 1px solid #dadada;
}

.active_buttonDate p,
.pasive_buttonDate p {
  font-weight: 700;
  font-size: 24px;
  margin: 0 !important;
  padding: 0 !important;
  color: #333;
}

.active_buttonDate span,
.pasive_buttonDate span {
  font-size: 14px;
  color: #333;
}

.lectureCard_main {
  width: 100%;
  height: 200px;
  background-size: cover;
  border-radius: 10px;
  border: 1px solid #dadada;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  color: #fff !important;
  text-decoration: none !important;
  overflow: hidden;
}

.icontProgrrammer {
  width: 100%;
  height: 100%;
  background-color: #3339;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.icontProgrrammer p {
  font-size: 32px;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 700;
}

.icontProgrrammer .bottom-content {
  position: absolute;
  content: "";
  bottom: 4px;
  left: 0px;
  height: 40px;
}

.abs_notification {
  width: 40px;
  height: 40px;
  background-color: #ffffff4f;
  position: absolute;
  right: 10px;
  top: 10px;
  border: none !important;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #fff;
}

.btn_weekly {
  width: 150px !important;
  height: 100px;
  background-color: #dadada;
  margin-right: 15px;
  border: none !important;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  justify-content: center;
  border: 1px solid #dadada;
}

.btn_submit {
  width: 150px !important;
  height: 50px;
  background-color: #dadada;
  margin-right: 15px;
  border: none !important;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  justify-content: center;
  border: 1px solid #dadada;
}

.row_header_generate {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.add_lecture {
  color: var(--main_color);
  font-size: 16px;
  font-weight: 700;
}

.add_lecture:hover {
  transform: translateY(-10px);
  transition: ease 0.5s all;
}

.add_and_date {
  width: 100%;
  display: flex;
  height: 45px;
  gap: 10px;
  margin-top: 5px;
}

.add_and_date>button {
  flex: 1;
  height: 100%;
  background-color: #60c360;
  color: #fff;
  border: none !important;
  outline: 0 !important;
  border-radius: 5px;
}

.inputDate_lecturePage {
  width: 100%;
  height: 100%;
  border: 1px solid #dadada;
  border-radius: 5px;
  outline: 0 !important;
  padding: 0 10px;
  font-size: 14px;
}

.information_center_images {
  width: 100%;
  min-height: 10px;
  display: flex;
  justify-content: flex-start;
  gap: 20px;
}

.images_center_student_profil {
  width: 150px;
  height: 150px;
  background-color: #f5f5f5;
  border-radius: 50%;
  border: 4px solid var(--second_color);
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.images_center_student_profil img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.labelImages {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(316deg, rgb(34 20 68) 23%, rgb(90 50 187) 77%);
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.detail_pprofiles {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.detail_pprofiles p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 20px;
  font-weight: 600;
}

.detail_pprofiles span {
  font-size: 18px;
  margin: 0 !important;
  padding: 0 !important;
}

.rowMenuImage {
  display: flex;
  align-items: center;
  gap: 5px;
}

.rowMenuImage img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border-radius: 50%;
}

.textColors_menu {
  color: #fff;
  font-size: 15px;
}

.notification_outher {
  width: 400px;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
  background-color: #fff;
  position: absolute;
  right: 0;
  top: 60px;
  z-index: 1000;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  border-radius: 10px;
  padding: 0 15px;
  display: none;
}

.line_notification {
  width: 100%;
  padding: 15px 0;
  border-bottom: 1px solid #dadada;
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: #333 !important;
  align-items: center;
  justify-content: space-between;
}

.btn_deleted_notification {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(97deg, rgb(137 24 24) 23%, rgb(255 90 90) 77%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 12px;
}

.new_alert_notification {
  color: green;
  transform: rotate(-45deg);
  font-size: 18px;
  font-weight: 600;
}

.sub_title {
  font-size: 22px;
}

.note_line_Fuel:first-child {
  border-top: 1px solid #dadada;
}

.note_line_Fuel {
  width: 100%;
  min-height: 70px;
  border-bottom: 1px solid #dadada;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}

.text_note_page {
  flex: 1;
  min-width: 10px;
  color: #333;
  font-size: 14px;
}

.btn_note {
  background: linear-gradient(97deg, rgb(65 111 138) 23%, rgb(31 62 89) 77%);
  padding: 10px 25px;
  border: none !important;
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
}

.modal_letter {
  width: 100%;
  height: 100vh;
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #333333a3;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: fade 0.5s all;
}

.line_letter_s {
  width: 50%;
  height: 500px;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 990px) {
  .line_letter_s {
    width: 80%;
  }
}

.line_letter_s p {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px !important;
}

.line_letter_s span {
  font-size: 15px;
  color: #333;
}

.noteModalClose_btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  right: 10px;
  top: 10px;
  background: linear-gradient(97deg, rgb(137 24 24) 23%, rgb(255 90 90) 77%);
  border: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 17px;
  z-index: 10;
}

.note_last_btw {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btnAdd_note {
  width: 45px;
  height: 45px;
  border: none !important;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(97deg, rgb(32 195 67) 23%, rgb(13 121 13) 77%);
  margin-top: 5px;
  color: #fff;
  font-size: 18px;
}

.btn_note_update {
  background: linear-gradient(97deg, rgb(177 98 0) 23%, rgb(255 172 44) 77%);
  padding: 10px 25px;
  border: none !important;
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
}

.header_text_inModal {
  margin-bottom: 15px;
  font-size: 16px;
}

.inputEdit_note {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inputEdit_note input {
  width: 100%;
  height: 45px;
  border: 1px solid #dadada;
  outline: 0 !important;
  border-radius: 5px;
  padding: 0 10px;
}

.inputEdit_note textarea {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 255px;
  border: 1px solid #dadada;
  outline: 0 !important;
  border-radius: 5px;
  padding: 10px;
}

.inputEdit_note span {
  font-size: 14px;
}

.mains_rows_buttons {
  width: 100%;
  display: flex;
  gap: 15px;
}

.mains_rows_buttons button {
  border: none;
  flex: 1;
  height: 45px;
  border-radius: 5px;
  outline: 0 !important;
  color: #fff;
  font-weight: 500;
  font-size: 15px;
}

/* can be Teacher start */
.modal_center_generate {
  width: 100%;
  height: 100vh;
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #333333a3;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: fade 0.5s all;
}

.white_canBeModal {
  width: 40%;
  min-height: 10px;
  max-height: 80vh;
  overflow-y: auto;
  background-color: #fff;
  padding: 15px;
  border-radius: 10px;
}

@media screen and (max-width: 990px) {
  .white_canBeModal {
    width: 60%;
  }
}

@media screen and (max-width: 600px) {
  .white_canBeModal {
    width: 80%;
  }
}

.white_canBeModal p {
  margin: 0 !important;
  font-size: 18px;
  text-align: center;
  font-weight: 500;
  margin-bottom: 10px !important;
}

.colTeacther_inputAndText {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}

.colTeacther_inputAndText span {
  font-size: 15px;
}

.colTeacther_inputAndText input {
  width: 100%;
  height: 45px;
  border: 1px solid #dadada;
  border-radius: 5px;
  padding: 0 13px;
  outline: 0 !important;
  font-size: 13px;
}

.colTeacther_inputAndText select {
  width: 100%;
  height: 45px;
  border: 1px solid #dadada;
  border-radius: 5px;
  padding: 0 13px;
  outline: 0 !important;
  font-size: 13px;
}

.colTeacther_inputAndText textarea {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 125px;
  border: 1px solid #dadada;
  border-radius: 5px;
  padding: 13px;
  outline: 0 !important;
  font-size: 13px;
}

.createanBeaTeacher {
  width: 100%;
  height: 45px;
  background: linear-gradient(97deg, rgb(68 111 10) 23%, rgb(26 131 1) 77%);
  border: none !important;
  outline: 0 !important;
  color: #fff;
  font-weight: 500;
  border-radius: 5px;
  font-size: 17px;
  margin-top: 5px;
}

/* can be Teacher end */
/* teacher start */
.headerTeachers {
  font-size: 16px;
  color: red;
}

.tacherProgrammer_Card {
  width: 100%;
  min-height: 350px;
  border: 1px solid #dadada;
  margin-top: 15px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  padding: 15px;
}

.tacherProgrammer_Card p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px;
  font-weight: 600;
  color: var(--main_color);
  border-bottom: 1px solid #dadada;
  padding-bottom: 5px;
  display: flex;
  align-items: center;
  min-height: 40px;
}

.hoursAndText {
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid #dadada;
  width: 100%;
  min-height: 40px;
  font-size: 16px;
}

.hoursAndText>span {
  font-weight: 500;
}

.dontLessonHave {
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 20px;
  color: var(--main_color);
}

.endButtons_hoursed {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.endButtons_hoursed>p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17px;
  font-weight: 500;
}

.cardDaylyChooseHours {
  width: 100%;
  min-height: 350px;
  background-color: #fff;
  margin-top: 15px;
  border: 1ox solid #dadada;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.cardDaylyChooseHours>p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17px;
  font-weight: 700;
}

.hoursAndEditDelete {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  align-items: center;
  border-bottom: 1px solid #dadada;
}

.hoursAndEditDelete>h6 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px;
  font-weight: 500;
}

.end_hours_main {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}

.teacher_button_green {
  padding: 5px 10px;
  border: none;
  outline: 0 !important;
  background: green;
  color: #fff;
  border-radius: 2px;
  font-size: 15px;
}

.messagePageLeft {
  width: 100%;
  height: 80vh;
  background-color: #fff;
  border: 1px solid #dadada;
  border-radius: 10px;
  overflow-y: auto;
}

.messageLeftMenu {
  width: 100%;
  min-height: 10px;
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  gap: 15px;
  background: none;
  border: none;
  border-bottom: 1px solid #dadada;
}

.messageLeftMenu img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 5px;
}

.oneMessageTexted {
  flex: 1;
  min-height: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.oneMessageTexted>p {
  font-weight: 700;
  font-size: 18px;
  margin: 0 !important;
  padding: 0 !important;
}

.oneMessageTexted>span {
  font-size: 16px;
  color: gray;
}

.messagePageRight {
  width: 100%;
  flex: 1;

  border-radius: 10px;
  overflow-y: auto;
  padding: 15px;
}

.messagePageRightted {
  width: 100%;
  height: 80vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #dadada;
}

.leftMessage_main {
  width: 100%;
  min-height: 10px;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 15px;
}

.RightMessage_main {
  width: 100%;
  min-height: 10px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}

.leftMessage_balloon {
  min-width: 10px;
  max-width: 70%;
  min-height: 10px;
  padding: 10px;
  background-color: #d1d1d1;
  border-radius: 5px 5px 5px 0;
  font-size: 14px;
}

.RightMessage_balloon {
  min-width: 10px;
  max-width: 70%;
  min-height: 10px;
  padding: 10px;
  background-color: lightgreen;
  border-radius: 5px 5px 0 5px;
  font-size: 14px;
}

.messagePageSenders_line {
  width: 100%;
  display: flex;
  gap: 15px;
  padding: 10px;
  border-top: 1px solid #dadada;
  min-height: 10px;
}

.inputSenderTops {
  flex: 1;
  height: 50px;
  border: 1px solid #dadada;
  display: flex;
  border-radius: 30px;
}

.inputSenderTops input {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 30px;
  padding: 0 15px;
  border: none;
  outline: 0 !important;
}

.inputsCircleChoose {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: gray;
  cursor: pointer;
}

.senderButtons {
  background: linear-gradient(97deg,
      rgba(255, 180, 0, 1) 23%,
      rgba(255, 222, 90, 1) 77%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  color: #333;
  font-size: 20px;
}

.videosSaveLectureCard {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.inputLinkedSharedLecture {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.inputLinkedSharedLecture input {
  width: 500px;
  height: 45px;
  border: 1px solid #dadada;
  border-radius: 5px;
  padding: 0 15px;
  font-size: 15px;
  border-radius: 5px;
}

.share_buttons {
  width: 45px;
  height: 45px;
  background: linear-gradient(97deg,
      rgba(255, 180, 0, 1) 23%,
      rgba(255, 222, 90, 1) 77%);
  border-radius: 5px;
  border: none !important;
  outline: 0 1important;
}

.teacherVideoComp {
  width: 100%;
  min-height: 10px;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #dadada;
  display: flex;
  flex-direction: column;
}

.videoTopCls {
  width: 100%;
  height: 300px;
}

.bottomPriceVideoCard {
  padding: 10px;
  display: flex;
}

.buttonVideoCard {
  width: 100%;
  min-height: 10px;
  display: flex;
  gap: 10px;
  padding: 10px;
}

.buttonVideoCard button {
  padding: 7px 20px;
  border: none !important;
  border-radius: 5px;
  font-size: 14px;
  flex: 1;
  height: 45px;
}

.cardAddBaasket {
  background: linear-gradient(97deg,
      rgba(255, 180, 0, 1) 23%,
      rgba(255, 222, 90, 1) 77%);
}

.buyCardButton {
  background: linear-gradient(97deg, rgb(0 255 43) 23%, rgb(162 225 147) 77%);
}

.lineEditAndDeleted {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}

.editButton_for_video {
  background: linear-gradient(97deg,
      rgba(255, 180, 0, 1) 23%,
      rgba(255, 222, 90, 1) 77%);
  flex: 1;
  width: 200px;
  height: 45px;
  padding: 5px 15px;
  border: none !important;
  border-radius: 5px;
  font-size: 15px;
}

.deleteButton_for_video {
  background: linear-gradient(97deg, rgb(223 64 64) 23%, rgb(255 114 90) 77%);
  flex: 1;
  width: 200px;
  height: 45px;
  border: none !important;
  border-radius: 5px;
  font-size: 15px;
}

.teacher_margin_and {
  margin-bottom: 15px;
  width: 250px;
  height: 45px;
  background: linear-gradient(97deg,
      rgba(255, 180, 0, 1) 23%,
      rgba(255, 222, 90, 1) 77%);
  border: none !important;
  border-radius: 5px;
  font-weight: 600;
  font-size: 14px;
}

.add_video_Modal {
  width: 100px;
  height: 100px;
  background-color: #f5f5f5;
  border: 1px solid #dadada;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 24px;
  border-radius: 10px;
  gap: 5px;
}

.add_bttnUpload {
  background: linear-gradient(97deg, rgb(0 255 43) 23%, rgb(162 225 147) 77%);
  color: #333;
  width: 150px;
  height: 45px;
  border: none !important;
  border-radius: 5px;
  font-weight: 600;
  font-size: 14px;
}

.barsButtoon {
  background: none !important;
  color: #fff;
  font-size: 28px;
  border: none !important;
}

.fixedTopMenu {
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 2000;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translateX(-100%);
  transition: ease 0.5s all;
}

.centerMenu_detail {
  width: 100%;
  height: 100%;
  background-color: #ffffffed;
  padding: 30px;
}

.endButttonMenu {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.timeMenuButton {
  background: none;
  border: none;
  font-size: 62px;
  color: var(--main_color);
}

.new_menuGenerate {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.new_menuGenerate h1 {
  font-size: 32px;
  font-weight: 700;
  amrgin: 0 !important;
  padding: 0 !important;
  margin-bottom: 15px;
}

.newMenu_main {
  width: 100%;
  padding: 15px 0;
  border-bottom: 2px solid gray;
  font-size: 32px;
  color: #333 !important;
  text-decoration: none !important;
}

.newMenu_main:hover {
  padding-left: 10px;
  transition: ease 0.5s all;
}

@media screen and (max-width: 990px) {
  .logo_menu {
    display: none;
  }

  .slider_bottomAdj {
    display: block;
  }

  .in_slider_bottom_Adj {
    justify-content: flex-start;
    border-right: 0 !important;
  }

  .SearchLineHomPage,
  .index_topDetailLine {
    display: block;
  }

  .select_items {
    width: 100%;
  }

  .indexTopCard:first-child {
    margin-bottom: 15px;
  }

  .index_topDetailLine {}

  .colorsTextAlert {
    width: 100%;
  }

  .productSearch {
    width: 100%;
    gap: 10px;
  }
}

.imagesTextAbo {
  width: 100%;
  height: 450px;
  object-fit: cover;
  margin-bottom: 15px;
  border-radius: 10px;
}

.abouteLeftLine {
  width: 100%;
  min-height: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.abouteLeftLine>h1 {
  font-weight: 700;
  margin: 0 !important;
  padding: 0 !important;
}

.abouteLeftLine span {
  font-size: 18px;
  letter-spacing: 1px;
}

/* teacher end */
/* about page */
.iconscenerer {
  width: 100%;
  min-height: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.iconscenerer img {
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.iconscenerer:before {
  content: "";
  flex: 1;
  height: 2px;
  background-color: gray;
}

.iconscenerer:after {
  content: "";
  flex: 1;
  height: 2px;
  background-color: gray;
}

.imagesDate {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 30px;
}

.scroolDetails_contentLine {
  width: 100%;
  display: flex;
  gap: 10px;
  flex-direction: column;
  margin-top: 15px;
}

.scroolDetails_contentLine span {
  font-size: 18px;
}

.scroolDetails_contentLine span:first-letter {
  margin-left: 25px;
}

.lect_contactExplain {
  width: 100%;
  min-height: 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.lect_contactExplain p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 24px;
  font-weight: 600;
}

.lect_contactExplain span {
  font-size: 16px;
  color: #333;
  display: flex;
  flex: 1;
}

.contactLeft {
  width: 100%;
  min-height: 10px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.IconsContactPage {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--main_color);
  color: #fff;
  font-size: 22px;
}

.right_SenderForm {
  width: 100%;
  min-height: 10px;
  border: 1px solid #dadada;
  padding: 15px;
  border-radius: 10px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.inputsAndSenderSpan {
  width: 100%;
  min-height: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 15px;
}

.inputsAndSenderSpan>span {
  font-size: 17px;
}

.inputsAndSenderSpan input {
  width: 100%;
  border: 1px solid #dadada;
  height: 45px;
  padding: 0 10px;
  font-size: 14px;
  border-radius: 5px;
  outline: 0;
}

.inputsAndSenderSpan textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  border: 1px solid #dadada;
  min-height: 120px;
  padding: 0 10px;
  font-size: 14px;
  border-radius: 5px;
  outline: 0;
}

.submit_buttonSendeo {
  width: 150px;
  min-height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dadada;
  border-radius: 5px;
  border: none !important;
  background: linear-gradient(97deg, rgb(0 255 43) 23%, rgb(162 225 147) 77%);
}

.tetxtCenter_ForgetAler {
  width: 100%;
  padding: 15px;
  background-color: #cdcd7e;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 5px;
}

.centerCode_inputs {
  width: 100%;
  min-height: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.centerCode_inputs>input {
  width: 50px;
  height: 50px;
  border: 1px solid #dadada;
  text-align: center;
}

/* Chrome, Safari, Edge, Opera */
.centerCode_inputs>input::-webkit-outer-spin-button,
.centerCode_inputs>input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.centerCode_inputs>input[type="number"] {
  -moz-appearance: textfield;
}

.trueModal_black {
  width: 100%;
  height: 100vh;
  background-color: #33333363;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.imagesCenter_card {
  width: 50%;
  height: 500px;
  background-color: #fff;
  border-radius: 20px;
}

.imagesCenter_card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 990px) {
  .imagesCenter_card {
    width: 90%;
  }
}

/* new list start */
.sliderEductationlist {
  display: flex !important;
  flex-direction: column;
  align-items: center;
}

.sliderEductationlist img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.sliderEductationlist p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px;
  font-weight: 600;
}

.btn-add-program {
  background-color: #dadada;
  margin-right: 15px;
  border: none !important;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  justify-content: center;
  border: 1px solid #dadada;
}

.name_slider {
  font-size: 16px;
}

.social_guestPage {
  width: 100%;
  min-height: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.favorite-delete-icon-content {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border: 0.5px solid #292929;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #dd8181;
}

/* new list end */
/*lecture detail start*/

.detail-page .fav-content i {
  color: #fcdd57;
  font-size: 40px;
}

.fav-title {
  color: #fcdd57 !important;
  font-weight: 600;
}

.detail-page .title-content {
  position: relative;
  border-bottom: 2px solid #fcdd57;
}

.detail-page .page-subtitle {
  background: #fcdd57;
  min-height: 40px;
  font-size: 24px;
  color: #fff;
  font-weight: 700;
  padding: 0px 100px;
}

.detail-page .image-content {
  position: relative;
  z-index: -1;
}

.detail-page .image-content .text-content {
  position: absolute;
  z-index: 1;
  content: "";
  bottom: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px 40px 5px 40px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.detail-page .image-content .text-content span {
  font-size: 13px;
}

.detail-page .center-content .title {
  font-weight: 700;
  color: black;
  font-size: 35px;
}

.detail-page .difficulty-level-text-content {
  font-size: 30px;
  color: rgb(0, 0, 0);
  font-weight: 800;
}

.detail-page .difficulty-level-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 100%;
}

.detail-page .difficulty-level-content .left {
  background-color: green;
  width: 33.3%;
  height: 40px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background: linear-gradient(to right, rgb(22, 160, 133), rgb(244, 208, 63));
}

.detail-page .difficulty-level-content .center {
  border-top: 1px solid #b5b1b1;
  border-bottom: 1px solid #b5b1b1;
  width: 33.3%;
  height: 40px;
}

.detail-page .difficulty-level-content .center .content-minus,
.detail-page .difficulty-level-content .center .content-plus {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(to right, rgb(22, 160, 133), rgb(244, 208, 63));
  display: flex;
  justify-content: center;
  align-items: center;
}

.detail-page .difficulty-level-content .center i {
  color: white;
  font-size: 20px;
}

.detail-page .difficulty-level-content .right {
  background-color: blue;
  width: 33.3%;
  height: 40px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background: linear-gradient(to right, rgb(255, 81, 47), rgb(221, 36, 118));
}

.detail-page .comment-content {
  max-height: 300px;
  overflow-y: scroll;
}

/*nav-tabs-calendar start*/
.nav-tabs-calendar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-tabs-calendar .title-content {
  position: relative;
  border-bottom: 2px solid #fcdd57;
}

.nav-tabs-calendar .title-content .nav-link {
  background: #fcdd57;
  min-height: 40px;
  font-size: 24px;
  color: #fff;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/*nav-tabs-calendar end*/

/*general - accordion start*/
.accordion-button:focus {
  box-shadow: none;
  border-color: rgba(0, 0, 0, 0.125);
}

/*general - accordion end*/

.studentLessonsSlider {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 150px;
  width: 100%;
  z-index: 1;
}

.studentLessonsSliderTeacherPage {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  z-index: 1;
}

.studentLessonsSliderCircles {
  width: 170px;
  height: 170px;
  background-color: #fff;
  border-radius: 50%;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-size: cover;
}

.studentLessonsSliderCircles::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--lessonOfflineRedColor) !important;
  position: absolute;
  z-index: -1;
  left: 10px;
  top: 5px;
  border-radius: 50%;
  display: flex;
}

.studentLessonsSliderCircles.SliderActiveContainer::before {
  background-color: var(--lessonOnlineGreenColor) !important;
}

.studentLessonsSliderCirclesInnerContainer {
  width: 100%;
  height: 100%;
  background-color: #ffffffa3;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  gap: 5px;
}


.studentLessonsSliderCirclesInnerContainer span {
  font-size: 16px;
  font-weight: 700;
  color: var(--main_color);
  text-align: center;
}

.calendarMainContainer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.calendar-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  align-items: center;
  justify-content: center;
}



.btn_toggle {
  padding: 10px 15px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  min-width: fit-content;
  min-height: 100px;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.btn_toggle.active {
  background-color: #c0f1c0;
  color: white;
}

.btn_toggle span {
  color: black;
  font-weight: bold;
}

.calendar-scroll {
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 15px;
  display: flex;
  cursor: grab;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
}

.calendar-scroll::-webkit-scrollbar {
  display: none;
  /* WebKit */
}

.dates-container {
  display: inline-flex;
  gap: 10px;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.date-button {
  padding: 10px 15px;
  background-color: #dadada;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  min-width: 120px;
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.date-button .date {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
}

.date-button .day-name {
  font-size: 0.8em;
  color: #666;
}

.date-button:hover {
  background-color: #e0e0e0;
  transform: scale(1.05);
}

.lessons-circles-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  max-height: 250px;
}

.lessons-circles-container-StudentEducation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  max-height: 250px;
}

.date-button.selected {
  background-color: #c0f1c0;
  transform: scale(1.1);
}

.date-button.selected .date,
.date-button.selected .day-name {
  color: #333;
}

.studentTeacherMenu {
  margin-top: 90px;
}


.academyLessonsScrollable {
  overflow-x: scroll;
  cursor: grab;
  user-select: none;
  white-space: nowrap;
  flex-wrap: nowrap;
  padding: 10px 0px;
  width: 100%;
  column-gap: 20px;
}

.academyLessonsScrollable::-webkit-scrollbar {
  display: none;
}

.academyLessonsScrollable.active {
  cursor: grabbing;
}

.academyLessonsEachItem {
  width: 100%;
  height: 100%;
  background-color: #ffffffa3;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin-right: 15px;
}

.academyLessonsEachItemText {
  word-wrap: break-word;
  white-space: normal;
  text-align: center;
}

.academyLessonsScrollable .slick-dots {
  bottom: 0px !important;
}

.academyLessonsScrollable .slick-dots li button:before {
  content: "";
  width: 15px;
  height: 15px;
  background-color: var(--main_color);
  border-radius: 50%;
}


.big_icons_href_academy {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #333 !important;
  text-decoration: none;
  padding: 10px 0px;
  column-gap: 15px;
}

.big_icons_href_academy:hover {
  transition: ease 0.5s all;
  transform: translateY(-10px);
}

.academyLessonImages {
  width: 220px;
  height: 220px;
  background-color: #fff;
  border-radius: 50%;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-size: cover;
}

.studentEducationImages {
  width: 180px;
  height: 180px;
  background-color: #fff;
  border-radius: 50%;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  background-size: cover;
}



.academyLessonImages:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--second_color);
  position: absolute;
  z-index: -1;
  left: 10px;
  top: 5px;
  border-radius: 50%;
}

.academyLessonImages.green-bg:before {
  background-color: rgb(113, 196, 113);
}

.academyTitleContent {
  position: relative;
  border-bottom: 2px solid #fcdd57;
}

.academySubtitle {
  background: #fcdd57;
  min-height: 40px;
  font-size: 24px;
  color: #fff;
  font-weight: 700;
  padding: 0px 100px;
}

.lesson-slider-container {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.lesson-slider {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-items: center;
}

.lesson-slider::-webkit-scrollbar {
  display: none;
}

.lesson-card {
  border-radius: 8px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  padding: 20px 0px;
}

.lesson-card h6 {
  color: white;
  text-align: center;
  user-select: none;
  padding: 0px;
  margin: 0px;
  font-weight: 700;
}

.slick-slide {
  margin: 10px;
}

.slick-list {
  margin: 10px;
}

.lessons-title {
  color: #333;
  font-weight: bold;
}

.lessons-tabs {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.lessons-tab-btn {
  padding: 10px 20px;
  border: none;
  background-color: #f0f0f0;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lessons-tab-btn.active {
  background-color: #221444;
  color: white;
}

.lessons-card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: 0.3s;
}

.lessons-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.lessons-card-header {
  background-color: #221444;
  color: white;
  padding: 15px 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.lessons-card-body {
  padding: 20px;
  min-height: 300px;
}

.lessons-list-group {
  list-style-type: none;
  padding: 0;
}

.lessons-list-item {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.lessons-list-item:last-child {
  border-bottom: none;
}

.lessons-link {
  color: #221444;
  text-decoration: none;
  transition: 0.2s;
}

.lessons-link:hover {
  color: #221444;
}

.lessons-btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  transition: 0.3s;
}

.lessons-btn-primary {
  background-color: #221444;
  color: white;
}

.lessons-btn-primary:hover {
  background-color: #221444;
}

.lessons-tab-content {
  display: none;
}

.lessons-tab-content.active {
  display: block;
}

.lessons-video-container,
.lessons-pdf-container,
.lessons-presentation-container {
  margin-bottom: 20px;
}

.lessons-video-container iframe,
.lessons-pdf-container embed {
  width: 100%;
  height: 600px;
  border: none;
}

.lessons-pptx-item {
  margin: 10px 0px;
}

.lessonCardBtns:hover {
  background-color: #221444;
}

.lessonCardBtns:hover .lessonCardBtnsText {
  color: white;
}

.lessonCardBtns:hover .lessonCardBtnsIcon {
  color: white !important;
}

.calendar-container {
  max-width: 900px;
  margin: 20px auto;
  padding: 20px;
  background-color: #1a1a1a;
  border-radius: 10px;
}

.fc-theme-standard {
  background-color: #1a1a1a;
  color: white;
}

.fc-theme-standard th,
.fc-theme-standard td {
  border-color: #333333;
}

.fc-day-today {
  background-color: #333333 !important;
}

.fc-button-primary {
  background-color: #333333 !important;
  border: none !important;
}

.fc-next-button.fc-button.fc-button-primary {
  background-color: #1a1a1a !important;
  color: gold !important;
  font-size: 25px !important;
}

.fc-prev-button.fc-button.fc-button-primary {
  background-color: #1a1a1a !important;
  color: gold !important;
  font-size: 25px !important;
}


.fc-col-header-cell-cushion {
  color: #1a1a1a !important;
}

.fc-button-primary:hover {
  background-color: #444444 !important;
}

.fc-theme-standard td,
.fc-theme-standard th {
  color: white;
}

.fc-daygrid-day-frame {
  position: relative;
}

.custom-underline {
  position: absolute;
  bottom: -71px;
  left: 0;
  right: 0;
  height: 10px;
}

.fc-day-selected {
  background-color: rgba(0, 255, 0, 0.2) !important;
}

.fc-day-selected::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #00ff00;
}

.fc .fc-bg-event {
  background-color: #1a1a1a !important;
}

.fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 10px !important;
}

.myCarouselControlPrev,
.myCarouselControlNext {
  width: 5%;
  opacity: 1;
}

.myCarouselControlPrevIcon,
.myCarouselControlNextIcon {
  background-color: black;
  padding: 15px;
  border-radius: 50%;
  font-size: 20px;
}

.myCarouselControlPrev {
  left: -20px;
}

.myCarouselControlNext {
  right: -20px;
}

.BuyLectureAccordion .accordion-item {
  border-color: #221444;
}

.BuyLectureAccordion .accordion-button {
  background-color: #221444;
  color: #ffffff;
}

.BuyLectureAccordion .accordion-button:not(.collapsed) {
  background-color: #2d1a5c;
  color: #ffffff;
}

.BuyLectureAccordion .accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(34, 20, 68, 0.25);
}

.BuyLectureAccordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.BuyLectureSelect {
  background-color: #ffffff;
  color: #221444;
  border: 1px solid #221444;
  border-radius: 5px;
}

.BuyLectureSelect:focus {
  border-color: #221444;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(34, 20, 68, 0.25);
}

.BuyLectureSelect option {
  background-color: #ffffff;
  color: #221444;
}

.BuyLectureSelect option:checked {
  background-color: #221444;
  color: #ffffff;
}

.BuyLectureSelect::-ms-expand {
  display: none;
}

.BuyLectureSelect {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23221444' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}


.BuyLectureAccordion .accordion-body {
  background-color: #f8f5ff;
  color: #221444;
}

.satya-section-style {
  background-color: #261444;
  color: #fff;
  padding: 2rem 0;
  margin-top: 6.5rem;
}

.satya-container-style {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.satya-title {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2.5rem;
}

.satya-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.satya-card {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.satya-card:hover {
  transform: translateY(-5px);
}

.satya-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.satya-card-content {
  padding: 1.5rem;
}

.satya-card-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.satya-card-excerpt {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.satya-card-button {
  display: inline-block;
  background-color: #ff6b6b;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.satya-card-button:hover {
  background-color: #ff4757;
}

.satya-post {
  background-color: #fff;
  color: #000;
  padding: 2rem 0;
  margin-top: 6.5rem;
}

.satya-post-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

.satya-post-header {
  text-align: center;
  margin-bottom: 2rem;
}

.satya-post-title {
  font-size: 2.5rem;
  color: #261444;
  margin-bottom: 0.5rem;
}

.satya-post-meta {
  font-size: 0.9rem;
  color: #666;
}

.satya-post-date,
.satya-post-author {
  margin-right: 1rem;
}

.satya-post-image {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 2rem;
}

.satya-post-content {
  line-height: 1.6;
  font-size: 1.1rem;
}

.satya-post-content p {
  margin-bottom: 1.5rem;
}

.satya-post-footer {
  margin-top: 3rem;
  text-align: center;
}

.satya-post-back-button {
  display: inline-block;
  background-color: #261444;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.satya-post-back-button:hover {
  background-color: #3a1f66;
}

.lesson-card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  border-radius: 15px;
  color: white;
  transition: transform 0.3s ease;
}

.lesson-card:hover {
  transform: scale(1.05);
}

#lessonCarousel {
  width: 85%;
  margin: 0 auto;
}

.carousel-control-prev,
.carousel-control-next {
  width: 5%;
}

.custom-control {
  background-color: #261444;
  opacity: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.custom-control:hover {
  opacity: 0.8;
}

.carousel-control-prev {
  left: -50px;
}

.carousel-control-next {
  right: -50px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1);
}


.custom_checkboxBuyLecture {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.custom_checkboxBuyLecture:checked {
  background-color: #261444;
  border-color: #261444;
}

.custom_checkboxBuyLecture:checked::before {
  color: white;
}


@media (max-width: 768px) {
  .satya-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .satya-post-title {
    font-size: 2rem;
  }

  .satya-post-content {
    font-size: 1rem;
  }
}

@media (min-width: 992px) and (max-width: 1399px) {
  .calendar-scroll {
    flex: 0 0 auto;
    width: 70% !important;
  }
}


@media (max-width: 992px) {
  .calendarBuyLecture {
    width: 100% !important;
  }

  #appointmentInfo {
    width: 100% !important;
  }
}