/*----------------------------------------------------------------------------------|  www.vdm.io  |----/
				Lmskaran 
/-------------------------------------------------------------------------------------------------------/

	@version		1.0.97
	@build			19th January, 2025
	@created		22nd July, 2020
	@package		Moojla
	@subpackage		coursedetail.css
	@author			Lmskaran <https://Lmskaran.com>	
	@copyright		Copyright (C) 2015. All Rights Reserved
	@license		GNU/GPL Version 2 or later - http://www.gnu.org/licenses/gpl-2.0.html
  ____  _____  _____  __  __  __      __       ___  _____  __  __  ____  _____  _  _  ____  _  _  ____ 
 (_  _)(  _  )(  _  )(  \/  )(  )    /__\     / __)(  _  )(  \/  )(  _ \(  _  )( \( )( ___)( \( )(_  _)
.-_)(   )(_)(  )(_)(  )    (  )(__  /(__)\   ( (__  )(_)(  )    (  )___/ )(_)(  )  (  )__)  )  (   )(  
\____) (_____)(_____)(_/\/\_)(____)(__)(__)   \___)(_____)(_/\/\_)(__)  (_____)(_)\_)(____)(_)\_) (__) 

/------------------------------------------------------------------------------------------------------*/

/* CSS Document */

.video-js .vjs-tech
{
  /*position: static !important;*/
}


.loading:before
{
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(https://i0.wp.com/codemyui.com/wp-content/uploads/2016/08/circular-water-fill-loading-animation.gif);
    width: 150px;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    top: 60%;
}
.lmskaran-sections-in-accordion
{
  position: relative;
}




/* CSS Document */

.main-lmskaran--course-search-card{
  word-break: break-word;
}

@font-face {
  font-family: "Vazir";
  src: url(./vazir-font/Vazir.eot), url(./vazir-font/Vazir.ttf), url(./vazir-font/Vazir.woff), url(./vazir-font/Vazir.woff2);
}

body,
input,
button {
  font-family: "vazir";
  background-color: #fff;
}

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

/* آیکون ها دیگر ایتالیک نباشند */

i {
  font-style: initial;
}

a {
  text-decoration: none;
}


/* این قسمت برای بک گراند نوک مدادی هست */

#header-landscape {
  background: #303642;
  width: 100%;
  height: 300px;
  margin-top: 20px;
}


/* این قسمت برای ستاره ها بهش استایل دادیم */

.icon-star {
  position: relative;
  top: 1px;
  font-family: "FontAwesome";
  color: yellow;
}


/* سفید شدن متن ها در نویگیشن */

#header-text-course {
  color: white;
  width: 30%;
  position: relative;
  left: -7%;
}


/* قرار گرفتن متن های داخل نویگیشن در وسط */

#header-landscape {
  display: flex;
  justify-content: center;
}


/* ستونی شدن لیست هایی که در سایدبار هست */

#details-Description {
  display: flex;
  flex-direction: column;
  padding-right: 10px;
  font-size: 13px;
  align-items: start;
}


/* این هم عرض دادن به سایدبار و دیگر استایل های دیگر هست */

.box-width-course {
  width: 100%;
  background: white;
  border: 1px solid #ddd;
  padding: 5px;
  box-shadow: 1px 1px 10px #9c9c9c;
  margin-right: 20px;
  border-radius: 10px;
  position: relative;
}


/* این برای تصاویر داخل سایدبارهست که عرض بهش دادیم و ... */

.image-course {
  width: 100%;
  border-radius: 10px;
}


/* وسط آمدن دکمه ثبت نام در سایدبار و فاصله گرفتن از بالا و پایین */

#course-button {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 10px 0px;
}


/* بزرگ شدن فونت سایز دکمه ثبت نام در سایدبار */

#course-button input[type="button"] {
  font-size: 15px;
  color: white;
  padding: 5px;
  border: 1px solid green;
  border-radius: 5px;
  letter-spacing: 1px;
  background: linear-gradient(to top, #007791, #019bbd);
}


/* به توضیحاتی که در داخل سایدبار هست فونت اوسوم دادیم */

span.list-Description i::before {
  font-family: "FontAwesome";
  margin-left: 5px;
  color: #909090;
}


/* hr خاصیت دادن به  */

.line-style {
  height: 1px;
  background: #03a9f4;
  border: 1px solid #0089c7;
  margin-bottom: 10px;
}

