// http://ionicframework.com/docs/theming/
@import '~@ionic/angular/css/core.css';
@import '~@ionic/angular/css/normalize.css';
@import '~@ionic/angular/css/structure.css';
@import '~@ionic/angular/css/typography.css';
@import '~@ionic/angular/css/display.css';
@import '~@ionic/angular/css/padding.css';
@import '~@ionic/angular/css/float-elements.css';
@import '~@ionic/angular/css/text-alignment.css';
@import '~@ionic/angular/css/text-transformation.css';
@import '~@ionic/angular/css/flex-utils.css';

/*** questo è il css per caricare le web fonts della comunicazione 2p2, ovvero la font Futura PT ***/

@import url("https://use.typekit.net/okc2ngl.css");

$bianco: #fff;
$celeste: #2b94d1;
$giallo: #fcc73d;
$grigio: #515151;
$nero: #000000;
$grigio-lite: #aeaeae;

ion-title{
    top: 0;
    left: 0;
    padding: 0 90px 1px;
    width: 100%;
    height: 100%;
    text-align: center;
}

.business-toolbar{
	min-height: 90px;
	--color:#2b94d1 !important;
	color:#2b94d1 !important;
	background-color: transparent!important;
    --background: transparent!important; 
}

ion-tab-bar{
    @media (min-width: 1080px) {
        justify-content: center;
    }
}

.tabbar {
    @media (max-width: 1080px) {
        display: flex;
        overflow-x: scroll;
        min-height: 100px;
        .tabbutton {
            display: inline-block !important;
            min-width: 100px !important;
            width: auto !important;
        }
    }  
}

.body {
	font-family: 'futura-pt', sans-serif;
	font-style: normal;
	font-weight: 400;
	padding-top: 45px;
    margin:0px;
	background: url('assets/img/cover-login.jpg') no-repeat;
	background-size: cover;
	background-position: top center;
	color: $grigio;
    font-size: 24px;
    height: 100%;
	width: 100%;
	overflow-y: scroll;
    //position: fixed;
}

/*.css-class-login-inner-scroll {
    background-color: transparent!important;
    --background: transparent!important; 
}*/

.body > * {
    background-color: transparent!important;
    --ion-background-color: transparent!important; 
}

ion-button, ion-input {
	--ion-font-family: 'futura-pt', sans-serif;
}

.login-field {
    --border-color: rgb(255, 255, 255);
}

strong {
	font-style: normal;
	font-weight: 700;
}

.field-icon {
    margin: 20px 10px 0 0 !important;
    background-color: transparent;
}

.contenitore {
	margin:auto;
	display:block;
	
	.logo-grande {
		width: 180px;
		margin: auto;
		display: block;
		text-align: center;
		margin-top: 20px;
		margin-bottom: 50px;
	}	
	
	.form {
		ion-input[type=text], ion-input[type=password] {
			border: 0px;
			color: $bianco;
			padding: 8px 0px 8px 30px;
			background-position: left center;
			background-size: 18px 18px;
			font-size: 22px;
			margin-top: 20px;
			outline: none;
		}
		::-webkit-input-placeholder {
			font-family: 'futura-pt', sans-serif;
		 	color: $bianco;
		}
		::-moz-placeholder {
			font-family: 'futura-pt', sans-serif;
			color: $bianco;
		}
		:-ms-input-placeholder {
			font-family: 'futura-pt', sans-serif;
			color: $bianco;
		}
		::placeholder {
			font-family: 'futura-pt', sans-serif;
			color: $bianco;
        }
		.ricordami {
			color: $bianco;
			text-transform: uppercase;
			font-size: 18px;
		}
		.accedi {
			ion-button {
				width: 100%;
				text-align: center;
				background: $celeste;
				border: 1px solid $bianco;
				margin-top: 30px;
				text-transform: uppercase;
				font-weight: 700;
				color: #fff;
				font-size: 22px;
				margin-bottom: 15px;
			}
		}
		.forgot {
			text-align: center;
			a {
				color: $bianco;
				text-decoration: none;
				font-weight: 700;
				font-size: 16px;
			}
		}
	}
	
	.business-call {
		background: rgba(255, 255, 255, 0.33); 
		padding: 20px;
		margin-top: 30px;
		text-align: center;
		color: $bianco;
		
		.non-account {
			font-size: 14px;
			text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
		}
		.title-call {
			font-weight: 700;
			font-size: 24px;
			text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
			
			.giallo {
				color: $giallo;
			}
		}
		.descr-call {
			color: $grigio;
			font-size: 18px;
			text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
		}
		.appuntamento {
			margin-top: 10px;
			
			a {
				background: $giallo;
				padding: 8px 5px;
				font-size: 15px;
				text-transform: uppercase;
				color: $grigio;
				font-weight: 700;
				text-decoration: none;
			}
		}
	}	
}

.no-image {
	background: rgba(255,255,255,1);
	background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 74%, rgba(180,217,238,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(74%, rgba(255,255,255,1)), color-stop(100%, rgba(180,217,238,1)));
	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 74%, rgba(180,217,238,1) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 74%, rgba(180,217,238,1) 100%);
	background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 74%, rgba(180,217,238,1) 100%);
	background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 74%, rgba(180,217,238,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b4d9ee', GradientType=1 );
	height: 100%;
    width: 100%;
}

.no-image > * {
    background-color: transparent!important;
    --ion-background-color: transparent!important; 
}

.nothing {
	background: none;
}

.icon-md-primary, .icon-ios-primary {
	color: #2b94d1 !important;
	--color:#2b94d1 !important;
}

