// 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;
$grigio-superlite: #e5e5ea;

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;
}

.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;
	}
}

.button-icon
{
	color: #000000;
}

.button-date
{
	border: 0px !important;
	border-color: transparent !important;
	background: transparent !important;
	padding-bottom: 18px;
}

.input-date
{
	//border: 0px !important;
	border-top-color: transparent !important;
	border-right-color: transparent !important;
	border-left-color: transparent !important;
	border-bottom-color: $grigio-lite;
}

.element-date
{
	margin-right: 2px;
	//float: left;
}

.float-date > *{
	float: left;
}

.block-date > *
{
	font-family: 'futura-pt', sans-serif;
	@media (min-width: 474px) {
		font-size: 16px;
	}
	@media (max-width: 475px) {
		font-size: 10px;
	}
}

.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) {
			top:48 px;
		}
		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) {
			top:48 px;
		}
		width: 34px;
		height: 34px;
		margin-right: 10px;
	}
}


.back {
	position:absolute; 
	@media (min-width: 1024px) {
		top:48 px;
	}
	/*@media (max-width: 1024px) {
		top:20 px;
	}*/
	width: 30px;
	height: 30px;
}
/*.toolbar-md-primary, .toolbar-ios-primary {
	color: #2b94d1 !important;
	--color:#2b94d1 !important;
}*/

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

.header-grid {
	height: 70px;
}

.header-subpage {
	height: 50px;
}

.contenitore-home {
	@media (max-width: 991px) {
		max-width: 95%;
	}
	@media (min-width: 992px) {
		max-width: 58%;
		margin: auto;
	}
	align-content: center;
	.central-doc{
		margin-top: 20px;
		margin-left: 20px;
	}
	.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 {
			@media (min-width: 360px) {
				width: 140px;
			}
			@media (max-width: 360px) {
				width: 120px;
			}
			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;
}

.item-border-grey
{
	//height: 50px;
	//font-size: 12px;
	color: $bianco;
	//margin-right: auto;
}

.titolo-sezione-head {
	text-align: center;
	font-weight: bold;
	font-size: 20px;
	font-family: 'futura-pt', sans-serif;
	@media (min-width: 1080px) {
		margin-top: 10px;
	}
	@media (max-width: 1080px) {
		margin-top: 5px;
	}
	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;
	}
}

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

.row-results {
	padding: 10px 0px;
	margin: 5px 0px;
	border-bottom: 1px solid $grigio-lite;
	//overflow: hidden;
	.check {
		float: left;
		margin-top: 12px;
		margin-right: 15px;
	}
	.table-row {
		.row-text {
			font-size: 18px;
			display:inline-block;
			text-align: left;
			.detail {
				font-size: 16px;
			}
		}
		.row-download {
			float: right;
			ion-icon {
				color: #2b94d1;
				width: 30px;
			}
		}
		.row-download-special {
			float: right;
			overflow: hidden;
			
			.group-icon {
				text-align: center;
				display: inline-block;
				margin-right: 5px;
				ion-label {
					font-size: 12px;
				}
				ion-icon {
					width: 45px;
					display: block;
					margin:auto;
					color: #2b94d1;
				}
			}
		}
		.row-text-special {
			font-size: 18px;
			.detail {
				font-size: 12px;
			}
		}
	}
}

.footer-tabs{
	height: 60px;
	@media (max-width: 991px) {
		max-width: 100%;
	}
	@media (min-width: 992px) {
		max-width: 56%;
		margin: auto;
	}
	background-color: $giallo;
}

.footer{
	margin-bottom: 5px;
}

.footer-toolbar, .footer-toolbar > *{
	--color:rgb(81, 81, 81);
	color:rgb(81, 81, 81) ;
	background-color: transparent!important;
    --background: transparent!important; 
}

.footer-tabbar {
    @media (max-width: 1080px) {
        display: flex;
        min-height: 60px;
        ion-tab-button {
            display: inline-block !important;
            //min-width: 80px !important;
			width: auto !important;
			--padding-start: 0px;
			ion-label {
				font-size: 10px;
			}
        }
	} 
	--color-selected: $bianco;
	color: rgb(81, 81, 81);
}

.icon-footer {
	width: 35px;
	height: 35px;
}

.title-infra {
	font-weight: bold;
	text-align: center;
	font-size:24px;
	margin-bottom: 5px;
	color:rgb(81, 81, 81);
}
.selection {
	font-size:18px;
	font-family: 'futura-pt', sans-serif;
	--ion-font-family: 'futura-pt', sans-serif;
	margin-left: 0px;
	border: 0px;
	padding-left: 0px;
}
.download {
	float:right;
	ion-icon {
		width: 30px;
	}
}
.selection-done {
	overflow: hidden;
	width: 80%;
	font-size: 20px;
	font-family: 'futura-pt', sans-serif;
}

.download-icon {
	width: 30px;
	height: 30px;
}

.grigio {
	color:rgb(81, 81, 81);
}

.margin-top {
	margin-top: 10px;
}

