.login-container {
    position: relative;
    width: 100%;
    height: 97vh;
    background-color: #FFFFFF;
}
.zfe-logo {
    height: 160px;
    width: 160px;
}
.login-container .logo-container {
    position: absolute;
    background-color: transparent;
    width: 164px;
    height: 159px;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: scale(20) rotate(90deg);
    transform-origin: center;
    border-radius: 50%;
    padding: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation-name: login-logo-container-animation;
    animation-duration: 1200ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-delay: 600ms;
}

.login-container .logo-container .logo {
    opacity: 0;
    animation-name: login-logo-animation;
    animation-delay: 1600ms;
    animation-duration: 400ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    height: auto;
    width: 100%;
}

.login-container .company-logo {
    position: absolute;
    left: 19px;
    bottom: 0px;
    width: 80px;
    height: 20px;
    animation: login-company-logo-animation;
    animation-delay: 2700ms;
    animation-duration: 400ms;
    animation-fill-mode: forwards;
    opacity: 0;
}

.login-container .character-grid {
    position: absolute;
    top: calc(17% + 63px);
    left: calc(50% - 164px - 12px);
    width: 240px;
    height: 180px;
    z-index: 1;
}

.login-container .form-panel {
    position: absolute;
    background-color: transparent;
    z-index: 3;
    top: calc(17% + 164px);
    left: calc((50% - 164px - 12px) + 240px - 40px);
    box-shadow: 5px 5px rgba(0, 0, 0, 0.05);
    padding: 32px 32px 32px 32px;
    overflow: visible;
    width: auto;
    opacity: 0;
    max-width: 460px;
    animation-name: login-form-panel-animation;
    animation-delay: 2700ms;
    animation-duration: 530ms;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
}

.login-container .form-panel .form-title {
    color: #000000;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 48px;
    letter-spacing: 1.5px;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 16px;
    white-space: nowrap;
}

.login-container .form-panel input {
    color: #000000;
    font-weight: 600;
    font-size: 16px;
}

