@font-face {
    font-family: 'Avenir';
    src: local('../fonts/AvenirLTStd-Roman.otf'), url('../fonts/AvenirLTStd-Roman.otf');
}

html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f8f8f8;
    border-color: #e7e7e7;
    color: #277EB7;
}
a:link {
    text-decoration: none;
}

.load {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 30%;
    left: 45%;
}
.topo{
    padding: 10px;
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}
.topo img{
    width: 65px;
}
.titulo-portal{
    font-size: 25px;
    font-weight: 600;
}
.nome-prefeitura {
    font-size: 18px;
}
.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}
.img-transparencia{
    max-width: 40px;
}
.atualizado{
    font-size: 10px;
}
.list-group-item{
    cursor: pointer;
}
.form-detalhes > div > div{
    padding-left: 5px;
    padding-right: 5px;
}
.form-detalhes .titulo{
    text-align: left;
}
@media only screen and (min-width: 760px) {
    .titulo-portal{
        font-size: 36px;
    }
    .form-detalhes .titulo{
        text-align: right;
    }
}

@media only screen and (min-width: 1024px) {
    body {
        /* Margin bottom by footer height */
        margin-bottom: 40px;
    }
    .footer {
        /* Set the fixed height of the footer here */
        height: 40px;
    }
    .atualizado{
        font-size: 12px;
    }
}

#menu {
    float: right;
    margin-top: 12px;
}

#menu li {
    float: left;
    list-style-type: none;
}

#menu li a {
    text-decoration: none;
    color: #000;
    display: block;
    padding: 12px 8px;
}

#menu li a:hover {
    text-decoration: underline;
}
.table-responsive {
    margin: 0 10px;
}

.card-servicos {
    color: #000;
}

.thumbnail {
    text-align: center;
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

.caption {
    margin-top: 5px;
    background-color: #fff;
    border-color: #e7e7e7;
}
.caption p {
    min-height: 40px;
}
@media only screen and (min-width: 1000px) {
    .caption h3 {
        height: 50px;
    }
}
@media only screen and (min-width: 1200px) {
    .caption h3 {
        height: 27px;
    }
}
/* PARAMETROS CSS PARA O GOOGLE SEARCH ENGINE */
#search-box {
    padding-top: 1%;
    width: 325px;
}

/* ALTO CONTRASTE */
.contrast,
.contrast nav,
.contrast div,
.contrast li,
.contrast ol,
.contrast header,
.contrast footer,
.contrast section,
.contrast main,
.contrast aside,
.contrast article {
    background: black !important;
    color: white !important;
}

.contrast h1,
.contrast h2,
.contrast h3,
.contrast h4,
.contrast h5,
.contrast h6,
.contrast p,
.contrast label,
.contrast strong,
.contrast em,
.contrast cite,
.contrast q,
.contrast i,
.contrast b,
.contrast u,
.contrast span {
    color: white !important;
}

.contrast a {
    color: rgb(255, 0, 0) !important;
}

.contrast button,
.contrast input[type=button],
.contrast input[type=reset],
.contrast input[type=submit] {
    background: black !important;
    color: rgb(255, 0, 0) !important;
    border: none !important;
}

.contrast input[type=text],
.contrast input[type=password],
.contrast input[type=url],
.contrast input[type=search],
.contrast input[type=email],
.contrast input[type=tel],
.contrast input[type=date],
.contrast input[type=month],
.contrast input[type=week],
.contrast input[type=datetime],
.contrast input[type=datetime-local],
.contrast textarea,
.contrast input[type=number] {
    background: black !important;
    border: 1px solid white !important;
    color: white !important;
}

.contrast img.on-contrast-force-gray {
    filter: grayscale(100%) contrast(120%);
}

.contrast img.on-contrast-force-white {
    filter: brightness(0) invert(1);
}

#area1 > div{
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* ### timeline ### */
.painel-timeline{
    background-color: #e7e7e7;
}

.timeline {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative
}

.timeline:before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    width: 5px;
    background: #2d353c;
    left: 6%;
    margin-left: -2.5px
}

@media only screen and (min-width: 760px) {
    .timeline:before {
        content: '';
        position: absolute;
        top: 5px;
        bottom: 5px;
        width: 5px;
        background: #2d353c;
        left: 20%;
        margin-left: -2.5px
    }
}

.timeline>li {
    position: relative;
    min-height: 50px;
    padding: 20px 0
}

.timeline .timeline-time {
    text-align: left;
    position: relative;
    margin-left: 19%;
}
.timeline .timeline-time .date,
.timeline .timeline-time .time {
    display: inline;
    font-weight: 600;
    line-height: 16px;
    font-size: 12px
}
/*
.timeline .timeline-time .date {
}

.timeline .timeline-time .time {
    line-height: 24px;
    font-size: 20px;
    color: #242a30
}*/

