html, body {
   background: url('/_resources/themes/approval-login/images/security-background.svg') no-repeat center center / cover;
}

a {
    color: #FFFFFF;
}

a:hover,
a:focus,
a:active
{
    color: #FFFFFF;
}

h2 {
    color: #FFFFFF;
}


.approval-security-logo {
    display: block;
    width: min(72vw, 20rem);
    min-width: 10rem;
    max-width: 20rem;
    min-height: 3.5rem;
    height: clamp(3.5rem, 10vw, 6rem);
    max-height: 6rem;
    margin: 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.approval-security-logo--footer {
    width: min(56vw, 14rem);
    min-width: 8rem;
    max-width: 14rem;
    min-height: 2rem;
    height: clamp(2rem, 6vw, 3rem);
    max-height: 3rem;
}

.app-brand__name {
    margin-top: 0.75rem;
    color: #FFF;text-transform: uppercase;font-size:32px;
}

.silverstripe-brand .approval-security-logo {
    margin-top:20px;
}

.login-form__message.login-form__message--info a {
    display: inline-block;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    background: #DD0017;
    padding: 0.3em 0.8em;
    box-sizing: border-box;
    margin-top: 0.5em;
    margin-bottom: 1.5em;
    border-radius: 0.5em;
}

.login-form__message.login-form__message--info a:hover,
.login-form__message.login-form__message--info a:active
 {
    background: #333;
}

.login-form {
    background: #000;
}

.login-form .login-form-control--text .login-form-control__field, 
.login-form input.text
{
    background-color: #333333;
    border-color: #333333;
    outline: none;font-size:16px;
    color: #FFFFFF;
}

.login-form .login-form-control--text .login-form-control__field:focus, 
.login-form input.text:focus 
{
    background-color: #FFFFFF;
    color: #000000;
    border-color: #FFFFFF;
    outline: none;
}

.login-form__content, .login-form__message, .message {
    color: #FFFFFF;
}

.login-form-control--text .login-form-control__label, .field.text label {
    color: #FFF;
}
.login-form__message--warning, .message.warning {color:#fff;}
.field.checkbox label.right {
    color: #FFFFFF;
}

.btn-success:not(:disabled,.disabled), 
.btn-primary:not(:disabled,.disabled), 
input[type=submit]:not(:disabled,.disabled)
{
    background:#DD0017;
    color: #fff;
}

.btn-success:not(:disabled,.disabled):hover, 
.btn-success:not(:disabled,.disabled):focus, 
.btn-success:not(:disabled,.disabled).focus, 
.btn-success:not(:disabled,.disabled):active, 
.btn-success:not(:disabled,.disabled).active, 
.btn-primary:not(:disabled,.disabled):hover, 
.btn-primary:not(:disabled,.disabled):focus, 
.btn-primary:not(:disabled,.disabled).focus, 
.btn-primary:not(:disabled,.disabled):active, 
.btn-primary:not(:disabled,.disabled).active, 
input[type=submit]:not(:disabled,.disabled):hover, 
input[type=submit]:not(:disabled,.disabled):focus, 
input[type=submit]:not(:disabled,.disabled).focus, 
input[type=submit]:not(:disabled,.disabled):active, 
input[type=submit]:not(:disabled,.disabled).active {
    background: #DD0017;
    color: #fff;
}

.field .font-icon-help-circled {
    margin-left: 5px;
    font-size: 16px;
    color:#fff;
    vertical-align: middle;
    position: relative;
    top: 1px
}

@media (max-width:800px) {
    .silverstripe-brand .approval-security-logo {
        margin-top:120px;
    }
}