@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@600;700&family=Roboto:wght@300;400;500;700&display=swap');

.bt-votacao{
    max-width:1200px;
    margin:15px auto 40px;
    padding:20px;
    font-family:'Roboto', sans-serif;
    color:#222;
}

.bt-votacao h2{
    font-family:'Encode Sans', sans-serif;
    text-align:center;
    font-size:32px;
    font-weight:700;
    color:#111;
    margin-bottom:10px;
}

/*
|--------------------------------------------------------------------------
| Unidade
|--------------------------------------------------------------------------
*/

.bt-unidade{
    display:block !important;
    width:100%;
    margin:0 0 28px !important;
    padding:0 !important;
    text-align:left !important;
}

.bt-unidade-texto{
    display:inline-block !important;
    margin:0 !important;
    padding:0 !important;
    font-family:'Encode Sans', sans-serif !important;
    font-size:16px !important;
    font-weight:400 !important;
    line-height:1.5 !important;
    color:#555 !important;
}

.bt-unidade-texto strong{
    display:block !important;
    margin:0 0 2px !important;
    padding:0 !important;
    font-family:'Encode Sans', sans-serif !important;
    font-size:17px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
    color:#444 !important;
}

.bt-votacao p{
    font-family:'Roboto', sans-serif;
    text-align:left;
    color:#666;
    font-size:16px;
}

/*
|--------------------------------------------------------------------------
| Categoria
|--------------------------------------------------------------------------
*/

.bt-votacao h3{
    font-family:'Encode Sans', sans-serif;
    font-size:22px !important;
    line-height:1.3;
    font-weight:600;
    color:#55b991;
    border-left:4px solid #55b991;
    padding-left:10px;
    margin:32px 0 18px;
}

/*
|--------------------------------------------------------------------------
| Grade de participantes
|--------------------------------------------------------------------------
*/

.bt-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
    align-items:start;
}

/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/

.bt-card{
    background:#fff;
    border:2px solid #ececec;
    border-radius:16px;
    padding:22px 24px;

    transition:
        transform .25s,
        box-shadow .25s,
        background .25s,
        border-color .25s;

    cursor:pointer;
    box-shadow:0 5px 15px rgba(0,0,0,.06);
}

.bt-card:hover{
    transform:translateY(-4px);
    border-color:#55b991;
    box-shadow:0 12px 24px rgba(0,0,0,.10);
}

.bt-card label{
    display:block !important;
    width:100%;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    cursor:pointer;
}

/*
|--------------------------------------------------------------------------
| Foto
|--------------------------------------------------------------------------
*/

.bt-avatar{
    display:block;
    width:105px;
    height:105px;
    border-radius:50%;
    background:#ececec;
    object-fit:cover;
    margin:0 auto 18px;
}

/*
|--------------------------------------------------------------------------
| Nome, cargo e seleção
|--------------------------------------------------------------------------
*/

.bt-nome{
    width:100%;
    margin:0 0 5px !important;
    padding:0 !important;

    text-align:left;
    font-family:'Encode Sans', sans-serif;
    font-size:17px;
    line-height:1.35;
    font-weight:600;
    color:#333;
}

.bt-cargo{
    width:100%;
    margin:0 0 12px !important;
    padding:0 !important;

    text-align:left;
    font-family:'Roboto', sans-serif;
    font-size:14px;
    line-height:1.4;
    font-weight:400;
    color:#666;
}

.bt-radio{
    display:block !important;
    width:100%;
    margin:0 !important;
    padding:0 !important;
    text-align:left;
    line-height:1;
}

.bt-radio input{
    display:inline-block !important;
    width:16px !important;
    height:16px !important;
    margin:0 !important;
    padding:0 !important;

    transform:none !important;
    accent-color:#55b991;
    vertical-align:middle;
}

/*
|--------------------------------------------------------------------------
| Área do botão
|--------------------------------------------------------------------------
*/

.bt-area-botao{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    margin:26px 0 0 !important;
    padding:0 !important;
}

.bt-votacao .bt-area-botao button.bt-botao,
.bt-votacao form .bt-area-botao button[type="submit"].bt-botao{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:185px !important;
    max-width:100% !important;
    height:44px !important;
    min-height:44px !important;

    margin:0 !important;
    padding:0 18px !important;

    background:#55b991 !important;
    color:#fff !important;

    border:0 !important;
    border-radius:0 !important;

    font-family:'Encode Sans', sans-serif !important;
    font-size:14px !important;
    font-weight:600 !important;
    line-height:1 !important;
    text-align:center !important;
    text-transform:uppercase !important;
    letter-spacing:.2px !important;

    box-sizing:border-box !important;
    box-shadow:none !important;
    transform:none !important;

    appearance:none !important;
    -webkit-appearance:none !important;

    cursor:pointer !important;
    transition:background .25s ease !important;
}

.bt-votacao .bt-area-botao button.bt-botao:hover,
.bt-votacao form .bt-area-botao button[type="submit"].bt-botao:hover{
    background:#469b79 !important;
    color:#fff !important;
}

/*
|--------------------------------------------------------------------------
| Mensagens
|--------------------------------------------------------------------------
*/

.bt-sucesso{
    max-width:700px;
    margin:50px auto;
    padding:40px;
    background:#f2fbf8;
    border:2px solid #55b991;
    border-radius:16px;
    text-align:center;
}

.bt-sucesso h2{
    font-family:'Encode Sans', sans-serif;
    color:#55b991;
    margin-bottom:20px;
}

.bt-sucesso p{
    font-family:'Roboto', sans-serif;
    text-align:center;
    color:#444;
    margin:10px 0;
}

/*
|--------------------------------------------------------------------------
| Responsividade
|--------------------------------------------------------------------------
*/

@media (max-width:768px){

    .bt-votacao{
        padding:15px;
    }

    .bt-votacao h2{
        font-size:27px;
    }

    .bt-votacao h3{
        font-size:20px !important;
        margin-top:28px;
    }

    .bt-unidade{
        margin-bottom:24px !important;
    }

    .bt-grid{
        grid-template-columns:1fr;
    }

    .bt-card{
        padding:20px;
    }

    .bt-avatar{
        width:90px;
        height:90px;
        margin-bottom:15px;
    }

    .bt-nome{
        font-size:16px;
    }

    .bt-area-botao{
        margin-top:24px !important;
    }

    .bt-votacao .bt-area-botao button.bt-botao,
    .bt-votacao form .bt-area-botao button[type="submit"].bt-botao{
        width:100% !important;
        min-width:0 !important;
        height:44px !important;
        font-size:14px !important;
    }
}

/*
|--------------------------------------------------------------------------
| Correção do parágrafo automático em volta do botão
|--------------------------------------------------------------------------
*/

.bt-area-botao > p{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    margin:0 !important;
    padding:0 !important;

    line-height:1 !important;
}

.bt-votacao .bt-area-botao > p > button.bt-botao{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:185px !important;
    height:44px !important;
    min-height:44px !important;

    margin:0 !important;
    padding:0 !important;

    line-height:1 !important;
    text-align:center !important;
    vertical-align:middle !important;
}