| 
						
						
							
								
							
						
						
					 | 
					 | 
					@ -8,19 +8,73 @@
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" /> 
 | 
					 | 
					 | 
					 | 
					<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" /> 
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
 | 
					 | 
					 | 
					 | 
					<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					-->
 | 
					 | 
					 | 
					 | 
					-->
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					<script type="text/javascript" src="{{ context }}/static/js/jquery/jquery.min.js"></script>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<script type="text/javascript" src="{{ context }}/static/js/jx/rpc.js"></script>
 | 
					 | 
					 | 
					 | 
					<script type="text/javascript" src="{{ context }}/static/js/jx/rpc.js"></script>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<script type="text/javascript" src="{{ context }}/static/js/jx/utils.js"></script>
 | 
					 | 
					 | 
					 | 
					<script type="text/javascript" src="{{ context }}/static/js/jx/utils.js"></script>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<script type="text/javascript" src="{{ context }}/static/js/jx/dom.js"></script>
 | 
					 | 
					 | 
					 | 
					<script type="text/javascript" src="{{ context }}/static/js/jx/dom.js"></script>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<title style="text-transform: capitalize">{{app_name.replace('-',' ')}}</title>
 | 
					 | 
					 | 
					 | 
					<title style="text-transform: capitalize">{{app_name.replace('-',' ')}}</title>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<style>
 | 
					 | 
					 | 
					 | 
					<style>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						.theme-raspberry{
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background: #00B4DB;  /* fallback for old browsers */
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background: -webkit-linear-gradient(to bottom, #0083B0, #00B4DB);  /* Chrome 10-25, Safari 5.1-6 */
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background: linear-gradient(to bottom, #0083B0, #00B4DB); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							color:#ffffff;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							font-family:verdana;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							font-weight:lighter;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							text-transform:capitalize;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						.theme-dark-ocean {
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background: #373B44;  /* fallback for old browsers */
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background: -webkit-linear-gradient(to bottom, #4286f4, #373B44);  /* Chrome 10-25, Safari 5.1-6 */
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background: linear-gradient(to bottom, #4286f4, #373B44); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							color:#f3f3f3;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						.theme-gray {
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background: #bdc3c7;  /* fallback for old browsers */
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background: -webkit-linear-gradient(to bottom, #2c3e50, #bdc3c7);  /* Chrome 10-25, Safari 5.1-6 */
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background: linear-gradient(to bottom, #2c3e50, #bdc3c7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							color:#f3f3f3f3;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						.theme-clouds {
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background: #ECE9E6;  /* fallback for old browsers */
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background: -webkit-linear-gradient(to bottom, #FFFFFF, #ECE9E6);  /* Chrome 10-25, Safari 5.1-6 */
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							background: linear-gradient(to bottom, #FFFFFF, #ECE9E6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						img {width:48px}
 | 
					 | 
					 | 
					 | 
						img {width:48px}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						body{ 
 | 
					 | 
					 | 
					 | 
						body{ 
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
								font-family:sans-serif;
 | 
					 | 
					 | 
					 | 
								font-family:sans-serif;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
								font-size:14px;
 | 
					 | 
					 | 
					 | 
								font-size:14px;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
								font-weight:lighter;
 | 
					 | 
					 | 
					 | 
								font-weight:lighter;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
								width:80%;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
								margin-left:10%;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						.button {
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							padding:4px;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							border-radius:8px;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							border:1px solid #d3d3d3;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						.active {
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							font-weight:bold;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							font-family:verdana;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							cursor:pointer ;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							border-bottom:2px solid bottom;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							padding:4px;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						}
 | 
					 | 
					 | 
					 | 
						}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						.active:hover { border-bottom:2px solid #4682B4}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						.current-plan {
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							border-color: #20B2AA #20B2AA transparent transparent;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							border-style: solid;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							border-width: 15px 15px 15px 15px;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							height: 0px;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							width: 0px;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							
 | 
					 | 
					 | 
					 | 
							
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						.bold { font-weight:bold}
 | 
					 | 
					 | 
					 | 
						.bold { font-weight:bold}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						.caption {
 | 
					 | 
					 | 
					 | 
						.caption {
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							font-size:28px; font-weight:lighter ;
 | 
					 | 
					 | 
					 | 
							font-size:28px; font-weight:lighter ;
 | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -43,7 +97,11 @@
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							display:grid;
 | 
					 | 
					 | 
					 | 
							display:grid;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) )
 | 
					 | 
					 | 
					 | 
							grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) )
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						}
 | 
					 | 
					 | 
					 | 
						}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						.plan .title { font-size:24px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0;  }
 | 
					 | 
					 | 
					 | 
						.plan .title { 
 | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							display:grid;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							grid-template-columns: auto 32px; 
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							grid-gap:2px;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
							font-size:24px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0;  }
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:2px; margin:2px;}
 | 
					 | 
					 | 
					 | 
						.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:2px; margin:2px;}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						.plan .feature .label {text-transform: uppercase; grid-column:1; font-size:14px;}
 | 
					 | 
					 | 
					 | 
						.plan .feature .label {text-transform: uppercase; grid-column:1; font-size:14px;}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
 | 
					 | 
					 | 
					 | 
						.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
 | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
							
								
							
						
						
					 | 
					 | 
					@ -97,9 +155,7 @@
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							.height-48{height:40px}
 | 
					 | 
					 | 
					 | 
							.height-48{height:40px}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							.width-50{width:47%; padding:4px;}
 | 
					 | 
					 | 
					 | 
							.width-50{width:47%; padding:4px;}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							.width-25{width:24%; padding:4px}
 | 
					 | 
					 | 
					 | 
							.width-25{width:24%; padding:4px}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						.pricing {
 | 
					 | 
					 | 
					 | 
							.pricing {display:block;}	
 | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							display:block;
 | 
					 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						}
 | 
					 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							.plan .title { font-size:18px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0;  }
 | 
					 | 
					 | 
					 | 
							.plan .title { font-size:18px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0;  }
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px}
 | 
					 | 
					 | 
					 | 
							.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							.plan .feature .label {font-size:12px; text-transform: uppercase; grid-column:1}
 | 
					 | 
					 | 
					 | 
							.plan .feature .label {font-size:12px; text-transform: uppercase; grid-column:1}
 | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -118,8 +174,7 @@
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
								grid-gap:2px;
 | 
					 | 
					 | 
					 | 
								grid-gap:2px;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							}
 | 
					 | 
					 | 
					 | 
							}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							.header .logo img {width:32px}
 | 
					 | 
					 | 
					 | 
							.header .logo img {width:32px}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							.header {display:block;
 | 
					 | 
					 | 
					 | 
							.header {display:block;}
 | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							}
 | 
					 | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							table {width:70%; margin-left:20%}
 | 
					 | 
					 | 
					 | 
							table {width:70%; margin-left:20%}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							.medium-caption {font-size:18px}
 | 
					 | 
					 | 
					 | 
							.medium-caption {font-size:18px}
 | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -130,8 +185,8 @@
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
								display:grid;
 | 
					 | 
					 | 
					 | 
								display:grid;
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
								grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) )
 | 
					 | 
					 | 
					 | 
								grid-template-columns: repeat(auto-fit,minmax(250px, 1fr) )
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							}
 | 
					 | 
					 | 
					 | 
							}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						.plan .title { font-size:20px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0;  }
 | 
					 | 
					 | 
					 | 
							.plan .title { padding:4px; font-size:22px; font-family:verdana; text-transform: capitalize; border-bottom:1px solid #CAD5E0;  }
 | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px}
 | 
					 | 
					 | 
					 | 
							.plan .feature {display:grid; grid-template-columns: 60% 40%; grid-gap:4px; margin:4px; padding:4px;}
 | 
				
			
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							.plan .feature .label {text-transform: uppercase; grid-column:1}
 | 
					 | 
					 | 
					 | 
							.plan .feature .label {text-transform: uppercase; grid-column:1}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
 | 
					 | 
					 | 
					 | 
							.plan .feature .status {font-size:20px; text-align: right; font-size:14px;}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -142,6 +197,7 @@
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						
 | 
					 | 
					 | 
					 | 
						
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					</script>
 | 
					 | 
					 | 
					 | 
					</script>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<body >
 | 
					 | 
					 | 
					 | 
					<body >
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
						
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<div class="header">
 | 
					 | 
					 | 
					 | 
					<div class="header">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						<div class="logo">
 | 
					 | 
					 | 
					 | 
						<div class="logo">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							<div>
 | 
					 | 
					 | 
					 | 
							<div>
 | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -165,9 +221,17 @@
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					<div >
 | 
					 | 
					 | 
					 | 
					<div >
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
						<div class="pricing">		
 | 
					 | 
					 | 
					 | 
						<div class="pricing">		
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							{% for item in plans%}
 | 
					 | 
					 | 
					 | 
							{% for item in plans%}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
								<div class="plan">
 | 
					 | 
					 | 
					 | 
								<div class="plan {{theme}}">
 | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
									<div class="title">{{ item.nickname }}</div>
 | 
					 | 
					 | 
					 | 
									<div class="title">
 | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
									<br>
 | 
					 | 
					 | 
					 | 
										<div>{{ item.nickname }}</div>
 | 
				
			
			
				
				
			
		
	
		
		
	
		
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
										{% if item.id in active_plans %}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
											<div class="current-plan"></div>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
										{% else %}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
											<div></div>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
										{% endif %}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
										
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
									</div>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
									<div class="">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
										{% for key,value in item.metadata['features'].iteritems() %}
 | 
					 | 
					 | 
					 | 
										{% for key,value in item.metadata['features'].iteritems() %}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
											<div class="feature">
 | 
					 | 
					 | 
					 | 
											<div class="feature">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
												<div class="label">{{ key }}</div>
 | 
					 | 
					 | 
					 | 
												<div class="label">{{ key }}</div>
 | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -181,10 +245,17 @@
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
											</div>
 | 
					 | 
					 | 
					 | 
											</div>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
											
 | 
					 | 
					 | 
					 | 
											
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
										{% endfor %}
 | 
					 | 
					 | 
					 | 
										{% endfor %}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
									{% if item.amount > 0 and platform != 'mobile' %}
 | 
					 | 
					 | 
					 | 
									</div>
 | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
									<div align="right">
 | 
					 | 
					 | 
					 | 
									{% if platform != 'mobile'  and item.amount > 0 and item.name not in active_plans %}
 | 
				
			
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
									<div align="right" class="border-top">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
										<br>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
										{% if active_plans|length > 0 %}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
										<div id="upgrade_{{item.id}}" align="right" onclick="jx.dom.show('{{item.id}}'); jx.dom.hide('upgrade_{{item.id}}')">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					
 | 
					 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
											<form action="{{context}}/subscribe/{{app_name|safe}}" method="POST">
 | 
					 | 
					 | 
					 | 
											<span class="active">Upgrade</span>
 | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
										</div>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
										{% endif %}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
										<form id="{{item.id}}" style="display:none" action="{{context}}/subscribe/{{app_name|safe}}" method="POST">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
											<script
 | 
					 | 
					 | 
					 | 
											<script
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
											src="https://checkout.stripe.com/checkout.js" class="stripe-button action"
 | 
					 | 
					 | 
					 | 
											src="https://checkout.stripe.com/checkout.js" class="stripe-button action"
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
											data-key="{{apikey|safe}}"
 | 
					 | 
					 | 
					 | 
											data-key="{{apikey|safe}}"
 | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					 | 
					@ -203,14 +274,26 @@
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
											<input type="hidden" name="plan" value="{{item.id|safe}}"/>
 | 
					 | 
					 | 
					 | 
											<input type="hidden" name="plan" value="{{item.id|safe}}"/>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
										</form>
 | 
					 | 
					 | 
					 | 
										</form>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
										</div>		
 | 
					 | 
					 | 
					 | 
										</div>		
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
									{% elif item.amount == 0 and platform != 'mobile' %}										
 | 
					 | 
					 | 
					 | 
									{% elif item.amount == 0 and platform != 'mobile' and item.id not in active_plans %}										
 | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
										<br><div align="right" style="background:#f3f3f3;  color:#4682B4; font-weight:bold; ">
 | 
					 | 
					 | 
					 | 
										<div align="right"  class="border-top" style="DISPLAY:none;background:#f3f3f3;  color:#4682B4; font-weight:bold; ">
 | 
				
			
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
											<br>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
											<div style="float:right;margin-right:4px;">
 | 
					 | 
					 | 
					 | 
											<div style="float:right;margin-right:4px;">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
													<div align="center">This Plan is Plan</div>
 | 
					 | 
					 | 
					 | 
													<div align="center">This Plan is Plan</div>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
													<div class="small" align="center">Login to Start</div>
 | 
					 | 
					 | 
					 | 
													<div class="small" align="center">Free/Signup</div>
 | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
							
 | 
					 | 
					 | 
					 | 
							
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
											</div>
 | 
					 | 
					 | 
					 | 
											</div>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
										</div>
 | 
					 | 
					 | 
					 | 
										</div>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
										<div align="right" class="border-top">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
												<br><button type="submit" class="stripe-button-el" style="visibility: visible;"><span style="display: block; min-height: 30px;">Signup Free/ mo</span></button>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
										</div>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
										
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
									{% elif item.amount == 0 and platform != 'mobile' %}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
										<div align="right" class="border-top">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
												<br><div style="" class="">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
													<span style="font-weight:bold; font-size:14px; color:#4682B4 ;  display: block; min-height: 30px;">
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
													<i class="fa fa-check"></i>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
													Current Plan</span></div>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
					 | 
										</div>
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
									{% endif%}
 | 
					 | 
					 | 
					 | 
									{% endif%}
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
										
 | 
					 | 
					 | 
					 | 
										
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					 | 
								</div>
 | 
					 | 
					 | 
					 | 
								</div>
 | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
					 | 
					
 
 |