.btn-position-fixed{
    position: fixed !important;
    bottom: 60px !important;
}

.background-chat{
    position:fixed;
    width:100%;
    /*height:100%;*/
    background-image: url('../../img/background_chat.png');
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: 100%;
    height:calc(100% - 104px);
    overflow: auto;
}


.date-chat-text{
    text-align:center;
}

.date-chat-text b{
    background-color: #CAE1FF;
    padding-left:15px;
    padding-right:15px;
    padding-top:3px;
    padding-bottom:3px;
    -webkit-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;
}

.balao_titulo_chamado{
    display:inline-block;
    border-radius: 5px;
    min-height: 30px;
    position: relative;
    padding: 5px;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    background-color:rgba(255, 245, 196, 0.95);
    margin-top:40px;
    margin-right:20px;
}

.balao{
    padding: 8px;
    display:inline-block;
    background: white;
    border-radius: 5px;
    min-width: 50px;
    min-height: 30px;
    position: relative;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:10px;
    margin-right:40%;
}

.balao:after{
    content:'';
    width:0px;
    height: 0px;
    position:absolute;
    bottom:-16px;
    left:-6px;
    border-radius:2px;
    border-left:20px solid white;
    border-right:10px solid transparent;
    border-bottom:20px solid transparent;
    border-top:10px solid transparent;
    transform: rotate(35deg);
}

.balao2{
    padding: 8px;
    display:inline-block;
    float:right;
    background: #dcf8c6;
    border-radius: 10px;
    min-width: 50px;
    min-height: 30px;
    position: relative;
    right:0px;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:40%;
    margin-right:10px;
}

.balao2:after{
    content:'';
    width:0px;
    height: 0px;
    position:absolute;
    bottom:-16px;
    right:-6px;
    border-radius:2px;
    border-left:10px solid transparent;
    border-right:20px solid #dcf8c6;
    /*border-right:20px solid #B3EE3A;*/
    border-bottom:20px solid transparent;
    border-top:10px solid transparent;

    transform: rotate(-35deg);
}

.width-100{
    width:100% !important;
}

.toolbar-align-center-text{
    background-color:green;
}

.fundo_filtros_atendimento{
    position:fixed;
    width:100%;
    height:35px;
    /*background-color:#26c6da;*/
    z-index: 1000;
}

.fundo_filtros_atendimento .filtros{
    position:relative;
    display:none;
    width:100%;
    background-color:#26c6da;
    z-index: 1600;
    max-height:350px;
    overflow: auto;

}

.menu-filtros{
    position:relative;
    width:100%;
    height:35px;

    background-color:#26c6da;
}

.menu-filtros p{
    position:relative;
    top:50%;
    transform: translateY(-50%);
}

.fundo-card-atendimento,.fundo-card-consumo{
    padding-top:35px;
    height:calc(100% - 0px);
    overflow: auto;
}

.fundo-filtros-page{
    display:block;
}

.atendimento-form-filtros .form-checkbox input[type=checkbox]:checked~i, .atendimento-form-filtros label.label-checkbox input[type=checkbox]:checked+.item-media i.icon-form-checkbox, .atendimento-form-filtros label.label-checkbox input[type=checkbox]:checked~.item-after i.icon-form-checkbox, .atendimento-form-filtros label.label-checkbox input[type=checkbox]:checked~.item-inner i.icon-form-checkbox, .atendimento-form-filtros label.label-checkbox input[type=radio]:checked+.item-media i.icon-form-checkbox, .atendimento-form-filtros label.label-checkbox input[type=radio]:checked~.item-after i.icon-form-checkbox, .atendimento-form-filtros label.label-checkbox input[type=radio]:checked~.item-inner i.icon-form-checkbox{
    background-color:transparent;
    border-color:white;
    color:#212121;
}

.atendimento-form-filtros .form-checkbox i, .atendimento-form-filtros label.label-checkbox i.icon-form-checkbox{
    border:2px solid white;
}

.atendimento-form-filtros .form-radio input[type=radio]:checked~i, .atendimento-form-filtros label.label-radio input[type=checkbox]:checked+.item-media i.icon-form-radio, .atendimento-form-filtros label.label-radio input[type=checkbox]:checked~.item-after i.icon-form-radio, .atendimento-form-filtros label.label-radio input[type=checkbox]:checked~.item-inner i.icon-form-radio, .atendimento-form-filtros label.label-radio input[type=radio]:checked+.item-media i.icon-form-radio, .atendimento-form-filtros label.label-radio input[type=radio]:checked~.item-after i.icon-form-radio, .atendimento-form-filtros label.label-radio input[type=radio]:checked~.item-inner i.icon-form-radio{
    border-color:white;
    color:#212121;
}

.atendimento-form-filtros .form-radio i:after, .atendimento-form-filtros label.label-radio i.icon-form-radio:after{
    border:5px solid white;
}

.atendimento-form-filtros .form-radio i, .atendimento-form-filtros label.label-radio i.icon-form-radio{
    border:2px solid white;
}

.border-bottom-white{
    border-bottom:1px solid white !important;
}

.atendimento-form-filtros-style{
    width:100%;
}

.background-alert-atendimento{
    width:100%;
    height:100%;
    z-index:1000;
    background-image: url('../img/background-alert.png');
    display:none;
    position:absolute;
    top:0px;
    left:0px;
}

.atendimento-form-filtros ul:before, .atendimento-form-filtros ul:after{
    background-color:transparent;
}

.fundo-transparente-com-borda{
    border:1px solid white !important;
}

.data-range-float-midle{
    margin-left:calc(50% - 60px);
}

.data-range-float-midle:active{
    color:silver !important;
}

