@font-face {
    font-family: Quicksand;
    src: url("../fonts/Quicksand-Regular.ttf");
}

@font-face {
    font-family: Quicksand-SemiBold;
    src: url("../fonts/Quicksand-SemiBold.ttf");
}

@font-face {
    font-family: Quicksand-Bold;
    src: url("../fonts/Quicksand-Bold.ttf");
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    color: #26354a;
    font-family: Quicksand, Arial, sans-serif;
    background: #203b70;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("../images/cadastrarRedefinirSenha/fundo-alterar-senha.jpg") center/cover no-repeat;
    opacity: .45;
}

.pagina-redefinicao {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 16px;
}

.painel-redefinicao {
    width: 100%;
    max-width: 720px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(11, 21, 56, .34);
}

.painel-senha {
    max-width: 640px;
}

.cabecalho-redefinicao {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px 38px 27px;
    color: #fff;
    background: linear-gradient(120deg, #343793, #2364a8);
}

.icone-cabecalho {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
    font-size: 25px;
}

.identificador-fluxo {
    margin: 0 0 4px;
    color: #dce5ff;
    font-family: Quicksand-SemiBold, Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.cabecalho-redefinicao h1 {
    margin: 0;
    color: #fff;
    font-family: Quicksand-Bold, Arial, sans-serif;
    font-size: 29px;
    line-height: 1.2;
}

.subtitulo-redefinicao {
    max-width: 520px;
    margin: 0px 0 0;
    color: #ecf0ff;
    font-size: 14px;
    line-height: 1.55;
}

.corpo-redefinicao {
    padding: 22px 38px 22px;
}

.aviso-seguranca,
.regras-senha {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 17px;
    padding: 13px 15px;
    border: 1px solid #dce6f6;
    border-radius: 11px;
    color: #465a73;
    background: #f4f7fc;
    font-size: 13px;
    line-height: 1.5;
}

.aviso-seguranca .glyphicon {
    margin-top: 2px;
    color: #343793;
}

.regras-senha {
    flex-direction: column;
    gap: 3px;
    border-left: 4px solid #343793;
}

.form-group {
    margin-bottom: 20px;
}

.form-group > label,
.grupo-envio legend {
    display: block;
    margin-bottom: 8px;
    color: #34465b;
    font-family: Quicksand-SemiBold, Arial, sans-serif;
    font-size: 13px;
}

.grupo-envio {
    min-width: 0;
    margin-bottom: 20px;
    padding: 0;
    border: 0;
}

.grupo-envio legend {
    width: auto;
    padding: 0;
    border: 0;
}

.input-com-icone {
    position: relative;
}

.input-com-icone > .glyphicon,
.input-com-icone > .fa {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    transform: translateY(-50%);
    color: #718299;
}

.input-com-icone .form-control {
    height: 46px;
    padding: 10px 44px;
    border: 1px solid #cdd8e5;
    border-radius: 10px;
    color: #26354a;
    background: #fff;
    box-shadow: none;
    font-family: Quicksand, Arial, sans-serif;
    font-size: 14px;
    transition: border-color .2s, box-shadow .2s;
}

.input-com-icone .form-control:focus {
    border-color: #4e55b8;
    box-shadow: 0 0 0 3px rgba(52, 55, 147, .12);
}

.opcoes-envio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.opcoes-envio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.opcoes-envio label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    margin: 0;
    border: 1px solid #cdd8e5;
    border-radius: 10px;
    color: #4d6077;
    background: #fff;
    cursor: pointer;
    font-family: Quicksand-SemiBold, Arial, sans-serif;
    transition: border-color .2s, color .2s, background .2s;
}

.opcoes-envio input:focus + label {
    box-shadow: 0 0 0 3px rgba(52, 55, 147, .12);
}

.opcoes-envio input:checked + label {
    border-color: #343793;
    color: #fff;
    background: #343793;
}

.recaptcha-container {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px 0 20px;
}

.recaptcha-container .alert {
    width: 100%;
    margin: 0;
}

.acoes-redefinicao {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.btn-confirmar {
    width: 100%;
    padding: 12px 20px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: #343793;
    font-family: Quicksand-SemiBold, Arial, sans-serif;
    font-size: 15px;
    transition: background .2s, transform .2s;
}

.btn-confirmar:hover,
.btn-confirmar:focus {
    color: #fff;
    background: #282b79;
}

.btn-confirmar:active {
    transform: translateY(1px);
}

.btn-voltar-fluxo {
    color: #5d6d80;
    font-family: Quicksand-SemiBold, Arial, sans-serif;
}

.btn-voltar-fluxo:hover,
.btn-voltar-fluxo:focus {
    color: #343793;
    text-decoration: none;
}

.rodape-redefinicao {
    padding: 16px 28px;
    border-top: 1px solid #e6ecf3;
    color: #697a8e;
    background: #f8fafc;
    font-size: 12px;
    text-align: center;
}

.rodape-redefinicao .glyphicon {
    margin-right: 5px;
    color: #343793;
}

.input-senha .form-control {
    padding-right: 48px;
}

.mostrar-senha {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 40px;
    height: 38px;
    z-index: 3;
    transform: translateY(-50%);
    border: 0;
    color: #65768a;
    background: transparent;
}

.mostrar-senha:focus {
    outline: 2px solid #7077cf;
    border-radius: 7px;
}

.indicadores-senha {
    display: grid;
    gap: 7px;
    margin: -8px 0 20px;
    padding: 0 4px;
    list-style: none;
}

.indicadores-senha li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #66788d;
    font-size: 13px;
    line-height: 1.4;
    transition: color .2s;
}

.indicadores-senha .glyphicon {
    flex: 0 0 14px;
    width: 14px;
    margin-top: 2px;
    text-align: center;
    transition: color .2s;
}

.indicadores-senha .requisito-pendente .glyphicon {
    color: #d74747;
}

.indicadores-senha .requisito-atendido {
    color: #416c50;
}

.indicadores-senha .requisito-atendido .glyphicon {
    color: #2fa85d;
}

.ajuda-whatsapp {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 20;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 17px;
    border-radius: 30px;
    color: #fff;
    background: #25d366;
    box-shadow: 0 8px 24px rgba(11, 63, 31, .28);
    font-family: Quicksand-SemiBold, Arial, sans-serif;
    font-size: 13px;
    text-decoration: none;
    transition: background .2s, transform .2s;
}

.ajuda-whatsapp:hover,
.ajuda-whatsapp:focus {
    color: #fff;
    background: #1ebc59;
    text-decoration: none;
    transform: translateY(-2px);
}

.swal2-popup {
    font-family: Quicksand, Arial, sans-serif;
    font-size: 14px !important;
}

.swal2-title {
    font-family: Quicksand-Bold, Arial, sans-serif;
}

@media (max-width: 767px) {
    html {
        background: #203b70;
    }

    body {
        position: relative;
        min-height: 100vh;
        min-height: 100svh;
        overflow-x: hidden;
    }

    body::before {
        display: none;
    }

    .pagina-redefinicao {
        min-height: 100vh;
        min-height: 100svh;
        align-items: flex-start;
        padding: 18px 12px;
        background:
            linear-gradient(rgba(32, 59, 112, .55), rgba(32, 59, 112, .55)),
            url("../images/cadastrarRedefinirSenha/fundo-alterar-senha-mobile.jpg") center/cover no-repeat;
    }

    .painel-redefinicao {
        border-radius: 17px;
    }

    .cabecalho-redefinicao {
        align-items: flex-start;
        gap: 14px;
        padding: 23px 21px 21px;
    }

    .icone-cabecalho {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 14px;
        font-size: 20px;
    }

    .cabecalho-redefinicao h1 {
        font-size: 23px;
    }

    .subtitulo-redefinicao {
        font-size: 13px;
    }

    .corpo-redefinicao {
        padding: 23px 21px 25px;
    }

    @supports (-webkit-touch-callout: none) {
        .painel-redefinicao .input-com-icone .form-control {
            font-size: 16px;
        }
    }

    .ajuda-whatsapp {
        right: 12px;
        bottom: 12px;
        width: 48px;
        padding: 0;
        justify-content: center;
    }

    .ajuda-whatsapp span:last-child {
        display: none;
    }
}

@media (max-width: 480px) {
    .opcoes-envio {
        grid-template-columns: 1fr 1fr;
    }

    .opcoes-envio label:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 360px) {
    .corpo-redefinicao {
        padding-left: 16px;
        padding-right: 16px;
    }

    .opcoes-envio {
        gap: 8px;
    }

    .recaptcha-container {
        justify-content: flex-start;
        overflow: hidden;
    }

    .g-recaptcha {
        transform: scale(.88);
        transform-origin: left center;
    }
}