html{
/* 	font: normal 14px Verdana, Helvetica, Sans-serif;	 */
	font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Inter", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body{
	margin:0px;
}

button, .btn {
/* 	line-height: 1.25rem; */
	display:inline-block;
/* 	padding:20px; */
/* 	min-height:48px; */
	height:48px;
	font-size: 0.875rem;
	font-weight:600;
	-webkit-appearance: button;
}

#db-list button {
	display:unset;
	font-weight:unset;
	height:unset;
}

p::after {
  content: '\00a0 '
}

a{
color:#2f66bd;	
}

i.logo {
	display:block;
	font-size:48px;
	margin-bottom:6px;
	text-decoration:none;
}

i.logo2 {
	font-size:36px;
	margin-right:4px;
}

a:hover i.logo:hover{
	text-decoration:none;
}

a.noStyle {
	text-decoration: none;
	color: unset;	
}

a[href="#"] {
	font-weight:bold;
	color: unset;	
/* 	text-decoration: none; */
}

select{
	height:32px;
	padding: 4px 4px;

}

input{
	
	height:32px;
	padding-left:4px;
	font-size:16px;
	
}


.hidden{
	display:none;
}

.fullWidth{
	width:100%;
}

li {
	margin-top:10px;
	margin-bottom:10px;
}

#header {
    color: white;
    /* color: #333; */
    width: 100%;

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e50408', endColorstr='#8e0002',GradientType=0 );
    text-align: center;
    /* padding-bottom: 20px; */
    background-color: black;
    font: normal 14px Verdana, Helvetica, Sans-serif;
    padding-top:40px;
    padding-bottom:40px;
}

#header2 {
 width: 100%;
 text-align: center;
 background-color: black;
 display:flex;
 justify-content:center;

}

#footer{
	display:flex;
	align-items:center;
/*     position: absolute; */
/*     right: 0; */
/*     bottom: 0; */
    left: 0;
    clear: left;
    /* background: linear-gradient(to bottom, #bcbcbc 0%,#4D0D65 44%,#000000 100%); */
    background-color: black;
    height:200px;
    margin-top:50px;
  
}

#footer a {
    color: white;
}


#content{
	/* float: left; */
	margin-left: auto;
	margin-right: auto;
	min-width: 60%;
	/* max-width: 70%; */
	max-width: 720px;
	min-height: 500px;
	/* margin-bottom: 100px; */
/* 	margin-bottom: 200px; */
	padding:10px;
	padding-right: 30px;
	padding-left: 30px;
}

		.membership-row{
			padding:20px;
			margin-bottom:80px;
			cursor:pointer;
			
			background-color: gainsboro;
			border: 1px solid #e2e2e2;
			padding-top: 10px;
		}
		
		.membership-row.no-pointer{
			cursor:unset;
		}
		
		.membership-row.with-price{
			display:flex;
			align-items:center;
		}
		
		.membership-row.with-price .price{
			font-size:24px;
			font-weight:bold;
			margin-left:20px;
		}
		
		.membership-row:hover{
			background:grey;
			color:white;
		}
		
		.big-trial-block .membership-row:hover{
			background-color: gainsboro;
			color:revert;
		}
		
		
		
		
		.big-trial-block {
			cursor:pointer;
			border:1px solid;
			margin-bottom: 80px;
		}
		
		
		.trial-row {
			background: #ffffb2;
			padding:20px;
		}
		
		.trial-header {
		    font-weight: bold;
			font-size: 24px;
			margin-bottom: 10px;	
		}
		
		.big-trial-block .membership-row{
			margin-bottom:0px;
		}
		
		.big-trial-block:hover{
			border: 4px solid green;
		}
		
		.big-trial-block:hover .membership-row{
			background:grey;
			color:white;
		}
		
		.big-trial-block:hover .trial-row{
			background:#caff77
		}
		
		.answer{
			margin-top:10px;
			margin-bottom:30px;
		}
		
		a.no-style{
			text-decoration:none;
			color:unset;
		}
		
		.notification{
			padding:20px;
			margin:10px 0px;
			border:1px solid blue;
			background:#cbcbff;
		}
		
		.notification.error{
			background:#ffd5c9;
			border-color:red;
		}
		
		.notification.neutral{
			background:unset;
			border:unset;
		}
		
		
	#share-with-user-feedback{
		padding:20px;
		color:red;
		background-color: #f3d5d5;
		margin-bottom: 10px;
		display:none;
	}
	
	
	#db-list > div {
		margin:10px 0;
	}
	
	
	
	
	
	.modal {
    display: none;
/* 	display:flex; */
    position: fixed;
    z-index: 10;
    padding-top: 20px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}



.modal-content {
	position:relative;
	z-index:12;
    background-color: white;
    margin: auto;
    padding: 20px;
    padding-top:30px;
    border: 1px solid #888;
    width: 80%;
}

#modal-overwrite .modal-content{
	min-width:400px;
	width:unset;
}

.modal .close {
    color: #aaaaaa;
    float: right;
    font-size: 36px;
    font-weight: bold;
    cursor:pointer;
    
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 0 10px;
}
	
	
	

#jnotif{
	height: auto!important;
	height: 50px;
	min-height: 50px;
	width: 50%;
	display:none;
	position: fixed;
	left: 0;
	border-radius: 30px;
	text-align:center;
}
 
#jnotif-message, .jgrowl{
/* 	padding: 0px 30px 0px 30px; */
	font-size: 14px;
	font-weight: bold;
	line-height: 24px;
