Dashboard

gistfile1.txt

<div class="profile-section">
<div class="dashboard-wrapper">
<div class="dashboard-left">[left_menu name='Dashboard' device='Desktop'][left_menu name='Dashboard' image_src='http://crush.test/wp-content/uploads/2020/04/Group-1910.svg' device='Mobile']</div>
<div class="dashboard-right">
[shop_messages]  
<!-- When No coach assigned -->
[wpv-conditional if="( '[crush_trainer_assigned]' eq '' )"]
<div class="dashboard1-head">
<div class="head1-left">
<div style="padding-top: 30px;">
<h3 class='desk'>Hello, [wpv-user field="user_firstname"]</h3>
<h3 class='mob'>Hello, <br><span style='font-size: 24px'>[wpv-user field="user_firstname"]</span></h3>  
</div>
<div class="conditional-right mob"><img src="http://crush.test/wp-content/uploads/2020/05/uday.jpg"><p class='mob' style='text-align: center; margin: -10px 0 20px; line-height:1.5; font-weight: 400; font-size:11px'>Uday Raj Anand <br> CEO, Crush Fitness India</p></div>

</div>
<div class="head1-right">
      <div class="conditional0-left">
      <h2>Welcome to your Crush Journey</h2>
      [wpv-conditional if="( '[customer_stage]' eq '0' ) OR ( '[customer_stage]' eq '2' )"]  
      <p>Choose a fitness program so that we can assign a dedicated fitness Crush coach to guide you</p>
      [/wpv-conditional]
      [wpv-conditional if="( '[customer_stage]' eq '1' ) OR ( '[customer_stage]' eq '3' )"]
      [wpv-conditional if="( '[crush_questionnaire_data]' eq '' )"]  
      <p>Please fill the online fitness assessment form, so that we can design a fitness program for you and assign a coach to guide you through it</p>
      [/wpv-conditional]
      [wpv-conditional if="( '[crush_questionnaire_data]' ne '' )"]  
      <p>Thank you for completing your online fitness assessment. A dedicated trainer will be assigned to you soon along with a personalised workout plan</p>
      [/wpv-conditional]       
      [/wpv-conditional]
      [wpv-conditional if="( '[customer_stage]' eq '0' ) OR ( '[customer_stage]' eq '2' )"]   
      <a href="/#fitness-programs"><button>View Fitness Programs</button></a>
      [/wpv-conditional]
      [wpv-conditional if="( '[customer_stage]' eq '1' ) OR ( '[customer_stage]' eq '3' )"]
      [wpv-conditional if="( '[crush_questionnaire_data]' eq '' )"]  
      <a href="/fitness-profile"><button>Fill the fitness assessment form</button></a>
      [/wpv-conditional]
      [wpv-conditional if="( '[crush_questionnaire_data]' ne '' )"]  
      <a href="/fitness-profile"><button>View Fitness Profile</button></a>
      [/wpv-conditional]  
      [/wpv-conditional]  
      </div>
      <div class="conditional0-right">
       <img class="desk" src="http://crush.test/wp-content/uploads/2020/05/uday.jpg">
        <p class='desk' style='text-align: center; margin: 0 0 20px; line-height: 1.3'>
Uday Raj Anand <br> CEO, Crush Fitness India</p>
      </div>
     </div>
 </div>
[/wpv-conditional]
 <!-- When No Coach assigned ENDS -->
  <!-- ******************************* -->
 <!--When Coach Assigned -->
  [wpv-conditional if="( '[crush_trainer_assigned]' eq '1' )"]
<div class="dashboard1-head">
<div class="head1-left">
<div style="padding-top: 30px;">
<h3 class='desk'>Hello, [wpv-user field="user_firstname"]</h3>
<h3 class='mob'>Hello, <br><span style='font-size: 24px'>[wpv-user field="user_firstname"]</span></h3>
</div>
<div class="conditional-right mob"><img src="[crush_trainer_assigned field='wpcf-trainer-profile']"></div>