.list-block input[type=text]:focus{
    border-bottom:1px solid white !important;
}

.campos-filtros .list-block input[type=text]::-webkit-input-placeholder{
    color:white !important;
}

.arrow-show-end-filters{
    position:absolute !important;
    width:40px;
    height: 35px;
    bottom:0px;
    margin-bottom:10px;
    left:50%;
    margin-left:-20px;
    /*background-color:green;*/
    z-index:2000;
}

.arrow-show-end-filters:before{
    content:'';
    position:absolute !important;
    width:25px;
    height: 25px;
    bottom:0px;
    left:50%;
    margin-left:-12.5px;
    margin-bottom: 10px;
    background-color:transparent;
    z-index:2000;
    border-left: 7px solid white;
    border-bottom: 7px solid white;
    border-top: 5px solid transparent;
    border-right: 5px solid transparent;
    transform: rotate(-45deg);
    cursor:pointer;
    opacity:0.7;
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

.mensagens-recebidas{
    position:absolute;
    left:0px;
    top:0px;
    margin-left:30px;
    margin-top:5px;
    padding-left:7px;
    padding-right:7px;
    padding-top:0px;
    padding-bottom:0px;
    /*    margin-left:10px;*/
    background-color:#FFB800;
    border-radius:100px 100px 100px 100px;
    color:#000;
}

.nome-cliente {
    color: #999;
    font-size: 12px;
}

.mensagens-chat p {
    margin: 0;
}

.mensagens-chat {
    min-height: 60vh;
}

.botao_nova_mensagem {
    width: 100%;
    background-color: white;
    padding: 10px 0;
    cursor: pointer;
    font-weight: 400;
    color: #2196f3;
}

.nova_mensagem {
    display: none;
}

.nova_mensagem input{
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 100%;
    padding: 8px;
    margin-top: 10px;
}

/*.atendimentos-ver .card {*/
    /*background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);*/
/*}*/

.atendimento-ver .card-content {
    padding: 15px 20px;
}

.novo_atendimento .card-content {
    padding: 55px 15px;
}

.atendimento-ver .card-content h4 {
    color: #797979;
    padding-bottom: 15px;
    padding-left: 5px;
    font-size: 20px;
    font-weight: bold;
}

.atendimento-ver .avatar-operador {
    width: 50px;
    height: 50px;
    background-color: red;
    text-align: center;
    margin: auto;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.atendimento-ver .avatar-vc {
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}

.inicial {
    position: relative;
    top: 15px;
    font-size: 25px;
    line-height: 25px;
    color: #fff;
    font-weight: 400;
}

.atendimento-ver .resposta {
    padding: 30px 10px 0 10px;
}

@media (max-width: 415px) {
    .atendimento-ver .resposta {
        padding: 30px 0 0 0;
    }
}

.atendimento-ver .form_resposta_atendimento {
    display: flex;
}

.atendimento-ver .form_resposta_atendimento button {
    height: 35px;
    padding: 10px;
    display: flex;
}

.enviando_loader {
    border: 3px solid #ffffff;
    border-top: 3px solid #00bcd4;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    left: 5px;
    animation: spin 2s linear infinite;
    margin: auto;
    position: relative;
    margin-right: 0;
}
.login_loader {
    border: 3px solid #ffffff;
    border-top: 3px solid #00bcd4;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    animation: spin 2s linear infinite;
    margin: auto;
}

.descricao_atendimento {
    font-size: 55px !important;
    color: #fe9f22;
}

.row.conversa,
.row.descricao {
    padding: 0 10px;
}

.btn-novo-atendimento {
    display: block;
    background-color: #ffa627;
    height: 35px;
}

.form_resposta_atendimento input:focus ~ label,
.form_resposta_atendimento input.used ~ label{
    color: #ffa627;
}

.form_resposta_atendimento input:valid {
    border-bottom-color: #ffa627;
}

.form_resposta_atendimento .bar:before,
.form_resposta_atendimento .bar:after {
    background: #ffa627;;
}

.novo_atendimento input:focus ~ label,
.novo_atendimento input.used ~ label,
.novo_atendimento input.data ~ label,
.novo_atendimento textarea:focus ~ label,
.novo_atendimento textarea.used ~ label,
.novo_atendimento select.used ~ label,
.novo_atendimento textarea.data ~ label {
    color: #ffa627;
}

.novo_atendimento .bar:before, .novo_atendimento .bar:after {
    background: #ffa627;
}

.novo_atendimento input:valid,
.novo_atendimento textarea:valid {
    border-bottom: 1px solid #ffa627;
}

.btn-novo-atendimento:hover,
.btn-novo-atendimento:focus,
.btn-novo-atendimento:active {
    box-shadow: 0 14px 26px -12px rgba(212, 120, 6, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(212, 53, 0, 0.2) !important;
    background: #ffa627 !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media screen and (max-width: 767px) {
    .texto_conversa {
        padding: 0;
        margin: 0;
    }

    .resposta .avatar-vc {
        display: none;
    }
}

@media screen and (max-width: 550px) {
    .card-header.novo-atendimento{
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

@media screen and (max-width: 415px) {
    .form_resposta_atendimento {
        flex-direction: column;
        align-items: center;
    }

    .atendimento-ver .form_resposta_atendimento button {
        margin-top: -20px;
    }
}

@media screen and (max-width: 1024px) {
    .row.resposta .avatar {
        display: none;
    }
}

.atend-S {
    background-color: #dd08b9 !important;
}

.atend-N {
    background-color: #00AF04 !important;
}

.atend-EP {
    background-color: #0687AF !important;
}

.atend-P {
    background-color: #090205 !important;
}

.atend-C {
    background-color: #ff4a2b !important;
}