/*

This stylesheet provides some sample styles to use with Freeow! You may use
these in your project or create your own!

For my samples, I'm assuming that you will call freeow() on a container with
the class .freeow applied to it.

The default template function produces markup matching this outline:

	div (classes passed in options get applied here)
		div.background
			div.content
				h2
				p
		span.icon
		span.close

Don't forget: You can make your own template function if this markup doesn't work for your project. The function must accept the title and message as arguments and return a DOM element (the message box).

Update $.fn.freeow.defaults.template or pass the function as the template
member of the options object when calling freeow().

*/


/* Boilerplate -------------------------------------------------------------- */

/* Outermost Container */
.freeow {
    position: fixed;
    width: 350px;
    z-index: 9999;
}
.freeow-top-right {
    top: 60px;
    right: 10px;
}
.freeow-bottom-right {
    bottom: 10px;
    right: 10px;
}

/* Message */
.freeow > div {
    position: relative;
    margin-bottom: 5px;
	cursor: pointer;
}
.freeow .freeowContent {
    margin: 10px 10px 10px 60px;
}
.freeow h2,
.freeow p {
    margin: 0;
    padding: 0;

}
.freeow .icon {
    position: absolute;
    display: block;
    width: 48px;
    height: 48px;
    top: 0px;
    left: 10px;
    z-index: 1;
}

.freeow .close {
	position: absolute;
	display: block;
	top: -7px;
	left: 2px;
	background: none;
	z-index: 2;
	border-radius: 7em;
	height: 18px;
}

.freeow .close::before{
	content: "\f00d";
	font-family: "FontAwesome";
	font-size: .5em;
	opacity:1;
	
}

.freeow:hover .close{
	opacity:0.7;
}


/* Icons -------------------------------------------------------------------- */

.freeow .freeowinfo .icon:before {
  	content:"\f05a";
  	color: #1c8ae8;
  	font-size: 40px;
}

.freeow .freeowwarn .icon:before {
  	content:"\f06a";
  	color: #f2c779;
  	font-size: 40px;
}
.freeow .freeowerror .icon:before {
  	content:"\f05c";
  	color: #CC0000;
  	font-size: 40px;
}


/* Specific Styles ---------------------------------------------------------- */

/* Gray */
.freeow .gray {
	color: #333;
}
.freeow .gray .background {
	border: 1px solid #d2d6de;
	border-radius: 3px;
	background: var(--background-color);
	box-shadow: 0px 5px 25px -15px #9f9f9f, 0px 5px 15px -5px #e6e6e6;
	min-height: 60px;
}
.freeow .gray .content {
    margin: 5px 5px 5px 60px;
}
.freeow .gray h2 {
    font-weight: normal;
    font-size: 15px;
    line-height: 15px;
}
.freeow .gray p {
    padding-top: 8px;
    font-weight: normal;
    font-size: 12px;
    line-height: 12px;
}