/**
 * @author Jan-Christoph Borchardt, http://jancborchardt.net
 * @copyright Copyright (c) 2015, ownCloud, Inc.
 * @license AGPL-3.0
 *
 * This code is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License, version 3,
 * as published by the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License, version 3,
 * along with this program.  If not, see <http://www.gnu.org/licenses/>
 */

body { font-family: $sans; background-color: $white; padding: 0px;}

#header {
	background: unset;
	z-index: 10;
	padding: 0;
	height: 60px;


	h1 {
		padding: 0;
		display: none !important;
	}

}

.bg-brain-image {
	background-image: url(#{$imgs-path}Brain_Texture.jpg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	
	z-index: 1;
}

// headers type 
	h1, h2, h3, h4, h5, h6 {
		font-family: $font-secondary;
		border-bottom: unset;
	}



	h1 { font-size: rem(56); line-height: rem(66); }
	h2 { font-size: rem(50); line-height: rem(60); }
	h3 { font-size: rem(36); line-height: rem(42); }
	h4 { font-size: rem(30); line-height: rem(36); }
	h5 { font-size: rem(24); line-height: rem(28); }
	h6 { font-size: rem(22); line-height: rem(26); }

	.color-text { color: $text !important; }
	.color-primary { color: $primary !important; }
	.color-blue { color: $secondary !important; }



// grad-border header
	.grad-border {
		z-index: 5 !important;
		font-family: $sans-bold;
		&.center {
			&:before {
				content: '';
				height: rem(4);
				width: rem(100);
				position: absolute;
				left: calc((100% - 100px) / 2);
				margin-top: -20px;
				@include css-gradient($primary,$color-stop-4);
			}
		}
		&.left-sm-center {
			&:before {
				content: '';
				height: rem(4);
				width: rem(100);
				position: absolute;
				left: calc((100% - 100px) / 2);
				margin-top: -20px;
				@include css-gradient($primary,$color-stop-4);
			}
		}
		&.mint{
			&:before{
				content: '';
				height: rem(4);
				width: rem(100);
				position: absolute;
				left: calc((100% - 100px) / 2);
				margin-top: -20px;
				@include css-gradient($tertiary-light,$tertiary-light);
			}
		}
		&.mint-blue{
			&:before{
				content: '';
				height: rem(4);
				width: rem(100);
				position: absolute;
				left: calc((100% - 100px) / 2);
				margin-top: -20px;
				@include css-gradient($tertiary-light,$secondary);
			}
		}
		&.blue{
			&:before{
				content: '';
				height: rem(4);
				width: rem(100);
				position: absolute;
				left: calc((100% - 100px) / 2);
				margin-top: -20px;
				@include css-gradient($secondary,$secondary);
			}
		}
		&.magenta{
			&:before{
				content: '';
				height: rem(4);
				width: rem(100);
				position: absolute;
				left: calc((100% - 100px) / 2);
				margin-top: -20px;
				@include css-gradient($primary,$primary);
			}
		}
		&.eggplant{
			&:before{
				content: '';
				height: rem(4);
				width: rem(100);
				position: absolute;
				left: calc((100% - 100px) / 2);
				margin-top: -20px;
				@include css-gradient($primary-dark,$primary-dark);
			}
		}
		&.left { 
			&:before {					
				left: unset;
				// @include css-gradient($primary,$color-stop-4);
			}
		}
	}

/* header color */
/* this is the main brand color */
#body-user #header,
#body-settings #header,
#body-public #header {
	background-color: $primary;
	height: rem(60);
}

#body-user #header {
	&:before { 
		background-color: $primary;
	}
} 

.justify-center {
	display: flex;
	justify-content: center;
}
.justify-left {
	display: flex;
	justify-content: flex-start;
}
.justify-right {
	display: flex;
	justify-content: flex-end;
}

.w-100	{ width: 100%; }
.w-75		{ width: 75%; }
.w-50		{ width: 50%; }
.w-25		{ width: 25%; }
.z-10		{ z-index: 10; }


#content { 
	background-color: $white;
	margin-top: 330px;
	z-index: 2;
	// min-height: 200px;


	&:before {
		content: "";
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 347' preserveAspectRatio='none'%3E<path fill=\"%23ffffff\" d='M74,285.81s7.5-54.84,62.5-89c54.13-33.63,104-30.5,104-30.5s23.25-50.17,73-72.5,86.5-19,86.5-19,26.62-32.94,73.5-39c52.27-6.77,106,15,106,15s19.6-39.2,86.5-48c42.17-5.56,60.75-2.34,84,5,22.55,7.11,35.5,17,35.5,17H813s32.85-12.11,70.5-9c53.2,4.38,79.5,36,79.5,36s45.75-3.25,88.5,16.5,57,51.5,57,51.5,7,3,8.5,3,48.66-6.55,85-3c23.39,2.28,44.81,8.4,79,22,28.91,11.5,72.7,34.36,102.5,57.5,71.33,55.38,89.25,103,94,109s22.5,22,22.5,22v16.5H0v-29.5s9.18-7.76,28-17c19-9.34,46-14.5,46-14.5'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
	  background-position: bottom -1px center;
	  background-size: 100% 100%;
	  width: 100%;
	  height: 346px;
	  position: absolute;
	  top: 70px;
	  left: 0;
	  padding-top: 0px;
	  overflow-x: hidden;
	  z-index: 1;
	}
	.container {
		margin-top: -115px;
		z-index: 10;
	}
}

/* log in screen background color */
/* gradient of the header color and a brighter shade */
/* can also be a flat color or an image */
#body-login {
	background: $primary; /* Old browsers */
	background: -moz-linear-gradient(top, #947bea 0%, #745bca 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#947bea), color-stop(100%,#745bca)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #947bea 0%,#745bca 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #947bea 0%,#745bca 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #947bea 0%,#745bca 100%); /* IE10+ */
	background: linear-gradient(top, #947bea 0%,#745bca 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#947bea', endColorstr='#745bca',GradientType=0 ); /* IE6-9 */


	.wrapper {
		.v-align {
			background-color: $white;
			margin: rem(16);
			border-radius: rem(20);
			box-shadow: 0px 5px 5px opacify($textA, 0.5);
			padding-bottom: rem(20);
			main { 
				#saml-select-user-back-end {
					h1 { color: $text !important; }
				}
			}

		}
	}


}

#footer {
	&.footer-container {
		background-color: $tertiary-light;
		background-image: url(#{$imgs-path}brain.png);
		background-repeat: no-repeat;
		background-size: 553px 553px;
 		background-position: bottom 50% right -268px;
 		padding-top: 40px;
 		padding-bottom: unset;
	}
}