/*!
 *  G-growl v1  
 *  Copyright 2017 by ablack.
 */
 
 /******            menu           ******-*/ 
/*            1- growl status             */ 
/*            2- growl title              */ 
/*            3- growl btn close          */
/*            4- growl message            */ 
/*            5- growl icons              */ 
/*            6- growl theme              */ 
 /******            (;             ******-*/
 
#growlcontainer-left{
	position: fixed;
	z-index: 10000;
	font-size: 12px;
	width: 165px;
}
 
#growlcontainer-right{
	position: fixed;
	z-index: 10000;
	font-size: 12px;
	width: 330px;
}
#rigl{

}
.box{
	list-style:none;
	padding-left: 0;
	height: auto;
	margin: 5px;
	min-height: 43px;
    text-align: center;
    cursor: pointer;
}
.box>li{
	line-height: -moz-block-height;
	line-height: -o-block-height;
	line-height: -webkit-block-height;
  line-height: -ms-block-height;
}
.box>li{
	margin-left: 2px;
	height: 100%;
    color:white;
}
.box>li>p{
	margin: 0;
}
.box>li>p:nth-child(2){
	font-size: 12px;
    color:white;
    text-transform: none;
}
/****** 1- growl status    ******* 
-----------------------------*/
.growlstatusStyleButton{
	width: 70px;
	background: red;
	text-align: center;
	padding: 5px;
	margin-top: 5px;
	cursor: pointer;
	display: inline-block;
	margin-left: 5px;
}
.growlstatusHelp{
	cursor: help;
}
.growlstatus{
	display:none;
	min-height: 50px;
	line-height: 20px;
	padding: 0;
	position: relative;
	background-color: #000; 
	color: #fff;
	margin-bottom: 5px;
	overflow: hidden;
	font-size: 14px;
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
.growlstatus>div:nth-child(1){
	height: 100%;
	width: 20px;
	position: absolute;
	right: 0;
	transform: skewX(10deg);
	transition-duration: 1s;
	z-index: 222;
}
.growlstatus>div:nth-child(2){
	height: 100%;
	width: 10px;
	position: absolute;
	right: 0;
	transform: skewX(10deg);
	transition-duration: 3s;
	z-index: 2222;
}
/****** 2- growl title    ******* 
-----------------------------*/
.growlstatus .growltitle{
	font-weight: bold;
	margin-bottom: 15px;
	position: relative;
	top: -3px;
	margin: 10px;
}
/****** 3- growl btn close *******
-----------------------------*/
.growlstatusclose{
	position: absolute;
	top: 0px;
	right: -15px;
	width:40px;
	height:40px;
	cursor: pointer;
	display: none;
	font-size: 20px;
	z-index: 222222;
}

.growlstatus:hover .growlstatusclose{
	display: none;
}


/****** 4- growl message ******* 
--------------------------*/
.growlmessage{
	padding-left: 44px;
	margin: 0;
}
/****** 5- growl icons ******* 
--------------------------*/
.growlicon{
	margin-right:0px;
	float: left;
	color: white;
}
.growlwithicon{
	padding-left: 50px;
	background-position: 5px 10px;
	background-repeat:no-repeat;
}
/****** 6- growl theme ******* 
--------------------------*/
.top-right{
	top: 20px;
	right: 20px;
}

.bottom-right{
	bottom: 20px;
	right: 20px;
}

.top-left{
	top: 20px;
	left: 20px;
}

.bottom-left{
	bottom: 90px;
	left: 5px;
}
.growlImag{
	position: absolute;
	right: 5px;
	z-index: -1;
	transform: translateY(-50%);
	top: 50%;
}

/****** 6- growl theme ******* 
--------------------------*/
.themeSuccess{
	background-color: rgba(22, 189, 14, 0.8);
	color: #fbfbfb;
	border-radius: 3px;
	
}
.themeWarning{
	background: rgba(242, 123, 8, 0.82);
	color: #fbfbfb;
	border-radius: 3px;

}
.themeError{
	background-color: rgba(225, 8, 8, 0.8);
	/*! border: solid 1px #f6f6f6; */
	color: #fbfbfb;
	border-radius: 3px;
}
.themeDefault{
	background: #423f3f;
	color: #fff;
	box-shadow: 1px 1px 4px 0px #7e7777;
	text-shadow: 0 0 1px #0c0c0c;
	margin: 5px;
	border-radius: 2px;
} 
.theme01{
	background: #fc4444b3;
	border: solid 1px red;
	color: black;
}
.theme02{
	background: #00fff666;
	border: solid 1px #005cea;
	color: #0d33d7;
	border-radius: 10px;
}
.theme03{
	background: #023f6fb3;
	border: solid 1px #c2c2c2;
	color: #c3c3c3;
    border-radius:6px;
}
.theme04{
	background: #1e1c1c;
	border: solid 1px black;
	color: #fff;
	border-radius: 5px;
}
.theme05{
	background: #a80000;
	border: solid 1px #470000;
	color: #000;
	border-radius: 3px;
}
.theme06{
	background: #0079a8;
	border: solid 1px #03ffff;
	color: #11e3fc;
	border-radius: 3px;
}
.theme07{
	background: #75d4f9;
	border: solid 1px #003e3e;
	color: #003e3e;
	border-radius: 3px;
}
.theme08{
	background: #9e0fdd;
	border: solid 1px #c864c6;
	color: #fff;
	border-radius: 3px;
}
.theme09{
	background: #2f0044;
	border: solid 1px #be42f5;
	color: #c76eef;
	border-radius: 3px;
}
.theme10{
	background: #f2006f;
	border: solid 1px #be42f5;
	color: #d1bcdb;
	border-radius: 3px;
}
.theme11{
	background: #10e6ff;
	border: solid 1px #0e99bf;
	color: #3d3c3e;
	border-radius: 3px;
}
.theme12{
	background: #111;
	border: solid 1px #f6f6f6;
	color: #3d3c3e;
	border-radius: 3px;
}
.theme13{
	background: #28ff60;
	border: solid 1px #f6f6f6;
	color: #fbfbfb;
	border-radius: 3px;
}
.theme14{
	background: #61b978;
	border: solid 1px #f6f6f6;
	color: #fbfbfb;
	border-radius: 3px;
}

.growlhover>div:nth-child(1){
	background: #fff;
  	right: 110%;
	box-shadow: 0 0 10px 4px whate;
	transition-property: right,background;
	transition-duration: 1s;
}
.growlhover>div:nth-child(2){
	background: #fff;
  	right: 110%;
	box-shadow: 0 0 10px 4px whate;
	transition-property: right,background;
	transition-duration: 1.5s;
}
#growlcontainer-right>div>img{
	position: absolute;
	bottom: 50%;
	transform: translateY(50%);
	right: 15px;
	border: solid;
}
.anme-timer{
	height: 2px;
	width: 100%;
	background:#DBA20F;
	position: absolute;
	bottom: 0;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes Atimer {
    from {width: 0;}
    to {width: 100%;}
}

/* Standard syntax */
@keyframes Atimer {
    from {width: 0;}
    to {width: 100%;}
}
.themeInfo{
	background-color: rgba(11, 136, 204, 0.8);
	color: #fbfbfb;
	border-radius: 3px;
	margin-bottom: 3px;
}