</div>
<div class="head1-right">
      <div class="conditional-left">
      <h2>[crush_trainer_assigned field='first_name'] [crush_trainer_assigned field='last_name']</h2>
      <h4 style='color: #797979; margin-bottom: 10px'>[crush_trainer_assigned field='wpcf-trainer-specialization'] </h4>
      <p>[crush_trainer_assigned field='wpcf-trainer-bio'] </p>
      <button onclick="msgPopupOpen();">Message me</button>
      </div>
      <div class="conditional-right">
       <img class="desk" src="[crush_trainer_assigned field='wpcf-trainer-profile']">
      </div>
     </div>
 </div>
[/wpv-conditional]
  <!-- When Coach assigned ENDS -->

  <!--***************** UPCOMING CLASSES *******************-->
[wpv-conditional if="( '[customer_stage]' eq '0' )"]
<div class="dashboard-content" style="background: #FFF; color: #000;">
<div class="content-left">
<div>
<h3 style="border-left: 5px solid #A4C409; padding-left: 8px;">Upcoming<br>Classes</h3>
</div>
</div>
  <div> 
 	<div class="class-disclaimer">
      <div class="dicon">
        <img src="http://crush.test/wp-content/uploads/2020/04/Group-1398.svg">     
      </div>
      <div class="text">
        <h3>Pay as much as you want</h3>
        <p>Just enter the amount you want to pay in multiples of <span style='font-weight:bold'>10</span> in the <span style='font-weight:bold'>'Coupon Code'</span> field at checkout.</p>
         <p> For example, if you want to pay INR 40 for a class, enter <span style='font-weight:bold'>40</span> in <span style='font-weight:bold'>'Coupon Code Field'</span> and the price for the class will change to INR 40 plus GST</p>
      </div>
    </div>
  
  
<div class="content-right-opcoming-classes upcoming-classes">[archive_classes_public limit = 3]<!-- Pagination 
    

<div class="new-swiper-pagination"></div>

 --></div> 
  </div>
    

</div>
[/wpv-conditional]

                    <!-- ***************************************** -->
  [classes_booked_stage2 value='1']
  [wpv-conditional if="( '[customer_stage]' eq '1' ) OR ('[customer_stage]' eq '2') OR ('[customer_stage]' eq '3')"]	
  [wpv-conditional if="( '[classes_booked_stage2 value='1']' ne '0' )"]
  <!--*************** Your Programs ************  -->
<div class="dashboard-content" style="background: #454545;">
<div class="content-left">
<div>
<h3>Your Subscriptions</h3>
  
</div>
</div>
<div class="content-right left-padding" style="display: block;">
<div class="main-wrapper" style="margin-bottom: 20px;">
[classes_booked_stage2 value='1']
<p>Fitness Program</p>

</div>

</div>

</div>
[/wpv-conditional]
  [/wpv-conditional]
<!-- ************ Condition 3 ************* --> <!-- Questionnaire data  -->
[wpv-conditional if="( '[customer_stage]' eq '1' ) OR ( '[customer_stage]' eq '3' )"]
  [wpv-conditional if="( '[crush_questionnaire_data]' ne '' )"]
[wpv-view name="customers-questionnaire-data-for-dashboard" ids="[crush_questionnaire_data]"]
  [/wpv-conditional][/wpv-conditional]
<div class="dashboard-other-content">
  <!-- ****************** Your Classes ******************* -->
  [wpv-conditional if="( '[customer_stage]' eq '2' ) OR ( '[customer_stage]' eq '3' )"]

<div class="dashboard-content" style="background: #F2F2F2;">
<div class="content-left">
<div>
<h3 style="color: #000; border-left: 5px solid #A4C409; padding-left: 8px;">Your Classes</h3>
</div>
</div>

<div class="content-right your-class-right">
   <p class='group-classes-diclaimer'><span style='font-weight:bold'> Laptop/Desktop/iPad/Mobile Users- </span> Download the zoom app to attend live group fitness classes</p>   
  [dashboard_your_classes limit='3']
  </div>

