/* Mars Training Centre UK — login / register / verify screens.
   Official brand palette:
     primary         #714e94   primary-dark #362349
     brand-green     #63ac5b   mint         #dff1db
     background-soft #f5f1fa   charcoal     #1a1a1a   text-muted #a3a3a3

   Dark treatment over the London skyline artwork at
   images/backgrounds/mars-login-background.png. A light purple scrim sits
   between the artwork and the
   form so the panel stays readable wherever the image is bright, and
   #362349 is set as the base colour so the screen degrades to solid purple
   rather than white if the image is ever missing.

   The logo used here is images/logos/mars.svg — the KNOCKOUT variant, whose
   wordmark is #ffffff. It is correct only on a dark ground; if this screen is
   ever made light again, swap that file for the full-colour logo or the
   wordmark disappears. */

.login-dark {
    height:100vh !important;
    background:
        linear-gradient(105deg, rgba(54,35,73,0.28) 0%, rgba(54,35,73,0.10) 48%, rgba(54,35,73,0.02) 100%),
        url(../../../images/backgrounds/mars-login-background.png) #362349 !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    position:relative !important;
}

.login-dark form {
    max-width: 400px !important;
    width: 100% !important;
    background-color: rgba(30, 19, 41, 0.88) !important;
    padding: 40px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    transform: translate(-50%, -50%) !important;
    position: absolute !important;
    top: 50% !important;
    left: 25% !important;
    color: #ffffff !important;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.55) !important;
    -webkit-backdrop-filter: blur(14px) saturate(115%) !important;
    backdrop-filter: blur(14px) saturate(115%) !important;
}

.login-dark .illustration {
    text-align:center !important;
    padding:6px 0 24px !important;
}

.login-dark .illustration img{
    width:58%;
}

.login-dark form .form-control {
    background:#f5f1fa !important;
    border:1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius:6px !important;
    padding:10px 12px !important;
    height:auto !important;
    outline:none !important;
    color:#1a1a1a !important;
    box-shadow:none !important;
}

.login-dark form .form-control::placeholder {
    color:#a3a3a3 !important;
}

.login-dark form .form-control:focus {
    background:#ffffff !important;
    border-color:#63ac5b !important;
    box-shadow:0 0 0 3px rgba(99, 172, 91, 0.35) !important;
}

/* Green fill takes charcoal — white on #63ac5b is 2.77:1 and fails AA.
   Charcoal on green is 6.28:1. */
.login-dark form .btn-login {
    background:#63ac5b !important;
    border:none !important;
    border-radius:6px !important;
    padding:11px !important;
    box-shadow:none !important;
    margin-top:18px !important;
    text-shadow:none !important;
    outline:none !important;
    color:#1a1a1a !important;
    font-weight:600 !important;
}

.login-dark form .btn-login:hover, .login-dark form .btn-login:active {
    background:#dff1db !important;
    outline:none !important;
}

.login-dark form .btn-login:active {
    transform:translateY(1px) !important;
}

/* The blade hardcodes Bootstrap's .btn-danger on the Google button. Red fights
   the palette, so it is neutralised to a quiet outline on the dark panel. */
.login-dark form .btn-danger {
    background:rgba(255, 255, 255, 0.06) !important;
    border:1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius:6px !important;
    padding:10px !important;
    color:#ffffff !important;
    font-weight:500 !important;
    box-shadow:none !important;
}

.login-dark form .btn-danger:hover, .login-dark form .btn-danger:active {
    background:rgba(255, 255, 255, 0.14) !important;
    border-color:#63ac5b !important;
    color:#ffffff !important;
}

.login-dark form .btn-back {
    background:rgba(255, 255, 255, 0.10) !important;
    border:1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius:6px !important;
    padding:11px !important;
    box-shadow:none !important;
    text-shadow:none !important;
    outline:none !important;
    color:#ffffff !important;
}

.login-dark form .btn-back:hover, .login-dark form .btn-back:active {
    background:rgba(255, 255, 255, 0.18) !important;
    outline:none !important;
}

/* Secondary links. Mint reads 5.5:1+ on this panel; plain white would tie
   with the body text and flatten the hierarchy. */
.login-dark form .forgot {
    display:block !important;
    text-align:center !important;
    font-size:12px !important;
    color:#dff1db !important;
    opacity:1 !important;
    text-decoration:none !important;
}

.login-dark form .forgot:hover, .login-dark form .forgot:active {
    color:#ffffff !important;
    text-decoration:underline !important;
}

.login-dark form span.forgot {
    color:rgba(255, 255, 255, 0.62) !important;
}

.login-dark form .text-white {
    color:#dff1db !important;
}

#loading-image {
    max-width: 150px;
}

input{
    color:#1a1a1a !important;
}

.login-dark label {
    color:#ffffff !important;
}

[class*=icheck-]>input:first-child+input[type=hidden]+label::before, [class*=icheck-]>input:first-child+label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 3px;
    margin-left: -29px;
    margin-top:2px;
}

.icheck-primary>input:first-child:checked+input[type=hidden]+label::before, .icheck-primary>input:first-child:checked+label::before {
    background-color: #63ac5b;
    border-color: #63ac5b;
}

[class*=icheck-]>input:first-child:checked+input[type=hidden]+label::after, [class*=icheck-]>input:first-child:checked+label::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 10px;
    border: 2px solid #1a1a1a;
    border-left: none;
    border-top: none;
    transform: translate(6px, 4px) rotate(45deg);
    -ms-transform: translate(6px, 4px) rotate(45deg);
}

/* Keyed on website short_code, one selector per site. */
.alert-danger-mars, .alert-danger-marsar{
    color: #fff;
    background-color: #714e94;
    border-color: #714e94;
}

.btn-checkout {
    background:#714e94 !important;
    border:1px solid #714e94 !important;
    border-radius:6px !important;
    padding:11px !important;
    box-shadow:none !important;
    margin-top:26px !important;
    text-shadow:none !important;
    outline:none !important;
    color:#fff;
}

.btn-checkout:hover, .btn-checkout:active {
    background:#fff !important;
    outline:none !important;
    color:#714e94;
}

@media (max-width: 900px) {
    .login-dark {
        background-position: 64% center !important;
    }

    .login-dark form {
        left: 50% !important;
        width: calc(100% - 32px) !important;
        padding: 32px !important;
    }
}

@media (max-height: 680px) {
    .login-dark {
        min-height: 100vh !important;
        height: auto !important;
        overflow-y: auto !important;
        padding: 24px 0 !important;
    }

    .login-dark form {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 0 auto !important;
        transform: none !important;
    }
}