/*
 * Toastr8
 * Version 1.0.2
 * Copyright 2013 Samuel Pinto.  
 * All Rights Reserved.  
 * Use, reproduction, distribution, and modification of this code is subject to the terms and 
 * conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php
 *
* @author Samuel Pinto
* @version 1.0.1
* Project: https://github.com/saribe/toastr8
*/

/* ============================ POSITIONS ============================ */
.toast8-top-center {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.toast8-top-full-width {
	top: 0;
	right: 0;
	width: 100%;
}

.toast8-bottom-full-width {
	right: 0;
	bottom: 0;
	width: 100%;
}

.toast8-top-left {
	top: 12px;
	left: 0;
}

.toast8-top-right {
	top: 12px;
	right: 0;
}

.toast8-bottom-right {
	right: 0;
	bottom: 12px;
}

.toast8-bottom-left {
	bottom: 12px;
	left: 0;
}
/* ===== POSITIONS ===== */

/* ============================ TOAST ============================ */
#toast8-container *:before, #toast8-container *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#toast8-container {
	position: fixed;
	z-index: 999999;
	font-family: 'Roboto Condensed', sans-serif;
}

#toast8-container>table:hover {
	opacity: 1;
	filter: alpha(opacity = 100);
	cursor: pointer;	
}

#toast8-container>table:hover .toast8-close-button {
	display: block !important;
}

#toast8-container>table {
	border-collapse: collapse;
	border-spacing: 0;
	overflow: hidden;
	margin: 5px 0;
	background-repeat: no-repeat;
	color: #ffffff;
	-ms-opacity: 0.9;
	opacity: 0.97;
	/*bootstrap fix  width: 24em;*/
	width: 25em;
	/* border-collapse: collapse; */
	min-height: 6.5em;
/* 	box-shadow: 0px 0px 3px #d2d2d2;  */
	max-width: 25em;
 	box-shadow: 0px 6px 8px -4px rgba(0,0,0,0.39); 
	-webkit-box-shadow: 0px 6px 8px -4px rgba(0,0,0,0.39);
 	-moz-box-shadow: 0px 6px 8px -4px rgba(0,0,0,0.39);   
	
}

#toast8-container tr {
	vertical-align: top;
}

#toast8-container tr>td {
	padding: 0;
}

#toast8-container tr>.toast8-message-container {
	display: inherit;
	max-width: 23em;
}

#toast8-container tr>.toast8-message-container>.toast8-title {
	float: left;
	overflow: hidden;
	padding: 5px 7px;
	/* width: 100%; */
	/* height: 1.6em; */
	font-weight: bolder;
	/* font-size: 1em; */
	text-align: left;
	width: 100%;
	word-break: break-all;
	word-wrap: normal;
}

#toast8-container tr>.toast8-message-container>.toast8-message {
	float: left;
	overflow: hidden;
	padding: 5px 5px 5px 10px;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	text-align: left;
	/* font-size: 0.85em; */
	max-width: 24em;
	overflow: auto;
	max-height: 29em;
}

#toast8-container tr>.toast8-message-container>.toast8-message a,
	#toast8-container tr>.toast8-message-container>.toast8-message label {
	color: #ffffff;
}

#toast8-container tr>.toast8-message-container>.toast8-message a:hover {
	color: #cccccc;
	text-decoration: none;
}

#toast8-container tr>.toast8-right-container {
	vertical-align: bottom;
	position: relative;
	width: 2em;
	text-align: right;
}

#toast8-container tr>.toast8-right-container i {
	font-size: 1.7em;
	margin: 7px;
}

#toast8-container tr>.toast8-right-container .toast8-close-button {
	top: 0;
	background-color: transparent;
	color: white;
	font-size: 1.3em;
	width: 1.1em;
	height: 1.1em;
	position: absolute;
	right: 0;
	display: none;
	line-height: 1.1em;
	min-width: 0;
	border: 0;
	padding: 0;
	font-weight: bolder;
}

