/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 20 avr. 2017, 17:21:07
    Author     : pixad
*/


.bordered
{
	background: transparent;
	width: calc(100% - 1px);
}

.widgetQuestion{
    overflow: hidden;
    position: fixed;
    bottom: 10px;
    left: 20px;
    width: 100%;
    height: 100%;
    max-width: 350px;
    max-height: 180px;
    z-index: 9999;
}
#widgetQuestion { -webkit-transition: all 250ms linear;-moz-transition: all 250ms linear;-ms-transition: all 250ms linear;-o-transition: all 250ms linear;transition: all 250ms linear}

#widget-banner
{
	display: block;
	width: 360px;
	height: 54px;
	overflow: hidden; 
}

.banner_form {
    border-color: #00AADD !important;
}
.banner_form {
    height: 54px;
    padding: 4px 5px 4px 56px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #03667b;
    max-width: 100%;
}
.mgd {
    height: 180px;
    padding: 0;
    border: 0;
}

.mgd .banner_header {
    background: #0198d0 !important;
    color: #fff;
    height: 35px;
    line-height: 35px;
    overflow: hidden;
    padding-left: 5px !important;
}
.mgd .banner_header h5 {
    color: #fff !important;
    text-transform: none;
    margin: 0;
    line-height: 25px;
    font-size: 1.15em;
    font-weight: 400;
    font-family: 'Nunito',sans-serif;
}
.mgd .mdg_container {
    background: #f3f3f4;
    margin: 0;
    padding: 0;
    height: 185px;
    text-align: center;
}
.mgd .widget_desc {
    background: #fff url(../img/persos.png) 5px center no-repeat;
    padding: 5px 5px 5px 180px;
    color: #909090;
    line-height: 1.2em;
    text-align: center;
    font-weight: 400;
    height: 90px;
}

.mgd #widget-banner {
    display: inline-block;
    background: #ffa200;
    background: -moz-linear-gradient(top, #ffa200 0%, #ff7800 100%) !important;
    background: -webkit-linear-gradient(top, #ffa200 0%,#ff7800 100%) !important;
    background: linear-gradient(to bottom, #ffa200 0%,#ff7800 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa200', endColorstr='#ff7800',GradientType=0 );
    float: none;
    height: 35px !important;
    line-height: 35px !important;
    font-size: 1.3em;
    margin-top: 3px;
}

.banner_form .btn {
    font-size: 0.8em;
    padding: 2px;
    height: 26px !important;
    line-height: 22px;
    float: left;
    width: 90% !important;
    margin-left: 0%;
    color: #fff;
    text-transform: uppercase;
    background: #03667b;
    border: none;
}


  
#chat-steps {
    height: 115px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}
#chat-steps .chat-step {
    width: calc( 50% - 110px );
    color: #323232;
    float: left;
    height: 115px;
    font-size: 1em;
    text-align: center;
    padding-top: 80px;
    border: 1px solid #ccc;
}

#chat-steps .chat-step1 {
    color: #FFF;
    width: 210px;
    border-color: #2196f3;
    background: #2196f3 url(../img/talk_sm.png) center 5px no-repeat;
}
#chat-steps .chat-step2:before {
    position: absolute;
    width: 35px;
    height: 115px;
    content: " ";
    top: 0;
    left: calc( 50% + 96px );
    border-top: 55px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 35px solid #ccc;
}

#chat-steps .chat-step2:after {
    position: absolute;
    width: 35px;
    height: 115px;
    content: " ";
    top: 0;
    left: calc( 50% + 95px );
    border-top: 55px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 35px solid #fff;
}

#chat-steps .chat-step2 {
    margin-left: 10px;
    border-right: none;
    background: url(../img/mail.png) center 10px no-repeat;
}
#chat-steps .chat-step3 {
    border-left: none;
    background: url(../img/conv_sm.png) center 10px no-repeat;
}

#question-container {
    padding: 10px;
    overflow: hidden;
}
#question-container h5 {
    font-weight: bold;
    font-size: 1.2em;
    color: #424242;
}
#customer-question-container {
    background: #f7f7f7;
    height: 370px;
    border-right: 5px solid #fff;
}

