html, body { margin: 0px; padding: 0px;  font-size: .9rem; }
html { height: 100%; }
body {
    /* Dimensão */
    min-height: 100%; 
    /* min-height: 100vh; */
    width: 100%;
    position: relative;
    font-size: 11px;

    /* Fallback para navegadores que não entendem Flexbox */
    text-align: center; 
    
    /* Flexbox com prefixos para versões antigas do Safari/iOS e IE10 */
    display: -webkit-box;      /* iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* Firefox 18- */
    display: -ms-flexbox;      /* IE 10 */
    display: -webkit-flex;     /* Chrome */
    display: flex;             /* Padrão Moderno */
    
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    /* Fundo com fallback de cor sólida */
    background-color: #2c3e50; 
    background-image: url('..\\image\\bg_vtlsdk.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;

    /* Sombra interna (Vinheta) com prefixos */
    -webkit-box-shadow: inset 0 0 100px 50px rgba(0,0,0,0.8);
    -moz-box-shadow: inset 0 0 100px 50px rgba(0,0,0,0.8);
    box-shadow: inset 0 0 100px 50px rgba(0,0,0,0.8);
}

.card-login {
    background: #ffffff; 
    background: rgba(255, 255, 255, 0.85);
    
    border-radius: 10px;
    width: 100%;
    max-width: 345px;
    padding: 8px;
    position: relative;
    
    /* Transição suave com prefixos */
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

    /* Backdrop filter (apenas navegadores modernos, ignorado pelos antigos) */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.card-login:hover {
    background: rgba(255, 255, 255, 1);
}

.tela-site {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    display: table;
    width: 100%;
    height: 100%; /* For at least Firefox */
    min-height: 100%;
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.5);
    box-shadow: inset 0 0 10px rgba(0,0,0,.5);
    text-shadow: 0 1px 1px rgba(0,0,0,.5);
}

.tela-conteiner {
    width: 345px;
    margin: 10%;
    /*transition: width 1s;
}