//We base our theme on Vaadin Valo theme
@import "../valo/valo.scss";

//And reuse the default Unity's theme definitions
@import "../common/common.scss";

//here goes actual contents of our theme, in the main mixin
@mixin customTheme {
	
	//we include Valo
	@include valo;
	
	//let's override one of the variables used by Unity's default theme (imported below)
	$font: Arial, san-serif;
	
	//include the default Unity theme
	@include unityCommon;

	//the actual changes follow
	
	//in the header caption we hide the default text and instead show a Unity logo
	#uid-headerCaption {
		text-indent: 100%;
  		white-space: nowrap;
  		overflow: hidden;
  		background-image: url("../common/img/logo.png");
  		background-repeat: no-repeat;
  		height: 130px;
	}
	
	//also the height of the top bar is enforced to be slightly larger
	.u-header {
		background-repeat: repeat-x;
		height: 83px !important;
		padding-left: 10px;
	}
	
	.u-minHeightAuthenticator {
		min-height: auto;
	}
	
	&.v-app, &.v-app-loanding {
		background-color: white;
		font-family: Arial, sans-serif;
	}
	
	.v-slot-u-header {
		border-top: 1px solid #C81846;
	}
	
	.v-slot-u-textEndpointHeading {
		background-image: url("../customTheme/img/logo.png");
		background-repeat: no-repeat;
		color: transparent;
	}
	
	.v-filterselect-compact [class$="button"], .v-filterselect-small [class$="button"] {
  		background: url("../customTheme/img/up_down_black_flyer.png") no-repeat scroll center center transparent;
  		border-left: 1px solid #cfcfcf !important;
  		border-radius: 0 4px 4px 0;
  		display: inline-block;
  		height: 28px;
  		position: absolute;
  		right: 1px;
  		top: 1px;
  		width: 28px;
  	}
  	
  	.v-filterselect-compact [class$="button"]:before, .v-filterselect-small [class$="button"]:before {
  		content: "";
	}
	
	.v-filterselect-compact, .v-filterselect-small {
  		height: 30px;
	}
	
	.v-filterselect-no-input [class*="input"] {
		background-color: white;
  		background-image: none;
  		-webkit-box-shadow: none;
  		box-shadow: none; 
  		border: 1px solid #cfcfcf;
  		border-top-color: #cfcfcf; 
  		border-bottom-color: #cfcfcf; 
	}
	
	.v-filterselect {
  		width: 150px;
  		border-radius: 3px;
	}
	
	.v-filterselect-no-input [class*="input"]:focus, .v-textfield:focus {
  		border-color: #C81846;
  		-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(200, 6, 57, 0.3);
  		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(200, 6, 57, 0.3);
	}
	
	.v-image {
 		max-width: 300px;
  		max-height: 80px;
	}
	
	.v-button {
  		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  		
  		&[id$='authnenticateButton'], &[id$='confirm'] {
  			color: #fff;
  			text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  			background-color: #ba103d;
  			background-image: -moz-linear-gradient(top,#c81846,#a5052f);
 			background-image: -webkit-gradient(linear,0 0,0 100%,from(#c81846),to(#a5052f));
  			background-image: -webkit-linear-gradient(top,#c81846,#a5052f);
  			background-image: -o-linear-gradient(top,#c81846,#a5052f);
  			background-image: linear-gradient(to bottom,#c81846,#a5052f);
  			background-repeat: repeat-x;
  			border-color: #a5052f #a5052f #5b031a;
  			border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  			filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffc81846',endColorstr='#ffa5052f',GradientType=0);
  			filter: progid:dximagetransform.microsoft.gradient(enabled=false);
			display: inline-block;
  			padding: 4px 14px;
  			margin-bottom: 0;
  			font-size: 14px;
  			line-height: 20px;
  			-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  			-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  			box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
  			
  			&:active {
  				background-color: #a5052f;
  				background-image: none;
  				outline: 0;
  				-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
  				-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
  				box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
  			}
  		}
	}
	
	.v-button-link {
		color: #c81846;		
		&:active, &:hover {
			color: #c81846;
			opacity: 1;
			text-decoration: none;
		}
	}
	
	.v-textfield {
		height: 30px;
	}
	
	.v-label-h1 {
		margin-bottom: 5px;
		margin-top: 5px;
	}
	
	[class*="spacing"] > tbody > [class*="row"] > td {
  		padding-top: 0px;
	}
	
	
	.v-checkbox > input:checked ~ label:after {
  		color: #C21542 !important;
	}
	
	.v-checkbox > input:focus ~ label:before {
  		border-color: #BE123F !important;
  		-webkit-box-shadow: 0 0 0 2px rgba(190, 19, 64, 0.5) !important;
  		box-shadow: 0 0 0 2px rgba(190, 18, 63, 0.5) !important;
  		-webkit-box-shadow: 0 0 0 2px rgba(195, 22, 67, 0.5), inset 0 1px 0 white, inset 0 -1px 0 #e7e7e7, 0 2px 3px rgba(0, 0, 0, 0.05) !important;
  		box-shadow: 0 0 0 2px rgba(199, 23, 69, 0.5), inset 0 1px 0 white, inset 0 -1px 0 #e7e7e7, 0 2px 3px rgba(0, 0, 0, 0.05) !important;
	}
	
	.v-align-center > .v-label {
		text-align: center
	}
	
	[id^='IdpSelector'] img {
		max-width: 150px;
	}
	
	.v-button-link.v-disabled:hover, .v-disabled img {
  		opacity: 0.5;
  		filter: alpha(opacity=50);
	}
	
	.u-formSection:first-child {
    	margin: 5px 0 4px 0;
	}
	
	
	.v-formlayout-row:nth-last-child(2), .v-formlayout-row:nth-last-child(3) {
		display: none;
	}
	
	.v-formlayout-row.v-formlayout-lastrow, .v-formlayout-row:nth-child(1), .v-formlayout-row:nth-child(2) {
    	display: table-row !important;
	}
	
	[id='IdpSelector.infonaPwdWeb_password'], [id='IdpSelector.oauthWeb_providers.fb.'] {
		margin-bottom: 0px;
	}
	
	[id='IdpSelector.oauthWeb_providers.fb.'], [id='IdpSelector.oauthWeb_providers.google.'] {
		margin-top: 0px;
	}
	
	[id='IdpSelector.oauthWeb_providers.google.'] {
		margin-bottom: 5px;
	}
	
	.v-window {
		min-height: 390px !important;
	}
	
	.v-verticallayout.v-layout.v-vertical.v-widget.v-has-width {
		width: 100% !important;
		
	}
	
}