.timeline .timeline-icon {
    left: 1%;
    position: absolute;
    width: 10%;
    text-align: center;
    top: 54px
}
@media only screen and (min-width: 760px) {
    .timeline .timeline-time {
        position: absolute;
        left: 0;
        width: 18%;
        text-align: right;
        margin-left: 0;
        top: 30px;
    }
    .timeline .timeline-time .date,
    .timeline .timeline-time .time {
        display: block;
    }
    .timeline .timeline-icon {
        left: 15%;
        top: 35px;
    }

}




.timeline .timeline-icon a {
    text-decoration: none;
    width: 20px;
    height: 20px;
    display: inline-block;
    border-radius: 20px;
    background: #d9e0e7;
    line-height: 10px;
    color: #fff;
    font-size: 14px;
    border: 5px solid #2d353c;
    transition: border-color .2s linear
}

.timeline .timeline-body {
    margin-left: 18%;
    background: #fff;
    position: relative;
    /*padding: 20px 25px;*/
    padding: 10px 15px;
    border-radius: 6px
}

#signupbox{
    margin-top: 20px;
}
@media only screen and (min-width: 760px) {
    .timeline .timeline-body {
        margin-left: 24%;
        margin-right: 17%;
        background: #fff;
        position: relative;
        padding: 10px 15px;
        border-radius: 6px
    }
}

.timeline .timeline-body:before {
    content: '';
    display: block;
    position: absolute;
    border: 10px solid transparent;
    border-right-color: #fff;
    left: -20px;
    top: 16px
}

.timeline .timeline-body>div+div {
    margin-top: 15px
}

.timeline .timeline-body>div+div:last-child {
    margin-bottom: -10px;
    padding-bottom: 10px;
    border-radius: 0 0 6px 6px
}

.timeline-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e7eb;
    line-height: 15px;
    min-height: 40px;
}
.timeline-header .userimage {
    float: left;
    width: 34px;
    height: 34px;
    font-size: 3.5rem;
    border-radius: 40px;
    overflow: hidden;
    margin: -2px 10px -2px 0

}
@media only screen and (min-width: 400px) {
    .timeline-header {
        min-height: 25px;
    }
    .timeline-header .userimage {
        font-size: 2.5rem;
    }
}
@media only screen and (min-width: 760px) {
    .timeline-header {
        line-height: 30px;
        min-height: 25px;
    }
    .timeline-header .userimage {
        font-size: 3.5rem;
    }
}

.timeline-header .username {
    font-size: 1.1rem;
}

.timeline-header .username,
.timeline-header .username a {
    color: #2d353c
}

.timeline img {
    max-width: 100%;
    display: block
}

.timeline-content {
    letter-spacing: .25px;
    line-height: 18px;
    font-size: 13px
}

.timeline-content:after,
.timeline-content:before {
    content: '';
    display: table;
    clear: both
}

.timeline-title {
    margin-top: 0
}

.timeline-footer {
    background: #fff;
    font-size: 1.1rem;
    border-top: 1px solid #e2e7ec;
    padding-top: 2px
}

.timeline-footer a:not(.btn) {
    color: #575d63
}

.timeline-footer a:not(.btn):focus,
.timeline-footer a:not(.btn):hover {
    color: #2d353c
}

.timeline-likes {
    color: #6d767f;
    font-weight: 600;
    font-size: 12px
}

.timeline-likes .stats-right {
    float: right
}

.timeline-likes .stats-total {
    display: inline-block;
    line-height: 20px
}

.timeline-likes .stats-icon {
    float: left;
    margin-right: 5px;
    font-size: 9px
}

.timeline-likes .stats-icon+.stats-icon {
    margin-left: -2px
}

.timeline-likes .stats-text {
    line-height: 20px
}

.timeline-likes .stats-text+.stats-text {
    margin-left: 15px
}

.timeline-comment-box {
    background: #f2f3f4;
    margin-left: -25px;
    margin-right: -25px;
    padding: 20px 25px
}

.timeline-comment-box .user {
    float: left;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 30px
}

.timeline-comment-box .user img {
    max-width: 100%;
    max-height: 100%
}

.timeline-comment-box .user+.input {
    margin-left: 44px
}

.lead {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
}

.text-danger, .text-red {
    color: #ff5b57!important;
}

input[type="date"].form-control, 
input[type="time"].form-control, 
input[type="datetime-local"].form-control, 
input[type="month"].form-control {
    line-height: 17px;
}


.tela-login .image-container,
.tela-login .login-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%; /* Altura igual para ambas as colunas */
    padding: 15px;
}
.login-container > .panel-info {
    width: 100%;
}

@media (max-width: 768px) {
    .tela-login .image-container,
    .tela-login .login-container {
        height: auto; /* Remove altura fixa para telas menores */
    }
}