﻿
html, body {
    height: 100%;
}

body {
    margin: 0;
    overflow-y: scroll;
}

button,
a {
    outline: none !important;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.px-focus .input-field input:focus,
.input-field input:focus + label {
    border-bottom: 1px solid #B21F24 !important;
    -webkit-box-shadow: 0 1px 0 0 #B21F24 !important;
    box-shadow: 0 1px 0 0 #B21F24 !important;
}


@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/* Página de login */
.section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.container.login {
    max-width: 362px;
    padding: 0;
}

    .container.login .logo-praxio {
        width: 272px;
        height: inherit;
    }

    .container.login .praxio-encomendas {
        position: relative;
        margin: 0 0 68px 0;
    }

        .container.login .praxio-encomendas h1 {
            color: #686868;
            text-transform: uppercase;
            margin: 0;
            font-size: 30px;
            line-height: 27px;
            font-family: 'Open Sans', sans-serif;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    /* Formulários */
    .container.login .input-field {
        padding: 0;
        margin:0 0 0 0;
    }

    .container.login .form-field,
    .container.login .select-wrapper input {
        border: 1px solid #646566;
        border-radius: 6px;
        font-size: 14px;
        padding-left: 10px;
        padding-right: 10px;
        color: #646566;
        border-bottom: 1px solid #646566 !important;
        box-shadow: none !important;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin:0;
    }

        .container.login .form-field:focus {
            border: 1px solid #FF1537;
            border-bottom: 1px solid #FF1537 !important;
        }

    .container.login .dropdown-content li > a, .dropdown-content li > span {
        color: #646566;
    }

    .container.login .label-select {
        font-family: 'Open Sans', sans-serif;
    }

    .container.login .form-field:focus ~ .input-placeholder {
        color: #FF1537 !important;
    }

    .container.login .input-field > label:not(.label-icon).active {
        transform: translateY(-10px) scale(0.7);
    }

    .container.login .input-placeholder {
        width: 115px !important;
        text-align: center;
        background: white;
        font-size: 14px;
        left: 12px;
    }

        .container.login .input-placeholder.pass {
            width: 59px !important;
        }

    /* Descricoes e botoes */
    .container.login h6 {
        color: #3C3C3C;
        font-size: 29px;
        line-height: 37px;
        font-family: 'Open Sans', sans-serif;
        font-weight: bold;
        margin: 0 0 30px 0;
    }

    .container.login .action {
        margin: 0;
    }

        .container.login .action button,
        .container.login .action input {
            width: 100%;
            background: #FF1537;
            color: white;
            font-weight: bold;
            min-height: 60px;
            border-radius: 36px;
            box-shadow: none;
        }

            .container.login .action button:hover,
            .container.login .action input:hover {
                transition: 0.3s all;
                -webkit-box-shadow: 0px 10px 39px 0px rgba(234, 51, 73, 0.46);
                -moz-box-shadow: 0px 10px 39px 0px rgba(234, 51, 73, 0.46);
                box-shadow: 0px 10px 39px 0px rgba(234, 51, 73, 0.46);
            }

    .container.login .msgErroLogin {
        width: 100%;
    }

    h2.url-link {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        color: #3C3C3C;
        font-size: 20px;
        line-height: 27px;
        text-align: center;
        font-family: 'Open Sans', sans-serif;
        margin: 0 0 16px 0;
    }

.px-dropdown {
    margin: 0 0 30px 0; 
    display: block !important;
}

@media screen and (max-width: 813px) {
    .section {
        flex-wrap: wrap;
    }

    h2.url-link {
        position: relative;
        top: auto;
        left: auto;
        margin: 30px 0 16px 0
    }
}

@media screen and (max-width: 640px) {
    .container.login .praxio-encomendas {
        margin: 0 auto 48px;
        width: 227px;
    }

    .container.login .logo-praxio {
        width: 212px;
    }

    .container.login .praxio-encomendas h1 {
        font-size: 20px;
    }
}