/**
 * Material Icons
 * @url http://google.github.io/material-design-icons/ 
 */
 @font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/Material_Icons/MaterialIcons-Regular.eot'); /* For IE6-8 */
	src: local('Material Icons'),
	     local('MaterialIcons-Regular'),
	     url('../fonts/Material_Icons/MaterialIcons-Regular.woff2') format('woff2'),
	     url('../fonts/Material_Icons/MaterialIcons-Regular.woff') format('woff'),
	     url('../fonts/Material_Icons/MaterialIcons-Regular.ttf') format('truetype');
}
 
.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;
	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;
	/* Support for IE. */
	font-feature-settings: 'liga';
}
/* Rules for sizing the icon. */
.material-icons.md-12 { font-size: 12px; }
.material-icons.md-14 { font-size: 14px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-20 { font-size: 20px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-26 { font-size: 26px; }
.material-icons.md-30 { font-size: 30px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-40 { font-size: 40px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
/* Colored */
.material-icons.red { color: rgba(233, 39, 6, 0.74); }
.material-icons.green { color: rgba(127, 186, 0, 0.74); }
.material-icons.yellow { color: rgba(255, 189, 17, 0.74); }
.material-icons.dark-green { color: #009688; }


@font-face {
	font-family: 'Yettel';
	src: url('../fonts/Yettel/Yettel-Regular.woff2') format('woff2'),
	url('../fonts/Yettel/Yettel-Regular.woff') format('woff'),
	url('../fonts/Yettel/Yettel-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Yettel';
	src: url('../fonts/Yettel/Yettel-Bold.woff2') format('woff2'),
	url('../fonts/Yettel/Yettel-Bold.woff') format('woff'),
	url('../fonts/Yettel/Yettel-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Yettel';
	src: url('../fonts/Yettel/Yettel-Light.woff2') format('woff2'),
	url('../fonts/Yettel/Yettel-Light.woff') format('woff'),
	url('../fonts/Yettel/Yettel-Light.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
}

/* Growls */
.growl-container {
	position: fixed;
	top: 55px;
	right: 25px;
	
	z-index: 5000;
}
.growl {
	position: relative;
	width: 400px;
	margin: 0 0 1em;
	padding: 0.5em 0.5em 0 0.5em;
	line-height: 1.5em;
	background-color: #fff;
	border: 1px solid #d7d7d7;
	
	-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	-o-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
}
.growl > div { 
	padding: 0 10px;
}
.growl h4 {
	font-size: 12px;
	font-weight: normal;
}
.growl h4 i {
	vertical-align: top;
}
.growl .status {
	margin-top: 30px;
}
.growl .bottom {
	background-color: #eee;
}
.growl .bottom .btn {
	margin: 10px 0;
}
.growl .bottom .btn.close {
	opacity: 1;
	text-shadow: none;
	position: initial;
	width: 30px;
    height: 30px;
    background-color: #fff;
    border: 1px solid #cecece;
}
.growl p,
.growl .error-code,
.growl .count {
	color: #505050;
}
.growl .ui-icon {
	position: initial;
    margin: 6px;
}
.growl-container .vertical-align {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}


/* Success */
.growl.success h4,
.growl.success .bottom .btn {
	color: #009688;
}
.growl.success .status {
	color: #7fba00;
}
/* Notice */
.growl.notice h4,
.growl.notice .bottom .btn {
	color: #ff9719;
}
.growl.notice .status {
	color: #ffbd11;
}
/* Error */
.growl.errormsg .status,
.growl.errormsg h4,
.growl.errormsg .bottom .btn {
	color: #e92706;
}
.growl.errormsg p.payload {
	color: #757575;
}

/* GROWL OBFUSCATOR */
.growl-obfuscator {
	display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
	right: 0;
    z-index: 4;
    opacity: 0;
	background-color: rgba(0,0,0,.5);
	transition-property: opacity;
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}
.growl-obfuscator.is-visible {
	display: block;
    opacity: 1;
}

@media screen and (max-width: 767px) {
	.growl-container {
		top: 5px;
		left: 5px;
		right: 5px;
		height: 100%;
	}
	.growl {
		width: 100%;
		max-width: none;
	}
	.growl .status {
		margin-top: 10px;
	}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
	.growl-container {
		top: 0;
		left: 5px;
		right: 5px;
		height: 100%;
	}
	.growl {
		width: 60%;
    	margin: 0 auto;
	}
	.growl .status {
		margin-top: 10px;
		float: right;
	}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.growl-container {
		top: 0;
		left: 5px;
		right: 5px;
		height: 100%;
	}
	.growl {
		width: 60%;
    	margin: 0 auto;
	}
	.growl .status {
		margin-top: 10px;
		float: right;
	}
}