/* MODAL */
.modal .content_modal span.i-success{
    display: table;
    margin:0 auto;
    width: 83px;
    height: 83px;
    background-image: url(../img/i-success.png);
}
.modal .content_modal span.i-mailG{
    display: table;
    margin:0 auto;
    width: 83px;
    height: 83px;
    background-image: url(../img/i-mailG.png);
}
.modal{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.9);
    position: fixed;
    top:0px;
    left: 0px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    /* Melhorar backdrop */
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.modal .content_modal{
    width: 800px;
    max-width: 800px;
    min-height: 400px;
    background: rgb(33,45,63);
    background: linear-gradient(0deg, rgba(33,45,63,1) 0%, rgba(56,75,97,1) 100%);
    border-radius: 14px;
    position: relative;
    padding: 20px;
}
.modal .content_modal .botoes{
    position: absolute;
    width: 100%;
    bottom:0px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
.modal .content_modal h2{
    text-align: center;
    color: #fff;
    font-size: 20px;
}
.modal .content_modal span.i-atencao{
    display: table;
    margin:0 auto;
    width: 83px;
    height: 83px;
    background-image: url(../img/i-atencao.png);
}
.wrongPass .content_modal{
    background: rgb(201,42,66);
    background: linear-gradient(40deg, rgba(201,42,66,1) 0%, rgba(81,10,50,1) 100%);
    width: 350px;
    min-height: 200px;
}
.wrongSucess .content_modal{
    background: #5CCEBF;
    background: linear-gradient(40deg, #227b6f 0%, #069a86 100%);
    width: 350px;
    min-height: 200px;
}
.modal .content_modal span.i-close{
    width: 20px;
    height: 20px;
    background-image: url(../img/i-close.png);
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    /* Círculo colorido ao redor do botão close */
    border-radius: 50%;
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fallback caso a imagem não carregue - usar um X em CSS */
.modal .content_modal span.i-close::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    line-height: 1;
    pointer-events: none;
    font-family: Arial, sans-serif;
}
.modal .content_modal .conteudo{
    width: 100%;
    max-height: 80vh;
    margin-top: 20px;
    line-height: 1.3;
    color: #B8C7E0;
    overflow-y: scroll;
    /* Melhorar legibilidade do texto */
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.modal .content_modal .conteudo::-webkit-scrollbar{
    width: 7px;
}
.modal .content_modal .conteudo::-webkit-scrollbar-track{
    padding: 0px 3px;
}
.modal .content_modal .conteudo::-webkit-scrollbar-thumb{
    background-color: #8094B5;
    border-radius: 20px;
}
.modal .content_modal .conteudo p{
    margin-bottom: 10px;
}
.modal .content_modal .conteudo span.titulo{
    display: block;
    font-size: 20px;
    font-family: 'Fira-Sans-Bold';
    margin-bottom: 10px;
}
.modal .content_modal .conteudo .opcoes{
    width: 100%;
    margin-top: 5px;
}
.modal .content_modal .conteudo .opcoes textarea{
    width: 100%;
    height: 90px;
    border:none;
    resize: none;
    border-radius: 14px;
    background-color: #394C63;
    /*box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.14), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.10064), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.083455), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.07), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.056545), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0393604);*/
    outline:none;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px;
    color: #fff;
}
.modal .content_modal .conteudo .opcoes textarea::placeholder{
    color: #8094B5;
}
.modal .content_modal .conteudo .opcoes .checkbox{
    width: 100%;
    padding: 10px;
    background-color: #394C63;
    box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.14), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.10064), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.083455), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.07), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.056545), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0393604);
    margin-bottom: 5px;
    border-radius: 14px;
    position: relative;
}
.modal .content_modal .conteudo .opcoes .checkbox input[type="checkbox"]{
    width: 18px;
    height: 18px;
    border: none;
}
.modal .content_modal .conteudo .opcoes .checkbox label{
    position: absolute;
    top:15px;
    left: 40px;
}
.modal .content_modal .conteudo .opcoes .radio{
    width: 100%;
    padding: 10px;
    background-color: #394C63;
    box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.14), 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.10064), 0px 22.3363px 17.869px rgba(0, 0, 0, 0.083455), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.07), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.056545), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0393604);
    margin-bottom: 5px;
    border-radius: 14px;
    position: relative;
}
.modal .content_modal .conteudo .opcoes .radio input[type="radio"]{
    width: 18px;
    height: 18px;
    border: none;
}
.modal .content_modal .conteudo .opcoes .radio label{
    position: absolute;
    top:15px;
    left: 40px;
}

/* RESPONSIVO PARA MOBILE */
@media (max-width: 768px) {
    .modal .content_modal {
        width: 95%;
        max-width: 95%;
        margin: 10px;
        padding: 15px;
    }
    
    .modal .content_modal span.i-close {
        width: 45px;
        height: 45px;
        top: 5px;
        right: 5px;
        background-color: #ff4757;
        border: 3px solid #ffffff;
        box-shadow: 0 3px 12px rgba(0,0,0,0.4);
    }
    
    .modal .content_modal span.i-close::after {
        color: #ffffff;
        font-size: 26px;
        font-weight: 900;
    }
    
    .modal .content_modal span.i-close:hover {
        background-color: #ff3742;
        transform: scale(1.05);
        box-shadow: 0 4px 16px rgba(255,71,87,0.5);
    }
    
    .modal .content_modal h2 {
        font-size: 18px;
        margin-right: 50px;
    }
    
    .modal .content_modal .conteudo {
        font-size: 14px;
        color: #C8D5F0;
    }
}