@media(max-widh: 666px) {
    .layout-alterarsenha {
        height: 92vh;
    }
}

/* Layout */
.layout-alterarsenha {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;    
    font-family: var(--fonte);
}

/* Box com formulario */
.alterarsenha-box {
    background-color: white;
    width: 350px;
    height: 340px;
    border-radius: 5px;
}

/* Formulario */
.alterarsenha-form {
    margin: 20px;
}

/* Button para retornar para Inicio */
.alterarsenha-form-btnclose {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.alterarsenha-form-btnclose button {
    background: none;
    border: none;
}

.alterarsenha-form-btnclose i {
    font-size: 1.5em;
    cursor: pointer;
    transition: 0.5s;
}

.alterarsenha-form-btnclose i:hover {
    color: orange;
    transition: 0.5s;
}

.alterarsenha-form-box {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.alterarsenha-form-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.alterarsenha-form-inputs h6 {
    color: gray;
    font-weight: 300;
    font-size: 0.9em;
}

.alterarsenha-form-inputs input {
    height: 40px;
    width: 300px;
    border: 1px solid lightgray;
    padding-left: 10px;
    border-radius: 5px;
    color: gray;
    font-size: 1em;
}

/* Btns formulario */
.alterarsenha-box-btns {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.alterarsenha-box-btns button {
    padding: 10px;
    background-color: orange;
    transition: 0.5s;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    font-weight: 500;
    color: white;
    cursor: pointer;
    font-family: var(--fonte);
}

.alterarsenha-box-btns button:hover {
    transition: 0.5s;
    background-color: darkorange;
}

/* Btn de esqueci a senha */
.alterarsenha-box-btns span {
    color: red;
    cursor: pointer;
    font-size: 0.8em;
}