.back {
	position:absolute; 
	@media (min-width: 1024px) {
		top:48 px;
	}
	/*@media (max-width: 1024px) {
		top:20 px;
	}*/
	width: 30px;
	height: 30px;
}
.logo-piccolo img {
	max-width: 100px;
}

.testo-form {
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	text-align:left;
	color:rgb(81, 81, 81);
}

.item-no-border
{
	--border-color: transparent!important;
}

.contenitore-business {
	margin:auto;
	text-align: center;
	color:rgb(81, 81, 81);
	.form {
		font-size: 18px;
		font-weight: bold;
		text-transform: uppercase;
		text-align:left;
		ion-input[type=text], ion-input[type=password], ion-textarea  {
			--ion-font-family: 'futura-pt', sans-serif;
			border: 0px;
			color: $grigio;
			padding: 8px 0px;
			font-size: 18px;
			margin-top: 20px;
			outline: none;
		}
		.input-business {
			--border-color: #2b94d1;
		}
		::-webkit-input-placeholder {
			font-family: 'futura-pt', sans-serif;
		 	color: $grigio;
		 	text-transform: uppercase;
		 	font-weight: bold;
		}
		::-moz-placeholder {
			font-family: 'futura-pt', sans-serif;
			color: $grigio;
			text-transform: uppercase;
			font-weight: bold;
		}
		:-ms-input-placeholder {
			font-family: 'futura-pt', sans-serif;
			color: $grigio;
			text-transform: uppercase;
			font-weight: bold;
		}
		::placeholder {
			font-family: 'futura-pt', sans-serif;
			color: $grigio;
			text-transform: uppercase;
			font-weight: bold;
		}
		textarea {
			overflow:hidden;
		}
		ion-textarea {
			border: 1px solid $celeste;
			margin-top: 6px;
			font-weight: normal;
			text-transform: none;
		}
		.accedi {
			ion-button {
				width: 100%;
				text-align: center;
				background: $celeste;
				border: 1px solid $bianco;
				margin-top: 30px;
				text-transform: uppercase;
				font-weight: 700;
				color: #fff;
				font-size: 22px;
				margin-bottom: 15px;
			}
		}
	}
	.messaggio {
		font-weight: bold;
		text-transform: uppercase;
		margin-bottom: 20px;
		font-size: 24px;
	}
	a {
		color: $celeste;
	}
	.input-check {
		input {
			margin-bottom: 50px;
			float: left;
		}
		font-size: 15px;
		font-weight: bold;
		text-transform: uppercase;
		text-align:left;
		color:rgb(81, 81, 81);
	}
	.text-check {
		margin-left: 10px;
	}
	.require {
		text-transform: none;
		font-size:16px;
		text-align: center;
		font-family: 'futura-pt', sans-serif;
		font-weight: bold;
	}
}

.blu {
	color: $celeste;
}

.header-home
{
	border: 0px !important;
    border-bottom-color: transparent !important;
    border-bottom: none !important;
}

.header {
	color: $bianco;
	overflow: hidden;
	padding-top: 20px;
	padding-bottom: 10px;
	height: 50px;
	min-height: 70px;

	:first-child
	{
		padding-top: 0px;
	}

	.menu-show{
		@media (min-width: 1024px) {
			zoom: 4.0;
		}
		width: 34px;
		height: 34px;
		margin-left: 10px;
		padding-bottom: 5px;
	}
	.logo-piccolo {
		img {
			max-width: 50px;
			display: block;
			margin:auto;
		}
	}
	.exit {
		@media (min-width: 1024px) {
			zoom: 4.0;
		}
		width: 34px;
		height: 34px;
		margin-right: 10px;
	}
}

/*.toolbar-md-primary, .toolbar-ios-primary {
	color: #2b94d1 !important;
	--color:#2b94d1 !important;
}*/

.header-grid {
	background-color:$celeste;
    --ion-background-color: $celeste; 
}

.contenitore-home {
	@media (max-width: 991px) {
		max-width: 95%;
	}
	@media (min-width: 992px) {
		max-width: 58%;
		margin: auto;
	}
	align-content: center;
	.central-home {
		@media (min-height: 480px) and (min-width: 991px) {
			margin-top: 20%;
			margin-left: 20px;
		}
		@media (max-height: 479px), (max-width: 991px) {
			margin-top: 20px;
			margin-left: 20px;
		}
		.box {
			width: 140px;
			margin: 5px 10px 5px 5px;
			border: 1px solid $grigio-lite;
			-webkit-box-shadow: 0px 3px 4px 0px rgba(184,184,184,1);
			-moz-box-shadow: 0px 3px 4px 0px rgba(184,184,184,1);
			box-shadow: 0px 3px 4px 0px rgba(184,184,184,1);
			float:left;
			.icon {
				margin:auto;
				background: $celeste;
				min-height: 120px;
				img {
					max-width: 180px;
					width: 100px;
					margin: auto;
					display: block;
					padding-top: 10px;
					background: transparent !important;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
				}
			}
			.section-title {
				font-weight: bold;
				text-align: center;
				font-size: 16px;
				padding: 15px 5px;
				min-height: 42px;
				height: 84px;
			}
		}
	}
}

.menu > *
{
	background: transparent!important;
}

.menu-item
{
	--border-color: transparent!important;
	color: $bianco;
}

.menu-toolbar
{
	--border-color: transparent!important;
	color: $bianco;
}

ion-menu{
	ion-content, ion-header{
		--ion-background-color: #2b94d1!important;
	}
	ion-title{
		text-align: left;
	}
}

.item-border-grey
{
	height: 50px;
	font-size: 12px;
}

.menu-title
{
	font-size: 18px;
	font-weight: bold;
	text-align:left;
	color: $bianco;
}

.footer-tabs
{
	height: 55px;
}