/********************************************************************************************
* CSS pour le Chat Client																	*
* Author		: Cristian Rubilar															*
* Last Update	: 2016-03-24																*
*********************************************************************************************/
@charset "UTF-8";
/*
input, textarea { border:1px solid #484848; margin:0px; padding:5px; }
input[type=checkbox]{ float: left; border: none; margin-right: 5px;
	font-weight: bold; margin-top: 0px;color: #00bd3f;
}
fieldset { margin:10px 5px;  width: auto; height: auto;
	text-align:left; background-color:#fff; border-color:#52504d; 
	-moz-box-shadow: 0px 0px 20px #bfbdbb inset; -webkit-box-shadow: 0px 0px 20px #bfbdbb inset; 
	box-shadow: 0px 0px 20px #bfbdbb inset;box-shadow:2px 2px 20px rgba(191,189,187,0.3);
	box-shadow:2px 2px 20px rgba(191,189,187,0.3);
	-ms-border-radius: 7px; -o-border-radius: 7px; -webkit-border-radius: 7px; -khtml-border-radius: 7px;
	-moz-border-radius: 7px;border-radius: 7px;
}
a{ text-decoration: none; cursor:pointer; }
*/
.bodyClt { min-width:810px; max-width:810px; min-height:550px; max-height:550px; }

.bodyCons { width:100%; min-width:956px; height:100%; min-height:712px;   }

#hdMonitor{ width:100%; height:auto; position: relative; }

#wrapper{ width:auto; }

.authentClt{ width:auto; height:auto; margin: 0 auto; color:#484848; }
.authentClt p{ text-align: justify; }
.inputAuth { width:390px; height:auto; }
.inputAuth .labels { float: left; width:150px; margin-top: 5px; }
.inputAuth input { float: right; width:220px; }


#logCons{ width:100%; height:100%; padding-right: 5px; overflow-y:scroll; }
#monitor{ width:57%; height:130px; float: left; }
#newClt{ width:35%; height:130px; float: left; }

#rooms{ width:auto; max-width:96%; height:auto; border: 1px solid #484848; background-color:transparent; }
.cabine{ width:300px; height:400px; margin: 0 auto; float: left; margin: 0px 2px;
	border: 1px solid #00bd3f; background-color: #fff;
	-ms-border-radius: 7px;-o-border-radius: 7px;-webkit-border-radius: 7px; -khtml-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;
	-moz-box-shadow: 0px 0px 20px #00bd3f inset; -webkit-box-shadow: 0px 0px 20px #00bd3f inset; 
}
.cabine input{ width:95%; }
.tete{ width:299px; height:45px; text-align: center; color:#fff;
	background-color: #25282b; border-bottom: 1px solid #00bd3f; 
	border-top-left-radius:5px; border-top-right-radius:5px; -ms-border-top-left-radius: 5px;
}
.pie{ width:299px; height:45px; text-align: center; position: relative; bottom: 2px;
	background-color: #00bd3f; border-top: 1px solid #484848; 
	border-bottom-left-radius:5px; border-bottom-right-radius:5px; -ms-border-bottom-left-radius: 5px;
}
.cabChat{ width:97%; height:269px; padding:5px; text-align: justify; overflow-y:scroll; }
.cabTxt{ width:286px; }
#salle { width:800px; height:500px; margin:auto; }


#log { margin:0px 5px auto; width:97%; height:400px; padding:5px; overflow-y:scroll; 
	border: 1px solid #52504d; border-top-left-radius:5px; 
	border-top-right-radius:5px; -ms-border-top-left-radius: 5px;
}
#message { margin:0px 5px auto; width:97%; line-height:20px ;
	border-bottom-left-radius:5px; border-bottom-right-radius:5px; -ms-border-bottom-left-radius: 5px;		
}

