* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 0;
    outline: none;
    -webkit-appearance: none;
}

html, body {
    height: 100%
}

body {
    font-size: 16px;
    background-color: #ffffff;
    color: #465668;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    overflow: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
}

@media (min-width: 992px) {

    body {
        overflow: hidden;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
    -webkit-transition-delay: 9999s;
}

a {
    color: #5488c4;
    text-decoration: none;
    -webkit-transition: color 225ms ease-out;
    transition: color 225ms ease-out
}

a:hover,
a:active {
    color: rgb(84, 116, 153);
}
.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#app {
    font-family: Verdana;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 30px;
    width: 100%;
}

@media (min-width: 992px) {

    .main {
        width: 65%;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding-left: 120px;
        overflow-y: auto;
    }
}

.sidebar {
    border-right: 5px solid #0081c5;
    color: #ffffff;
    background: #0081c5 url('../modules//images/aanmelden/11.jpg') no-repeat right bottom;
    background-size: cover;
    display: none;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

@media (min-width: 992px) {

    .sidebar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

@media (min-width: 992px) {

    .sidebar {
        width: 35%;
    }
}

.slogan-container {
    max-width: 500px;
    width: 100%;
    padding: 50px;;
}

@media (min-width: 992px) {

    .slogan-container {
        padding: 60px;
    }
}

.slogan-title {
    font-size: 32px;
    line-height: 1;
    margin-bottom: 5px;
    opacity: 0;
    -webkit-animation: fadeSlideIn .5s .7s forwards;
    animation: fadeSlideIn .5s .7s forwards;
}

@media (min-width: 992px) {

    .slogan-title {
        font-size: 42px;
        margin-bottom: 10px;
    }
}

.slogan-subtitle {
    color: #fff;
    font-size: 16px;
    line-height: 1.28;
    opacity: 0;
    -webkit-animation: fadeSlideIn .3s .9s forwards;
    animation: fadeSlideIn .3s .9s forwards;;
}

@media (min-width: 992px) {

    .slogan-subtitle {
        font-size: 18px;
    }
}

.content {
    width: 100%;
    max-width: 330px;
    margin: auto 0;
    padding-bottom: 30px;;
}

@media (min-width: 768px) {

    .content {
        padding-bottom: 0;
    }
}

.content-header {
    text-align: center;
    margin-bottom: 30px;
}

@media (min-width: 992px) {

    .content-header {
        text-align: left;
    }
}

.content-footer {
    text-align: center;
    margin-top: 30px;
}

@media (min-width: 992px) {

    .content-footer {
        text-align: left;
    }
}

.logo {
    display: inline-block;
    width: 258px;
    height: 70px;
    margin-bottom: 15px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    background-image: url('../images/logos/sgr6/10.png');
}

@media (min-width: 992px) {

    .logo {
        margin-bottom: 30px;
        background-image: url('../images/logos/sgr6/10.png');
        width: 258px;
        height: 70px;
    }
}

.cta-title,
.cta-subtitle {
    display: block;
}

.cta-title {
    font-size: 20px;
    line-height: 1.25;
    margin-bottom: 5px;
}

.cta-subtitle {
    font-size: 14px;
    line-height: 1.4;
}

.form-group {
    position: relative;
}

.form-group .form-control {
    display: block;
}

.form-group + .form-group {
    margin-top: 20px;
}

.form-group label {
    margin-bottom: 5px;
    display: block;
}

.form-group.has-danger .form-control {
    -webkit-box-shadow: 0 0 4px 0 #f8ac0c;
    box-shadow: 0 0 4px 0 #f8ac0c;
    border-color: #f8ac0c;
}

.form-group.has-danger .form-text {
    color: #f8ac0c;
}

.form-control {
    font-size: 18px;
    width: 100%;
    height: 45px;
    line-height: 45px;
    border-radius: 3px;
    border: 2px solid #e9e9e9;
    -webkit-transition: border 225ms ease-out;
    transition: border 225ms ease-out;
color: #465668;
}

.form-control:active,
.form-control:focus {
    border-color: #bababa;
}

.form-text {
    display: block;
    margin-top: 10px;
}

.form-control--username,
.form-control--password,
.form-control--email,
.form-control--mfa {
    position: relative;
    padding-left: 40px;
}

.form-control-icon {
    pointer-events: none;
    position: absolute;
    z-index: 1;
    bottom: 0;
    height: 45px;
    width: 45px;
    background-position: center center;
    background-repeat: no-repeat;
}

.form-control-icon--mfa {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyM3B4IiB2aWV3Qm94PSIwIDAgMjAgMjMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQzLjIgKDM5MDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT51c2VyLXNoaWVsZC0xPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2VzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTG9naW4tLS1NRkEtJmFtcDstZm9jdXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NTIuMDAwMDAwLCAtNTg0LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0idXNlci1zaGllbGQtMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODUwLjAwMDAwMCwgNTg0LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IkZyYW1lXy1fMjRweCI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS1wYXRoIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjwvcmVjdD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJMaW5lX0ljb25zIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgMC4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGZpbGw9IiNFOUU5RTkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02LjI1MSwxNiBDNi4yNTEsMTMuNjk5IDcuNywxMi4yNSAxMC4wMDEsMTIuMjUgTDEwLjAwMSwxMi4yNSBDMTIuMzAyLDEyLjI1IDEzLjc1MSwxMy42OTkgMTMuNzUxLDE2IEw2LjI1MSwxNiBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgY3g9IjEwLjAwMSIgY3k9IjguNSIgcj0iMi41Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEwLjAwMSwyMyBDMC4xMTUsMjMgMC4wMDEsNi42OTQgMC4wMDEsNiBDMC4wMDEsNS42MzcgMC4xOTgsNS4zMDMgMC41MTUsNS4xMjYgTDkuNTE1LDAuMTI2IEM5LjgxOCwtMC4wNDIgMTAuMTg0LC0wLjA0MiAxMC40ODcsMC4xMjYgTDE5LjQ4Nyw1LjEyNiBDMTkuODA0LDUuMzAyIDIwLjAwMSw1LjYzNiAyMC4wMDEsNiBDMjAuMDAxLDYuNjk0IDE5Ljg4NywyMyAxMC4wMDEsMjMgWiBNMi4wMTcsNi41OCBDMi4xMjYsOS4zNDEgMy4wMDQsMjEgMTAuMDAxLDIxIEMxNi45OTgsMjEgMTcuODc2LDkuMzQyIDE3Ljk4NSw2LjU4IEwxMC4wMDEsMi4xNDMgTDIuMDE3LDYuNTggWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
}

.form-control-icon--username {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxN3B4IiB2aWV3Qm94PSIwIDAgMTYgMTciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQzLjIgKDM5MDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT51c2VyPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2VzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTG9naW4tLS1NRkEtJmFtcDstZm9jdXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NTQuMDAwMDAwLCAtMzk5LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODQwLjAwMDAwMCwgMTk4LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9ImZvcm0taXRlbSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDE1OC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0idXNlciI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjAwMDAwMCwgMzkuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRnJhbWVfLV8yNHB4Ij4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIHg9IjAiIHk9IjAiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IkxpbmVfSWNvbnMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuMDAwMDAwLCA0LjAwMDAwMCkiIGZpbGwtcnVsZT0ibm9uemVybyIgZmlsbD0iI0U5RTlFOSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTguMDAyLDguMDA2IEM1Ljc5Niw4LjAwNiA0LjAwMiw2LjIxMiA0LjAwMiw0LjAwNiBDNC4wMDIsMS44MDEgNS43OTYsMC4wMDYgOC4wMDIsMC4wMDYgQzEwLjIwOCwwLjAwNiAxMi4wMDIsMS44MDEgMTIuMDAyLDQuMDA2IEMxMi4wMDIsNi4yMTIgMTAuMjA4LDguMDA2IDguMDAyLDguMDA2IFogTTguMDAyLDIuMDA2IEM2Ljg5OSwyLjAwNiA2LjAwMiwyLjkwMiA2LjAwMiw0LjAwNiBDNi4wMDIsNS4xMDkgNi44OTksNi4wMDYgOC4wMDIsNi4wMDYgQzkuMTA1LDYuMDA2IDEwLjAwMiw1LjEwOSAxMC4wMDIsNC4wMDYgQzEwLjAwMiwyLjkwMiA5LjEwNSwyLjAwNiA4LjAwMiwyLjAwNiBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2LjAwMiwxNi4wMDYgTDAuMDAyLDE2LjAwNiBMMC4wMDIsMTUuMDA2IEMwLjAwMiwxMS40NzMgMy4yOTIsOS4wMDYgOC4wMDIsOS4wMDYgQzEyLjcxMiw5LjAwNiAxNi4wMDIsMTEuNDczIDE2LjAwMiwxNS4wMDYgTDE2LjAwMiwxNi4wMDYgWiBNMi4xNjEsMTQuMDA2IEwxMy44NDQsMTQuMDA2IEMxMy4yNDYsMTIuMTk4IDExLjAxMSwxMS4wMDYgOC4wMDMsMTEuMDA2IEM0Ljk5NSwxMS4wMDYgMi43NTksMTIuMTk4IDIuMTYxLDE0LjAwNiBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);
}

.form-control-icon--password {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIxOXB4IiB2aWV3Qm94PSIwIDAgMjAgMTkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQzLjIgKDM5MDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5rZXktMTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkxvZ2luLS0tTUZBLSZhbXA7LWZvY3VzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODUyLjAwMDAwMCwgLTQ5MS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg0MC4wMDAwMDAsIDE5OC4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJmb3JtLWl0ZW0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAyNTIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImtleS0xIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMC4wMDAwMDAsIDM5LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iRnJhbWVfLV8yNHB4Ij4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IkxpbmVfSWNvbnMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIuMDAwMDAwLCAyLjAwMDAwMCkiIGZpbGwtcnVsZT0ibm9uemVybyIgZmlsbD0iI0U5RTlFOSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTguMjkyLDcuMDY5IEwxOS43MDYsNS42NTUgTDE2Ljg3OSwyLjgyNyBMMTguMjkyLDEuNDE0IEwxNi44NzgsMCBMNy40ODcsOS4zOTMgTDcuNDg5LDkuMzk1IEM2Ljc1NCw4Ljk2OCA1LjkxMSw4LjcwNiA1LDguNzA2IEMyLjIzOSw4LjcwNiAwLDEwLjk0NSAwLDEzLjcwNiBDMCwxNi40NjcgMi4yMzksMTguNzA2IDUsMTguNzA2IEM3Ljc2MSwxOC43MDYgMTAsMTYuNDY3IDEwLDEzLjcwNiBDMTAsMTIuNTgxIDkuNjE1LDExLjU1NCA4Ljk4NywxMC43MTkgTDEyLjYzNiw3LjA3MSBMMTUuNDYzLDkuODk5IEwxNi44NzgsOC40ODYgTDE0LjA1LDUuNjU2IEwxNS40NjQsNC4yNDIgTDE4LjI5Miw3LjA2OSBaIE01LDE2LjcwNiBDMy4zNDMsMTYuNzA2IDIsMTUuMzYzIDIsMTMuNzA2IEMyLDEyLjA0OSAzLjM0MywxMC43MDYgNSwxMC43MDYgQzYuNjU3LDEwLjcwNiA4LDEyLjA0OSA4LDEzLjcwNiBDOCwxNS4zNjMgNi42NTcsMTYuNzA2IDUsMTYuNzA2IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
}

.form-control-icon--email {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSIwIDAgMjAgMTMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQzLjIgKDM5MDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5lbWFpbC1lbnZlbG9wZTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkxvZ2luIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODUwLjAwMDAwMCwgLTU1Ni4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg0MC4wMDAwMDAsIDI0NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJmb3JtLWl0ZW0iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAyNjYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImVtYWlsLWVudmVsb3BlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4LjAwMDAwMCwgMzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxnIGlkPSJGcmFtZV8tXzI0cHgiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS1wYXRoIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iTGluZV9JY29ucyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4wMDAwMDAsIDcuMDAwMDAwKSIgZmlsbC1ydWxlPSJub256ZXJvIiBmaWxsPSIjRTlFOUU5Ij4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOCwwIEwyLDAgQzAuODk3LDAgMCwwLjg5NyAwLDIgTDAsMTEgQzAsMTIuMTAzIDAuODk3LDEzIDIsMTMgTDE4LDEzIEMxOS4xMDMsMTMgMjAsMTIuMTAzIDIwLDExIEwyMCwyIEMyMCwwLjg5NyAxOS4xMDMsMCAxOCwwIFogTTE2LjExMywyIEwxMCw1LjgyIEwzLjg4NywyIEwxNi4xMTMsMiBaIE0yLDExIEwyLDMuMTc5IEw5LjQ3LDcuODQ4IEM5LjYzMiw3Ljk0OSA5LjgxNiw4IDEwLDggQzEwLjE4NCw4IDEwLjM2OCw3Ljk0OSAxMC41Myw3Ljg0OCBMMTgsMy4xNzggTDE4LjAwMSwxMSBMMiwxMSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
}

.btn {
    line-height: 41px;
    height: 41px;
    font-size: 15px;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    text-transform: uppercase;
    position: relative;
}

.btn > span {
    display: block;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    -webkit-transition: all 225ms ease-in-out;
    transition: all 225ms ease-in-out;
}

.btn .loading-indicator {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    left: 0;
    top: 0;
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    -webkit-transition: all 225ms ease-in-out;
    transition: all 225ms ease-in-out;
    overflow: hidden;
}

.btn .loading-spinner {
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    content: '';
    display: block;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSJ3aGl0ZSI+CiAgPHBhdGggb3BhY2l0eT0iLjI1IiBkPSJNMTYgMCBBMTYgMTYgMCAwIDAgMTYgMzIgQTE2IDE2IDAgMCAwIDE2IDAgTTE2IDQgQTEyIDEyIDAgMCAxIDE2IDI4IEExMiAxMiAwIDAgMSAxNiA0Ii8+CiAgPHBhdGggZD0iTTE2IDAgQTE2IDE2IDAgMCAxIDMyIDE2IEwyOCAxNiBBMTIgMTIgMCAwIDAgMTYgNHoiPjwvcGF0aD4KPC9zdmc+Cg==);
    background-size: 18px;
    -webkit-animation: spin .8s infinite linear;
    animation: spin .8s infinite linear;
}