</div>
[/wpv-conditional]
 
<!-- ***********************Fitness Programs*************************** -->  
  
[wpv-conditional if="( '[customer_stage]' eq '1' ) OR ( '[customer_stage]' eq '3' )"]    
<div class="dashboard-content" style="background: #F2F2F2;">
<div class="content-left">
<div>
<h3 style="color: #000; border-left: 5px solid #A4C409; padding-left: 8px;">Your Fitness<br> Programs</h3>
</div>
</div>

<div class="content-right your-class-right">
 [crush_personal_products_purchased limit='3']
  <a href='/fitness' class="go-to-fitness"><button>View all</button></a>
</div>
</div>  
[/wpv-conditional]   
  
<!-- ***********************Customers Videos*************************** -->
  
[wpv-conditional if="( '[customer_stage]' eq '1' ) OR ( '[customer_stage]' eq '3' )"]    
  [wpv-view name="videos-of-customers-on-dashboard" author="[current_user]"] 
[/wpv-conditional]     
  
<!-- **********************Customers Lessons************************* -->
  
[wpv-conditional if="( '[customer_stage]' eq '1' ) OR ( '[customer_stage]' eq '3' )"]  
  [wpv-view name="lessons-of-customers-on-dashboard" author="[current_user]"]
[/wpv-conditional] 
</div>
<!--*************** END of Condition 3 *****************-->
</div>
</div>
</div>
<p><!-- POPUP Button Content  --></p>
<div id="msg-overlay" class="overlay" style="display: none;"></div>
<div id="msg-popup" class="msg-popup" style="display: none;">
<div class="msg-popup-inner">
<div class="s3-btn-close" onclick="popupClose()"><img src="http://crush.test/wp-content/uploads/2020/04/Layer-2.svg"></div>
<h2 id='message-me'>Message Me</h2>
<form action=" ">
<p id="sending" style="display: none; text-align: center;">Sending...</p>
<p id="info-message" style="text-align: center;"></p>
<textarea id="message" class="message" cols="50" maxlength="200" name="message-me" rows="8" placeholder="Type your message here." required ></textarea>
<input id="customerId" name="customerId" type="hidden" value="[crush_customer_post_id]">
  <input id="trainertId" name="trainertId" type="hidden" value="[crush_trainer_assigned getid='1']">
<div id="charNum"></div>
<button id="message-popup" type="button" value="submit">Submit</button>
  <div id='error' style="color: red; margin-top: 5px"></div>  
</form>
</div>
</div>



