@charset "utf-8";
/* CSS Document */

body, html {
	background-color: #C3FFD1;
	margin:0 !important;
	padding:0;
	font-family: Helvetica, sans-serif;
	color:#000000;	
	overflow:auto;
	overflow-x:hidden;
	height:100%;
	position:relative;
	z-index:10;
}

a {
	color: #0000ff;
	text-decoration: none;
	}

.onwhite {
	color: #0000ff;
	}

A.footerlinkSmall {
	font-family: helvetica, verdana, arial;
	font-size: 9pt;
	font-weight: normal;
	text-decoration: none;
	margin-left:0px;
	}

.iFrame01 {
	border:none; width:99%;
	}

.loader {
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* ------- CLOUDS -------- */
#clouds-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 25; /* Behind content */
    pointer-events: none; /* Click through */
}

.cloud {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    /* Base styles for clouds */
}

.chat_box {font-family:monospace; font-size:1.3em;}

.image-container {
	float: left; 
	width: 50%;	
	}

textarea {	
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;	
    min-width:200px;
	width: 100%;
    }

.logo, .empath {
	display: block;
	max-width: 60%;
	height: auto;
	margin-bottom:2px;
	margin-top:2px;
	margin-left:auto;
	margin-right:auto;
	align-content:center;
	align-self:center;
	padding-bottom:3px;
	padding-top:1px;
	padding-left:2px;
	padding-right:10px;
	outline: none !important;
	z-index:90;
	}

*:focus {
    outline: none;
	}

table {
	border-radius:6px;
	padding-top:1px;
	padding-bottom:1px;
	padding-left:1px;
	padding-right:1px;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left:1px;
	margin-right:1px;
	}

table.border {
	border: 1px;
	border-style: solid;
	border-color: #4680b7;
	}

tr {
	padding-top:1px;
	padding-bottom:1px;
	padding-left:1px;
	padding-right:1px;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left:1px;
	margin-right:1px;
	}

.FNTable {
	width:95%;
	height:95%;
	}

.FNLists {
	height:93%;
	font-size:3vw;
	line-height:1;
	color:black;
	background-color:#C3FFD1;
	}

p, td {
	font-size: 22pt;
	line-height: 1.2;
	padding-top:1px;
	padding-bottom:1px;
	margin-top: 1px;
	margin-bottom: 1px;
	}

td.border {
	border: 1px;
	border-style: solid !important;
	border-color: #4680b7 !important;
}

p.larger {
	font-size: 30pt;
	line-height: 1.2;
	}

p.large {
	font-size: 26pt;
	line-height: 1.2;
	}

p.medplus {
	font-size: 24pt;
	line-height: 1.2;
	}

p.med {
	font-size: 18pt;
	line-height: 1.2;
	}

p.small {
	font-size: 15pt;
	line-height: 1.1;
	}

p.smally {
	font-size: 13pt;
	line-height: 1;
	}

p.smaller {
	font-size: 12pt;
	line-height: 1;
	}

p.smallest {
	font-size: 11pt;
	line-height: 1;
	}
	

.container {
	/*background-color: #C3FFD1;*/
	height: 100vh;
	width: 96vw;
	max-width: 840px;
	display: grid;
	grid-template-columns: 3fr 3fr 3fr 3fr 3fr;
	grid-template-rows: 0fr 0fr 0fr 0fr 0fr;
    grid-template-areas:
    "h h h h h"
	"n n n n n"
    "c c c c c"
	"b b b b b"
    "f f f f f";
	margin:0 auto;
	padding:0 !important;
	/*position: absolute;*/
	}

.header {
	/*background-color: #C3FFD1;*/
	grid-area: h;
	z-index:90;
	}

.navtop5 {
	display: grid;
	grid-template-columns: repeat(5, auto); /* Adjust the number of columns based on the number of buttons */
	justify-content: center; /* Center the grid items horizontally */
	background-color: #C3FFD1;
	padding: 2px 5px; /* Adjusted padding for consistency */
	margin: 0 auto; /* Center the navtop horizontally */
	width: auto; /* Auto width to contain grid items */
	box-sizing: border-box;
}

.navtop {
	display: grid;
	background-color: #C3FFD1;
	grid-area: n;
	grid-template-rows: auto;
	grid-template-columns: auto auto auto auto auto;
	/*justify-content: center;*/
	align-items: center;
	padding-left:0px;
	padding-bottom: 5px;
	padding-right: 5px;
	margin-bottom: 0px;
	}

