/* --- COULEURS ---
jll:#D0 E1 0F           	RGB (208,225,15)
bsinter:# F6 A8 28      	RGB (246,168,40)
branipp:#9F 21 8C      	RGB (159,33,140)
bsservices:#EF 8C 14		RGB (239,140,20)
gris:#A0 9F 9D			RGB (160,159,157)

ATTENTION : ne pas oublier de changer l'image de fond
*/

html {
padding-right:5px;
padding-left:5px;
}

body {
  background-color: transparent;

}

.content-page{
margin-right:5px;
margin-left:5px;
min-height:550px !important;	
}

#bandeau_titre{
height:100px;
padding-top:7px;
font-size:2em;
}

.btn_titre{
  font-family: Arial;
  color: #000000;
  font-size: 30px;
  background: none;
  padding: 20px 10px 20px 10px;
  text-decoration: none;
}

.btn_titre:hover {
  text-decoration: none;
}


.container{
margin-bottom:10px;
}

/* Custom container */
.container-full {
margin-left:10px;
margin-right:10px;
margin-top:10px;
margin-bottom:10px;

}
/*
table {
width:800px;
margin-left:auto;
margin-right:auto;


}
*/
/*
#naf, #idcc,#commercial,#compte{
width:320px;
height:33px;
color:grey;
border:1px solid #AEAEAD;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
*/
.selectpicker,textarea {
background:white;
color:black;
max-width:250px;
margin-right:auto;
margin-left:auto;
font-size:14px;
text-align:left;
}
.form-control {
background:white;
color:black;
max-width:250px;
margin-right:auto;
margin-left:auto;
font-size:14px;
text-align:center;
}

.control-label {
color:black;
max-width:250px;
margin-right:auto;
margin-left:auto;
height:35px;
}

.select-form {
color:black;
max-width:250px;
margin-right:auto;
margin-left:auto;
text-align:left;
}



.logo_page{
margin-bottom:10px;
}

#login_form {
max-width: 330px;
height:270px;
background:#AEAEAD;
padding-right:10px 10px 10px 10px;
border:none;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding-top:20px;

}

#form_message{
max-width: 330px;
padding:10px 10px 10px 10px;
margin-right:auto;
margin-left:auto;

}

#formulaire {

min-width:300px;
margin-left: -20px;
margin-top: -10px;
}

#sub_formulaire {

min-width:330px;
height:400px;

border:none;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:1px 1px 5px 1px #AEAEAD ;
-moz-box-shadow:1px 1px 5px 1px #AEAEAD ;
box-shadow:1px 1px 5px 1px #AEAEAD ;

padding-bottom:5px;
padding-top:5px;
margin-bottom:5px;

line-height:16px;


}



#jqxgrid{
margin-top:10px;
margin-bottom:10px;
}

#jqxgrid>table{

background: #D9E1E8;
}

#jqxgrid_glyphicon{
color:#393939;
font-size: 1em;
}


#jqxgrid_glyphicon_x2{
color:#AEAEAD;
font-size: 2em;

}

#jqxgrid_glyphicon_x3{
color:#393939;
font-size: 3em;
margin-top:10px;
margin-bottom:10px;

}

#jqxgrid_glyphicon_x4{
color:#AEAEAD;
font-size: 4em;

}

#jqxgrid_glyphicon_x5{
color:#AEAEAD;
font-size: 5em;

}

#size_glyphicon_x2{
padding-right:10px;
font-size: 2em;
color:black;
height:55px;

}

#size_glyphicon_x3{
padding-right:10px;
font-size: 3em;

}

#size_glyphicon_x4{
padding-right:10px;
font-size: 4em;

}

#size_glyphicon_x5{
font-size: 5em;
padding-right:10px;
}


#sms{
max-width: 500px;
background:white;

}

#sms>p{
color:#AEAEAD;
font-size:14pt;
}

.sms_carte{
background:#ffffff;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:10px 10px 10px 10px;
color:#AEAEAD;
font-size:14pt;

}





#label_formulaire  {
text-align:left;
margin-bottom:-10px;
margin-top:5px;
}

hr {
  border-color: #EEEEEE -moz-use-text-color #33393f;
  border-style: solid none;
  border-width: 2px 0;
  margin: 18px 0px;
}





#boutons_form>.btn{
margin-top:5px;
color:#33393f;
}


.navbar{
background: none;
color:red;


}
.btn-stat{
	background: #8AA0B8;
	color: #000000;
	border-color: #D9E1E8;
	
}