.btn.loading > span {
    opacity: 0;
    -webkit-transform: translateY(-41px);
    transform: translateY(-41px);
}

.btn.loading .loading-indicator {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}

a.btn,
.btn-primary {
    margin-top: 30px;
    color: #ffffff;
    background-color: #0081c5;
    width: 100%;
    -webkit-transition: background-color 225ms ease-out;
    transition: background-color 225ms ease-out
}
a.btn-office {
margin-top: 30px;
color: #ffffff;
background-color: #DDDDDD;
width: 100%;
-webkit-transition: background-color 225ms ease-out;
transition: background-color 225ms ease-out;
background-image: url('../images/office365_btn.png');
background-repeat: no-repeat;
background-position: 15px 8px;
}
a.btn-google {
margin-top: 30px;
color: #ffffff;
background-color: #DDDDDD;
width: 100%;
-webkit-transition: background-color 225ms ease-out;
transition: background-color 225ms ease-out;
background-image: url('../images/google_btn.png');
background-repeat: no-repeat;
background-position: 15px 8px;
}
a.btn-stadgent {
margin-top: 30px;
color: #ffffff;
background-color: #DDDDDD;
width: 100%;
-webkit-transition: background-color 225ms ease-out;
transition: background-color 225ms ease-out;
background-image: url('../images/stadgent_btn.png');
background-repeat: no-repeat;
background-position: 15px 8px;
}
a.btn:hover,
a.btn:active,
.btn-primary:hover,
.btn-primary:active {
    background-color: #0081c5;
}

.errormessage {
    margin-top: 20px;
    margin-bottom: -10px;
    color: #f8ac0c;
    line-height: 21px;
}

.footer-navigation-item {
    display: block;
    font-size: 12px;
}

.footer-navigation-item + .footer-navigation-item {
    margin-top: 10px;
}

#resetPasswordButton,
#loginButton,#officeButton,#googleButton,#stadgentButton {
    display: block;
    text-align: center;
}

#mfa_token {
    display: none;
}

@-webkit-keyframes fadeSlideIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(80%);
        transform: translateY(80%);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        -webkit-transform: translateY(80%);
        transform: translateY(80%);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}