/* Card atual */  
.list-servicos-sabesp .card{  
    opacity: 0.7;  
    filter: alpha(opacity=70); /* For IE8 and earlier */  
}  
.list-servicos-sabesp .card:hover{  
    opacity: 0.85;  
    filter: alpha(opacity=85); /* For IE8 and earlier */  
}  
.list-servicos-sabesp .card-atual,  
.list-servicos-sabesp .card-atual:hover{  
    opacity: 1;  
    filter: alpha(opacity=100); /* For IE8 and earlier */  
}  
   
  
/* Modal RGI */  
#modalAjudaRGI .modal-header .modal-title{  
    font-size: 1.1rem;  
}  
#servicos-sabesp .list-servicos-sabesp{  
    margin-bottom: 25px;  
}  
#servicos-sabesp .list-servicos-sabesp .card{  
    border-radius: 15px;  
}  
#servicos-sabesp .list-servicos-sabesp .card-body{  
    background: #262626;  
    border-radius: 15px 15px 0 0;  
    color: #ffffff;  
    padding: .8rem 1rem;  
    text-align: center;  
}  
#servicos-sabesp .list-servicos-sabesp .card-body i{  
    font-size: 2rem;  
}  
#servicos-sabesp .list-servicos-sabesp .card-footer{  
    background: #fafafa;  
    border-radius: 0 0 15px 15px;  
    text-align: center;  
    text-transform: uppercase;  
    padding: 0;  
}  
#servicos-sabesp .list-servicos-sabesp .card-footer p{  
    text-transform: none;  
}  
#servicos-sabesp .list-servicos-sabesp .card-footer .row{  
    min-height: 70px;  
    line-height: normal;  
}  
#servicos-sabesp .list-servicos-sabesp .card-footer h5{  
    font-size: 0.9rem;  
    font-family: 'robotobold';  
    margin: 0 0 5px;  
}  
  
/* Tabelas */  
#servicos-sabesp table{  
    color: #727176;  
    font-size: .8rem;  
    overflow: hidden;
}  
#servicos-sabesp table thead th{
    border: none !important;
    background: none !important;
    color: #262626;
    text-align: left !important;
}  
#servicos-sabesp .telefones-procon thead th{
    text-align: center !important;
}

#servicos-sabesp table.infracao thead th{
    text-align: center !important;
}  

#servicos-sabesp table thead th.ui-state-hover{
  box-shadow: none !important;
}
#servicos-sabesp table tbody td,  
#servicos-sabesp table tbody th{  
    vertical-align: middle;  
}  
#servicos-sabesp table .btn{  
    padding: 2px 25px;  
}  
#servicos-sabesp table .btn i{  
    margin: 0;  
}  
#servicos-sabesp table .col-banco{  
    display: block;  
    min-width: 170px;  
}  
#servicos-sabesp table .card-confirmar{  
    background: #bfbfbf;  
}  
table.form-check-input{
    font-size: inherit !important;
}
table.form-check-input label{
    margin-left: 5px;
    margin-right: 15px;
}
  
  
/* Card SABESP com identificaÃ§Ã£o RGI */  
.card-sabesp .card-header .identificacaoRGI{  
    background: #fafafa;  
    padding: 0 15px;  
    position: relative;  
    border-bottom-right-radius: 20px;
    height: 100%;  
    width: 100%;  
}  

.card-sabesp .card-header .identificacaoNÂº de fornecimentobefore{  
    content: ""; 
    position: absolute;
    background: #262626; 
    border-radius: 0px 0px 20px 0px ;
    left: 0px;
    width: 20px;
    height: 100%;
}  
.card-sabesp .card-header .identificacaoRGI p{  
    font-size: 1rem;  
    font-weight: 400;   
}  
.card-sabesp .card-header a.closeRGI{  
    color: #fafafa;  
    position: absolute;  
    right: 15px;  
    top: 10px;  
    transform: skew(10deg);  
}  
.card-sabesp .card-header a.closeRGI > i{  
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .75);  
    transform: skew(-10deg);  
}  
.card-sabesp .alert.small{  
    background: #f1f1f1;  
    padding: 0;  
}  
.card-sabesp .alert.small .col-icon{  
    color: #ffffff;  
    font-size: 1rem;  
    padding: 15px 10px;  
}  
.card-sabesp .alert.small .col-icon-amarelo{  
    background: black;  
    color: white;
    border-radius: .25rem 0 0 .25rem;  
}  
.card-sabesp .alert.small .col-icon-azul{  
    background: black;  
    color: white;
    border-radius: .25rem 0 0 .25rem;  
    padding: 60px 0;  
}  
.card-sabesp p.text-muted strong,  
.card-sabesp p em.verde{  
    font-size: 1.1rem;  
}  
  
/* Lista customizada */  
.card-sabesp .card-body ul.list-unstyled li p:before {  
    content: "\f111";  
    color:#262626;  
    font-family: "Font Awesome 5 Free";  
    font-style: normal;  
    font-variant: normal;  
    text-rendering: auto;  
    -webkit-font-smoothing: antialiased;  
    font-weight: 900;  
    font-size: 10px;  
    margin-right: 10px;  
}  
  
