@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,500);
body,
html {
    margin: 0;
    height: 100%;
}

input {
    border: none;
    padding: 0pt 20pt;
    box-sizing: border-box;
}

button:focus {
    outline: none;
}

::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.65);
}

::-webkit-input-placeholder .input-line:focus +::input-placeholder {
    color: #fff;
}

.highlight {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    cursor: pointer;
    transition: color .2s ease;
}

.highlight:hover {
    color: #fff;
    transition: color .2s ease;
}

.spacing {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-weight: 300;
    text-align: center;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.65)
}

.input-line:focus {
    outline: none;
    border-color: #fff;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

.ghost-round {
    cursor: pointer;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 25px;
    color: rgba(255, 255, 255, 0.65);
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    font-size: 19px;
    font-size: 1.2rem;
    font-family: roboto;
    font-weight: 300;
    line-height: 2.5em;
    margin-top: auto;
    margin-bottom: 25px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

.ghost-round:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

.input-line {
    background: none;
    margin-bottom: 10px;
    line-height: 2.4em;
    color: #fff;
    font-family: roboto;
    font-weight: 300;
    letter-spacing: 0px;
    letter-spacing: 0.02rem;
    font-size: 19px;
    font-size: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.65);
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

.full-width {
    width: 100%;
}

.input-fields {
    margin-top: 25px;
}

.container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #eee;
    height: 100%;
    background: #1f2d3b;
    background: -webkit-linear-gradient(#4c4373, #365673);
    background: linear-gradient(#4c4373, #365673);
}

.content {
    min-width: 200pt;
    padding: 20pt;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
    z-index: 5;
}

.welcome {
    font-weight: 300;
    margin: 10pt;
    text-align: center;
    font-size: 20pt;
    font-size: 2rem;
    letter-spacing: 0px;
    letter-spacing: 0.05rem;
}

.subtitle {
    text-align: center;
    line-height: 1em;
    font-weight: 100;
    letter-spacing: 0px;
    letter-spacing: 0.02rem;
}

.window {
    z-index: 100;
    color: #fff;
    font-family: roboto;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
    box-shadow: 0px 15px 50px 10px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    width: 400pt;
    background: transparent;
}

.forgot-password {
    padding: 10pt;
    text-align: center;
}
.forgot-password a:link, .forgot-password a:visited, .forgot-password a:hover, .forgot-password a:active {
    color: deepskyblue;
}

.buttons {
    text-align: center;
    height: 70pt;
}

.inProgress {
    display: none;
}

.notInProgress {
    display: block;
}

.lds-ripple {
    display: none;
    position: relative;
    width: 80px;
    height: 80px;
}
.lds-ripple div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}
@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}


#message {
    font-size: 90%;
    color: white;
    padding: 10pt;
}

@media only screen and (max-width: 600px)
and (-webkit-min-device-pixel-ratio: 2) {
    .window {
        width: 100%;
        height: 100%;
    }
    .content {
        margin: auto;
        margin-top: 10%;
    }
}

/*loading*/