#question-container input {
    width: 100%;
    height: 35px;
    border-radius: 0;
}
#customer-question-container textarea {
    width: 100%;
    height: 240px;
    border-radius: 0;
}
#question-container .customer_info {
    height: 370px;
    border-left: 5px solid #fff;
    position: relative;
}

#question-container .customer_info {
    height: 370px;
    border-left: 5px solid #fff;
    position: relative;
}

.customer_info {
    background: #f7f7f7;
    height: 370px;
    padding: 10px 20px;
}


/* STYLE DE LA MODAL */
.ModalQuestionProduit { width:60%; margin-left: auto;}
 @media only screen and (max-width:480px) {
   .ModalQuestionProduit { width:95%; margin-left: auto;}
   
   #chat-steps .chat-step1 {width:100%;}
   #chat-steps .chat-step2 {display: none}
   #chat-steps .chat-step3 {display:none}
   
  }

  
.BlockQuestionProduit {clear:both; border-bottom:1px solid #e9e9e9; margin-top: 15px; margin-bottom:15px; padding-bottom:25px;}
 
.BlockQuestionProduit .QuestionProduit { display:block; position:relative;  background-color: #A8DDFD; color: #111;  float: left; padding: 10px; border-radius: 11px!important; font-weight: 300; }  
.BlockQuestionProduit .QuestionProduit span::first-letter{ text-transform: uppercase; font-weight: 400;  }  

.BlockQuestionProduit .QuestionProduit:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 5%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: #A8DDFD;
	border-bottom: 0;
	border-left: 0;
	margin-left: -9.5px;
	margin-bottom: -10px;
}
.BlockQuestionProduit .QuestionProduit span { font-size: 17px; font-weight: 300; }  
.BlockQuestionProduit .QuestionProduit span.titre {display:block; position: relative; font-size:12px; margin-bottom:10px }

.BlockQuestionProduit .InfoQuestion {margin-left:55px; font-size: 12px; clear: both; font-weight: 300;}  

.BlockQuestionProduit .font-blue-question {color:#2196f3!important}
.BlockQuestionProduit .btn-blue {background-color:#2196f3!important; color:#FFF;}

.BlockQuestionProduit .BlockReponses {margin-left:25px; margin-top:20px; font-weight: 300;   }


.BlockQuestionProduit .BlockReponses .FirstReponse {
    display:block; position:relative;
    background-color: #5dd26d!important;
    padding: 10px;
    border: 4px;
    border-radius: 11px!important;
    color: #FFF;
    float: right;
}
.BlockQuestionProduit .FirstReponse span.titre {display:block; position: relative; font-size:12px; margin-bottom:10px }
.BlockQuestionProduit .BtnAutresReponses {float:right; font-size:12px; font-weight: 500}
.BlockQuestionProduit .BlockReponses .FirstReponse:after{
    content: '';
	position: absolute;
	bottom: 0;
	right: 5%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: #5dd26d;
	border-bottom: 0;
	border-right: 0;
	margin-left: -5px;
	margin-bottom: -10px;
}

.BlockQuestionProduit .OtherReponse {
    display:block; position:relative;
    margin-top: 15px; 
    background-color: #26C73D!important;
    padding: 10px;
    border: 4px;
    border-radius: 11px!important;
    color: #FFF;
    float: right;}

.BlockQuestionProduit .OtherReponse :after{
    content: '';
	position: absolute;
	bottom: 0;
	right: 5%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: #26C73D;
	border-bottom: 0;
	border-right: 0;
	margin-left: -5px;
	margin-bottom: -10px;
}


.BlockQuestionProduit .BlockReponses .FirstReponse a { color:#FFF; font-size:12px}
.BlockQuestionProduit .BlockReponses .FirstReponse a:before {content : "\f0c1 "; font-family: "FontAwesome"; font-weight: 900; font-size:14px; margin-right:5px}
.BlockQuestionProduit .BlockReponses .FirstReponse a:hover { color:#000; font-size:12px}