@font-face {
    font-family: Bebas Neue;
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/bebas_neue/BebasNeue-Regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('../fonts/bebas_neue/BebasNeue-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/bebas_neue/BebasNeue-Regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/bebas_neue/BebasNeue-Regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/bebas_neue/BebasNeue-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/bebas_neue/BebasNeue-Regular.svg') format('svg'); /* Legacy iOS */
}

body {
    background: #143642;
}

.login-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 35px 0;
}

.login-logo {
    padding-bottom: 35px;
}

.login-field {
    padding: 45px 0;
}

.login-error {
    color: #FA4946;
}

.login-success {
    color: #08CC0A;
}


label {
    color: #FFFFFF;
    font-family: 'Bebas Neue', sans-serif;
}

input[type="text"] {
    width: 100%;
    /*padding: 12px 20px;*/
    margin: 8px 0;
    background: transparent;
    border: none;
    border-bottom: 3px solid grey;

    transition: padding 0.3s 0.2s ease;
    color: #FFFFFF;
}

input[type="text"]:focus {
    outline: none;
    border-bottom: 3px solid #FFFFFF;
    background: #143642;
    color: #FFFFFF;

    padding-bottom: 5px;
}

.login-button {
    background: #F5BB00;
    border-radius: 4px;
    color: #143642;
    padding: 8px 26px 5px 26px;
    border: none;
    font-weight: 700;
    font-size: 20px;
    font-family: Bebas Neue, sans-serif;
    text-transform: uppercase;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}

.login-buttonText {
    margin-right: 6px;
}