/*Colore del Placeholder per "tutti" i browser*/
/*Placeholder Custom*/
input::-webkit-input-placeholder {
    color: rgba(255,255,255,0.5);
}
/* Firefox > 19 */
input::-moz-placeholder {
    color: rgba(255,255,255,0.5);
}
/* Firefox < 19 */
input:-moz-placeholder {
    color: rgba(255,255,255,0.5);
    opacity: 1;
}
/* Internet Explorer 10 */
input:-ms-input-placeholder {
    color: rgba(255,255,255,0.5);
}

/*Le parti commentate come Struttura servono a posizionare correttamente gli elementi, 
    Custom sono le proprietà che probabilmente vanno cambiate nelle diverse skin*/

.skin-LogIn-PageBackground {
    /*Custom*/
    background: url(./Images/LoginPageBackground.jpg) no-repeat;

    /*Struttura*/
    background-size: cover;
}

.skin-LogIn-PanelBackground {
    /*Custom*/
    background-color: #263238;
    opacity: 0.95;
}

/*Le varie altezze cambietele a vostro rischio e pericolo*/
.skin-Login-PanelColumn {
    /*Struttura*/
    height: 100%;
    margin-right: 20%;
    margin-left: 20%;
}

.skin-LogIn-OmniaLogo {
    /*Custom*/
    background: url(./Images/LoginOmniaLogo.png) no-repeat center center;

    /*Struttura*/
    height: 30%;
}

.skin-LogIn-AziendaLogo {
    /*Custom*/
    background: url(./Images/LogoHeaderLogin.png) no-repeat center center;
    background-size: 55%;

    /*Struttura*/
    height: 16%;
}

.skin-LogIn-AziendaNome {
    text-align: center;
    color: white;
    font-family: RalewayRegular, sans-serif;
    font-size: 22px;
    /*Struttura*/
    height: 8%;
}

.skin-LogIn-FormContainer {
    /*Struttura*/
    text-align:center;
    height: 30%;
    padding-left: 7%;
    padding-right:7%;
}

.skin-LogIn-FormContainer input {
    /*Custom*/
    background-color: transparent;
    border: none;
    border: 1px solid white;
    color:white;
    font-family: RobotoLight, sans-serif;
    font-size: 15px;
    /*text-align: center;*/
    outline:none;    
    border-radius: 1000px;
    height: 14%;
    padding-left: 8%;

    /*Struttura*/
    width: 100%;
    margin-top: 8%;
    min-height: 25px;
}

    /*.skin-LogIn-FormContainer input::-webkit-input-placeholder {
        text-align: center;
    }
    .skin-LogIn-FormContainer input::-moz-placeholder {
        text-align: center;
    }
    .skin-LogIn-FormContainer input:-moz-placeholder {
        text-align: center;
    }
    .skin-LogIn-FormContainer input:-ms-input-placeholder {
        text-align: center;
    }*/

/*Colore del Placeholder Focus per "tutti" i browser*/
/*Placeholder Custom*/
input:focus::-webkit-input-placeholder {
    color: rgba(110, 132, 254, 1);
    color: var(--bg-color-light);
}
/* Firefox > 19 */
input:focus::-moz-placeholder {
    color: rgba(110, 132, 254, 1);
    color: var(--bg-color-light);
}
/* Firefox < 19 */
input:focus:-moz-placeholder {
    color: rgba(110, 132, 254, 1);
    color: var(--bg-color-light);
}
/* Internet Explorer 10 */
input:focus:-ms-input-placeholder {
    color: rgba(110, 132, 254, 1);
    color: var(--bg-color-light);
}

.skin-LogIn-FormContainer input.Error {
    /*Custom*/
    border: 1px solid #ff3d00;
}

.skin-LogIn-Button {
    /*Custom*/
    background-color: transparent;
    border: 1px solid white;
    border-radius: 1000px;
    cursor: pointer;

    /*Struttura*/
    display:table;
    width: 52%;
    margin-right: 24%;
    margin-left: 24%;
    height: 17%;
    margin-top: 5%;
}
    .skin-LogIn-Button:hover {
        /*Custom*/
        background-color: #304ffe;
        background-color: var(--bg-color-primary);
        border-color: #304ffe;
        border-color: var(--bg-color-primary);
    }
.skin-LogIn-Button span{
    /*Custom*/
    text-align: center;
    text-transform: uppercase;
    font-family: RalewayMedium, sans-serif;
    font-size: 15px;
    color:white;
    opacity:0.5;

    /*Struttura*/
    display: table-cell; 
    vertical-align: middle;
}
.skin-LogIn-Button:hover span{
    /*Custom*/
    opacity:1;
}

.skin-LogIn-ContactInfoContainer {
    /*Struttura*/
    width: 60%;
    height: 5%;
    position: absolute;
    bottom: 0;
    margin-bottom: 10%;
}

.skin-LogIn-VersionInfoContainer {
    /*Struttura*/
    width: 60%;
    height: 12px;
    position: absolute;
    bottom: 0;
    margin-bottom: 4%;

    display: inline-block;
    color: white;
    font-size: 10px;
    font-family: RobotoLight, sans-serif;
    text-decoration: none;
    text-align: center;
}

.skin-LogIn-EresultLogo {
    /*Custom*/
    background: url(./Images/LoginEresultLogo.png) no-repeat center right;
    /*Struttura*/
    width: 40%;
    height: 100%;
    display: inline-block;
}

.skin-LogIn-InfoSeparator {
    /*Custom*/
    width: 2px; /*Nota che aumentare la width potrebbe significare dover diminuire la width di skin-LogIn-EresultLogo e skin-LogIn-ContactInfo*/
    background-color: #304ffe;
    background-color: var(--bg-color-primary);
    /*Struttura*/
    height: 100%;
    margin-left: 1%;
    margin-right: 1%;
    display: inline-block;
}

.skin-LogIn-ContactInfo, .skin-LogIn-ContactInfo a {
    /*Custom*/
    color: white;
    font-size: 12px;
    font-family: RobotoLight, sans-serif;
    text-decoration: none;
    /*Struttura*/
    display: inline-block;
    width: 51%;
}

    .skin-LogIn-ContactInfo a {
        /*Custom*/
        font-family: Roboto, sans-serif;
        display: inline;
    }

        .skin-LogIn-ContactInfo a[target] {
            /*Custom*/
            font-style: italic;
        }


.skin-LogIn-PanelColorBand {
    /*Custom*/
    background-color: #304ffe;
    background-color: var(--bg-color-primary);
}

.skin-LogIn-ErrorText {
    /*Custom*/
    font-family: RobotoLight, sans-serif;
    font-size: 11px;
    color: #ff3d00;
    text-align: center;
    /*Struttura*/
    width: 100%;
    height: 20%;
    padding-top: 2%;
    margin: 0;
    visibility: hidden;
    overflow: hidden;
}

.skin-LogIn-ForgotPassword {
    /*Custom*/
    font-family: RobotoLight, sans-serif;
    font-size: 11px;
    color: #ababab;
    text-align: center;
    /*Struttura*/
    width: 100%;
    height: 10%;
    padding-top: 7%;
    margin: 0;
}

    .skin-LogIn-ForgotPassword:hover {
        color: white;
        cursor: pointer;
    }