#toast8-container tr>.toast8-right-container .toast8-close-button:hover,
	#toast8-container tr>.toast8-right-container .toast8-close-button:focus
	{
	-ms-opacity: 1;
	opacity: 1;
	cursor: pointer;
	background-color: #ffffff;
	background-color: rgba(255, 255, 255, 0.3);
}

#toast8-container tr>.toast8-avatar-container {
	/* float: left; */
	background-color: #333333;
	background-color: rgba(51, 51, 51, 0.9);
	background-position: center center;
	background-repeat: no-repeat;
	line-height: 94px;
	width: 90px;
	height: 100%;
	max-height: 90px;
	padding: 0;
	text-align: center;

	/* margin-top: auto; */
	/* margin-bottom: auto; */
	/* padding-top: 25px; */
}

#toast8-container tr>.toast8-avatar-container i {
	position: absolute;
	height: 90px;
	width: 90px;
	border: 0;
}

#toast8-container tr>.toast8-avatar-container img {
	width: 100%;
	height: 100%;
	padding: 0;
}

#toast8-container.toast8-top-full-width>table, #toast8-container.toast8-bottom-full-width>table
	{
	margin: auto;
	width: 96%;
}
/* ===== TOAST ===== */

/* ============================ MESSAGE TYPE ============================ */
.toast8-avatar {
	background-image:
		url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCABZAFoDASIAAhEBAxEB/8QAGwABAAMAAwEAAAAAAAAAAAAAAAUGBwEDBAL/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHQQAHPrPG54AAAHf0W8ssnyIjM9johUgAALvSJM1V8/Qptwy8iQADtO+x2/wBRnMlboYqMnbfaZdEbPmRCgTsFaS/gAAVO2V0zkC50y8lvAAAhZqHMvB//xAAnEAAABQQCAQMFAAAAAAAAAAABAgMEBQYQESAAFBIWISIwMTM1QP/aAAgBAQABBQL+AAyPTXx9vooomXVZx6bMnH0cm8IqmZFTenkcnvUCIFV3p0/xvURvjvHO+m5KYDl4Y3iEk87jnZu0VdGJTxhIVZ1Dn9ReziQcSApU+YybqLXa6pJiso2blbI8VSIsQYRqIoM0W1hDPJVn1HN4UvlIb1CnlC9PFy63nQyxvTpffeZDMdenfx7y/wCut//EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQMBAT8BE//EABQRAQAAAAAAAAAAAAAAAAAAAFD/2gAIAQIBAT8BE//EAC4QAAIAAwUFBwUAAAAAAAAAAAECAAMREiAhMFEQMTJCcRMiI0FSYYEzQHKSsf/aAAgBAQAGPwL7CgivYv8ArlLLXiMCyKt5ts9MzyaGRsGGRNmaYC5LmDmFDkTl6G5JXqcgPy7mgEGoOypwEFhwDBb9Ja194706jaARYbFNDuj6GP5R2YGB5FirzLDaUrFSLSepbqoN7GkBFGA2WXUMNDFbJHzHhoF99vd4GxFxPapyJb6NS450XI6MLk49Mib8f25O6jIndNv/xAApEAEAAQEGBQQDAQAAAAAAAAABEQAgITAxQVEQcYGhsWGR8PFAwdHh/9oACAEBAAE/IfwEIJXQpPId5UikSE0cEkZWCii4b3NqKdSAZJf1oQZMJgC6Xk631YIqFOh94Ab8f0WANUvgwJWz3HpRBgSJwB0AvVr+TG3tzLxz0HWpQHqEqGm3ePk18zHirsprhz50flum4oli3qBzs5JMFBuMx3d+Cpj0K6dYcVMyz1e/AAiCOlFcIGLbcsZMuPYwB1LvD/LHJN93AnXcWPabzgcmS7LHxW2B2Lycf//aAAwDAQACAAMAAAAQ8880888o0c888sQk888cs408sc88s8o888sc/8QAFBEBAAAAAAAAAAAAAAAAAAAAUP/aAAgBAwEBPxAT/8QAFBEBAAAAAAAAAAAAAAAAAAAAUP/aAAgBAgEBPxAT/8QAJxABAAEBBgYDAQEAAAAAAAAAAREAITAxUWFxIEGBkaGxEMHw0UD/2gAIAQEAAT8Q/wACQHQBKuUVIBxnA+qUAiEIS52NdBmugW9Kkodgk3OMjQrc0kC2YMsxUhU9cc9v7cWmIhNSvh3rD5lUEjmoh3iHS4llgrmiK8nngigb2AB9+LhLajEzpbuJNDMYlIjzPgJ5qUAGKtExUIMwq9S9o48wgVm/yVNFjEi7qT2q0VGesJYOncoErdnlREItzlerF8GlANJMcaVkl2ok9qZAaMThCedwFielDOTAt5y1fi0FkyDfRqACYx3tRENIQK+qXz8BSCFEiU2GyRKfA+zgnrJJZhaJ7pcAMlnSj7HfgBO3sof5cfhUk++CSHgT+fouPwLHAfqZrsF//9k=');
}

