@charset "UTF-8";
/* CSS Document */


.chat-barra-superior {
    background-color: #1782c1;
    height: 60px;
    color: #fff;
    top:0px;
    position: fixed;
    z-index: 1;
    
    
}


.chat-barra-superior h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
        text-align: center;
	font-size:18px;
	line-height:60px;
	margin:0px;
}


.chat-acoes-disponiveis p {
	font-family: 'Open Sans', sans-serif;
	margin: 0px;
	font-size:14px;
    line-height: 60px;
	font-weight:400;
}

.chat-acoes-disponiveis img{
	display: inline-block;    
	margin-right: 10px;
}


.btn-salvar-sair {
    height: 40px;
    background-color: transparent;
    border: 1px solid #dcdcdc;
    border-radius: 0px;
    font-size: 14px;
    color: #fff;
    position: absolute;
    right: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.btn-salvar-sair:hover, .btn-salvar-sair :focus {
    color: #fff;
    text-decoration: none;
}

.btn-salvar-sair p {
    float: left;
    margin-bottom: 0px;
    margin-right: 10px;
}

.btn-salvar-sair img {
    height: 11px;
    margin-top: 5px;
}







.chat-msgs-externa {
	padding-top:50px;
	padding-bottom:50px;
}


.chat-row {margin-bottom: 50px;}  


.chat-data p, .chat-horario p {
	font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #afafaf;
	margin-bottom: 0px;
}

.chat-foto img {
    border: 3px solid #d4d6d8;
    border-radius: 30px;
}

.chat-conversa p {
	font-family: 'Open Sans', sans-serif;
	font-size:24px;
	line-height:4rem;
	color:#afafaf;
}

.chat-conversa.active p {color:#2a313c;}

.chat-usuario .chat-conversa {text-align:right;}

.chat-meu-municipio .chat-conversa {padding-left: 30px; padding-right:0px;padding-bottom: 50px;}


.chat-conversa .conversa-acao {
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
	cursor:pointer;
}

.chat-conversa img.chat-acao-ico{ margin-left:10px;height: 16px;}


.chat-respostas-rodape {
    border-top: 2px solid #dcdcdc;
    padding-top: 20px;
    padding-bottom: 20px;
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    
}


.motivo-pergunta { padding: 0px; margin-top: 5px;}


.motivo-pergunta p {
    font-size: 14px;
    padding-right: 50px;
    color: #757575;
    line-height: 20px;
	margin-bottom: 0px;
}

.motivo-pergunta .btn-motivo-pergunta {
    height: 40px;
    background-color: transparent;
    border: 1px solid #dcdcdc;
    border-radius: 0px;
    width: 40px;
    font-size: 16px;
    line-height: 16px;
    color: #ff7819;
	position: absolute;
    right: 0px;
    top: 0px
}



.motivo-pergunta .btn-motivo-pergunta {
    padding-left: 20px;
    padding-right: 20px;
    z-index: 1;
    border-radius: 0px;
	height: 40px;
    background-color: transparent;
    border: 1px solid #dcdcdc;
    width: 40px;
    line-height: 16px;
    color: #ff7819;
	position: absolute;
    right: 0px;
    top: 0px;
	outline:none !important;
}

.btn-motivo-pergunta p{
	width: 40px;
    margin-left: -7px;
    font-size: 20px;
    line-height: 20px;
	color: #ff7819;
}


.motivo-pergunta .btn-motivo-pergunta:before{
	content: ""; 
	width: 100%; 
	height: 0; 
	position: absolute; 
	background-color: #ff791c;
	left: 0; 
	top: 0; 
	transition:.2s; 
	z-index: -1;
	color:#fff !important;
}

.motivo-pergunta .btn-motivo-pergunta:hover:before{
	height: 40px;
    top: auto;
    bottom: -1px;
    left: -1px;
    width: 42px;
}


.motivo-pergunta .btn-motivo-pergunta:hover p{
	color:#fff !important;
}









#chat-modal-orientacao .modal-dialog {
    width: 880px;
    margin: 100px auto;
}

#chat-modal-orientacao .modal-content {
	padding: 35px;
	overflow-y: scroll;
	height: 580px;
}

#chat-modal-orientacao .modal-header { border:none;}

#chat-modal-orientacao .modal-title {
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
    margin: 0;
    line-height: 1.42857143;
    font-size: 14px;
    color: #757575;
    margin: 0px;
}

#chat-modal-orientacao .modal-body {padding-top: 0px;}

#chat-modal-orientacao .modal-body h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
    font-size: 24px;
    color: #2a313c;
	margin-top: 0px;
    margin-bottom: 0px;
}


#chat-modal-orientacao .modal-body h3 {
	font-family: 'Open Sans', sans-serif;
	font-weight:600;
    line-height: 1.42857143;
    font-size: 14px;
    color: #757575;
    margin-top: 40px;
    margin-bottom: 20px;
}

#chat-modal-orientacao .modal-body p {
    font-size: 16px;
    padding-right: 0px;
    color: #000;
    line-height: 25px;
    margin-bottom: 0px;
    font-family: 'Open Sans', sans-serif;
}


#chat-modal-orientacao .modal-content::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}

#chat-modal-orientacao .modal-content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #ff791c;
}

#chat-modal-orientacao .modal-content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}