.badge-success{
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
  font-size:15px;
  margin-top:3px;
	
}	
.badge-warning{
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
  font-size:15px;
  margin-top:3px;  
}	
.badge-danger{
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
  font-size:15px;
  margin-top:3px;  
}	
	
.panel {
min-width:280px;
text-align:center;
margin-left:0px;
margin-right:0px;


}

.panel-heading{
background: #8AA0B8;
color:white;


}

.panel-title{
font-weight:bold;


}

.panel-title:hover{
font-weight:bold;
}

.panel-body{
background: #D9E1E8;

}

.modal-body{
background: #D9E1E8;


}

#tblGrid>tbody {
font-size:10pt;


}

.td_titre{
font-weight:bold;
text-align:left;
margin-left:auto;
margin-right:auto;
height:25px;
}


.form-contrat-input{
border: none;
border-radius:3px;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
-webkit-box-shadow:1px 1px 1px 1px #AEAEAD ;
-moz-box-shadow:1px 1px 1px 1px #AEAEAD ;
box-shadow:1px 1px 1px 1px #AEAEAD ;
margin-left:15px;
height:27px;
width:60px;

}


.form-contrat-input3{
border: none;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:1px 1px 1px 1px #AEAEAD ;
-moz-box-shadow:1px 1px 1px 1px #AEAEAD ;
box-shadow:1px 1px 1px 1px #AEAEAD ;
margin-left:15px;
height:27px;
width:auto;

}

.input-group-addon{
border: none;
border-radius:3px;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
-webkit-box-shadow:1px 1px 1px 1px #AEAEAD ;
-moz-box-shadow:1px 1px 1px 1px #AEAEAD ;
box-shadow:1px 1px 1px 1px #AEAEAD ;
margin-left:15px;
height:25px;



}
/*
#change_rubrique,#change_rubrique2{

border: none;
-moz-border-radius:3px;
-moz-border-radius:3px;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:3px;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
-webkit-box-shadow:1px 1px 1px 1px #AEAEAD ;
-moz-box-shadow:1px 1px 1px 1px #AEAEAD ;
box-shadow:1px 1px 1px 1px #AEAEAD ;
height:30px;
margin-bottom:-15px;
margin-left:15px;
min-width:300px;
}
*/

#change_rubrique_label{
font-weight:bold;
font-size:14px;
margin-left:10px;
margin-bottom:-30px;
color:#8AA0B8;
}

#info_contrat{
background:none;
border:none;
}

#contrat_form{
margin-right:auto;
margin-left:auto;

}

.contrat_form1{

border:none;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #62c462 200%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #62c462 200%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #62c462 200%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(2, #62c462));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #62c462 200%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FFFFFF 0%, #62c462 200%);

-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:1px 1px 5px 1px #AEAEAD ;
-moz-box-shadow:1px 1px 5px 1px #AEAEAD ;
box-shadow:1px 1px 5px 1px #AEAEAD ;
margin-left:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
margin-top:5px;
margin-bottom:5px;
}


#contrat_form1{

border:none;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #62c462 200%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #62c462 200%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #62c462 200%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(2, #62c462));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #62c462 200%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FFFFFF 0%, #62c462 200%);

-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:1px 1px 5px 1px #AEAEAD ;
-moz-box-shadow:1px 1px 5px 1px #AEAEAD ;
box-shadow:1px 1px 5px 1px #AEAEAD ;
margin-left:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
margin-top:5px;
margin-bottom:5px;
}


#contrat_form2{

border:none;
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #ffd4aa 200%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #ffd4aa 200%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #ffd4aa 200%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(2, #ffd4aa));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #ffd4aa 200%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FFFFFF 0%, #ffd4aa 200%);

-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:1px 1px 5px 1px #AEAEAD ;
-moz-box-shadow:1px 1px 5px 1px #AEAEAD ;
box-shadow:1px 1px 5px 1px #AEAEAD ;
margin-left:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
margin-top:5px;
margin-bottom:5px;

}


#contrat_form3{

border:none;
background: #D9E1E8;

-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:1px 1px 5px 1px #AEAEAD ;
-moz-box-shadow:1px 1px 5px 1px #AEAEAD ;
box-shadow:1px 1px 5px 1px #AEAEAD ;
margin-left:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
margin-top:5px;
margin-bottom:5px;

}