.go-to-fitness
{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}
.go-to-fitness button
{
    background: #A4C409;
    color: #000;
    font-weight: bold;
    font-size: 16px;
    padding: 10px 40px; 
    border: none;
    border-radius: 5px;
}
.go-to-fitness button:hover, .go-to-fitness button:active, .go-to-fitness button:focus
{
  background: #A4C409;
  color: #000;
  outline: none;
}
.left-padding p
{
  padding-left: 18px !important;
}
.profile-section h3
{
  font-size: 20px;
  border-left: 5px solid #D3F800;
  padding-left: 8px;
}
.profile-section h4
{
  font-size: 25px;
}
.profile-section h2
{
  font-size: 40px;
}
.profile-section button
{
  font-size: 13px;
}
.mob
{
  display: none;
}
.dashboard-wrapper
{
  display: flex;
  justify-content: space-between;
}
.dashboard-left
{
  width: 15%;
}
.dashboard-right
{
  width: 85%;
}
.dashboard-right h6
{
  color: #222;
  font-size: 20px;
  margin-bottom: 20px;
  line-height: 1.5;
  max-width: 70%;
}
.dashboard-head
{
  background-image: url('http://crush.test/wp-content/uploads/2020/04/Group-1942.svg');
  background-position: center center;
  background-size: cover;
  display: flex;
  justify-content: space-between;
  padding: 50px;
  color: #FFF;
  font-weight: bold;
}
.dashboard1-head
{
  padding: 0;
  display: flex;
  justify-content: space-between;
  background: #222222;
  color: #FFF;
  font-weight: 500;
}
.head-left
{
  width: 25%;
  display: flex;
}
.head1-left
{
  width: 25%;
  display: flex;
  padding: 0px 0 30px 50px;
}
.head-left h3, .head1-left h3
{
  font-size: 20px;
  margin-top: 15px;
  text-transform: capitalize; 
}
.head-right, .head1-right
{
  width: 73%;
}
.head-right h2, .head1-right h2
{
  font-size: 28px;
}
.head1-right h4
{
  font-size: 25px;
}
.head-right p, .head1-right p
{
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 20px 0;
}
.head-right button, .head1-right button
{
  background: #A4C409;
  border: none;
  border-radius: 5px;
  color: #000;
  font-weight: bold;
  padding: 12px 25px;
}
.head-right button:active, .head-right button:focus, .head1-right button:focus, .head1-right button:active
{
  background: #A4C409;
  color: #000;
  outline: none;
}
.head1-right
{
  display: flex;
  justify-content: space-between;
}
.conditional-left, .conditional0-left
{
  width: 55%;
  padding: 30px 0 30px;
}
.conditional0-right
{
  width: 30%;
}
.conditional-right
{
  width: 33%;
}
.conditional-right img
{
  clip-path: circle(57.4% at 58% 36%);
  width: 100%;
  height: 250px;
  object-fit: cover;
  margin-top:-1px;
}
.conditional0-right img
{
  clip-path: circle(57.4% at 58% 36%);
  -webkit-clip-path: circle(57.4% at 58% 36%);
  width: 100%;
  height: 230px;
  object-fit: cover;
  margin-top:-1px;
}
/* ***************************Dashboard Questionnaire data**************************** */
.dashboard-content
{
  display: flex;
  background: #454545;
  padding: 50px;
  color:#FFF;
  font-weight: bold;
}
.content-left
{
  width:25%;
  display: flex;
}
.content-right
{
  width: 73%;
  display: grid;
  grid-template-columns: repeat(2, 50%);
  justify-content: space-between;
  grid-row-gap: 30px;
}
.your-class-right {
display : block !important;
}

.swiper-container
{
  width: 73%;
}
.content-right-videos
{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 31%);
  justify-content: space-between;
  grid-column-gap: 15px;
}
.content-right-lessons
{
  width: 73%;
  display: grid;
  grid-template-columns: repeat(5, 20%);
  justify-content: space-between;
  grid-row-gap: 30px;
  grid-column-gap: 15px;
}
.main-wrapper p
{
  font-size:18px;
  color: #797979;
}


#user-dashboard
{
  margin: 50px auto;
}
.dashboard
{
  margin: auto;
  text-align: center;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.dashboard a, .dashboard a:hover
{
  color:#000;
}
.user-name
{
  font-size: 50px;
  line-height: 54px;
  font-weight: 400;
  color: #000;
  text-align: center;
  margin: 15px auto 25px;
}
.coupon
{
  display: flex;
  border: 3px solid #000;
  border-radius: 10px;
  padding: 20px;
  color: #222;
  font-weight: 400;
  width: 30%;
  margin: 20px;
}
.coupon .coupon-image
{
  margin-right: 10px;
  width: 100px;
  height: auto;
}
.coupon p
{
  font-size: 18px;
  text-align:left;
 
}
.account
{
  width: 295px;
  background-color: #A4C409;
  padding: 20px 25px;
  border-radius: 100px;
  font-size: 18px;
  color: #000 !important;
  margin: 25px auto 0;
}
.logout p
{
  text-decoration: underline;
  color: #000;
  font-size: 18px;
  font-weight: 400;
  margin-top: 30px;
}
/***************************** Upcoming CLasses *****************************************/

	.class-wrapper {
		font-family: inter, 'sans-serif';
		display: grid;
		grid-template-columns: repeat(3, 1fr);
  		grid-template-rows: auto;
		grid-column-gap: 15px;
  		grid-row-gap: 40px;
	}
	.class-card {
   display : flex;
   flex-direction: column;
   border : 1px solid #D9D9D9;
   border-radius: 10px;
   width: 100%;
   overflow: hidden;
  }

  .class-card #time{
  	display: none;
  }

  .class-top {
  	background-color: #222;
  	overflow: hidden;
  	padding: 20px;
  	display: flex;
  	flex-direction: column;
    justify-content: center;
  	align-items: center;
    min-height: 200px;
  }

  .class-top p{
	font-weight: bold;
	color: #ADADAD;
	font-size: 13px;
	margin-bottom: 5px;
  }
  .class-top h2{
	font-weight: bold;
	color: #fff;
	font-size: 22px;
	margin: 5px auto 18px;
    text-align: center;
	text-transform: uppercase;
  }