.content {
	/*background-color: #C3FFD1;*/
	grid-area: c;
	/*align-items: stretch;*/
	align-items: center;
	color: #eeeeee;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	margin:0;
	padding-bottom:0px;
	padding-top:1px;
	padding-left:0px;
	padding-right:0px;
	}

.col_flex_container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	width:96%;
	/*
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	margin-bottom:0px;
	*/
	margin:0;
	padding-top:0px;
	padding-bottom:0px;
	}

.col_flex {
	margin-right: 10px;
	margin-left: 10px;
	}

.bottom {
	display: grid;
	grid-area: b; 
	grid-column: b;
	justify-items: center;
	align-items: center;
	grid-template-columns: 1fr 1fr;
	}

.footer {
	display: grid;
	background-color: #C3FFD1;
	grid-area: f;
	grid-template-rows: auto auto;
	grid-template-columns: 5px 1fr auto 1fr 5px !important;
	padding-bottom: 2px;
	margin-top: 2px;
	margin-bottom: 2px;
	}

.grid-1 {
	display: grid !important;
	background-color: #C3FFD1;
	grid-area: c !important;
	grid-template-rows: auto !important;
	grid-template-columns: auto !important;
	padding-bottom: 0px !important;
	padding-right: 0px !important;
	margin-bottom: 0px !important;
	margin-left: 0px !important;
	margin-right: 0px !important;
	}

.gridcell_n_row_5_col:nth-child(5n) {
	line-break: after;
	}

.gridcell-center {
	display: flex;
	justify-content: center; /* Center content within each cell */
	align-items: center;
	padding: 0 4px; /* Consistent padding */
	margin: 0; /* Removed overriding margins for simplicity */
	z-index: 50;
}
	
.gridcell .gridcell-border {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
	padding-left: 4px !important;
	padding-right: 0px !important;
	margin-left: 4px !important;
	margin-right: 4px !important;
	}

.gridcell-border {
	border: 1px;
	border-style: solid !important;
	border-color: #87CEEB !important;
	border-radius: 8px;
	padding-left: 0px !important;
	padding-right: 0px !important;
	margin-left: 14px !important;
	margin-right: 14px !important;
	}
	
.content-text {
	font-size:22pt;
	line-height: 1;
	color: black;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-around;
	overflow: auto;
    text-align:center;
	align-content: center;
    height: 100%;
	width: 94%;
	margin: 1% 8% 1% 2%;
	padding: 1% 8% 1% 2%;
	}

.content-text-home {
    height: 100%;
	margin: 0% 4% 0% 4% 0%;
	}

form {
	margin:0;
	padding:0;
	}

.textFooter {
	font-size:22pt;
	line-height:1.3;
	display: block !important;
	margin:0;
	color: black;
	}

.textFooterSmall {
	font-size:9pt;
	line-height:1;
	color:#666666;
	display: flex;
	align-items: center; /*horiz*/
    justify-content: center;
	justify-items: center;
    align-content: center;
	}
.textFooterSmall:last-child {
	margin-right:3px;
	}

div.talk {
	border-width: thin;
	border-color:black;
	border-style: solid;
	border-radius: 6px;
}	

button {
	background-color: #ffffff;
	color: black;
	font-size:18pt;
	height:auto;
	border-radius: 6px;
	margin-top: 2px;
	margin-bottom: 2px;
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 4px;
	padding-bottom: 4px;
	}

button.navbtn {
	background-color: #FCE19C;
	color: black;
	font-size:18pt;
	line-height: 1;
	height:100%;
	border-width: thin;
	border-color:black;
	border-style: solid;
	border-radius: 6px;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
	margin-right: 2px;
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 4px;
	padding-bottom: 4px;
	z-index: 90;
	}

button.navbtn:hover, button.navbtn:focus {
	background-color: #FFFFFF;
	color: #000000;
	}

input[type=button] {
	background-color: #FCE19C;
	color: black;
	font-size:18pt;
	line-height: 1;
	height:100%;
	border-width: thin;
	border-color:black;
	border-style: solid;
	border-radius: 6px;
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
	margin-right: 2px;
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 4px;
	padding-bottom: 4px;
	}

input[type=button]:hover, input[type=button]:focus {
	background-color: #FFFFFF;
	color: #000000;
	}

input [type="text"], .input-css {
    display: block;
    width: auto;
	font-size:16pt;
	font-family: sans-serif;
	line-height: 1;
    font-weight: 500;
	border-radius: 6px;
    color: #444;
	padding-left:2px;
	padding-right:2px ;
	padding-left:2px;
	padding-right:2px;
	margin-top:2px;
	margin-bottom:0px;
	outline: none !important;
	}