/* Accordion de detalhes da dÃ­vida */  
.card-sabesp #accordionDivida .card{  
    background: none;  
    border: none;  
}  
.card-sabesp #accordionDivida .card-header{  
    background: black;  
    border-radius: 10px;  
    padding-top: 5px;  
    padding-bottom: 5px;  
    z-index: 3;  
    color: white;
}  
.card-sabesp #accordionDivida .card-header .btn{  
    color: #ffffff !important;  
    width: 100%;  
}  
.card-sabesp #accordionDivida .card-body{  
    background: #ececec;  
    border: 1px solid #e4e4e4;  
}  
.card-sabesp #accordionDivida #collapseDivida{  
    position: relative;  
    top: -7px;  
    z-index: 2;  
}  

/* Ajuste em Prefeituras - EstÃ¡ usando o mesmo ID de Sabesp */
#servicos-sabesp .prefeitura table.table th{
    text-align: center !important;
}
#servicos-sabesp .prefeitura table.table td{
    font-weight: bold;
    color: #727176;
    border: none;
}
#servicos-sabesp .prefeitura table.table tbody tr:first-child{
    background: lightsteelblue;
}
#servicos-sabesp .prefeitura table.table tbody tr:first-child td{
    color: #000000 !important;
}
  
  
  
  
/************** RESPONSIVO *************/  
@media (max-width: 767.98px) {  
    #servicos-sabesp .list-servicos-sabesp {  
        margin-bottom: 0;  
    }  
    #servicos-sabesp .abre-servicos{  
        position: fixed;  
        width: 100%;  
        height: auto;  
        min-height: 400px;  
        left: 100%;  
        z-index: 999;  
    }  
    #servicos-sabesp .abre-servicos button{  
        position: absolute;  
        top: -70px;  
        left: -35px;  
        border-color: black;  
        transition: 1s;  
        -webkit-transition: 1s;  
        padding-right: 100px;
    }  
    #servicos-sabesp .abre-servicos button:hover{  
        background: black;  
        color: white;
    }  
    #servicos-sabesp .abre-servicos .lista-sabesp{  
        transition: 1s;  
        -webkit-transition: 1s;  
        position: absolute;  
        left: 0;  
        top: -20px;  
        width: 90%;  
        transition: 1s;  
        -webkit-transition: 1s;  
    }  
    #servicos-sabesp .abre-servicos .lista-sabesp .list-group-item-action{  
        border-radius: 25px;  
        font-family: 'robotobold';  
        margin-bottom: 5px;  
        width: 120%;  
    }  
    #servicos-sabesp .abre-servicos button.focus.active{  
        left: -190px;  
    }  
    #servicos-sabesp .abre-servicos button.focus.active + .lista-sabesp{  
        left: -90%;  
    }  
    #servicos-sabesp .form-icone .form-group{  
        width: 100%;  
        position: relative;  
    }  
    #servicos-sabesp .form-icone .form-control{  
        width: 80%;  
    }  
    #servicos-sabesp .form-icone .icone-ajuda{  
        position: absolute;  
        right: 0;  
        top: 15px;  
    }  
  
  
  
    #servicos-sabesp .list-servicos-sabesp .card{  
        margin-bottom: 15px;  
    }  
    #servicos-sabesp .list-servicos-sabesp .card-footer{  
        border-radius: 15px;  
        text-align: left;  
    }  
    #servicos-sabesp .list-servicos-sabesp .card-footer i{  
        font-size: 1.4rem;  
    }  
    #servicos-sabesp .list-servicos-sabesp .card-footer .row{  
        height: 45px;  
    }  
  
  
    .card-sabesp.card-identif .card-header{  
        padding: .75rem 1.25rem;  
    }  
    .card-sabesp .alert.small{  
        padding: 10px;  
    }  
}  
  
@media (min-width: 768px) and (max-width: 991.98px) {  
    #servicos-sabesp .list-servicos-sabesp {  
        margin-bottom: 0;  
    }  
    #servicos-sabesp .abre-servicos{  
        position: fixed;  
        width: 100%;  
        height: auto;  
        min-height: 400px;  
        left: 100%;  
        z-index: 999;  
    }  
    #servicos-sabesp .abre-servicos button{  
        position: absolute;  
        top: -160px;  
        left: -38px;  
        transition: 1s;  
        -webkit-transition: 1s;  
    }  
    #servicos-sabesp .abre-servicos .lista-sabesp{  
        transition: 1s;  
        -webkit-transition: 1s;  
        position: absolute;  
        left: 0;  
        top: -100px;  
        width: 90%;  
        transition: 1s;  
        -webkit-transition: 1s;  
    }  
    #servicos-sabesp .abre-servicos .lista-sabesp .list-group-item-action{  
        border-radius: 25px;  
        font-family: 'robotobold';  
        margin-bottom: 5px;  
        width: 120%;  
    }  
    #servicos-sabesp .abre-servicos button.focus.active{  
        left: -190px;  
    }  
    #servicos-sabesp .abre-servicos button.focus.active + .lista-sabesp{  
        left: -60%;  
    }  
    .card-sabesp .alert.small .col-icon{  
        padding: 30px 10px;  
    }  
}  
  
@media (min-width: 992px) and (max-width: 1199.98px) {  
    .card-sabesp .alert.small .col-icon-amarelo{  
        padding: 25px 10px;  
    }  
    .card-sabesp .alert.small .col-icon-azul{  
        padding: 35px 10px;  
    }  
}  
@media (min-width: 1440px) {  
     
}