body {
    background-color: #282961;
    font-family: Arial;
}

.container {
    width: 420px;
    margin: auto;
    margin-top: 160px;
}

.container-expired-token {
    width: 600px;
    margin: auto;
    margin-top: 160px;
}

.logo-white {
    height: 42px;
}

.title {
    text-align: center;
    color: white;
}

.subtitle {
    text-align: center;
    color: darkgrey;
}

.subtitle-accent {
    font-weight: bold;
    text-decoration: darkgrey;
}

.input-field-text {
    margin-top: 40px;
    color: darkgrey;
}

.input-text {
    color: white;
    background: none;
}

.error {
    color: red;
}

input {
    background: none;
    border: 0px solid;
    height:30px;
    width:260px;
    color: white;
    width: 100%;
    border-bottom: 1px solid darkgrey;
    transition-duration: 0.5s;
}

input:focus {
    outline:none;
    border-bottom: 1px solid white;
}

.log-in-button {
    margin-top: 56px;
    text-align: center;
    color: #282961;
    background-color: white;
    height: 56px;
    border-radius: 8px;
    font-weight: bold;
    display: table;
    width: 100%;
    transition-duration: 0.5s;
    border: none;
}

.log-in-button:hover{
    cursor: pointer;
    background-color: darkgrey;
}

.notification {
    margin-top: 40px;
    text-align: center;
}

.notification-text {
    color: darkgrey;
    margin-left: 8px;
}

.notification:hover {
    cursor: pointer;
}

.alert {
    padding:15px;
    margin-bottom:20px;
    border:1px solid transparent;
    border-radius:4px;
}
.alert-info {
    color:#31708f;
    background-color:#d9edf7;
    border-color:#bce8f1;
}

@-webkit-keyframes autofill {
    to {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.color-white {
    color: white;
}

.align-center {
    text-align: center;
}