.input-css-tall {
    display: block;
    width: auto;
	font-size:24pt;
	font-family: sans-serif;
	line-height: 1.6;
    font-weight: 500;
	border-radius: 6px;
    color: #444;
	padding-left:2px;
	padding-right:2px ;
	margin-top:2px;
	margin-bottom:0px;
	outline: none !important;
	}

::placeholder {
	font-size: 12pt;
	color: #666666;
}

::-ms-input-placeholder {
	font-family: monospace !important;
	font-size: 12pt;
	color: #444444;
}

textarea[name="m_user_phrase"] {
    font-family: Arial;
	font-size: 30pt !important;
	line-height: 1.2;
	font-family: sans-serif;
    font-weight: 500;
    color: #444;
    padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: 8px;
    background-color: #fff;
	outline: none !important;
	}

.select-css {
	display: block;
    font-size:18pt !important;
    line-height: 1.5;
	font-family: sans-serif;
    font-weight: 500;
    color: #444;
    padding-top: 3px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
    box-sizing: border-box;
    margin: 0;
	margin-top:1px;
	margin-bottom:.1px;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: 6px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
	}
.select-css::-ms-expand {
    display: none;
	}
.select-css:hover {
	border-color: #888;
	}
.select-css:focus {
	border-color: #aaa;
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222;
    outline: none;
	}
.select-css option {
	font-weight:normal;
	}

hr {
	border:0;
	margin:0;
	margin-top:4px;
	margin-bottom:5px;
	width:100%;
	height:1px;
	background:#87CEEB;
	}

/*=================*/
/*iPhone 2 thru 4S:*/
/*=================*/

@media only screen and (min-device-width : 320px) and (max-device-width : 349px)
{
	.logo {
		max-width: 60% !important;
		margin-top:1px !important;
		z-index:20;
		}

	.empath {
		max-width: 50% !important;
		margin-top:1px !important;
		}

	p, td {
		font-size: 11pt !important;
		}

	p.larger {
		font-size: 18pt !important;
		}

	p.large {
		font-size: 16pt !important;
		}

	p.medplus {
		font-size: 14pt;
		line-height: 1.2;
		}

	p.med {
		font-size: 12pt !important;
		}

	p.small {
		font-size: 10pt !important;
		}

	p.smally {
		font-size: 9pt !important;
		line-height: 1;
		}

	p.smaller {
		font-size: 8pt !important;
		}

	p.smallest {
		font-size: 7pt !important;
		line-height: 1;
		}
		
	button.navbtn {
		font-size:10pt !important;
		margin-left: 0px !important;
		margin-right: 0px !important;
		padding-left: 5px !important;
		padding-right: 5px !important;
		padding-top: 3px !important;
		padding-bottom: 3px !important;
		}

	input[type=button] {
		font-size:11pt !important;
		}

	.content-text {
		font-size:11pt !important;
		}

	.textFooter {
		font-size:11pt !important;
		}

	.select-css {
		font-size: 12pt !important;
		}

	input [type="text"], .input-css {
		font-size:12pt !important;
		width: 200px !important;
		height: 15px !important;
		}

	.input-css-tall {
		font-size:12pt !important;
		}

	::placeholder {
	font-size: 11pt !important;
	}

	::-ms-input-placeholder {
	font-size: 11pt !important;
	}

	textarea[name="m_user_phrase"] {
		font-size: 11pt !important;
		}

	td.grid-material
		{
		font-size: 9pt;
		}

	td.grid-material-head
		{
		font-size: 9pt;
		}
}

/* ================== */
/* MOST MOBILE PHONES */
/* ================== */
@media screen and (min-device-width: 350px) and (max-device-width: 479px)
{
	body {
		font-size: 12pt !important;
		}

	.logo {
		width: 100% !important;
		margin-top:2px !important;
		}

	.empath {
		max-width: 45% !important;
		margin-top:1px !important;
		}
	
	p, td {
		font-size: 12pt !important;
		}

	p.larger {
		font-size: 26pt !important;
		}

	p.large {
		font-size: 16pt !important;
		}

	p.medplus {
		font-size: 14pt;
		line-height: 1.2;
		}

	p.med {
		font-size: 13pt !important;
		}

	p.small {
		font-size: 11pt !important;
		}

	p.smally {
		font-size: 10pt !important;
		line-height: 1;
		}

	p.smaller {
		font-size: 9pt !important;
		line-height: 10pt !important;
		}

	p.smallest {
		font-size: 6pt !important;
		}
	
	button.navbtn {
		font-size:10pt !important;
		margin-left: 0px !important;
		margin-right: 0px !important;
		padding-left: 5px !important;
		padding-right: 5px !important;
		padding-top: 3px !important;
		padding-bottom: 3px !important;
		}

	input[type=button] {
		font-size:13pt !important;
		}

	.content-text {
		font-size:12pt !important;
		}

	.textFooter {
		font-size:12pt !important;
		}

	.select-css {
		font-size: 13pt !important;
		}

	input [type="text"], .input-css {
		font-size:12pt !important;
		height: 14px !important;
		}

	.input-css-tall {
		font-size:12pt !important;
		}

	::placeholder {
	font-size: 11pt !important;
	}

	::-ms-input-placeholder {
	font-size: 11pt !important;
	}

	textarea[name="m_user_phrase"] {
		font-size: 12pt !important;
		line-height: 13pt;
		}


	td.grid-material
		{
		font-size: 10pt !important;
		}

	td.grid-material-head
		{
		font-size: 10pt !important;
		}
}