#close-modal-button {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: #fff;
    float: right;
    position: relative;
    top: -40px;
    left: 0px;
    cursor: pointer;
    opacity: 1;
	font-size: 20px;
    position: relative;
    color: #ff791c;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}


#close-modal-button img {
    height: 20px;
	margin:0 auto;
}



.chat-respostas-externa { text-align:center;}

.chat-respostas-externa p { 
	font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    margin-bottom: 0px;
}


.chat-respostas-externa  .btn-resposta-laranja{
    background-color: #ff7819;
    color: #fff;
    height: 50px;
    width: auto;
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
	margin-left:30px;
	padding-left:30px;
	padding-right:30px;
}


.chat-inserir-resposta .btn-resposta-laranja {
	margin-left:0px;
	border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
	vertical-align: bottom;
    height: 49px;
}

.chat-inserir-resposta .inserir-resposta-input {
    height: 49px;
    width: 400px;
    background-color: transparent;
    border: 1px solid #dcdcdc;
    border-right: none;
    box-shadow: none;
    padding-left: 15px;
    font-size: 18px;
    line-height: 18px;
	font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}
.chat-integer-resposta .inserir-resposta-input {
    height: 49px;
    width: 400px;
    background-color: transparent;
    border: 1px solid #dcdcdc;
    border-right: none;
    box-shadow: none;
    padding-left: 15px;
    font-size: 18px;
    line-height: 18px;
	font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}





.responder-depois-pergunta .btn-responder-depois {
    font-family: 'Open Sans', sans-serif;
	font-weight:600;
    line-height: 14px;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 1;
	height: 40px;
	width: 190px;
    background-color: transparent;
    border: 1px solid #dcdcdc;
    border-radius: 0px;
    font-size: 14px;
    color: #757575;
    position: absolute;
    right: 0px;
	margin-top: 5px;
}

.responder-depois-pergunta .btn-responder-depois p {
    float: left;
    margin-bottom: 0px;
	margin-right:10px;
}


.responder-depois-pergunta .btn-responder-depois .btn-responder-depois-ico{
	background-image: url(../images/svg/icon-relogio.svg);
    background-position: top right;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -webkit-user-select: none;
    height: 16px;
}



.responder-depois-pergunta .btn-responder-depois:before{
	content: ""; 
	width: 100%; 
	height: 0; 
	position: absolute; 
	background-color: #ff791c;
	left: 0; 
	top: 0; 
	transition:.2s; 
	z-index: -1;
	color:#fff !important;
}

.responder-depois-pergunta .btn-responder-depois:hover:before{
	height: 40px;
    top: auto;
    bottom: -1px;
    left: -1px;
    width: 190px;	
}



.responder-depois-pergunta .btn-responder-depois:hover .btn-responder-depois-ico{
	background-position: bottom right;
	margin-top:0px;
}

.responder-depois-pergunta .btn-responder-depois:hover { color:#fff;}







/*== Button laranja hover css ==*/
.btn-resposta-laranja {
	background-color: #ff7819;
    color: #fff;
    height: 50px;
    width: auto;
    font-size: 16px;
    line-height: 16px;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    margin-left: 30px;
    padding-left: 30px;
    padding-right: 30px;
	position: relative; 
	z-index: 1;
	border-radius:5px;
	cursor:pointer;
	border:none;
}


.btn-resposta-laranja:before{
	content: ""; 
	width: 100%; 
	height: 0; 
	position: absolute; 
	background-color: #bfee00; 
	left: 0; 
	top: 0; 
	transition:.2s; 
	z-index: -1;
	border-radius: 5px;
	color:#fff !important;
}

.btn-resposta-laranja:hover:before{height: 100%; top: auto; bottom: 0;}

.historico{
    cursor: pointer;
}



.btn-laranja:hover {
	color: #2a313c !important;
}


 #modal-popup-envio-chat .modal-dialog {width:580px;height: 580px; background: #FFF;border-radius:10px; padding: 40px 50px;}
    #modal-popup-envio-chat  button.close{margin-top: -20px; margin-right: -20px;z-index: 10;opacity: 1;}
    #modal-popup-envio-chat  button span{color: #ff7819;}

    #modal-popup-envio-chat  .conteudo-popup-envio h2 {color: #1c4057; font-size: 28px; line-height: 35px; font-family: 'Open Sans', sans-serif; font-weight: 400; margin-bottom: 35px;}
    #modal-popup-envio-chat  .conteudo-popup-envio p {margin-bottom:30px; color:#757575;}
    #modal-popup-envio-chat  .conteudo-popup-envio span.azul {color: #1782c1; font-weight: 600;}
    #modal-popup-envio-chat  .img-ico-ok {margin-bottom:30px;}

    #modal-popup-envio-chat  .form-group { margin-bottom:30px;}
    #modal-popup-envio-chat  label {font-weight: 600; color: #2a313c;}
    #modal-popup-envio-chat  .form-control {padding: 11px 15px; width: 100%; border-radius: 3px; border-color: #d9d9d9; margin-bottom:10px;}
    #modal-popup-envio-chat  .text-muted {color: #757575;font-size: 95%; margin-top: 10px;}
    #input-msg-solicitar-envio-chat {height: 130px; overflow-y: scroll;}