/* فاصله دادن به عنوان درس از بالا و پایین */
#title h1 {
  color: white;
}

/* از بالا و پایین header  فاصله دادن به توضیحات درس در  */
p.header-Description-p {
  margin: 15px 0px;
}

/* =================================================================================================================================== */

/* قرمز شدن شماره تماس و لینک سایت مون در فوتر */
.color-footer-text {
  color: red !important;
}

/* این همون پرچسب قرمز هست که بالای باکس معلم هست */
#tiket{
  width: 10px;
  height: 130px;
  border: 30px solid red;
  border-bottom: transparent solid 30px;
  position: absolute;
  top: 0px;
}

/* این برای آیکون کیک توی پرچسب هست  */
#tiket > .fa-birthday-cake:before {
  content: "\f1fd";
  color: white;
  font-size: 25px;
  font-family: "FontAwesome";
  position: absolute;
  bottom: 0px;
  left: -13px;
}

#tiket > .fa-birthday-cake{
  position: relative;
} 

#tiket span{
  width: 41px;
  position: absolute;
  top: 20px;
  font-size: 10px;
  right: -20px;
  color: white;
  font-weight: bold;
  letter-spacing: 1px;
}

div.faaliat span {
  border: 4px solid #d0d0d0;
  padding: 3px;
  border-radius: 10px;
  text-align: center;
  background: white;
  z-index: 103;
  width: 100%;
  font-size: 13px;
}

div.faaliat {
  display: flex;
  justify-content: center;
  position: relative;
}

div.faaliat::before,
div.faaliat::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 1px;
  background: #dedede;
  position: relative;
  top: 20px;
}

#title-course {
  display: flex;
  justify-content: center;
  color: #007791;
}

div#modares {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

#modares span::before {
  display: block;
  text-align: center;
  font-family: "FontAwesome";
  color: #404040;
}

#sidebar-film span::before {
  content: "\f008";
}

#sidebar-star span::before {
  content: "\f005";
}

#sidebar-message span::before {
  content: "\f075";
}

.img-course img {
  border-radius: 100%;
  border: 7px double #d0d0d0;
}

.img-course {
  display: flex;
  justify-content: center;
}

div#box-course-techear {
  margin-top: 40px;
}

div#number-Description {
  display: flex;
  justify-content: space-around;
  text-align: center;
  font-size: 14px;
}

div#content span::before {
  content: "\f19d";
  font-family: "FontAwesome";
  display: inline-flex;
  margin-left: 5px;
}

#content {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.spacing-faaliat {
  margin: 20px;
}

div#social {
  font-family: "FontAwesome";
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  max-width: 350px;
  color: #5a5a5a;
  margin-bottom: 20px;
}

#social a {
  color: #404040;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: right;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border: 1px solid #ddd;
  margin: 5px 0px;
  border-radius: 5px;
}

.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}


div#all {
  font-size: 12.5px;
}

.container_moojla {
  display: grid;
  grid-template-areas: "moojheader moojheader moojheader" "moojnav moojcontent side" "footer footer footer";
  grid-template-columns: 420px 1fr 0px;
  grid-template-rows: auto 1fr auto;
  grid-gap: 50px;
}

#moojla_header {
  grid-area: moojheader;
}

#moojla_nav {
  grid-area: moojnav;
  margin-left: 0.5rem;
  margin-top: -200px;
}

#moojla_main {
  grid-area: moojcontent;
}

aside {
  grid-area: side;
  margin-right: 0.5rem;
}

/* footer { */
/* grid-area: footer; */
/* display: flex !important; */
/* justify-content: space-around; */
/* flex-direction: row-reverse; */
/* background: #eee; */
/* padding: 10px; */
/* border-top: 1px solid #ddd; */
/* } */

/* footer div { */
/* margin: 0px 15px; */
/* font-size: 90%; */
/* } */

@media only screen and (max-width: 1199px) {
  .container_moojla {
    display: grid;
    grid-template-areas:
      "moojheader moojheader moojheader" 
      "moojnav moojnav moojnav"
      "moojcontent moojcontent moojcontent"
      "footer footer footer";
    grid-template-columns: 360px 1fr 0px;
    grid-template-rows: auto 1fr auto;
    grid-gap: 50px;
  }
  #moojla_nav {
    grid-area: moojnav;
    margin-left: 0.5rem;
    margin-top: 0px;
    margin: 0 15%;
  }
  .box-width-course {
    margin-right: 0px;
  }
  #header-text-course {
    position: relative;
    right: -17%;
  }
}