.linkChat{ max-width: 240px; height: 25px; padding:5px 10px; 
	position: fixed; bottom: 0px; right: 5px; margin:0 auto;
	z-index: 999; cursor:pointer; text-align: center; 
	background:#f3b20f; background: rgb(243,178,15); /* Old browsers */ 
	background: -moz-linear-gradient(top, #f3dd0f  0%, #f3b20f 100%);
	background: -webkit-linear-gradient(top, #f3dd0f  0%, #f3b20f 100%);
	background: -ms-linear-gradient(top, #f3dd0f , #f3b20f);background: -o-linear-gradient(top, #f3dd0f , #f3b20f);

	border-top: 1px solid #00ee3f; border-left: 1px solid #00ee3f; border-right: 1px solid #00ee3f;
	-ms-border-top-left-radius: 7px;-o-border-top-left-radius: 7px;
	-webkit-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px;
	-moz-border-top-left-radius: 7px; border-top-left-radius: 7px;

	-ms-border-top-right-radius: 7px;-o-border-top-right-radius: 7px;
	-webkit-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px;
	-moz-border-top-right-radius: 7px; border-top-right-radius: 7px;

}
.linkChat a { color:#484848; font-style: italic; text-decoration: none; font-weight: bold !important; }

#room{ display:none; width: 500px; height: 560px; position: fixed; margin:0 auto; 
	vertical-align: middle; z-index: 260000 !important;
	bottom: 0px; right: 5px;  text-align: center; background:#fff;

	border-top: 1px solid #00bd3f; border-left: 1px solid #00bd3f; border-right: 1px solid #00bd3f;
	-ms-border-top-left-radius: 7px;-o-border-top-left-radius: 7px;
	-webkit-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px;
	-moz-border-top-left-radius: 7px; border-top-left-radius: 7px;

	-ms-border-top-right-radius: 7px;-o-border-top-right-radius: 7px;
	-webkit-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px;
	-moz-border-top-right-radius: 7px; border-top-right-radius: 7px;
}
#room .head{ float: left; width: 100%; height: 35px; background-color:#00bd3f; 
	color:#484848; vertical-align: middle; text-align: center;
	-ms-border-top-left-radius: 7px;-o-border-top-left-radius: 7px;
	-webkit-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px;
	-moz-border-top-left-radius: 7px; border-top-left-radius: 7px;

	-ms-border-top-right-radius: 7px;-o-border-top-right-radius: 7px;
	-webkit-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px;
	-moz-border-top-right-radius: 7px; border-top-right-radius: 7px;
}
#room .head h3{ margin: 0px; vertical-align: middle; text-align: center !important; }
#room .head a{ margin: 5px; vertical-align: middle; }
@media screen and (max-width:767px){
	#room{ width: 90%; height: 420px; bottom: 10px; }
}

#logRoom { margin:0px auto; width:97%; height:476px; padding:5px; overflow-y:scroll; 
	border-bottom: 2px solid #484848; background-color:#eef; color: #484848;
}
#msgRoom { margin:0px auto; width:97%; line-height:20px ; border: none !important;
 	background-color:#fff; 
 }

.userLogin { width: 350px; min-height:70px; margin:0 auto; background-color: transparent; border: none;
	-ms-box-shadow: none; -webkit-box-shadow: none;-moz-box-shadow:none; box-shadow: none; 
}
.userLogin label { float: left; }
.userLogin span { float: right; }
.userLogin input { float: right; border: none; }