#navigo_zones{
background: none;
width:130px;
height:28px;
margin-top: -10px;
margin-left: 10px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:1px 1px 5px 1px #AEAEAD ;
-moz-box-shadow:1px 1px 5px 1px #AEAEAD ;
box-shadow:1px 1px 5px 1px #AEAEAD ;
}

#defaultForm .inputGroupContainer .form-control-feedback,
#defaultForm .selectContainer .form-control-feedback {
    top: 10px;
    right: 160px;
}

#form_part {
max-width:300px;	
	
}

.form-group input[type="checkbox"] {
    display: none;
}



.form-group input[type="checkbox"] + .btn-group > label span {
	
width: 20px;
height: 25px;
margin-left:-10px;
margin-top:-30px;
font-size:19px;

}

.form-group input[type="checkbox"] + .btn-group > label span:first-child {
    display: none;
}
.form-group input[type="checkbox"] + .btn-group > label span:last-child {
    display: inline-block;   
}

.form-group input[type="checkbox"]:checked + .btn-group > label span:first-child {
    display: inline-block;
}
.form-group input[type="checkbox"]:checked + .btn-group > label span:last-child {
    display: none;   
}


.modal.modal-wide .modal-dialog {
  width: 75%;

}
.modal-wide .modal-body {
  overflow-y: auto;
 
}

#part2{
 min-width:310px;

}


#tallModal .modal-body p { margin-bottom: 900px }

#login-name{
font-size:1.1em;
background:none;
font-weight:bold;
margin-right:5px;
color:#33393f;
}

.titre-page{
font-size:1.4em;
background:none;
font-weight:bold;
margin-right:5px;
color:#33393f;
}

#alert_form{
margin-bottom:-40px;
margin-top:-10px;

}

.alert-success,.alert-danger,.alert-warning,.alert-info{
border:none;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding-top:10px;
padding-bottom:10px;
margin-bottom:10px;

}

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;
-webkit-border-radius:0 5px 5px 5px;-moz-border-radius:0 5px 5px 5px;border-radius:0 5px 5px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;
border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;
-webkit-border-radius:5px 0 5px 5px;-moz-border-radius:5px 0 5px 5px;border-radius:5px 0 5px 5px;}


footer{
position: bottom;
width: 100%; height: 65px;
bottom: 0; left: 0; right: 0;
}

.footer-parent{
  position: relative;
  /* Reste du CSS... */
}

.navbar-header{
margin-top:10px;
padding-right:10px;
}

.navbar-nav{
color:#33393f;	
}

#titre_navbar {
font-family: typwrng;
}

#geocomplete{
font-size:0.9em;

}

#dropdownlist {
min-width:300px;
color:#A09F9D;
border:#A09F9D;
}

.special {
  font-size:10px;
}

#container_central{
margin-top:-20px;	
	
}

.table > thead > tr > td.GescomTable,
.table > tbody > tr > td.GescomTable,
.table > tfoot > tr > td.GescomTable,
.table > thead > tr > th.GescomTable,
.table > tbody > tr > th.GescomTable,
.table > tfoot > tr > th.GescomTable,
.table > thead > tr.GescomTable > td,
.table > tbody > tr.GescomTable > td,
.table > tfoot > tr.GescomTable > td,
.table > thead > tr.GescomTable > th,
.table > tbody > tr.GescomTable > th,
.table > tfoot > tr.GescomTable > th {
  background-color: #8aa0b8;
  color:white;
}
.table-hover > tbody > tr > td.GescomTable:hover,
.table-hover > tbody > tr > th.GescomTable:hover,
.table-hover > tbody > tr.GescomTable:hover > td,
.table-hover > tbody > tr:hover > .GescomTable,
.table-hover > tbody > tr.GescomTable:hover > th {
  background-color: #f5f5f5;
  color:black;
}

.table > thead > tr > td.Gescom2Table,
.table > tbody > tr > td.Gescom2Table,
.table > tfoot > tr > td.Gescom2Table,
.table > thead > tr > th.Gescom2Table,
.table > tbody > tr > th.Gescom2Table,
.table > tfoot > tr > th.Gescom2Table,
.table > thead > tr.Gescom2Table > td,
.table > tbody > tr.Gescom2Table > td,
.table > tfoot > tr.Gescom2Table > td,
.table > thead > tr.Gescom2Table > th,
.table > tbody > tr.Gescom2Table > th,
.table > tfoot > tr.Gescom2Table > th {
  background-color: white;
  color:#8aa0b8;
}
.table-hover > tbody > tr > td.Gescom2Table:hover,
.table-hover > tbody > tr > th.Gescom2Table:hover,
.table-hover > tbody > tr.Gescom2Table:hover > td,
.table-hover > tbody > tr:hover > .Gescom2Table,
.table-hover > tbody > tr.Gescom2Table:hover > th {
  background-color: #f5f5f5;
  color:black;
}

