/* ## Login screen for Primonial Hub ## */
/* Mobile first */



/*# FONTS*/
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    /*src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v11/kcf5uOXucLcbFOydGU24WALUuEpTyoUstqEm5AMlJo4.woff) format('woff');*/
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    /*src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');*/
}
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    /*src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');*/
}



/*# BASE CSS*/

html {
    font-size: 80%;
}
@media only screen and (min-width: 768px) {
    html {
        font-size: 100%;
    }
}

body, input, div, span {
    font-family: "Lato", sans-serif; font-style: normal; font-weight: 400;
}



/*# CSS STYLES*/

::-moz-selection {
    background-color: #00c7b2;
    color: #FFF
}

::selection {
    background-color: #00c7b2;
    color: #FFF
}

/*body has a blurred background image, crop for compensate blur edges*/
body {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #FFF;
}

.ie body {
    background: #FFF url("../images/login-background-blured.jpg") center 0 no-repeat;
    background-size: cover;
}

/* filter base64
    <svg height="0" xmlns="http://www.w3.org/2000/svg"><filter id="blurFilter"><feGaussianBlur in="SourceGraphic" stdDeviation="2"/></filter></svg>
*/
html:not(.ie) body::before {
    content: "";
    position: absolute; top: 0; left: 0;
    height: 100%; width: 100%;
    background: #FFF url("../images/login-background.jpg") center 0 no-repeat;
    /*background-image: url("../images/login-background-fun.jpg"); debug*/
    background-size: cover;
    transform: scale(1.02);

    filter: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGZpbHRlciBpZD0iYmx1ckZpbHRlciI+PGZlR2F1c3NpYW5CbHVyIGluPSJTb3VyY2VHcmFwaGljIiBzdGREZXZpYXRpb249IjIiLz48L2ZpbHRlcj48L3N2Zz4=#blurFilter");
    -webkit-filter: blur( 4px );
}


body::after {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

/* panel */
.login-panel {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 1.2rem;
}

    [class^="login-panel__"] {
        font-size: 1.2rem;
    }
    
    .login-panel__content{
        margin-top: 25px;
        background-color: rgba(255, 255, 255, 0.85);
        padding: 20px;
        border-radius : 2px;
    }

    .login-panel__logo {
        width: 200px;
        height: 46px;
    }
    @media only screen and (min-width: 768px) {
        .login-panel__logo {
            width: 350px;
            height: 81px;
        }
    }

    /* fields */
    .login-panel__fields {
        display: flex; flex-direction: column;
        max-width: 600px;
        margin: 2em 0;
    }
    @media only screen and (min-width: 768px) {
        .login-panel__fields {
            flex-direction: row; flex-wrap: wrap; justify-content: center;
        }
    }

        /* fields components: input, button.. */
        .login-panel__username, .login-panel__password, .login-panel__forget-field {
            color: #6D6D6D;
        }
        .login-panel__username, .login-panel__password

        {
            padding: .6em 1.5em;
            background-color: transparent;
            border: 2px solid rgba(255,255,255,0.9); border-radius: 3px;
            outline: none;


        }

        .login-panel__username {
            margin-bottom: .5em;
        }
        /*login button ,animated*/
        .login-panel__submit {
            position: relative;
            margin-top: 1em;
            padding: .6em 3.5em;
            overflow: hidden;
            background-color: #00c7b2;
            color: #fff;
            text-align: center; text-decoration: none;
            cursor: pointer;
            border:none;
        }
        .login-panel__submit:hover, .login-panel__submit:focus {
            background-color: #00b4a3;
            outline: none;
        }
        .login-panel__submit::before {
            content: "";
            position: absolute;
            width: 20px; height: 20px;
            top: 50%; left: 120%;
            transform: translateY( -50% );
            background-image: url("../images/arrow-right.svg"); background-size: cover;
            background-position: center 0; background-repeat: no-repeat;

            transition: left .3s;
        }
        .login-panel__submit:hover::before, .login-panel__submit:focus::before {
            left: 80%;
        }
        .login-panel__forget-link {
            color: #00c7b2;
            text-decoration: none;
        }
        .login-panel__forget-link:hover, .login-panel__forget-link:focus  {
            color: #00c7b2;
            text-decoration: underline;
        }
        @media only screen and (min-width: 768px) {
            .login-panel__password+.login-panel__message,
            .login-panel__username {
                margin-bottom: 0;
                margin-right: 1em;
            }
            .login-panel__message,
            .login-panel__username, .login-panel__password {
                width: calc( (100% - 1em) / 2 );
            }
            .login-panel__message,
            .login-panel__username, .login-panel__password, .login-panel__submit {
                flex: 0 0 auto;
            }
        }
        .login-panel--error{
            border:1px solid #EA000E;
        }
        .login-panel__message--full{
            flex:0 0 100%;
        }
        .login-panel__message{

            color:#EA000E;
            text-align: left;
            margin: 15px 0 0 0;
            opacity: 0;
            transition : opacity 0.3s linear;
            font-size: 0.95rem;
        }
        .login-panel__message.login-panel__message--show {
            opacity: 1;
         }