.chats {
	margin-top:10px;
	
	.quesito {
		font-weight: bold;
		margin: 10px 0px 35px;
		text-align: center;
		font-size:18px;
		line-height: 28px;
		font-family: 'futura-pt', sans-serif;
		color: $grigio;
		margin-right: 35px;
	}
	.back {
		ion-icon {
			width: 30px;
			height: 30px;
		}
		position:relative; 
		float:left;
	}
	.from-me {
			
		.io{
			font-size:14px;
			color:$bianco;
		}
		
		position: relative;
		padding: 10px 20px;
		color: $bianco;
		font-size: 18px;
		background: $celeste;
		border-radius: 25px;
		float: right;
		margin-bottom: 10px;
		margin-left: 20px;
		&:before {
			content: "";
			position: absolute;
			z-index: 2;
			bottom: -2px;
			right: -7px;
			height: 20px;
			border-right: 20px solid $celeste;
			border-bottom-left-radius: 16px 14px;
			-webkit-transform: translate(30, -2px);
		}
		&:after {
			content: "";
			position: absolute;
			z-index: 3;
			bottom: -2px;
			right: -56px;
			width: 26px;
			height: 20px;
			background: white;
			border-bottom-left-radius: 10px;
			-webkit-transform: translate(-30px, -2px);
		}
		p {
			margin: 0px;
		}
	}
	
	.from-them {
		.operatore{
			font-size:14px;
		}
		position: relative;
		padding: 10px 20px;
		background: $grigio-superlite;
		border-radius: 25px;
		color: black;
		float: left;
		font-size: 18px;
		margin-bottom:10px;
		margin-right: 20px;
		&:before {
			content: "";
			position: absolute;
			z-index: 2;
			bottom: -2px;
			left: -7px;
			height: 20px;
			border-left: 20px solid $grigio-superlite;
			border-bottom-right-radius: 16px 14px;
			-webkit-transform: translate(0, -2px);
		}
		&:after {
			content: "";
			position: absolute;
			z-index: 3;
			bottom: -2px;
			left: 4px;
			width: 26px;
			height: 20px;
			background: white;
			border-bottom-right-radius: 10px;
			-webkit-transform: translate(-30px, -2px);
		}
		p {
			margin: 0px;
		}
	}
	.chat-list {
		border-bottom: 1px solid $grigio-lite;
		.check {
			float: left;
			margin-top: 19px;
			margin-right: 15px;
		}
	}
	.row-chat-list {
		border-bottom: $grigio-superlite;
		font-size: 18px;
		padding: 10px 0px;
		font-weight: bold;		
		color:#515151;
		--color: #515151;
		.select{
			float:right;
			ion-icon {
				color:#515151;
				--color: #515151;
				width: 30px;
				height: 30px;
			}
		}
		
		.data {
			div {
				font-size: 18px;
				font-weight: bold;
				border-bottom: $grigio-superlite;	
			}
			font-size: 14px;
			font-weight: 400;
		}
	}
	.download-doc {
		margin-top:5px;
		
		.image {
			//display:inline-block;
			float: left;
			margin-right: 5px;
			ion-icon {
				width: 30px;
				height: 30px;
			}
		}
		.filename {
			//display:inline-block;
			float: left;
			height: 30px;
		}
	}
	.title-question {
		ion-input[type=text] {
			border: none;
			//border-bottom: 1px solid $grigio-superlite;
			font-family: 'futura-pt', sans-serif;
			width: 100%;
			font-size: 18px;
		}
	}
	
	.question-extended {
		margin-top:20px;
		border: 1px solid $grigio-superlite;
		ion-textarea {
			//border: 1px solid $grigio-superlite;
			font-size: 18px;
			font-family: 'futura-pt', sans-serif;
			width: 295px;
			min-height: 80px;
		}
	}
	
	.send {
		ion-button {
			margin-top: 10px;
			background-color: $giallo;
			--backgroud: $giallo;
			color: #000000;
			//padding: 10px 0px;
			width: 100%;
			font-size: 18px;
			font-weight: bold;
			border:none;
			//margin: 15px 0px;
		}
	}
	.undo {
		ion-button {
			margin-top: 10px;
			--background: #e5e5ea;
			color: #000000;
			//padding: 10px 0px;
			width: 100%;
			font-size: 18px;
			font-weight: bold;
			border:none;
		}
	}
}

.clr {
	clear:both;
}

.foo-button {
	//position: ;
	bottom: 0;
	z-index: 5;
	padding: 10px 0px 20px;
	background: rgba(255,255,255, 0.6);
	
	.round-btn {
		border-radius: 50%;
		background: $celeste;
		border: 2px solid $bianco;
		margin: auto;
		display: block;
		text-align:center;
		width:75px;
		height: 75px;
		margin-top: 0px;			
		ion-icon {
			width: 50px;
			height: 50px;
			margin:auto;
			display: block;
			padding-top:12px;
		}
	}
}

.footer-parere {
	height: 90px;
	@media (max-width: 991px) {
		max-width: 100%;
	}
	@media (min-width: 992px) {
		max-width: 56%;
		margin: auto;
	}
}

.search-date-border
{
	border-bottom: 1px solid $grigio-superlite;
}

.search-date {
	font-size: 13px;
	padding-bottom: 15px;
	margin-bottom: 5px;
	.check {
		float: left;
		margin-right: 10px;
	}
	input[type=input] {
		font-size: 15px;
		display: inline-block;
		border: none;
		border-bottom: 1px solid $grigio-superlite;
		width: 87px;
	}
	.search-arrow {
		margin-left: 10px;
		margin-top: 0px;
		background: $giallo;
		--background: $giallo;
		border: 0px;
		height: 24px;
		width: 41px;
	}
	.date-icon
	{
		font-size: 30px;
		margin-bottom: 5px;
	}
	.date-text
	{
		margin-block-start: 7px;
	}
}

.input-intervento
{
	border-bottom: 1px solid $grigio-superlite;
}

.date-div
{
	border-bottom: 1px solid $grigio-superlite;
}

.popover-content {
	@media (min-width: 600px) {
		--min-width: 400px;
	}
	@media (max-width: 600px) {
		--min-width: 100%;
	}
}
.popover-content.sc-ion-popover-md
{
	overflow-x: scroll;
}