.btn-gescom {
  color: #fff !important;
  font-weight:bold;
  background-color: #8aa0b8;
  border-color: #ccc;
}
.btn-gescom:hover,
.btn-gescom:focus,
.btn-gescom.focus,
.btn-gescom:active,
.btn-gescom.active,
.open > .dropdown-toggle.btn-gescom {
  color: #8aa0b8 !important;
  font-weight:bold;  
  background-color: white;
  border-color: #ccc;
}

.table > tfoot > td.GescomTableFooter{
border-right: 1px solid red;
border-left: 1px solid green;
border-top: 1px solid blue;
border-bottom: 1px solid yellow;	
}

.ModalTable {
  width: auto;
  margin-bottom: 20px;
  /*
  border-right: 1px solid red;
  border-left: 1px solid red;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  */

	border: 1px solid black;
	
}
.ModalTable > tbody {
  border-top: 1px solid black;
 
}

.ModalTable > thead{
  background-color: #8aa0b8;
  color:white;
	
}

.ModalTable > thead > tr > th,
.ModalTable > tbody > tr > th,
.ModalTable > tfoot > tr > th,
.ModalTable > thead > tr > td,
.ModalTable > tbody > tr > td,
.ModalTable > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  /*
  border-right: 1px solid red;
  border-left: 1px solid red;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  */
	border: 1px solid black;  
}


.ModalTable > caption + thead > tr:first-child > th,
.ModalTable > colgroup + thead > tr:first-child > th,
.ModalTable > thead:first-child > tr:first-child > th,
.ModalTable > caption + thead > tr:first-child > td,
.ModalTable > colgroup + thead > tr:first-child > td,
.ModalTable > thead:first-child > tr:first-child > td {
  border-top: 0;
  color : white;
  font-size:15px;
  border: 1px solid black;  
}

.ModalTable > tbody > tr:nth-of-type(odd) {
  background-color: white;
  color : black;
}

.ModalTable > tbody > tr:hover {
  background-color: #acacac;
}

.epi-block{
background:#ffffff;
margin-right:5px;
margin-left:5px;
margin-top:5px;
margin-bottom:5px;
padding-top:5px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;	
	
}

.epi-block>h2{
color:#ef8300;	
	
}

.epi-block>#search_interimaire{
color:#ef8300;
background:#D9E1E8 !important;
	
}

.fixed-div{
position:fixed;
top:330px;
left:60%;
width:100%;	
}

.btn-squared-default
{
width: 100px !important;
height: 100px !important;
padding-top:10px;
margin-bottom:5px;
margin-right:5px;
}

.btn-squared-default:hover
{
 border: 3px solid white;
 font-weight: 800;
}

.btn-squared-default-plain
{
width: 100px !important;
height: 100px !important;
margin-bottom:5px;
margin-right:5px;
}

.btn-squared-default-plain:hover
{
border: 0px solid white;
}
.btn-squared-text{
margin-top:15px;
font-size:1.6em;	
}

.btn-squared-big
{
width: 150px !important;
height: 150px !important;
padding-top:10px;
margin-bottom:5px;
margin-right:5px;
}

.btn-squared-big:hover
{
 border: 3px solid white;
 font-weight: 800;
}

.btn-squared-extra-big
{
width: 250px !important;
height: 250px !important;
padding-top:20px;
margin-bottom:5px;
margin-right:5px;
}

.btn-squared-extra-big:hover
{
 border: 3px solid white;
 font-weight: 800;
}

.btn-squared-big-text{
margin-top:15px;
font-size:2em;	
}

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

.tourne0 {
  color:#4285f4;
}

.tourne-43 {
  transform: rotate(-43deg);
  color:#4285f4;
}

.tourne43 {
  transform: rotate(43deg);
  color:#4285f4;
}

.tourne-90 {
  transform: rotate(-90deg);
  color:#4285f4;
}

.tourne-133 {
  transform: rotate(-133deg);
  color:#4285f4;
}

.tourne180 {
  transform: rotateY(180deg);
  color:#4285f4;
}