/* 	color: #FFF; */
/* 	text-shadow: 1px 1px 1px #666; */
}


 
.info{
	background-color: #789fe3;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0, rgb(175,199,240)),
	    color-stop(0.5, rgb(120,159,227))
	);
	background-image: -moz-linear-gradient(
	    center bottom,
	    rgb(175,199,240) 0%,
	    rgb(120,159,227) 50%
	);
}



 
.ok{
	border-color : #60A861;
	background-color: #7ad07b;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0, rgb(164,235,164)),
	    color-stop(0.5, rgb(122,208,124))
	);
	background-image: -moz-linear-gradient(
	    center bottom,
	    rgb(164,235,164) 0%,
	    rgb(122,208,124) 50%
	);
}

.ok .qtip-titlebar{
	background-color: #7ad07b;
	
	
}
 
.alert{
	background-color: #f0b057;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0, rgb(240,206,161)),
	    color-stop(0.5, rgb(240,176,87))
	);
	background-image: -moz-linear-gradient(
	    center bottom,
	    rgb(240,206,161) 0%,
	    rgb(240,176,87) 50%
	);
}

.alert .qtip-titlebar{
	background-color: #f0b057;
	
}
 
.nok{
	    border-color: #ff7575;
	background-color: #e79797;
	background-image: -webkit-gradient(
	    linear,
	    left bottom,
	    left top,
	    color-stop(0, rgb(227,173,173)),
	    color-stop(0.5, rgb(227,134,134))
	);
	background-image: -moz-linear-gradient(
	    center bottom,
	    rgb(227,173,173) 0%,
	    rgb(227,134,134) 50%
	);
}


.nok .qtip-titlebar{
	background-color: #e79797;
	
}

ul.active-shares h3{
	display:none;
}


ul.active-shares:has(li){
	margin-bottom:60px;
}

ul.active-shares:has(li) h3{
	display:block;
}




	
		
	
		.text-title {
			
			font-size: 2.75rem;
			line-height: 3rem;
			letter-spacing: -0.02em;
			font-weight: 600;
		}
	
		.download-life-journal{
			display:flex;
			flex-wrap: wrap;
			
			padding-top: 1.5rem;
			padding-bottom: 1.5rem;
			
			    margin-bottom: 3rem;
		}
		
		.download-life-journal .platform{
			padding:40px 60px;
			margin:20px;
			background:gray;
			color:white;
			font-size:24px;
			cursor:pointer;
			text-decoration:none;
			text-align:center;
		}
		
		.download-life-journal .platform:hover, .big-button:hover{
			background:black;
			text-decoration:underline;
		}
		
		.download-life-journal .platform:hover {
			text-decoration:none;
		}
		
		
		
		.big-button{
			padding:20px 30px;
			margin:20px;
			background:gray;
			color:white;
			font-size:24px;
			cursor:pointer;
			text-decoration:none;
		}
		
		.toggle-block{
			cursor:pointer;
		}
		
		img{
			max-width:100%;
		}
		
		img.stylized1{
			max-width:100%;
			box-shadow: 0 2px 24px 0 rgba(53,55,64,.1);
			background: black;
			border-radius: 10px;
			border: 3px solid #b5b5b5;
		}
		
		img.stylized2{
			max-width:100%;
			box-shadow: 0 2px 24px 0 rgba(53,55,64,.1);
/* 			background: black; */
			border-radius: 10px;
			border: 3px solid #b5b5b5;
		}
		
		
		
		#main-screen-section{
			margin-bottom:100px;
/* 			padding-bottom:220px; */
			position:relative;
			width:100%;
			min-height: 600px;
			text-align:center;
		}
		
		#main-screen-section .screenshot{
			width:100%;
		}
		
		.two-side-section{
			display:flex;
			column-gap:20px;
			align-items:center;
			margin-bottom:100px;
		}
		
		
		.main-description{
			font-size: 1.5rem;
			line-height: 2rem;
		}
		
		@media (min-width: 640px){
			
			.text-title {
				font-size: 3.75rem;
				line-height: 3.75rem;
    
			}
			
			.main-description{
				font-size: 1.875rem;
				line-height: 2.25rem;
			}
			
			#main-screen-section{
				text-align:unset;
			}
			
			
			#main-screen-section .screenshot{
				width:80%;
				margin-bottom:220px;
				
			}
			
			img.screenshot-phone{
				position: absolute;
				top: 100px;
				right: 0px;
				max-height: 600px;	
			}
			
			
		}
		
		
		@media (max-width: 767px){

			.two-side-section{
				flex-direction:column;
			}

			.two-side-section.mirror{
				flex-direction:column-reverse;
			}

		}


		.prices{
			display:flex;
			flex-wrap:wrap;
			justify-content:center;
		}

		.formula{
			text-decoration:none;
			color:unset;
			padding:20px;
			border:1px solid #dadef8;
			background:#e3f5ff;
			margin: 10px 20px;
			flex: 1;
			text-align: center;
			display: flex;
			flex-direction: column;
			min-width: 200px;
			max-width: 300px;
		}

		.formula .title{
			font-weight:bold;
			font-size:20px;
			margin-bottom: 20px;
		}

		.formula .feature{
			margin:10px 0;
		}

		.formula .feature.lastline{
			margin-bottom:40px;
		}

		.formula .price{
			margin-top:auto;
		}

		.template-card {
			text-align: center;
			padding: 24px 20px;
			border: 1px solid #e0e0e0;
			border-radius: 12px;
			background: #fafafa;
			width: 140px;
			transition: transform 0.15s, box-shadow 0.15s;
		}

		.template-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 4px 16px rgba(0,0,0,0.1);
		}

		.principle-card {
			text-align: center;
			padding: 30px 24px;
			border: 1px solid #e0e0e0;
			border-radius: 12px;
			background: #fafafa;
			flex: 1;
			min-width: 200px;
			max-width: 280px;
		}