@charset "UTF-8";



label {
    width: 100%;
    margin-bottom: 4px;
    color: var(--one);
    font-size: var(--fs-sm);
}

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 16px;
    border-radius: 4px;
    border: 1px solid var(--one);
    outline: none;
}
input:focus {
    background-color: var(--one-slim);
    border: 2px solid var(--one);
}

button {
    width: 100%;
    text-align: center;
    border: none;
    cursor: pointer;
}
button:hover { font-weight: bold; }

    button.text {
        padding: 12px;
        background-color: transparent;
    }
    button.filled {
        padding: 12px;
        color: #fff;
        border-radius: 4px;
        background-color: var(--one);
    }
    button.link {
        width: auto;
        color: #0026ff;
        background-color: transparent;
    }


h1 {
    width: 100%;
    color: var(--one);
    text-align: center;
    font-size: var(--fs-xl);
    font-weight: bold;
}
h2 {
    width: 100%;
    text-align: center;
    color: var(--one);
}
h3 {
    width: 100%;
    text-align: center;
    color: var(--one);
}





/* Estilos do formulário de login */




.login .password-box {
    width: 100%;
    position: relative;
}
    .password-box .viewer {
        width: 48px;
        height: 37px;
        position: absolute;
        top: 2px;
        right: 2px;
        border: none;
        background-color: transparent;
        background-repeat: no-repeat;
        background-size: 24px 24px;
        background-position: center center;
        background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="%23ffffff"><path stroke="%23a8a8a8" stroke-linejoin="round" stroke-width="2" d="M29 16c0 3-5.82 9-13 9S3 19 3 16s5.82-9 13-9 13 6 13 9z"/><circle cx="16" cy="16" r="5" stroke="%23a8a8a8" stroke-linejoin="round" stroke-width="2"/></svg>');
    };
    .password-box .viewer.show-key { background-image: url(); }
    .password-box .viewer.show-key:hover { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="%23ffffff"><path stroke="%23202020" stroke-linejoin="round" stroke-width="2" d="M29 16c0 3-5.82 9-13 9S3 19 3 16s5.82-9 13-9 13 6 13 9z"/><circle cx="16" cy="16" r="5" stroke="%23202020" stroke-linejoin="round" stroke-width="2"/></svg>'); }
    .password-box .viewer.hide-key { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="%23ffffff"><path fill="%23a8a8a8" d="M22 16a1 1 0 10-2 0h2zm-6 4a1 1 0 100 2v-2zm-6-4a1 1 0 102 0h-2zm6-4a1 1 0 100-2v2zm-2.776 11.68a1 1 0 00-.448 1.95l.448-1.95zm-7.9-2.007a1 1 0 001.351-1.475l-1.35 1.475zM19.242 8.436a1 1 0 00.518-1.932l-.518 1.932zm7.358 1.822a1 1 0 10-1.34 1.484l1.34-1.484zM28 16c0 .464-.243 1.203-.853 2.116-.593.888-1.471 1.845-2.578 2.727C22.351 22.611 19.314 24 16 24v2c3.866 0 7.329-1.611 9.816-3.593 1.246-.993 2.271-2.099 2.994-3.18C29.515 18.172 30 17.037 30 16h-2zM4 16c0-.464.243-1.203.853-2.116.593-.888 1.471-1.845 2.578-2.727C9.649 9.389 12.686 8 16 8V6c-3.866 0-7.329 1.611-9.816 3.593-1.246.993-2.271 2.098-2.994 3.18C2.485 13.828 2 14.963 2 16h2zm16 0a4 4 0 01-4 4v2a6 6 0 006-6h-2zm-8 0a4 4 0 014-4v-2a6 6 0 00-6 6h2zm4 8c-.952 0-1.881-.114-2.776-.32l-.448 1.95c1.031.236 2.111.37 3.224.37v-2zm0-16c1.118 0 2.205.158 3.24.436l.52-1.932A14.489 14.489 0 0016 6v2zm9.258 3.742c.899.812 1.6 1.655 2.071 2.427.482.79.671 1.423.671 1.831h2c0-.928-.389-1.93-.963-2.872-.586-.962-1.42-1.95-2.438-2.87l-1.34 1.484zM6.675 20.198c-.878-.804-1.563-1.636-2.021-2.395C4.184 17.024 4 16.403 4 16H2c0 .917.38 1.906.941 2.836.573.95 1.389 1.926 2.384 2.837l1.35-1.475z"/><path stroke="%23a8a8a8" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 25L25 7"/></svg>'); }
    .password-box .viewer.hide-key:hover { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="%23ffffff"><path fill="%23202020" d="M22 16a1 1 0 10-2 0h2zm-6 4a1 1 0 100 2v-2zm-6-4a1 1 0 102 0h-2zm6-4a1 1 0 100-2v2zm-2.776 11.68a1 1 0 00-.448 1.95l.448-1.95zm-7.9-2.007a1 1 0 001.351-1.475l-1.35 1.475zM19.242 8.436a1 1 0 00.518-1.932l-.518 1.932zm7.358 1.822a1 1 0 10-1.34 1.484l1.34-1.484zM28 16c0 .464-.243 1.203-.853 2.116-.593.888-1.471 1.845-2.578 2.727C22.351 22.611 19.314 24 16 24v2c3.866 0 7.329-1.611 9.816-3.593 1.246-.993 2.271-2.099 2.994-3.18C29.515 18.172 30 17.037 30 16h-2zM4 16c0-.464.243-1.203.853-2.116.593-.888 1.471-1.845 2.578-2.727C9.649 9.389 12.686 8 16 8V6c-3.866 0-7.329 1.611-9.816 3.593-1.246.993-2.271 2.098-2.994 3.18C2.485 13.828 2 14.963 2 16h2zm16 0a4 4 0 01-4 4v2a6 6 0 006-6h-2zm-8 0a4 4 0 014-4v-2a6 6 0 00-6 6h2zm4 8c-.952 0-1.881-.114-2.776-.32l-.448 1.95c1.031.236 2.111.37 3.224.37v-2zm0-16c1.118 0 2.205.158 3.24.436l.52-1.932A14.489 14.489 0 0016 6v2zm9.258 3.742c.899.812 1.6 1.655 2.071 2.427.482.79.671 1.423.671 1.831h2c0-.928-.389-1.93-.963-2.872-.586-.962-1.42-1.95-2.438-2.87l-1.34 1.484zM6.675 20.198c-.878-.804-1.563-1.636-2.021-2.395C4.184 17.024 4 16.403 4 16H2c0 .917.38 1.906.941 2.836.573.95 1.389 1.926 2.384 2.837l1.35-1.475z"/><path stroke="%23202020" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 25L25 7"/></svg>'); }


/* Estilos do formulário de recuperação de credenciais */
.recovery img { margin-bottom: 24px; }
.recovery h1 { margin-bottom: 8px; }
.recovery h2 { margin-bottom: 40px; }

/* Estilos do formulário de cadastro */
.register img { margin-bottom: 40px; }
.register h1 { margin-bottom: 24px; }
.register h2 { margin-bottom: 64px; }

/* Estilos do formulário de apps */
form.apps {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #fff;
}
.apps .wrapper {
    width: 100%;
    height: calc(100% - 144px);
    position: absolute;
    top: 80px;
    left: 0;
    padding: 48px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto;
}
.apps .wrapper .app {
    width: 144px;
    height: 144px;
    margin: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    flex-wrap: nowrap;
    border-radius: 8px;
    border: 2px solid var(--one);
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 64px 64px;
    background-position: center 16px;
}
    .apps .wrapper .app:hover {  background-color: var(--one); }
        .apps .wrapper .app span,
        .apps .wrapper .app strong {
            width: 100%;
            color: var(--one);
            text-align: center;
            text-overflow: clip;
            white-space: wrap;
            overflow: hidden;
        }
        .apps .wrapper .app span { font-size: 12.5px; }
        .apps .wrapper .app strong { font-weight: bold; }
        .apps .wrapper .app:hover span { color: #f8f8f8; }
        .apps .wrapper .app:hover strong { color: #f8f8f8; }

    /* [crm] Lubrax Mais Web - QR Code */
    .apps .wrapper .app.easy-lead { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/easy-lead.svg"); }
    .apps .wrapper .app.easy-lead:hover { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/easy-lead.svg"); }

    /* [crm] Lubrax Mais Web - QR Code */
    .apps .wrapper .app.qr-code { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/qr-code.svg"); }
    .apps .wrapper .app.qr-code:hover { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/qr-code.svg"); }
    
    /* [crm] Lubrax Mais Web - CRM */
    .apps .wrapper .app.crm { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/crm.svg"); }
    .apps .wrapper .app.crm:hover { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/crm.svg"); }

    /* [fast] Lubrax Mais Web - Fast */
    .apps .wrapper .app.fast { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/fast.svg"); }
    .apps .wrapper .app.fast:hover { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/fast.svg"); }

    /* [portal] Lubrax Mais Web - Portal */
    .apps .wrapper .app.portal { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/portal.svg"); }
    .apps .wrapper .app.portal:hover { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/portal.svg"); }

    /* [profit] Lubrax Mais Web - Simulador de lucratividade */
    .apps .wrapper .app.profit { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/profit.svg"); }
    .apps .wrapper .app.profit:hover { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/profit.svg"); }
    
    /* [profile] Lubrax Mais Web - Perfil do usuário */
    .apps .wrapper .app.profile { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/profile.svg"); }
    .apps .wrapper .app.profile:hover { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/profile.svg"); }

    /* [sales] Lubrax Mais Web - Vendas */
    .apps .wrapper .app.sales { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/sales.svg"); }
    .apps .wrapper .app.sales:hover { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/sales.svg"); }

    /* [settings] Lubrax Mais Web - Configurador */
    .apps .wrapper .app.settings { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/settings.svg"); }
    .apps .wrapper .app.settings:hover { background-image: url("https://cdn.lubraxmaissystem.com/icons/apps/color/settings.svg"); }

    .apps .wrapper .app.unavailable,
    .apps .wrapper .app.unavailable:hover {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
    }