@font-face {
    font-family: 'dosis';
    src: url('dosis.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dosis-light';
    src: url('dosis-light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dosis-extra-light';
    src: url('dosis-extra-light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-size:16px;
    font-family:"dosis-extra-light", sans-serif;
    color: #223;
    text-align: center;
}

body::after {
    background : url(old_mathematics.png);
    content    : "";
    top        : 0;
    left       : 0;
    bottom     : 0;
    right      : 0;
    position   : absolute;
    z-index    : -1;
}

.auth-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.auth-form.with-logo {
}


h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    color:#657080;
    font-size:1.5em;
    margin:0;
} 

ul.errorlist {
    list-style-type: none;
}

input[type=checkbox] {
    cursor: pointer;
    font-size:1.3em;
    margin-bottom: 1em;
}

.bubble-help-mark:before {
    content  : "?";
}
.bubble-help-mark {
    display: inline-block;
    border-radius: 20px;
    background: #d0d0d0;
    color: black;
    width: 18px; 
    height: 18px;
    text-decoration: none;
    font-weight: bold;
}

input[type=text] ,
input[type=password] ,
input[type=submit] {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border-color:#bebebe;
    border-style: solid;
    border-width: 1px;
    font-size:1.3em;
    padding:.4em;
    margin-top: 4px;
    width:100%;
}

input.consent {
    border:0;

}

input:focus {
    border-color: #ffd322 !important;
    border-style: solid;
    border-width: 1px;
    outline-color:-moz-use-text-color !important; 
    outline-style:none !important; 
    outline-width:0 !important; 
}

#input-username {
    border:none;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
}

#input-password {
    border:none;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
}

.grad-blue:hover {
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1);
    box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.1);
}

.grad-blue:active {
    -webkit-box-shadow: inset 0px 1px 1px 0px #616161;
    -moz-box-shadow: inset 0px 1px 1px 0px #616161;
    box-shadow: inset 0px 1px 1px 0px #616161;
}

.grad-blue {
    color: #ffffff !important;
    background-color:#248de3;
    *background-color: #248de3;
    background-image:        -webkit-gradient(linear, 0 0, 0 100%, from(#248de3), to(#1282e0));
    background-image: -webkit-linear-gradient(top, #248de3, #1282e0);
    background-image:    -moz-linear-gradient(top, #248de3, #1282e0);
    background-image:      -o-linear-gradient(top, #248de3, #1282e0);
    background-image:         linear-gradient(to bottom, #248de3, #1282e0);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#248de3', endColorstr='#1282e0', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
}

::-webkit-input-placeholder {
    color: #aaa;
}

:-moz-placeholder { /* Firefox 18- */
    color: #aaa;
}

::-moz-placeholder {  /* Firefox 19+ */
    color: #aaa;
}

:-ms-input-placeholder {  
    color: #aaa;
}

.login-wrapper {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    width: 360px;
    top: 40px;
}

.input-wrapper {
    position: relative;
    width: 360px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
}

.input-wrapper .lost-pw {
    font-size: 0.9em;
    float: right;
}

h2.productname {
    font-family:"dosis-light", sans-serif;
    color:#657080;
    font-size:4em;
    margin:0;
    margin-top:-20px;
    margin-bottom:20px;
}

.light {
    font-family:"dosis-extra-light", sans-serif;
}

.error-msg {
    margin-top: 1em;
    font-size: 1.2em;
    color: #c03030;
}

.greet-msg {
    margin-top: 1em;
    font-size: 1.2em;
}

label {
    font-size: 1.2em;
}

div.footer {
    width:calc(100% - 30px);
    position:absolute;
    bottom:10px;
}

div.footer img {
    width: 100px;
    float:left;
}

div.footer span {
    float:right;
    margin-top:5px;
}

#box-logo {
    padding: 30px;
}

.input-wrapper .field {
    position: relative;
    text-align: left;
}
.input-wrapper .error {
    position: absolute;
    left: 370px;
    top: 12px;
    width: 300px;
    color: #c03030;
}
input[type=submit] {
    cursor: pointer;
}