.dropdown {
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  }

   div.class-top > div > p{
  	margin-bottom: 10px;
  }

  .dropdown_counter {
  	display: flex;
  }

   .dropdown_counter .counter {
	margin-right: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
    color: #222; 
  }
  .counter.seconds {
  	margin-right: 0px;
  }

   .dropdown_counter .top {
	display: flex;
  }

     .dropdown_counter .top .one,.two{
	background-color: #A4C409; 
	
	font-size: 16px;
	font-weight: bold;
	border-radius: 3px;
	min-width: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 5px;
	padding-bottom: 5px;
	  }
button.bought { 
	background-color: white !important;
	color: #A4C409 !important;
	text-decoration: underline !important;
}


     .dropdown_counter .top .one{
		margin-right: 2px;
  }

     .dropdown_counter .top .two{
		margin-left: 2px;
  }


    .dropdown_counter .bottom p{
  	font-size: 10px;
  	color: #ADADAD;
  	margin: 0px;
  	margin-top: 5px;
  }

  .class-bottom {
  	padding-top: 20px;
  	padding-bottom: 30px;
  	display: flex;
  	flex-direction: column;
  	/*margin: 0px auto;*/
    align-items: center;
    background: #FFF;
    height: inherit;
  }

  .class-bottom h2 {
  	color: #222;
   font-size: 30px;
   display: flex;
   font-weight: bold;
   margin:0;
   margin-bottom: 15px;
  }

   .class-bottom h2 span {
   font-size: 16px;
   margin-top: 5px;
   margin-right: 5px;
  }

  .class-bottom p {
  	font-weight: bold;
  	color: #797979;
  	margin:0px;
  	margin-bottom: 10px;
  	font-size: 14px;
  	text-align: left;
  }

  .class-bottom .join-button  button{
  	background-color: #A4C409;
  	color: #000;
  	font-weight: bold;
  	font-size: 19px;
  	border:none;
  	border-radius: 12px;
  	padding: 12px 30px;
  	margin-top: 20px;
  }
 .class-bottom .join-button  button
{
  background-color: #A4C409;
  color: #000;
  outline: none;
}

