body {
    font-family: Arial, sans-serif;
    background: #1e1e2f;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    height: auto;
    margin: 0;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
}

.form-container {
    width: 360px;
    max-width: 100%;
    padding: 18px;
    box-sizing: border-box;
    background-color: #2c2f48;
    border-radius: 9px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;
    margin: 0 auto;
    height: auto;
    min-height: auto;
}

h2 {
    margin-bottom: 18px;
    font-size: 21.6px; /* 24 - 10% */
    color: white;
    text-align: center;
}

.input-group {
    margin-bottom: 13.5px; /* 15 - 10% */
    text-align: left;
}

.input-group label {
    font-size: 13.5px; /* 15 - 10% */
    color: white;
}

.input-group input,
.input-group select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px; /* 10 - 10% */
    margin-top: 4.5px; /* 5 - 10% */
    border: 1px solid #ddd;
    border-radius: 4.5px; /* 5 - 10% */
    font-size: 13.5px; /* 15 - 10% */
}

button {
    width: 100%;
    padding: 9px; /* 10 - 10% */
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4.5px; /* 5 - 10% */
    cursor: pointer;
    font-size: 14.4px; /* 16 - 10% */
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

button:hover:enabled {
    background-color: #218838;
}

.warning-message {
    color: red;
    font-size: 12.6px; /* 14 - 10% */
    margin-top: 9px; /* 10 - 10% */
}

.error-message, .success-message {
    font-size: 12.6px; /* 14 - 10% */
    margin-bottom: 13.5px; /* 15 - 10% */
}

.error-message {
    color: red;
}

.success-message {
    color: green;
}

.link {
    margin-top: 18px; /* 20 - 10% */
    text-align: center;
}

.voltar {
    text-decoration: none;
    color: lightgray;
}

.termos-container {
    display: flex;
    align-items: flex-start;
    gap: 9px; /* 10 - 10% */
    width: 100%;
    max-width: 360px; /* 400 - 10% */
    padding: 0 9px; /* 10 - 10% */
    box-sizing: border-box;
}

.chkbox {
    margin-left: -153px; /* -170 - 10% */
    flex-shrink: 0;
    width: 16.2px; /* 18 - 10% */
    height: 16.2px;
    cursor: pointer;
}

.termos-texto {
    font-size: 12.6px; /* 14 - 10% */
    color: white;
    line-height: 1.4;
    margin-left: -153px; /* -170 - 10% */
    flex: 1;
    cursor: pointer;
    user-select: none;
}

.termos-texto a {
    color: orange;
    text-decoration: none;
}

.termos-texto a:hover {
    text-decoration: underline;
}



       @media (max-width: 384px) {
            body {
                overflow-y: hidden;
                padding: 10px;
            }

            .form-container {
                width: 100%;
                margin-top: -80px;
                height: auto;
            }

        .termos-texto label{
        font-size: 10px;
        color: red;
        line-height: 1.4;
        margin-left: -120px;
        flex: 1;
        cursor: pointer;
        user-select: none;
    }

     .input-group label {
            font-size: 15px;
            color: white;
           
        }

         .chkbox {
        margin-left: -130px;
        flex-shrink: 0; 
        width: 18px;
        height: 18px;
        cursor: pointer;

    }

    .termos-texto {
        margin-top: 5px;
        margin-left: -130px;
        

        }

          @media (max-width: 360px) {
            body {
                overflow-y: auto;
                padding: 5px;
                align-items: flex-start;
                padding-top: 10px;
            }

            .form-container {
                width: calc(100% - 10px);
                max-width: calc(100% - 10px);
                margin: 0 auto;
                height: auto;
                min-height: auto;
                padding: 1rem;
            }

        .termos-texto label{
        font-size: 11px;
        color: red;
        line-height: 1.4;
        margin-left: -80px;
        flex: 1;
        cursor: pointer;
        user-select: none;
    }

     .input-group label {
            font-size: 14px;
            color: white;
           
        }

     .input-group input,
     .input-group select {
        font-size: 14px;
        padding: 0.6rem;
     }

     button {
        font-size: 14px;
        padding: 0.7rem;
     }

         .chkbox {
        margin-left: -130px;
        flex-shrink: 0; 
        width: 18px;
        height: 18px;
        cursor: pointer;

    }

    .termos-texto {
        margin-top: 5px;
        margin-left: -130px;
        

        }