/*************modal for login***************/

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
.moojla-login-button {
  display: block;
  border-radius: 10px;
  text-decoration: none;
  background: #3fc53f;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 100;
  width: 100%;
  text-align: center;
  border-left: 1px solid #77dc69;
  transition: 0.5s;
  padding: 10px;

}


/* .moojla-login-button:hover { */
  /* opacity: 0.8; */
  /* color:white; */
/* } */

/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.login_container {
  padding: 16px;
  border-radius: 0 0 20px 20px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* The moojla-login-modal (background) */
.moojla-login-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* moojla-login-modal Content/Box */
.moojla-login-modal-content {
  background-color: #fefefe;
  margin: 0 auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
  border-radius: 20px;
  padding-top: 20px;
}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}


/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.8s;
  animation: animatezoom 0.8s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}





/***************************************************این برای مودال ورود و یا ثبت نام هست**********************************************************/ 

/* preloader */
div#moojla-login-modal-content {
  background: white;
}

div#moojla-login-modal-content > img{
  margin: 0 auto;
  display: block;
  padding: 20px 0;
}

.moojla-login-modal-content{
  background-color: transparent;
  border: unset;
  width:40%;
}

.moojla-login-modal{
  background-color: rgb(0 0 0 / 69%);
}

input#modlgn-username,input#modlgn-passwd {
  margin: unset !important;
}


/* tab login */
span#logintabbtn {
  margin-left: 10px;
}

/* tab login and registration*/
.modal_tab_button_login_registration{
  cursor: pointer;
  color:black;
  font-weight: 100;
  background: white;
  padding: 15px 20px;
  border-radius: 10px 10px 0px 0px;
  font-size: 1rem;
  position: relative;
  bottom: 10px;
}

#moojla-login-modal-content #login-form {
  width:100%;
  display: block;
  padding: 20px 15%;
}

.input-prepend {
  width: 100%;
  display: flex !important;
}

input#modlgn-username,input#modlgn-passwd {
  width: 100%;
}

.add-on [class^="icon-"], .add-on [class*=" icon-"]{
  margin-left:unset !Important;
}
/*ul in tab login*/
ul.nav.nav-tabs.nav-stacked li a {
  color: black;
  padding: 20px;
}

/* background login form*/
form.form-validate.form-horizontal.well {
  border-bottom: unset;
  background: white;
}

/* break fild */
.form-horizontal .control-label {
  width: 100% !important;
}

/* margin unset input */
.form-horizontal .controls{
  margin-right:unset !important;
}

div#moojla-reg-modal-content {
  background: white;
}

div#form-login-submit .controls {
  display: flex;
  justify-content: center;
  align-items: center;
}

div#form-login-submit .controls button{
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  font-weight: 100;
  background: linear-gradient(to bottom, #4179ce, #4896a8,#22747b);
}

#moojla-reg-modal-content #cbcheckedadminForm #registrationTable{
  color:black;
}

ul#form-login-links {
  font-size: 15px;
  font-weight: 100;
  margin-bottom: unset;
}

#moojla-login-modal-content .image_head_modal_login {
  width: 100%;
}

div#form-login-remember {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

div#form-login-remember label {
  color: black;
  font-size: 15px;
  font-weight: 100;
  margin-right: 5px;
}


/* tab reg */

div#moojla-reg-modal-content form#cbcheckedadminForm {
  padding: 0px 5% 0 20%;
}

div#moojla-reg-modal-content form#cbcheckedadminForm #registrationTable input {
  width: 100%;
  height: 20px;
  background:#f1f1f1;
}

div#moojla-reg-modal-content form#cbcheckedadminForm .cbRegistrationButtons{
  display: flex;
  justify-content: flex-end;
}

div#moojla-reg-modal-content form#cbcheckedadminForm .cbRegistrationButtons .offset-sm-3.col-sm-9{
  margin-left: unset;
}

div#moojla-reg-modal-content form#cbcheckedadminForm .cbRegistrationButtons .offset-sm-3.col-sm-9 input{
  height:auto !important;
  background:linear-gradient(to bottom, #4179ce, #4896a8,#22747b) !important;
}

.form-group > label {
  text-align: left;
  padding-left: 10px !important;
}