.toast8 {
	background-color: #030303;
}

.toast8-success {
	background-color: #008000;
	border: 1px solid #006700;
}

.toast8-error {
	background-color: #bd4338;
	border: 1px solid #a93c32;
}

.toast8-info {
	background-color: #428bca;
	border: 1px solid #357ebd;
}

.toast8-warning {
	background-color: #f0ad4e;
	border: 1px solid #eea236;
}

.toast8-facebook {
	background-color: #335795;
}

.toast8-twitter {
	background-color: #4099FF;
}

.toast8-skype {
	background-color: #50DBF9;
}

.toast8-windows {
	background-color: #2E8DEF;
}

.toast8-android {
	background-color: #A4C739;
}

.toast8-linkedin {
	background-color: #0074C4;
}

.toast8-google-plus {
	background-color: #D50F0F;
}

.toast8-linux {
	background-color: #4D5259;
}

.toast8-github {
	background-color: #000;
}
/* ===== MESSAGE TYPE ===== */

/*Responsive Design*/
@media ( max-width : 240px) {
	#toast8-container>table {
		width: 15em;
		font-size: 70%;
	}
	#toast8-container tr>.toast8-avatar-container {
		display: none;
	}
}

@media ( max-width : 480px) {
	#toast8-container>table {
		width: 16em;
		font-size: 75%;
	}
}

@media ( max-width : 768px) {
	#toast8-container>table {
		width: 20em;
		min-width: 20em;
		font-size: 85%;
	}
	#toast8-container tr>.toast8-right-container i {
		font-size: 1em;
		margin: 5px;
	}
}

.slideOutRight {
	animation-name: slideOutRight;
	-webkit-animation-name: slideOutRight;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
	opacity: 0 !important;
}

@
keyframes slideOutRight { 0% {
	transform: translateX(0%);
	opacity: 1;
}

50%
{
transform
:
 
translateX
(-8%);

    
}
65%
{
transform
:
 
translateX
(-5%);

    
}
75%
{
transform
:
 
translateX
(-8%);

    
}
100%
{
transform
:
 
translateX
(150%);

        
opacity
:
 
0
.2
;

    
}
}
@
-webkit-keyframes slideOutRight { 0% {
	-webkit-transform: translateX(0%);
	opacity: 1;
}
50%
{
-webkit-transform
:
 
translateX
(-8%);

    
}
65%
{
-webkit-transform
:
 
translateX
(-11%)
 
rotate
(-1deg);

    
}
100%
{
-webkit-transform
:
 
translateX
(110%);

        
opacity
:
 
0
.2
;

    
}
}