.idClt{ min-width:30px; height: 23px; margin:0 auto; z-index: 999; padding-top: 7px;
	text-align: center; color:#484848; background-color: #fff; border:1px solid #484848;
	-ms-border-radius: 7px; -o-border-radius: 7px; -webkit-border-radius: 7px; 
	-khtml-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;
	-moz-box-shadow: 0px 0px 20px #fff inset; -webkit-box-shadow: 0px 0px 20px #fff inset; 
	box-shadow: 0px 0px 20px #fff inset;box-shadow:2px 2px 20px rgba(255,255,255,0.3); 
	box-shadow:2px 2px 20px rgba(255,255,255,0.3); filter:DropShadow(Color=#fff, OffX=1, OffY=1);
}

.mMoi{ color: #005a9c; float: right; }
.mCons{ color:#00bd3f; float: left; }
.mClt{ color:#00bd3f; float: left; }
.mSys{ color: #2F7B30; float: left; }
.mAdm{ color:red; float: left; }
.mDef{ color:#000; float: left; }

.mMoi::before{ position: relative; top: -1px; left: 5px; content: '<'; }
.mCons::after,.mClt::after,.mSys::after,.mAdm::after,.mDef::after{ 
	position: relative; top: -1px; right: 5px; content: '>';
}

.msgR, .msgL { clear: both; max-width: 75%; position: absolute; padding:5px; z-index: 999; 
	margin-top: -5px; overflow: hidden;
	background: #fff;color: #484848; font-weight: bold; 
	border: 1px solid #00bd3f; border-radius: 5px;
}
.msgR { position: relative; right: -2px;  }
.msgL { position: relative; margin-left: -2px; }

.bgGris{ width: 100%; margin:0 auto; 
	background: rgb(226,226,226); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZGJkYmRiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjZDFkMWQxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(-45deg,  rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%); 
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1))); 
	background: -webkit-linear-gradient(-45deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); 
	background: -o-linear-gradient(-45deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); 
	background: -ms-linear-gradient(-45deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%); 
	background: linear-gradient(135deg,  rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 ); 
}

/* button */
.contBtn { display:block; width: auto; min-height:40px; margin:0 auto; padding: 3px 2px 0px; background-color:#f3dd0f;  
	-ms-border-radius: 7px;-o-border-radius: 7px;-webkit-border-radius: 7px; -khtml-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;
}

.btn_close{ width:30px; height: 30px; margin:0 auto; z-index: 999; cursor:pointer;  
	background: transparent url("../../images/bntCloseMR.png") no-repeat;
	-ms-border-radius: 50%;-o-border-radius: 50%;-webkit-border-radius: 50%; 
	-khtml-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;
	-moz-box-shadow: 0px 0px 20px #00bd3f inset; -webkit-box-shadow: 0px 0px 20px #00bd3f inset; 
	box-shadow: 0px 0px 20px #00bd3f inset;box-shadow:2px 2px 20px rgba(244,156,32,0.3); 
	box-shadow:2px 2px 20px rgba(244,156,32,0.3); filter:DropShadow(Color=#00bd3f, OffX=1, OffY=1);
}
/*
button { width: auto; margin-top: 5px; line-height: 30px; min-height: 35px; cursor:pointer; color:#282626; 
	font-size: 16px;  text-shadow: 1px 1px 1px #f4480c); text-align: center; font-weight: bold;
	padding: 2px 10px 0px; border: 1px solid #00bd3f; 
	-ms-border-radius: 7px;-o-border-radius: 7px;-webkit-border-radius: 7px; -khtml-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;
	-moz-box-shadow: 0px 0px 20px #00bd3f inset; -webkit-box-shadow: 0px 0px 20px #00bd3f inset; 
	box-shadow: 0px 0px 20px #00bd3f inset;box-shadow:2px 2px 20px rgba(244,156,32,0.3); 
	box-shadow:2px 2px 20px rgba(244,156,32,0.3); filter:DropShadow(Color=#00bd3f, OffX=1, OffY=1);
	background:#00bd3f; background: rgb(243,178,15); 
	background: -moz-linear-gradient(top, #f3dd0f  0%, #00bd3f 100%);
	background: -webkit-linear-gradient(top, #f3dd0f  0%, #00bd3f 100%);
	background: -ms-linear-gradient(top, #f3dd0f , #00bd3f);background: -o-linear-gradient(top, #f3dd0f , #00bd3f);
}

button img{ vertical-align: middle; margin: 3px 0px ; }

button:hover { cursor:pointer; background: rgb(254,191,1);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmViZjAxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmNjcwZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(-45deg,  rgba(254,191,1,1) 0%, rgba(255,103,15,1) 100%); 
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(254,191,1,1)), color-stop(100%,rgba(255,103,15,1))); 
	background: -webkit-linear-gradient(-45deg,  rgba(254,191,1,1) 0%,rgba(255,103,15,1) 100%); 
	background: -o-linear-gradient(-45deg,  rgba(254,191,1,1) 0%,rgba(255,103,15,1) 100%); 
	background: -ms-linear-gradient(-45deg,  rgba(254,191,1,1) 0%,rgba(255,103,15,1) 100%); 
	background: linear-gradient(135deg,  rgba(254,191,1,1) 0%,rgba(255,103,15,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febf01', endColorstr='#ff670f',GradientType=1 ); 

	-ms-box-shadow: rgba(243,178,15,0.75) 2px 2px 10px;-o-box-shadow: rgba(243,178,15,0.75) 2px 2px 10px;
	-webkit-box-shadow: rgba(243,178,15,0.75) 2px 2px 10px; 
	-moz-box-shadow: rgba(243,178,15,0.75) 2px 2px 10px;box-shadow: 2px 2px 15px #00bd3f;
}
	
button:disabled { cursor: auto;background: #3c5668; color: #373737;
	background: -ms-linear-gradient(top, #9ea0a2, #3c5668);background: -o-linear-gradient(top, #9ea0a2, #3c5668);
	background: -ms-linear-gradient(top, #9ea0a2 0%,#3c5668 100%); 
	background: -moz-linear-gradient(top,#9ea0a2 0%,#3c5668 100%);
	background: -webkit-linear-gradient(top, #9ea0a2 0%,#3c5668 100%);
	-ms-box-shadow: rgba(83,89,94,0.75) 2px 2px 10px;-o-box-shadow: rgba(83,89,94,0.75) 2px 2px 10px;
	-webkit-box-shadow: rgba(83,89,94,0.75) 2px 2px 10px; 
	-moz-box-shadow: rgba(83,89,94,0.75) 2px 2px 10px;box-shadow: 2px 2px 15px #53595e;
	filter: alpha(opacity=40); -moz-opacity:0.40; opacity: 0.40;  
	-khtml-opacity:.40; -moz-opacity:.40; -ms-filter:"alpha(opacity=40)";
	opacity:.40; filter:alpha(opacity=40); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); 
	}
button img:disabled { -khtml-opacity:.30 !important; -moz-opacity:.30 !important; -ms-filter:"alpha(opacity=30)" !important;
  	filter:alpha(opacity=30) !important; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.3) !important; opacity:.30 !important;
}
*/
.btnC{ max-width: 35px; max-height: 26px; padding: 0; margin: 0; }


.iEdit, .iCopy, .iAdd, .iDelete, .iCancel, .iSave { 
	overflow: visible; float: left; height: 25px; width:25px; margin: 10px 5px;
	background: transparent url("../../images/icons/icons_Edit25x25.png") no-repeat;
}
.iEdit { background-position: 0px 0px; }
.iCopy { background-position: -25px 0px; }
.iAdd { background-position: -50px 0px; }
.iDelete { background-position: -75px 0px; }
.iCancel { background-position: -100px 0px; }
.iSave { background-position: -125px 0px; }

.ruban{
	-7px-webkit-box-shadow:0px 1px 1px rgba(208,205,200,0.1);
	-moz-box-shadow:0px 1px 1px rgba(208,205,200,0.1);
	box-shadow:0px 1px 1px rgba(208,205,200,0.1);
	background:#00bd3f; padding:5px 7px; min-width:140px;
	position: relative; left:-7px; top:-20px; text-align:center;
} 
.ruban:before{
	content:""; position:absolute; bottom:-7px;left:0; border-top:7px solid #432b06;
	border-right:0 solid transparent; border-left:7px solid transparent;
} 
.ruban:after{
	content:"";position:absolute;top:0;right:-11px;border-top:33px solid #00bd3f;
	border-right:11px solid transparent;border-left:0 solid transparent;
} 

.ruban span{
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:21px;font-size:21px; line-height:31.5px; line-height:31.5px;
	color:#ffffff; font-style:italic;
}

@media (max-width:767px){  
	.ruban{ width:140px;width:140px; } 
	.ruban:after{ border-top:43px solid #00bd3f; border-top:43px solid #00bd3f; } 
	.ruban span{ font-size:16px;font-size:16px; }
} 

@media (min-width:768px){  
	.ruban{ padding:5px 21px; }
	.ruban:after{ border-top:42px solid #00bd3f; border-top:42px solid #00bd3f; }
}