.active_tab_login_registration{
  transition: 0.5s;
  background: #ffffff;
  color: #171717;
  box-shadow: inset 0px 6px 0px 0px #4792ac;
}

/*moojla modal*/
#moojla-modal{
  cursor: auto;
}

@media screen and (max-width: 1200px) and (min-width: 768px){

  .moojla-login-modal-content{
    width:60%;
  }
}

@media screen and (max-width: 768px) and (min-width: 500px){

  .moojla-login-modal-content{
    width:80%;
  }
}

@media only screen and (max-width: 500px){

  .moojla-login-modal-content{
    width:99%;
  }

}
.show_content{
  display:block !important;
}

.display_content_log_reg{ 
  display:none;
}

div.rate *{
  margin: 0;
  padding: 0;
}
.rate {
  float: left;
  /*height: 46px;*/
}
.rate:not(:checked) > input {
  /*position:absolute;*/
  /*top:-9999px;*/
  display: none;
}
.rate:not(:checked) > label {
  float:right;
  width: 25.5px;
  /*width: 40px;*/
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
  font-size:30px;
  color:#ccc;
  filter: grayscale(1);
  transition: 0.3s;
}
.rate:not(:checked) > label:before {
  content: url('../images/star-svg.svg');
  /*content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='25' height='25'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='-1483.396' x2='-1155.767' y1='1056.787' y2='1056.787' gradientUnits='userSpaceOnUse' xlink:href='%23a'/%3E%3ClinearGradient id='a'%3E%3Cstop offset='0' stop-color='%23fcd635'/%3E%3Cstop offset='1' stop-color='%23f7a928'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23b)' d='M-1220 1212.362c-11.656 8.326-86.446-44.452-100.77-44.568-14.324-.115-89.956 51.449-101.476 42.936-11.52-8.513 15.563-95.952 11.247-109.61-4.316-13.658-76.729-69.655-72.193-83.242 4.537-13.587 96.065-14.849 107.721-23.175 11.656-8.325 42.535-94.497 56.86-94.382 14.323.116 43.807 86.775 55.327 95.288 11.52 8.512 103.017 11.252 107.334 24.91 4.316 13.658-68.99 68.479-73.527 82.066-4.536 13.587 21.133 101.451 9.477 109.777z' color='%23000' overflow='visible' style='marker:none;scale: 1.5;' transform='matrix(.04574 0 0 .04561 68.85 -40.34)'/%3E%3C/svg%3E");*/
}
.rate > input:checked ~ label {
  color: #ffc700;
  filter: grayscale(0);
}
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
  color: #deb217;
}
.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label {
  color: #c59b08;
}
.lmskaran_reg_download .moojla-login-button:hover{
  background: #3bab2c;
  color: #fff;
}

.fabrikHide {
  display: none !important;
}

.button-show-course {
  text-align: center;
}

.button-show-course button {
  padding: 15px 30px;
  margin: 5px 10px;
  text-shadow: unset;
  font-weight: bold;
  color: #fff !important;
  border: unset;
  border-radius: 10px;
}

.button-show-course button:hover{
    color:#fff;
}

.button-show-course > button:first-child {
  background: #32b5dd;
}

.button-show-course > button:nth-child(2) {
  background: #49cb3d;
}

.rating-course > div {
  flex-direction: column;
}

.rate {
  width: 100%;
  margin: 10px 0 0;
}

div#product-single-top-part img {
  border-radius: 5px;
  margin-bottom: 20px;
} 

.product-info-box .sell_course {
  justify-content: space-between;
}


span.hikashop_product_price_full span.hikashop_product_price {
  font-size: 1.2rem;
}

.lmskaran_button_registration a {
  width: 100%;
  display: block;
  line-height: 2;
  font-size: 16px;
  font-weight: 500;
}

.page-title .title-page {
  color: #fff;
  font-size: 30px;
}

@media only screen and (max-width: 600px) {

  .page-title {
      padding: 30px 10px !important;
  }

  .additional-fields-item.poshtibandoreh {
      flex-wrap: wrap;
      width: 100%;
      gap: 10px;
  } 

  .additional-fields-item.poshtibandoreh .lmskaran_desck {
      font-size: 13px;
  }
    .page-title .title-page {
      font-size: 18px;
  }  
  .Colon {
    display: none;
  }
}

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


/* کد موقت */

ul.ul-students {
  display: none;
}