.circle{
    display: inline-block;
    font-weight: bold;
    font-size: 1.2em;
	padding-top:8px;
    width:38px;
    height:38px;
    text-align:center;
    border-radius:100px;
    line-height: 15px;
    margin-right: 1.5px;
    margin-left: 1.5px;    
}

.circle-M{
    border: 3px solid #0A0082;	
}


.circle-logo{
    display: inline-block;
    font-weight: bold;
    font-size: 0.85em;
	padding-top:8px;
    margin-right: 1.5px;
    margin-left: 1.5px; 
    width:38px;
    height:38px;
    text-align:center;
    border-radius:100px;
    line-height: 18px;
    border: 3px solid #0A0082;
    color: #0A0082;    
}


.block-transport{
    display: inline-block;
    height:40px;
    margin-bottom: 2px;
    margin-right: 1.5px;
    margin-left: 1.5px;
}


.badge-bus{
    display: inline-block;
    font-size: 1.4em;
    text-align: center;
    vertical-align: middle;
	padding-top:1px;
    margin-bottom: 3px;
    margin-right: 1.5px;
    margin-left: 1.5px; 
    min-width: 50px;
    height: 33px;
    line-height: 33px;    
    border-radius: 8%;
}
.ttz{
	height:50px;
}

.special-form{
	background-color:#fff;
	border : 1px solid #ccc;
	border-radius : 4px;
	
}

.bg-white {
  background-color: #fff;
}

.friend-list {
  list-style: none;
margin-left: -40px;
}

.friend-list li {
  border-bottom: 1px solid #eee;
}

.friend-list li a img {
  float: left;
  width: 45px;
  height: 45px;
  margin-right: 10px;
}

 .friend-list li a {
  position: relative;
  display: block;
  padding: 10px;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
}

.friend-list li.active a {
  background-color: #f1f5fc;
}

.friend-list li a .friend-name, 
.friend-list li a .friend-name:hover {
  color: #777;
}

.friend-list li a .last-message {
  width: 65%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.friend-list li a .time {
  position: absolute;
  top: 10px;
  right: 8px;
}

small, .small {
  font-size: 85%;
}

.friend-list li a .chat-alert {
  position: absolute;
  right: 8px;
  top: 27px;
  font-size: 10px;
  padding: 3px 5px;
}

.chat-message {
  padding: 60px 20px 115px;
  height: 400px;
  overflow-y: scroll;
}

.chat {
    list-style: none;
    margin: 0;
}

.chat-message{
    background: #f9f9f9;
	border-radius: 5px;
	border: 1px solid #eee;	
}

.chat li img {
  width: 45px;
  height: 45px;
  border-radius: 50em;
  -moz-border-radius: 50em;
  -webkit-border-radius: 50em;
}

img {
  max-width: 100%;
}

.chat-body {
  padding-bottom: 20px;
}

.chat li.left .chat-body {
  margin-left: 70px;
  background-color: #fff;
}

.chat li .chat-body {
  position: relative;
  font-size: 11px;
  padding: 10px;
  border: 1px solid #f1f5fc;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,.05);
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.chat li .chat-body .header {
  font-size:14px;
  padding-bottom: 5px;
  border-bottom: 1px solid #f1f5fc;
  
}

.chat li .chat-body p {
  margin-bottom:5px;
  margin-top:5px;
  font-size:18px;
}

.chat li.left .chat-body:before {
  position: absolute;
  top: 10px;
  left: -8px;
  display: inline-block;
  background: #fff;
  width: 16px;
  height: 16px;
  border-top: 1px solid #f1f5fc;
  border-left: 1px solid #f1f5fc;
  content: '';
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
}

.chat li.right .chat-body:before {
  position: absolute;
  top: 10px;
  right: -8px;
  display: inline-block;
  background: #fff;
  width: 16px;
  height: 16px;
  border-top: 1px solid #f1f5fc;
  border-right: 1px solid #f1f5fc;
  content: '';
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

.chat li {
  margin: 15px 0;
}

.chat li.right .chat-body {
  margin-right: 70px;
  background-color: #fff;
}

.chat-box {
/*
  position: fixed;
  bottom: 0;
  left: 444px;
  right: 0;
*/
  padding: 15px;
  border-top: 1px solid #eee;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
}

.primary-font {
  color: #3c8dbc;
}

a:hover, a:active, a:focus {
  text-decoration: none;
  outline: 0;
}