/* Made with <3 by 4S and Giovanni Sorrenti at Francesco Ferrara institute in Palermo in 2024 */



/* CSS Reset */

*, *::before, *::after{
	box-sizing: border-box; 
}

*{
	margin: 0; 
	padding: 0; 
}

ul[role='list'], ol[role='list']{
	list-style: none; 
}

html:focus-within{
	scroll-behavior: smooth; 
}

a:not([class]){
	text-decoration-skip-ink: auto; 
}

img, picture, svg, video, canvas{
	max-width: 100%;
	height: auto; 
	vertical-align: middle; 
	font-style: italic; 
	background-repeat: no-repeat; 
	background-size: cover;
}

input, button, textarea, select{
	font: inherit; 
}

@media (prefers-reduced-motion: reduce){
	html:focus-within {
		scroll-behavior: auto;
	}
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
		transition: none;
	}
}

body, html{
	height: 100%; 
	scroll-behavior: smooth; 
}



/* App */

body {
	width: 100%;
	margin: 0 auto;
	font-family: 'DM Sans', Helvetica, Sans Serif;
	background-color: #FFF;
	/*background-image: url('../images/megachat_bg.jpg');*/
	background-size: cover;
	background-position: top;
	background-repeat: repeat;
	background-attachment: fixed;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.2px;
	transition: 1s ease;
}

html {
	width: 100%;
	height: 100%;
}

#nav-bar {
	width: 100%;
	height: 64px;
	background-color: #FFF;
	box-shadow: 0 -8px 16px -8px rgba(0,0,0,0.1);
	left: 0;
	bottom: 0;
	position: fixed;
	z-index: 999;
}

#nav-bar .item {
	width: 33.33%;
	height: 64px;
	text-align: center;
	line-height: 0;
	float: left;
}

#nav-bar .item .icon {
	width: 24px;
	height: 24px;
	margin: 12px auto 0 auto;
	/*background: red;*/
}

#nav-bar .item .icon ion-icon {
	font-size: 24px;
	color: #AAA;
}

#nav-bar .item .label {
	margin-top: 6px;
	display: inline-block;
	color: #222;
}

#app {
	width: 100%;
	height: 100%;
	padding-top: 68px;
	padding-bottom: 84px;
	background-color: #F0F0F0;
	overflow-x: hidden;
	overflow-y: auto;
}

.ui-heading {
	width: 100%;
	top: 0;
	left: 0;
	height: 48px;
	background-color: #FFF;
	font-size: 20px;
	text-align: center;
	line-height: 48px;
	box-shadow: 0 8px 16px -8px rgba(0,0,0,0.1);
	position: fixed;
	z-index: 999;
}

/*
body.signup #app .ui-heading {
	background-color: rgba(255,255,255,0.5);
}
*/

.ui-back {
	width: 48px;
	height: 48px;
	border-right: 1px solid #EEE;
	font-size: 20px;
	text-align: center;
	line-height: 54px;
	position: absolute;
	cursor: pointer;
}

.ui-icon {
	width: 32px;
	height: 32px;
}

.ui-image {
	margin: 0 10px 10px 10px;
}

.ui-image img {
	display: inline-block;
}

.ui-text {
	margin: 0 10px 10px 10px;
	font-size: 15px;
	color: #222;
}

.ui-text.small {
	font-size: 13px;
}

.ui-text.large {
	font-size: 18px;
}

.ui-text.very-large {
	font-size: 22px;
}

.ui-text.xx-large {
	font-size: 28px;
}

.ui-text.xxx-large {
	font-size: 32px;
}

.ui-row {
	margin: 0 auto 15px auto;
	overflow: hidden;
}

.ui-column-100,
.ui-column {
	width: 100%;
	float: left;
}

.ui-column-50 {
	width: 50%;
	float: left;
}

.ui-column-33 {
	width: 33.33%;
	float: left;
}

.ui-column-66 {
	width: 66.67%;
	float: left;
}

.ui-column-25 {
	width: 25%;
	float: left;
}

.ui-column-75 {
	width: 75%;
	float: left;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

body.login #app,
body.signup #app,
body.splash #app {
	/*background-image: url('https://nutricare.iissferrara.com/assets/images/splash_bg.jpg');*/
	/*background: rgba(137,187,83,1);*/
	background-color: #F0F0F0;
	background-image: linear-gradient(135deg, rgba(137,187,83,0.4) 0%, rgba(250,218,125,0.4) 50%, rgba(252,114,91,0.4) 100%);
	background-size: 100% 100%;
}

.ui-spacer {
	width: 100%;
	height: 20px;
}

.ui-divider {
	width: 100%;
	margin: 5px 0;
	height: 1px;
	background-color: #DDD;
}

.ui-button {
	padding: 15px;
	font-size: 16px;
	font-weight: 600;
	background-color: #222;
	color: #FFF;
	border-radius: 30px;
	display: inline-block;
}

.ui-button .icon {
	width: 16px;
	height: 16px;
	margin-right: 5px;
	vertical-align: middle;
	opacity: 0.6;
	display: inline-block;
}

.ui-button .icon.right {
	margin-left: 5px;
	margin-right: 0;
	text-align: none;
}

/*
body.signup .ui-image.anim-shrink {
	animation: 1s ease-out 0s 1 signup-shrink-image;
}

@keyframes signup-shrink-image {
	0% {
		max-width: 80%;
	}
	100% {
		max-width: 50%;
	}
}

.ui-text.anim-shrink {

}

.ui-spacer.anim-shrink {

}
*/


.ui-image.anim-shrink.animated {
	margin-top: 30px !important;
	transition: 1.5s ease;
}

.ui-image.anim-shrink.animated img {
	max-width: 30%;
	transition: 1.5s ease;
}

.ui-text.anim-shrink.animated {
	font-size: 14px;
	transition: 1.5s ease;
}

.ui-spacer.anim-shrink.animated {
	height: 40px;
	transition: 1.5s ease;
}