@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,700);
@import url(https://fonts.googleapis.com/css?family=Khand:400,500,300);

html, body {
    min-height: 100% !important;
    height: 100%;
}
body {
    margin:0;
    padding:0;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px;
    color: black;
    background: #f5f5f5;
    height: 100vh;
    position: relative;
}

::-webkit-input-placeholder { /* Edge */
    font-family: 'Roboto', sans-serif !important;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-family: 'Roboto', sans-serif !important;
}

::placeholder {
    font-family: 'Roboto', sans-serif !important;
}
textarea
{
    font-family: 'Roboto', sans-serif !important;
}

/*Input text*/
.inputText {
    padding: 10px; border-radius:4px; border:1px solid #ccc; min-width: 80%; margin: 3px; max-width: 100%; -webkit-appearance: textfield;
}

/*Input text*/
.inputSmallText {
    padding: 5px; border-radius:2px; border:1px solid #ccc; min-width: 80%; margin: 2px; max-width: 100%; -webkit-appearance: textfield;
}



.bold {
    font-weight: bold;
}

#textTitle {
    margin-top: 20px;
    font-weight: bold;
    font-size: 16px;
    color: black
}

.titleBoxBlue {
    padding: 10px;
    margin: auto;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 6px;margin-top: 40px; background: #0F2027;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color:white
}

.titleBoxShadowed {
    padding: 10px;
    margin-top: 30px;
    margin: auto;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 6px; margin-top: 20px; margin-bottom: 30px
}

.errorField {
    padding: 5px;
    color: #ff0000;
    display: none;
}



/*Login buttons*/
a.fb {
    font-family: Lucida Grande, Helvetica Neue, Helvetica, Arial, sans-serif;
    display: inline-block;
    font-size: 14px;
    padding: 13px 30px 15px 44px;
    background: #3A5A97;
    color: #fff !important;
    text-shadow: 0 -1px 0 rgba(0,0,20,.4);
    text-decoration: none !important;;
    line-height: 1;
    position: relative;
    border-radius: 5px;
}
a.login {
    font-family: Lucida Grande, Helvetica Neue, Helvetica, Arial, sans-serif;
    display: inline-block;
    font-size: 14px;
    padding: 13px 30px 15px 30px;
    background: #0a600a;
    color: #fff !important;;
    text-shadow: 0 -1px 0 rgba(0,0,20,.4);
    text-decoration: none !important;;
    line-height: 1;
    position: relative;
    border-radius: 5px;
}

a.register {
    font-family: Lucida Grande, Helvetica Neue, Helvetica, Arial, sans-serif;
    display: inline-block;
    font-size: 14px;
    padding: 13px 30px 15px 30px;
    background: #13252E;
    color: #fff !important;;
    text-shadow: 0 -1px 0 rgba(0,0,20,.4);
    text-decoration: none !important;;
    line-height: 1;
    position: relative;
    border-radius: 5px;
}

.connect:before {
    display: inline-block;
    position: relative;
    background-image: url(data:image/png;base64,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);
    height: 23px;
    background-repeat: no-repeat;
    background-position: 0px 3px;
    text-indent: -9999px;
    text-align: center;
    width: 29px;
    line-height: 23px;
    margin: -8px 7px -7px -30px;
    padding: 2 25px 0 0;
    content: "f";
}

/* The Error Box */
#errorDiv {
    display:none;width:90%;
    border:1px solid #ccc;
    -webkit-box-shadow: 4px 3px 14px -7px rgba(122,122,122,1);
    -moz-box-shadow: 4px 3px 14px -7px rgba(122,122,122,1);
    box-shadow: 4px 3px 14px -7px rgba(122,122,122,1);
    padding:10px;
    bottom:16px;
    height:26px;
    background: #333;
    color:#fff;
    z-index:50;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    position: fixed;
    text-align: center; border-radius:5px; font-weight:700; font-size:14px
}

/* The Error Box */
#confirmationDiv {
    display:none;width:90%;
    border:1px solid #ccc;
    -webkit-box-shadow: 4px 3px 14px -7px rgba(122,122,122,1);
    -moz-box-shadow: 4px 3px 14px -7px rgba(122,122,122,1);
    box-shadow: 4px 3px 14px -7px rgba(122,122,122,1);
    padding:10px;
    bottom:16px;
    height:26px;
    background: #025955;
    color:#fff;
    z-index:50;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    position: fixed;
    text-align: center; border-radius:5px; font-weight:700; font-size:14px
}

@media (min-width: 1px) and (max-width: 979px) {
    .left-half {
        background-color: white;
        position: absolute;
        left: 0px;
        width: 100%;
        height: 100%;
    }

    .right-half {
        flex: 1;
        background-color: white;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        min-height: 100%;
        width: 100%;
    }

    .center-cropped {
        display: none;
    }

    .titleBox {
        width: 90%;
    }

    .eyePassword {
        position: absolute; top:25px; right:-5px;
    }

    #headerLogo {
        width: 100%; margin: auto
    }
    #headerMenu {
        width: 100%; margin: auto
    }

    .imgLogo {
        width: 35px
    }


}

@media (min-width: 980px) {

    .left-half {
        flex: 1;
        background-color: white;
        position: absolute;
        left: 0px;
        width: 50%;
        min-height: 100%;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

    }

    .right-half {
        background-color: white;
        flex: 1;
        width: 50%;
        right: 0px;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
        min-height: 100%;
        position: absolute;
    }

    .center-cropped {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        flex: 1;
        text-align: center;
        position: fixed;

    }

    .titleBox {
        width: 70%;
    }

    .eyePassword {
        position: absolute; top:25px; right:10px
    }

    #headerLogo {
        width: 800px; margin: auto
    }

    #headerMenu {
        width: 800px; margin: auto
    }

    .imgLogo {
        width: 30px
    }

}