/* Estilos para o modal */
.modal {
    display: none; /* Inicialmente, o modal está oculto */
    position: fixed; /* Posição fixa na tela */
    z-index: 1; /* Z-index alto para ficar acima de outros elementos */
    left: 0;
    top: 0;
    width: 100%; /* Ocupa toda a largura da tela */
    height: 100%; /* Ocupa toda a altura da tela */
    /* overflow: auto; Adiciona scroll caso o conteúdo seja maior do que a tela */
    /* background-color: rgba(0, 0, 0, 0.4);  Fundo semi-transparente */
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* Centraliza o modal verticalmente */
    padding: 20px;
    border: 1px solid #888;
    width: 25%; /* Define a largura do modal */
    height: 40%;
}

.modal-nome {
    color: #7d7dde;
    font-size: 20px;
    margin-left: 6%;
}
h2 {
    color: #31339b;
    font-size: 15px;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    margin: 15px 0 75px;
}
h2::after {
    content: "";
    width: 100px;
    position: absolute;
    margin: 0 auto;
    height: 4px;
    border-radius: 1px;
    background: #7ac400;
    left: 0;
    right: 0;
    bottom: -20px;
}
input[type=text] {
    text-align:center;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 1px 1px 2px #333333;
    -moz-box-shadow: 1px 1px 2px #333333;
    -webkit-box-shadow: 1px 1px 2px #333333;
    background: #cccccc;
    border: 1px solid #000000;
    width: 50px
}

.btn.atualizar {
    background-color: #86e49d;
    color: #15682f;
    position: relative;
    left: 130px;
}

.btn.cancelar {
    background-color: #d893a3;
    color: #b30021;
   

}

/* Estilos para o botão de fechar */
.close {
    color: #f12424;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}