.login-container .form-panel > * {
    max-width: 0;
    animation-name: login-form-control-animation;
    animation-duration: 600ms;
    animation-delay: 2800ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

.login-container .form-panel button.btn {
    opacity: 0;
    animation-name: login-button-animation;
    animation-duration: 600ms;
    animation-delay: 2200ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

.login-container .form-panel .form-group:last-of-type {
    margin-bottom: 0;
}

.login-container.login-alternate-1 .content-panel {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    z-index: 2;
    overflow: hidden;
    animation-name: login-content-panel-animation;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    animation-duration: 670ms;
    animation-delay: 250ms;
    will-change: width;
}

.login-container.login-alternate-1 .logo-container {
    right: 0;
    top: 18%;
    left: auto;
    animation-name: login-logo-container-animation--alt1;
    animation-delay: 720ms;
    animation-duration: 670ms;
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
    will-change: transform;
    transform: translateX(100%);
    border-radius: 0;
}

.login-container.login-alternate-1 .logo-container .logo {
    animation: none;
    opacity: 1;
}

.login-container.login-alternate-1 .form-panel {
    top: calc(17% + 164px);
    left: calc(45% - 56px);
    animation-delay: 1890ms;
    animation-duration: 530ms;
}

.login-container.login-alternate-1 .form-panel > * {
    animation-delay: 1990ms;
}

.login-container.login-alternate-1 .character-grid {
    right: 45px;
    left: auto;
}

.login-container.login-alternate-1 .company-logo {
    animation-delay: 1890ms;
}

.login-container.login-no-animation .logo-container {
    animation: none;
    transform: none;
    height: 160px;
    width: 160px;
}

.login-container.login-no-animation .form-panel {
    background-color: #FFFFFF;
    width: auto;
    box-shadow: 5px 5px rgba(0, 0, 0, 0.05);
    opacity: 1;
    animation: none;
    transform: none;
}

.login-container.login-no-animation .form-panel > * {
    max-width: 100%;
    animation: none;
    transform: none;
}

.login-container.login-no-animation .form-panel button.btn {
    opacity: 1;
    animation: none;
    transform: none;
    float: right;
    cursor: pointer;
}

.login-container.login-no-animation .content-panel {
    width: 45%;
    animation: none;
    transform: none;
}

.login-container.login-no-animation .character-grid {
    animation: none;
    transform: none;
}

.login-container.login-no-animation .company-logo {
    opacity: 1;
    animation: none;
}

@keyframes login-logo-animation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes login-company-logo-animation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes login-logo-container-animation {
    0% {
        top: 50%;
        left: 50%;
        transform: scale(20) rotate(90deg);
        border-radius: 50%;
    }
    5% {
        top: 15%;
        left: 62.3%;
        transform: scale(1.9) rotate(97deg);
        border-radius: 20%;
    }
    15% {
        top: 16%;
        left: 65.5%;
        transform: scale(0.55) rotate(84deg);
        border-radius: 0;
    }
    30% {
        top: 16%;
        left: 66.1%;
        transform: scale(0.4) rotate(98deg);
        border-radius: 0;
    }
    45% {
        top: 16.5%;
        left: 67%;
        transform: scale(0.37) rotate(121deg);
        border-radius: 0;
    }
    60% {
        top: 16.6%;
        left: 67.3%;
        transform: scale(0.37) rotate(126deg);
        border-radius: 0;
    }
    85% {
        top: 16.6%;
        left: 67.6%;
        transform: scale(0.37) rotate(133deg);
        border-radius: 0;
    }
    100% {
        top: 17%;
        left: 47%;
        transform: scale(1) rotate(0deg);
        border-radius: 0;
    }
}

@keyframes login-form-character-grid-animation {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes login-form-panel-animation {
    0% {
        background-color: #FFFFFF;
        width: 0;
        box-shadow: none;
        opacity: 0;
    }
    60% {
        background-color: #FFFFFF;
        box-shadow: none;
        opacity: 1;
    }
    100% {
        background-color: #FFFFFF;
        width: auto;
        box-shadow: 5px 5px rgba(0, 0, 0, 0.05);
        opacity: 1;
    }
}

@keyframes login-form-control-animation {
    from {
        max-width: 0;
    }
    to {
        max-width: 100%;
    }
}

@keyframes login-graphic-panel-animation {
    from {
        background-position-x: 250px;
    }
    to {
        background-position-x: 0;
    }
}

@keyframes login-content-panel-animation {
    from {
        width: 100%;
    }
    to {
        width: 40%;
    }
}

@keyframes login-button-animation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes login-logo-container-animation--alt1 {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.character-grid {
    display: inline-block;
    pointer-events: none;
    animation-name: login-form-character-grid-animation;
    animation-duration: 1800ms;
}

.character-grid .character-grid-row .character-grid-col {
    display: inline-block;
    font-size: 40px;
    color: #000000;
    font-weight: 700;
    margin: 8px 8px 8px 8px;
    line-height: 20px;
    width: 20px;
}

.character-grid.animated .character-grid-row .character-grid-col {
    transform: scale(0);
    animation-name: character-grow-animation;
    animation-duration: 200ms;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

.character-grid.animated .character-grid-row .character-grid-col.character-distance-i {
    animation-delay: 0ms;
}

.character-grid.animated .character-grid-row .character-grid-col.character-distance-i {
    animation-delay: 30ms;
}

.character-grid.animated .character-grid-row .character-grid-col.character-distance-i {
    animation-delay: 60ms;
}

.character-grid.animated .character-grid-row .character-grid-col.character-distance-i {
    animation-delay: 90ms;
}

.character-grid.animated .character-grid-row .character-grid-col.character-distance-i {
    animation-delay: 120ms;
}

.character-grid.animated .character-grid-row .character-grid-col.character-distance-i {
    animation-delay: 150ms;
}

.character-grid.animated .character-grid-row .character-grid-col.character-distance-i {
    animation-delay: 180ms;
}

.character-grid.playing .character-grid-row .character-grid-col {
    animation-play-state: running;
}

.character-grid:not(.playing) .character-grid-row .character-grid-col {
    transform: scale(0);
    animation: none;
}

@keyframes character-grow-animation {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

@media (max-height: 700px) {
    .login-container.login-alternate-1 .form-panel {
        left: 40%;
        top: 17%;
    }
}

@media (max-width: 700px) {
    .login-container.login-alternate-1 {
        overflow-y: auto;
        height: 100vh;
    }

    .login-container.login-alternate-1:after {
        content: "";
        position: absolute;
        display: block;
        background-color: #FFFFFF;
        width: 48px;
        height: 65%;
        top: 35%;
        right: 0;
        z-index: 1;
    }

    .login-container.login-alternate-1 .content-panel {
        position: static;
    }

    .login-container.login-alternate-1 .content-panel .logo-container {
        right: 32px;
        z-index: 5;
        width: 88px;
        height: 88px;
        padding: 16px;
        top: calc(25% + 32px);
        transform: translateX(0);
        animation: none;
        transform: none;
    }

    .login-container.login-alternate-1 .content-panel .character-grid {
        display: none;
    }

    .login-container.login-alternate-1 .content-panel .company-logo.company-logo-image {
        display: none;
    }

    .login-container.login-alternate-1 .form-panel {
        left: 0;
        max-width: unset;
        width: calc(100% - 48px);
        height: 65%;
        top: 25%;
        padding: 24px 0 24px 48px;
        overflow: visible;
        z-index: 4;
        background-color: #FFFFFF;
        opacity: 1;
        animation: none;
        transform: none;
    }

    .login-container.login-alternate-1 .form-panel > * {
        max-width: 100%;
        animation: none;
        transform: none;
    }

    .login-container.login-alternate-1 .form-panel button.btn {
        opacity: 1;
        animation: none;
        transform: none;
    }

    .login-container.login-alternate-1 .form-panel .form-title {
        white-space: initial;
        text-align: right;
        padding-right: 88px;
        font-size: 30px;
        margin-top: 0;
        margin-left: -16px;
        margin-bottom: 48px;
    }

    .login-container.login-alternate-1 .form-panel .form-flat {
        background-color: #FFFFFF;
        margin-bottom: 24px;
    }

}

@media (max-height: 400px), (max-width: 350px) {
    .login-container .form-panel .form-title {
        font-size: 24px;
    }
}
/* Metric Regular */
@font-face {
    font-weight: 400;
    font-style: normal;
    font-family: 'Metric';
    src: url(../../../fonts/metric-regular.woff) format('woff');
}

/* Metric Bold */
@font-face {
    font-weight: 700;
    font-family: 'Metric';
    font-style: normal;
    src: url(../../../fonts/metric-bold.woff) format('woff');
}


html {
    font-size: 62.5%;
}

body {
    font-size: 16px;
    font-family: "Metric", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #323435;
    letter-spacing: 0.2px;
    line-height: 19px;
}

*::-moz-selection {
    background: #0073E7;
    color: #FFFFFF;
}

*::selection {
    background: #0073E7;
    color: #FFFFFF;
}

label,
input,
button,
textarea {
    font-family: "Metric", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
}

select {
    height: 32px;
    width: 100%;
    line-height: 16px;
    font-size: 14px;
    color: #000000;
    background-color: transparent;
    border: solid rgba(101, 102, 104, 0.64);
    border-width: 0 0 1px 0;
    border-radius: 0;
    padding: 7px 0 7px 0;
    box-shadow: none;
    box-sizing: border-box;
    margin-bottom: 0;
    text-align: left;
}

h1 {
    font-size: 48px;
    font-weight: 700;
    font-style: normal;
    margin-top: 24px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

h1 b, h1 strong {
    font-weight: 700;
}

.text-secondary, .text-default {
    color: rgba(0, 0, 0, 0.56);
}

.text-disabled {
    color: #cececf;
}

.text-muted {
    color: #DCDEDF;
}

.uppercase {
    text-transform: uppercase;
}

/* Font icon mappings */
.btn {
    padding: 7px 16px 7px 16px;
    margin: 0 0 0 0;
    font-size: 14px;
    font-weight: 700;
    border-radius: 1px;
    border-style: solid;
    border-width: 2px;
    background-image: none;
    line-height: 14px;
    height: 32px;
    min-width: 96px;
    max-width: 288px;
    box-shadow: none;
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.16s ease-out, border-color 0.16s ease-out, box-shadow 0.16s ease-out;
    webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.btn.btn-icon-only {
    min-width: 32px;
    min-height: 32px;
    padding-left: 7px;
    padding-right: 7px;
}

.btn:focus, .btn:active:focus {
    outline: 0;
    transition: background-color 0.16s ease-out, border-color 0.16s ease-out, box-shadow 0.16s ease-out;
}

.btn:active, .btn.active {
    box-shadow: none;
}

.btn:hover {
    transition: background-color 0.16s ease-out, border-color 0.16s ease-out, box-shadow 0.16s ease-out;
    box-shadow: 2px 2px rgba(0, 0, 0, 0.15);
}

.btn:disabled, .btn:disabled:hover, .btn:disabled:active {
    cursor: default;
    pointer-events: none;
}

.btn:not(.btn-icon-only) i + span {
    margin-left: 4px;
    vertical-align: top;
}

.btn + .btn, .btn + .btn-group {
    margin-left: 4px;
}

.btn.pull-right + .btn, .btn.pull-right + .btn-group {
    margin-left: 0;
    margin-right: 4px;
}

.btn-group + .btn, .btn-group + .btn-group {
    margin-left: 4px;
}


.btn.login-button,
.open > .dropdown-toggle.login-button {
    color: #FFFFFF;
    background-color: #0073E7;
    border-color: #0073E7;
}

.btn.login-button:not(.btn-icon-only),
.open > .dropdown-toggle.login-button:not(.btn-icon-only) {
    min-width: 96px;
}

.btn.login-button:focus,
.open > .dropdown-toggle.login-button:focus {
    color: #FFFFFF;
    background-color: #0073E7;
    border-color: #0073E7;
    box-shadow: unset;
    animation: qtm-keyframes-colorAndWaterDrop--primary 0.4s cubic-bezier(0, 0.3, 1, 0.7);
}

.btn.login-button:hover,
.open > .dropdown-toggle.login-button:hover {
    color: #FFFFFF;
    background-color: #0073E7;
    border-color: transparent;
    box-shadow: 2px 2px rgba(0, 0, 0, 0.15);
}

.btn.login-button:active, .btn.login-button:focus:active,
.open > .dropdown-toggle.login-button:active,
.open > .dropdown-toggle.login-button:focus:active {
    color: #FFFFFF;
    background-color: #1668C1;
    border-color: transparent;
}

.btn.login-button:hover, .btn.login-button:focus:hover,
.open > .dropdown-toggle.login-button:hover,
.open > .dropdown-toggle.login-button:focus:hover {
    box-shadow: 2px 2px rgba(0, 0, 0, 0.15);
}

.btn.login-button:focus:hover:active,
.open > .dropdown-toggle.login-button:focus:hover:active {
    box-shadow: none;
}


/* Font icon mappings */
label, .control-label {
    color: rgba(0, 0, 0, 0.56);
    font-size: 16px;
    font-weight: 400;
}

label:disabled, label .disabled, .control-label:disabled, .control-label .disabled {
    color: #cececf;
}

.has-error label, .has-error .control-label {
    color: rgba(0, 0, 0, 0.56);
}

.has-error label:disabled, .has-error label .disabled, .has-error .control-label:disabled, .has-error .control-label .disabled {
    color: #cececf;
}

.has-warning label, .has-warning .control-label {
    color: rgba(0, 0, 0, 0.56);
}

.has-warning label:disabled, .has-warning label .disabled, .has-warning .control-label:disabled, .has-warning .control-label .disabled {
    color: #cececf;
}

.form-group {
    margin-bottom: 16px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-flat .form-group, .form-innerLabel .form-group {
    position: relative;
    margin-top: 32px;
    margin-bottom: 16px;
}

.form-flat .form-group > label, .form-innerLabel .form-group > label {
    position: absolute;
    top: -20px;
    color: rgba(0, 0, 0, 0.56);
    font-size: 14px;
    transition: 0.4s cubic-bezier(0.69, 0.98, 0.23, 1);
    -webkit-transition: 0.4s cubic-bezier(0.69, 0.98, 0.23, 1);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.input-top {
    margin-bottom: 16px;
    position: relative;
}

.input-top::after {
    clear: both;
    display: table;
    content: "";
}


/* Font icon mappings */
textarea,
select.form-control,
input[type="email"],
input[type="text"],
input[type="password"],
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="number"],
input[type="range"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="week"] {
    height: 32px;
    width: 100%;
    line-height: 16px;
    font-size: 16px;
    color: #000000;
    background-color: transparent;
    border: solid rgba(101, 102, 104, 0.64);
    border-width: 0 0 1px 0;
    border-radius: 0;
    padding: 7px 0 7px 0;
    box-shadow: none;
    box-sizing: border-box;
    margin-bottom: 0;
    text-align: left;
}

textarea:focus, textarea:focus:hover,
select.form-control:focus,
select.form-control:focus:hover,
input[type="email"]:focus,
input[type="email"]:focus:hover,
input[type="text"]:focus,
input[type="text"]:focus:hover,
input[type="password"]:focus,
input[type="password"]:focus:hover,
input[type="color"]:focus,
input[type="color"]:focus:hover,
input[type="date"]:focus,
input[type="date"]:focus:hover,
input[type="datetime"]:focus,
input[type="datetime"]:focus:hover,
input[type="datetime-local"]:focus,
input[type="datetime-local"]:focus:hover,
input[type="month"]:focus,
input[type="month"]:focus:hover,
input[type="number"]:focus,
input[type="number"]:focus:hover,
input[type="range"]:focus,
input[type="range"]:focus:hover,
input[type="search"]:focus,
input[type="search"]:focus:hover,
input[type="tel"]:focus,
input[type="tel"]:focus:hover,
input[type="time"]:focus,
input[type="time"]:focus:hover,
input[type="url"]:focus,
input[type="url"]:focus:hover,
input[type="week"]:focus,
input[type="week"]:focus:hover {
    border-color: #0073E7;
    box-shadow: unset;
    outline: none;
}

textarea:hover,
select.form-control:hover,
input[type="email"]:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="color"]:hover,
input[type="date"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="month"]:hover,
input[type="number"]:hover,
input[type="range"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="time"]:hover,
input[type="url"]:hover,
input[type="week"]:hover {
    border-color: #656668;
}

textarea:disabled,
select.form-control:disabled,
input[type="email"]:disabled,
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="color"]:disabled,
input[type="date"]:disabled,
input[type="datetime"]:disabled,
input[type="datetime-local"]:disabled,
input[type="month"]:disabled,
input[type="number"]:disabled,
input[type="range"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="time"]:disabled,
input[type="url"]:disabled,
input[type="week"]:disabled {
    color: #cececf;
    border-color: #cececf;
    background-color: transparent;
}


input[type="password"] {
    font-size: 16px;
}

.form-flat textarea,
.form-flat select.form-control,
.form-flat input[type="email"],
.form-flat input[type="text"],
.form-flat input[type="password"],
.form-flat input[type="color"],
.form-flat input[type="date"],
.form-flat input[type="datetime"],
.form-flat input[type="datetime-local"],
.form-flat input[type="month"],
.form-flat input[type="number"],
.form-flat input[type="range"],
.form-flat input[type="search"],
.form-flat input[type="tel"],
.form-flat input[type="time"],
.form-flat input[type="url"],
.form-flat input[type="week"],
.form-innerLabel textarea,
.form-innerLabel select.form-control,
.form-innerLabel input[type="email"],
.form-innerLabel input[type="text"],
.form-innerLabel input[type="password"],
.form-innerLabel input[type="color"],
.form-innerLabel input[type="date"],
.form-innerLabel input[type="datetime"],
.form-innerLabel input[type="datetime-local"],
.form-innerLabel input[type="month"],
.form-innerLabel input[type="number"],
.form-innerLabel input[type="range"],
.form-innerLabel input[type="search"],
.form-innerLabel input[type="tel"],
.form-innerLabel input[type="time"],
.form-innerLabel input[type="url"],
.form-innerLabel input[type="week"] {
    height: 32px;
    width: 100%;
    line-height: 16px;
    font-size: 16px;
    color: #000000;
    background-color: transparent;
    border: solid rgba(101, 102, 104, 0.64);
    border-width: 0 0 1px 0;
    border-radius: 0;
    padding: 7px 0 7px 0;
    box-shadow: none;
    box-sizing: border-box;
    margin-bottom: 0;
    text-align: left;
}

.form-flat textarea:focus, .form-flat textarea:focus:hover,
.form-flat select.form-control:focus,
.form-flat select.form-control:focus:hover,
.form-flat input[type="email"]:focus,
.form-flat input[type="email"]:focus:hover,
.form-flat input[type="text"]:focus,
.form-flat input[type="text"]:focus:hover,
.form-flat input[type="password"]:focus,
.form-flat input[type="password"]:focus:hover,
.form-flat input[type="color"]:focus,
.form-flat input[type="color"]:focus:hover,
.form-flat input[type="date"]:focus,
.form-flat input[type="date"]:focus:hover,
.form-flat input[type="datetime"]:focus,
.form-flat input[type="datetime"]:focus:hover,
.form-flat input[type="datetime-local"]:focus,
.form-flat input[type="datetime-local"]:focus:hover,
.form-flat input[type="month"]:focus,
.form-flat input[type="month"]:focus:hover,
.form-flat input[type="number"]:focus,
.form-flat input[type="number"]:focus:hover,
.form-flat input[type="range"]:focus,
.form-flat input[type="range"]:focus:hover,
.form-flat input[type="search"]:focus,
.form-flat input[type="search"]:focus:hover,
.form-flat input[type="tel"]:focus,
.form-flat input[type="tel"]:focus:hover,
.form-flat input[type="time"]:focus,
.form-flat input[type="time"]:focus:hover,
.form-flat input[type="url"]:focus,
.form-flat input[type="url"]:focus:hover,
.form-flat input[type="week"]:focus,
.form-flat input[type="week"]:focus:hover,
.form-innerLabel textarea:focus,
.form-innerLabel textarea:focus:hover,
.form-innerLabel select.form-control:focus,
.form-innerLabel select.form-control:focus:hover,
.form-innerLabel input[type="email"]:focus,
.form-innerLabel input[type="email"]:focus:hover,
.form-innerLabel input[type="text"]:focus,
.form-innerLabel input[type="text"]:focus:hover,
.form-innerLabel input[type="password"]:focus,
.form-innerLabel input[type="password"]:focus:hover,
.form-innerLabel input[type="color"]:focus,
.form-innerLabel input[type="color"]:focus:hover,
.form-innerLabel input[type="date"]:focus,
.form-innerLabel input[type="date"]:focus:hover,
.form-innerLabel input[type="datetime"]:focus,
.form-innerLabel input[type="datetime"]:focus:hover,
.form-innerLabel input[type="datetime-local"]:focus,
.form-innerLabel input[type="datetime-local"]:focus:hover,
.form-innerLabel input[type="month"]:focus,
.form-innerLabel input[type="month"]:focus:hover,
.form-innerLabel input[type="number"]:focus,
.form-innerLabel input[type="number"]:focus:hover,
.form-innerLabel input[type="range"]:focus,
.form-innerLabel input[type="range"]:focus:hover,
.form-innerLabel input[type="search"]:focus,
.form-innerLabel input[type="search"]:focus:hover,
.form-innerLabel input[type="tel"]:focus,
.form-innerLabel input[type="tel"]:focus:hover,
.form-innerLabel input[type="time"]:focus,
.form-innerLabel input[type="time"]:focus:hover,
.form-innerLabel input[type="url"]:focus,
.form-innerLabel input[type="url"]:focus:hover,
.form-innerLabel input[type="week"]:focus,
.form-innerLabel input[type="week"]:focus:hover {
    border-color: #0073E7;
    box-shadow: unset;
    outline: none;
}

.form-flat textarea:hover,
.form-flat select.form-control:hover,
.form-flat input[type="email"]:hover,
.form-flat input[type="text"]:hover,
.form-flat input[type="password"]:hover,
.form-flat input[type="color"]:hover,
.form-flat input[type="date"]:hover,
.form-flat input[type="datetime"]:hover,
.form-flat input[type="datetime-local"]:hover,
.form-flat input[type="month"]:hover,
.form-flat input[type="number"]:hover,
.form-flat input[type="range"]:hover,
.form-flat input[type="search"]:hover,
.form-flat input[type="tel"]:hover,
.form-flat input[type="time"]:hover,
.form-flat input[type="url"]:hover,
.form-flat input[type="week"]:hover,
.form-innerLabel textarea:hover,
.form-innerLabel select.form-control:hover,
.form-innerLabel input[type="email"]:hover,
.form-innerLabel input[type="text"]:hover,
.form-innerLabel input[type="password"]:hover,
.form-innerLabel input[type="color"]:hover,
.form-innerLabel input[type="date"]:hover,
.form-innerLabel input[type="datetime"]:hover,
.form-innerLabel input[type="datetime-local"]:hover,
.form-innerLabel input[type="month"]:hover,
.form-innerLabel input[type="number"]:hover,
.form-innerLabel input[type="range"]:hover,
.form-innerLabel input[type="search"]:hover,
.form-innerLabel input[type="tel"]:hover,
.form-innerLabel input[type="time"]:hover,
.form-innerLabel input[type="url"]:hover,
.form-innerLabel input[type="week"]:hover {
    border-color: #656668;
}

select.form-control {
    padding-top: 0;
    padding-bottom: 0;
}

select.form-control option {
    padding: 8px 24px 8px 24px;
}

.login-container .logo-container .logo {
    opacity: 0;
    animation-name: login-logo-animation;
    animation-delay: 1600ms;
    animation-duration: 400ms;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    height: auto;
    width: 100%;
}

.login-container .company-logo.company-logo-image {
    background-repeat: no-repeat;
    background-size: 80px;
    background-image: url(data:image/png;base64,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); }

.login-container.login-alternate-1 .form-panel {
    top: calc(18% + 164px);
    left: calc(45% - 56px);
    animation-delay: 1890ms;
    animation-duration: 530ms;
}
.alert.alert-danger, .alert.alert-error {
    color: #E5004C;
    background-color: transparent; }
.alert.alert-danger::before, .alert.alert-error::before {
    content: url("../images/errorIcon.png");
    width:16px;
    height:16px;
}
.alert.alert-danger .alert-link, .alert.alert-error .alert-link {
    color: inherit; }
.alert {
    min-height: 24px;
    font-size: 14px;
    padding: 0 0 0 24px;
    border: none;
    border-radius: 0;
    margin-bottom: 16px;
    text-align: left;
    width: 100%;
    color: #656668;
    font-weight: 400; }
.alert::before {
    height: 16px;
    width: 16px;
    margin-top: 2px;
    margin-right: 0;
    margin-bottom: 2px;
    margin-left: -24px;
    display: inline-block;
    float: left;
}
.alert.alert-success::before {
    content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxjaXJjbGUgc3R5bGU9ImZpbGw6IzFBQUM2MDsiIGN4PSI4IiBjeT0iOCIgcj0iOCIvPg0KPHBvbHlnb24gc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIHBvaW50cz0iNywxMi40MTQgMy4yOTMsOC43MDcgNC43MDcsNy4yOTMgNyw5LjU4NiAxMS4yOTMsNS4yOTMgMTIuNzA3LDYuNzA3ICIvPg0KPC9zdmc+DQo="); }
.alert.alert-success .alert-link {
    color: inherit; }

@keyframes zfe-spinner {
    to {transform: rotate(360deg);}
}

@-webkit-keyframes zfe-spinner {
    to {-webkit-transform: rotate(360deg);}
}

.zfe-spinner {
    visibility: hidden;
    min-width: 30px;
    min-height: 30px;
}

.zfe-spinner:before {
    content: 'Loading…';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-top: -13px;
    margin-left: -13px;
}

.zfe-spinner:not(:required):before {
    content: '';
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #03ade0 ;
    animation: zfe-spinner .6s linear infinite;
    -webkit-animation: zfe-spinner .6s linear infinite;
}

.login-spinner {
    position: relative;
}

.logout-spinner {
    position: absolute;
    top: 5px;
    left: 100%;
    margin-left: 10px;
}
@media (max-height: 700px) {
    .login-container.login-alternate-1 .form-panel {
        left: 40%;
        top: 17%; } }

@media (max-width: 700px) {
    .login-container.login-alternate-1 {
        overflow-y: auto;
        height: 100vh; }
    .login-container.login-alternate-1:after {
        content: "";
        position: absolute;
        display: block;
        background-color: #FFFFFF;
        width: 48px;
        height: 65%;
        top: 35%;
        right: 0;
        z-index: 1; }
    .login-container.login-alternate-1 .content-panel {
        position: static; }
    .login-container.login-alternate-1 .content-panel .logo-container .zfe-logo {
        right: 32px;
        z-index: 5;
        width: 88px;
        height: 88px;
        padding: 16px;
        top: calc(25% + 32px);
        transform: translateX(0);
        animation: none;
        transform: none;
    }
    .login-container.login-alternate-1 .content-panel .character-grid {
        display: none; }
    .login-container.login-alternate-1 .content-panel .company-logo.company-logo-image {
        display: none; }
    .login-container.login-alternate-1 .form-panel {
        box-shadow: none;
        left: 0;
        max-width: unset;
        width: calc(100% - 48px);
        height: 50%;
        top: 25%;
        padding: 24px 0 24px 48px;
        overflow: visible;
        z-index: 4;
        background-color: #FFFFFF;
        opacity: 1;
        animation: none;
        transform: none; }
    .login-container.login-alternate-1 .form-panel > * {
        max-width: 100%;
        animation: none;
        transform: none; }
    .login-container.login-alternate-1 .form-panel button.btn {
        opacity: 1;
        animation: none;
        transform: none; }
    .login-container.login-alternate-1 .form-panel .form-title {
        white-space: initial;
        text-align: left;
        padding-right: 88px;
        font-size: 30px;
        margin-top: 0;
        margin-left: -16px;
        margin-bottom: 48px; }
    .login-container.login-alternate-1 .form-panel .form-flat {
        background-color: #FFFFFF;
        margin-bottom: 24px; }
    .login-container.login-alternate-1 .graphic-panel {
        height: calc(25% + 64px);
        width: 100%;
        background-position-x: 0;
        background-attachment: unset;
        animation: none;
        transform: none; } }

@media (max-height: 400px), (max-width: 500px) {
    .login-container.login-alternate-1 .form-panel .form-title {
        font-size: 22px;
        margin-top: 4px; } }

@keyframes character-grow-animation {
    from {
        transform: scale(0); }
    to {
        transform: scale(1); } }

.button-notification {
    line-height: 60px;
    text-align: center;
}

.notification-error{
    line-height: 40px;
    text-align: center;
}

.header {
    margin: 0 0 15px;
    text-align: center;
    padding-top:15%;
}