p.hurry {
 font-size: 13px !important;
  color: red !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  font-weight: regular;
  text-align: center;
  margin-top: 10px;
}
/***************************** Fitness Programs *****************************************/
.purchased-products
{
  display: grid;
  grid-template-columns: repeat(3, 31.3%);
  grid-gap: 30px 30px;
}
.purchased-products a
{
    width: 100%;
    color: #000;
}
.purchased-products a:hover
{
  color: #000;
}
.purchased-products .products-name p
{
  font-size: 16px;
  color: #000;
  text-align: center;
  margin-top: 15px;
}
.purchased-products .products-name .product-image
{
  width: 100%;
  background-size: cover;
  background-position: center center;
  height: 280px;
}
/* Popup */
.overlay {
  background:rgba(0,0,0,0.5);
  width: 100%;
  position:fixed;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  z-index:90;
}
.msg-popup{
  background:white;
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:95;
  width:40%;
  height:58%;
  padding: 30px;
  margin:auto;
  box-shadow: 0 10px 15px rgba(0,0,0,0.6);
  height: fit-content;
}
  /* Popup Inner */
  .msg-popup-inner{
    position:relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
.msg-popup-inner form
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
   .s3-btn-close{
      position:absolute;
      top:-3em;
      right:-3em;
      cursor:pointer;
      width: 40px;
      height: 40px;
      background:#A4C409;
      border-radius: 50%;
      padding: 10px;
  }
.s3-btn-close img
{
  width: 20px;
  height: 20px;
}
.msg-popup-inner h2
{
  font-size: 32px;
  font-weight: bold;
  text-align:center;
}
.message
{
  font-size: 16px;
  font-weight: 400;
  margin: 15px auto 20px;
  max-width: 80%;
}
.msg-popup-inner form button
{
  background: #A4C409;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  padding: 15px 30px;
}
.msg-popup-inner form button:focus, .msg-popup-inner form button:hover
{
  background: #A4C409;
  color: #000;
  outline: none;
}
#charNum
{
  font-size: 13px;
  text-align: right;
}
.group-classes-diclaimer
{
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 15px;
  color: #222 !important;
}
/*End of PopUp */
@media only screen and (max-width: 600px) {
  .mob
{
  display: block;
}
  .desk
{
  display: none;
}
  .profile-section h3
{
  font-size: 12px;
  margin-bottom: 15px;
}
.profile-section h4
{
  font-size: 20px;
}
.profile-section h2
{
  font-size: 25px;
}
  .dashboard-wrapper
  {
    flex-direction: column;
  }
  .dashboard-left, .dashboard-right
  {
    width: 100%;
  }
  .dashboard-left
  {
    position: static;
  }
  .dashboard-head
  {
    flex-direction: column;
    padding: 30px;
  }
  .dashboard1-head
  {
    flex-direction: column;
  }
  .head-left, .head-right
  {
    width: 100%;
  }
  .head1-left
  {
    padding: 0px 15px 0px 30px; 
    width: 100%;
    justify-content: space-between;
  }
  .head-left h3, .head1-left h3
  {
    font-size: 12px;
    margin-top:0;
  }
  .head-right h2, .head1-right h2
  {
    font-size: 20px;
  }
  .head1-right h4
  {
    font-size: 18px;
  }
  .head-right h6
  {
    max-width: 100%;
  }
  .head-right p, .head1-right p
  {
    font-size: 15px;
    margin: 20px 0 20px;
  }
  .head1-right
  {
    flex-direction: column;
    width: 100%;
  }
  .conditional-left, .conditional0-left
  {
    width: 100%;
    order:1;
    padding: 0 30px 30px;
  }
   .conditional-right, .conditional0-right
  {
    width: 45% !important;
  }
  .conditional-right img, .conditional0-right img
  {
    clip-path: circle(50% at 50% 40%);
    -webkit-clip-path: circle(50% at 50% 40%);
    height: 140px;
    margin-top: 0;
  }
/* ***************************Dashboard Questionnaire data**************************** */
 .dashboard-content
  {
    flex-direction: column;
    padding: 30px;
  }
  .content-left, .content-right
  {
    width:100%;
  }
  .content-right
  {
    grid-column-gap: 30px;
    grid-template-columns: repeat(1, 100%);
  }
  .main-wrapper p
{
  font-size:15px;
  color: #797979;
  font-weight: 400;
}
.swiper-container
{
  width: 100%;
}
.content-right-videos
{
  width: 100%;
  height: 100%;
  display: flex;
}
.content-right-videos img
{
  width: 100%;
  margin-bottom: 10px
}
.content-right-lessons
  {
    grid-template-columns: repeat(2, 45%);
    justify-content: space-between;
    grid-gap: 30px;
    width: 100%;
  }
.swiper-pagination, .new-swiper-pagination, .classes-swiper-pagination
{
 width:100%;
 margin: 20px auto;
 position: relative;
 display: flex;
 justify-content: center;
}
.swiper-pagination-bullet
  {
    margin:0 10px 0 0 !important;
    width:12px!important;
    height:12px!important;
}
.swiper-pagination-bullet-active
{
    background-color:#A4C409 !important;
}
.class-wrapper {
		margin: 20px 0;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
  		grid-template-rows: auto;
  		grid-row-gap: 20px;
	}  
    .profile-section{
    flex-direction: column;
    padding:0px;
  }
   .site-header, body:not([class*=elementor-page-]) .site-main {
    padding-right: 0px!important;
    padding-left: 0px!important;
  }
  #user-dashboard
{
  margin-top: 100px;
}
   .user-name
  {
    font-size: 32px;
    line-height:40px;
  }
 .coupon
  {
    width: 85%;
    padding: 15px;
  }
  .coupon .coupon-image
  {
    width: 80px;
    align-self: center;
  }
   .coupon p
  {
    font-size: 15px;
  }
.overlay
  {
    top: 0;
    bottom: 0;
    left: 0%;
    right: 0%;
  }
  .msg-popup
  {
    width: 85%;
    height:50%;
    padding: 20px;
    height: fit-content;
  }
  .msg-popup-inner h2
  {
     font-size: 22px;
  }
  .s3-btn-close{
      position:absolute;
      top:-2.5em;
      right:-2.5em;
  }
}

/* Disclaimer CSS */

.class-disclaimer {
      display: flex;
      background-color: #222;
      border-radius: 12px;
      padding: 20px;
      align-items: center;
      font-family: sans-serif;
      margin: 20px auto 20px auto ;
  box-sizing : border-box;
  width : 100%;
    }

    .class-disclaimer .dicon{
      margin-right: 20px;
      padding: 10px !importnat;
    }

	.class-disclaimer .dicon svg{
      width : 60px;
      height : 60px;
    }
    .class-disclaimer .text {
      color: #fff;
    }
    .class-disclaimer .text h3{
      margin-bottom: 15px;
      color: #A4C409;
      font-weight: bold;
      font-size: 20px;
      
    }

    .class-disclaimer .text p{
      font-size: 14px;
      font-weight: 400;
      line-height: 1.4em;
      font-weight: regular;
      margin-bottom: 5px;
    }
.group-classes-diclaimer.mobile {
 display : none; 
}

.group-classes-diclaimer.desktop {
 display : block; 
}

    @media only screen and (max-width: 600px) {
      .class-disclaimer {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
      }
      
      .dicon {
       margin-bottom : 20px; 
      }
      .group-classes-diclaimer.mobile {
 display : block; 
}

.group-classes-diclaimer.desktop {
 display : none; 
}
/* FItness Programs */
.purchased-products
{
  display: grid;
  grid-template-columns: repeat(1, 100%);
  grid-gap: 30px 30px;
}
.purchased-products .products-name .product-image
{
  height: 250px;
 }
    }




$( document ).ready(function() {
  var parser = new UAParser();
  var result = parser.getResult();
  var browser = result.browser.name;       
  
  var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}
 
  
  if(!isMobile){
   if(browser == "Safari") 
  	var mobile_button = document.querySelector(".join-button.mobile");
    var desktop_button = document.querySelector(".join-button.desktop");
    if(mobile_button != undefined) {
     mobile_button.style.display = "block";
      desktop_button.style.display = "none";
    }
      
  }
  
  
  var card = document.querySelectorAll(".class-card");
  
  [].forEach.call(card, function(div) {
     var cardTime = div.querySelector("#time").innerHTML;
      

    var eventTime= moment(cardTime); 
   
    var refreshed = 0;
	var x = setInterval(function() {
    var now = moment(new Date(), 'YYYY-MM-DD HH:mm'); 

    var duration = moment.duration(eventTime.diff(now));

    var days = duration._data.days;
    var hours = duration._data.hours;
    var minutes = duration._data.minutes;
    var seconds = duration._data.seconds;

    var differenceInMinutes = duration.asMinutes();
      
      
    if (differenceInMinutes <= 5.00 && differenceInMinutes >= 4.95){
        location.reload();
      }
      

    if (differenceInMinutes < 0 ) {
      div.querySelector(".yet-to-started-class").style.display = "none";
      div.querySelector(".started-class").style.display = "block";
    }


      if (days.toString().length == 1 || days.toString().length == 1) {
              days = "0" + days;
      }

      if (hours.toString().length == 1 || hours.toString().length == 3) {
              hours = "0" + hours;
      }


    if (minutes.toString().length == 1 || minutes.toString().length == 3) {
              minutes = "0" + minutes;
      }

    if (seconds.toString().length == 1) {
              seconds = "0" + seconds;
      }


     if ( days <= 0 ) {
      days = change_negative_two_digit(days);
    }

     if ( hours <= 0 ) {
      hours = change_negative_two_digit(hours);
    }

    if ( minutes <= 0 ) {
      minutes = change_negative_two_digit(minutes);
    }

    if ( seconds <= 0 ) {
      seconds = change_negative_two_digit(seconds);
    }

 
    

    div.querySelector(".day .one").innerHTML = days.toString().slice(-2).charAt(0);
    div.querySelector(".day .two").innerHTML = days.toString().slice(-2).charAt(1);

    div.querySelector(".hours .one").innerHTML = hours.toString().slice(-2).charAt(0);
    div.querySelector(".hours .two").innerHTML = hours.toString().slice(-2).charAt(1);

    div.querySelector(".minutes .one").innerHTML = minutes.toString().slice(-2).charAt(0);
    div.querySelector(".minutes .two").innerHTML = minutes.toString().slice(-2).charAt(1);

     div.querySelector(".seconds .one").innerHTML = seconds.toString().slice(-2).charAt(0);
    div.querySelector(".seconds .two").innerHTML = seconds.toString().slice(-2).charAt(1);

}, 1000);
});
  
function change_negative_two_digit(myNumber){
var sign = myNumber?myNumber<0?-1:1:0;
myNumber = myNumber * sign + ''; // poor man's absolute value
var dec = myNumber.match(/\.\d+$/);
var int = myNumber.match(/^[^\.]+/);

var formattedNumber = (sign < 0 ? '-' : '') + ("0" + int).slice(-2) + (dec !== null ? dec : '');
return formattedNumber;
}
  
});






// Popup Open
function msgPopupOpen(){
    document.getElementById("msg-popup").style.display="block";
    document.getElementById("msg-overlay").style.display="block";
    $('#poup').css('overflow','hidden');
	}
// Popup Close
	function popupClose(){
    document.getElementById("msg-popup").style.display="none";
    document.getElementById("msg-overlay").style.display="none";  
    $('#message-popup').show();
    $( '#message' ).show();
    $( '#charNum' ).show();
    $( '#message-me' ).show();
      
	}
$(document).ready(function () {
$("#message-popup").submit(function(e) {
    e.preventDefault();
   console.log("Success");
});
});  
function countChar(val) {
        var len = val.value.length;
        if (len >= 200) {
          val.value = val.value.substring(0, 200);
        } else {
          $('#charNum').text(200 - len);
        }
      };

//Slider
/*$(document).ready(function(){

  if (window.matchMedia('(max-width: 767px)').matches)
  {
    // Upcoming CLasses
      var mySwiper = new Swiper('.upcoming-classes', {
      pagination: {
        el: '.new-swiper-pagination',
        clickable: true,
      },
        loop: true,
        slidesPerView: 1.3,
        centerdMode: true,
        spaceBetween: 10,
    });
   
  }
});*/