/* ==================== */
/* Browser window small */
/* Some tablets/larger phones */
/* ==================== */

@media screen and (min-width: 480px) and (max-width: 768px)
{
	.logo {
		width: 40% !important;
		margin-top:4px !important;
		}

	.empath {
		max-width: 45% !important;
		margin-top:1px !important;
		}

	p, td {
		font-size: 14pt !important;
		}

	p.larger {
		font-size: 24pt !important;
		}

	p.large {
		font-size: 20pt !important;
		}

	p.medplus {
		font-size: 18pt;
		line-height: 1.2;
		}

	p.med {
		font-size: 14pt !important;
		}

	p.small {
		font-size: 11pt !important;
		}

	p.smally {
		font-size: 9pt !important;
		line-height: 1;
		}

	p.smaller {
		font-size: 8pt !important;
		}

	p.smallest {
		font-size: 6pt !important;
		}

	.textFooter {
		font-size:13pt !important;
		}

	.content-text {
		font-size:13pt !important;
		}

	button.navbtn {
		font-size:12pt !important;
		}

	input[type=button] {
		font-size:13pt !important;
		}

	.select-css {
		font-size: 14pt !important;
		}

	.input-css-tall {
		font-size:14pt;
		}

	textarea[name="m_user_phrase"] {
		font-size: 14pt !important;
		line-height: 16pt;
		}

	td.grid-material {
		font-size: 9pt !important;
		line-height: 0.7 !important;
		padding-top: 0px !important;
		padding-bottom: 0px !important;
		padding-left: 1px !important;
		padding-right: 1px !important;
		}

	td.grid-material-head {
		font-size: 9pt !important;
		}
}

/* ========================= */
/* TABLETS */
/* ========================= */

@media screen and (min-width: 769px)
{
	.logo {
		max-width: 45% !important;
		margin-bottom:2px !important;
		margin-top:4px !important;
		}

	.empath {
		max-width: 45% !important;
		margin-top:1px !important;
		}
		
	.content-text {
		font-size:14pt !important;
		}

	button.navbtn {
		font-size:12pt !important;
		}

	input[type=button] {
		font-size:15pt !important;
		}

	p, td {
		font-size: 14pt !important;
		}

	p.larger {
		font-size: 24pt !important;
		}

	p.large {
		font-size: 22pt !important;
		}

	p.medplus {
		font-size: 18pt;
		}

	p.med {
		font-size: 16pt !important;
	}

	p.small {
		font-size: 14pt !important;
		}

	p.smally {
		font-size: 12pt !important;
		line-height: 1;
		}

	p.smaller {
		font-size: 11pt !important;
		}

	p.smallest {
		font-size: 7pt !important;
		}
	
	.textFooter {
		font-size:14pt !important;
		}

	.select-css {
		font-size: 14pt !important;
		}

	.input-css-tall {
		font-size:14pt;
		}

	textarea[name="m_user_phrase"] {
		font-size: 18pt !important;
		line-height: 20pt;
		}

	td.grid-material
		{
		font-size: 13pt !important;
		}

	td.grid-material-head
		{
		font-size: 13pt !important;
		}
}


@media screen and (min-width: 900px)
{
	.logo {
		max-width: 50% !important;
		margin-bottom:2px !important;
		margin-top:4px !important;
		}

	.empath {
		max-width: 35% !important;
		margin-top:1px !important;
		}

	p.smallest {
		font-size: 10pt !important;
		}
			
}

@media screen and (min-width: 1200px)
{
	.logo {
		max-width: 55% !important;
		margin-bottom:2px !important;
		margin-top:4px !important;
		}

	.empath {
		max-width: 40% !important;
		margin-top:1px !important;
		}

		p.smallest {
		font-size: 11pt !important;
		}
}