@charset "utf-8";
/* HDS sign-in page (my.hdscloudapps.com with no referrer): the HDS business card look - deep navy, cyan accents,
   white tracked capitals. Everything is scoped to .hds-brand, which index.php only adds when there is no ?referrer=,
   so the gibraltar / musqet / teya / other partner sign-in pages keep their own artwork and referrer.css untouched. */

.m-login.m-login--2.m-login-2--skin-1.hds-brand {
    background-color: #0a1628;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* heading: tracked capitals with the short cyan rule from the card */
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__head .m-login__title {
    color: #fff;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__head .m-login__title:after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 14px auto 0 auto;
    border-radius: 2px;
    background: #00c2ff;
}
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__head .m-login__desc {
    color: #94a3b8;
}

/* inputs: navy glass, cyan when focused (the inline black background on the markup is overridden here) */
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .form-control.m-input {
    background: rgba(10, 22, 40, .78) !important;
    border: 1px solid rgba(148, 163, 184, .30);
    border-radius: 10px !important;
    color: #e2e8f0;
    transition: border-color .15s, box-shadow .15s;
}
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .form-control.m-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .form-control.m-input:focus {
    border-color: #00c2ff;
    box-shadow: 0 0 0 3px rgba(0, 194, 255, .20);
    color: #fff;
}
/* stop the browser's autofill turning the boxes white */
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .form-control.m-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #0a1628 inset;
    -webkit-text-fill-color: #e2e8f0;
    caret-color: #fff;
}

/* remember me, forgotten password, call us */
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .m-login__form-sub .m-checkbox,
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__account .m-login__account-msg {
    color: #94a3b8;
}
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .m-login__form-sub .m-checkbox > span {
    border-color: rgba(148, 163, 184, .55);
}
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .m-login__form-sub .m-checkbox > input:checked ~ span {
    border-color: #00c2ff;
}
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .m-login__form-sub .m-checkbox > input:checked ~ span:after {
    border-color: #00c2ff;
}
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .m-login__form-sub .m-link,
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__account .m-login__account-link {
    color: #00c2ff;
}
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .m-login__form-sub .m-link:hover,
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__account .m-login__account-link:hover {
    color: #66dbff;
}

.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-link:hover:after {
    border-bottom-color: #00c2ff;
}

/* buttons: cyan with navy text for the main action, outlined for the secondary one */
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .m-login__form-action .m-login__btn {
    min-width: 150px;
    padding: .85rem 2.2rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #e2e8f0;
    background: transparent;
    border: 1px solid rgba(148, 163, 184, .55);
    box-shadow: none !important;
    transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .m-login__form-action .m-login__btn:hover {
    border-color: #00c2ff;
    color: #00c2ff;
}
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .m-login__form-action .m-login__btn.m-login__btn--primary {
    color: #0a1628;
    background: #00c2ff;
    border-color: #00c2ff;
    box-shadow: 0 8px 22px rgba(0, 194, 255, .28) !important;
}
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .m-login__form-action .m-login__btn.m-login__btn--primary:hover,
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .m-login__form-action .m-login__btn.m-login__btn--primary:focus {
    color: #0a1628;
    background: #3dd0ff;
    border-color: #3dd0ff;
    transform: translateY(-1px);
}
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__form .m-login__form-action .m-login__btn.m-login__btn--primary:active {
    background: #00a9de;
    border-color: #00a9de;
    transform: none;
}

/* the logo lockup is wide, so give it room and keep it clear of the heading */
.m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__logo img {
    max-width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
}

@media (max-width: 480px) {
    .m-login.m-login--2.m-login-2--skin-1.hds-brand .m-login__container .m-login__head .m-login__title {
        font-size: 1.25rem;
        letter-spacing: .14em;
    }
}