*, ::after, ::before {
            box-sizing: border-box
        }

        html {
            font-family: Roboto, "San Francisco", "Segoe UI", "Helvetica Neue", "Lucida Grande", Helvetica, Arial, sans-serif;
            line-height: 1.15;
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: transparent
        }

        body {
            margin: 0;
            font-size: 16px
        }

        [tabindex="-1"]:focus {
            outline: 0 !important
        }

        footer, header {
            display: block
        }

        b, strong {
            font-weight: bolder
        }

        svg {
            overflow: hidden;
            vertical-align: middle
        }

        button {
            border-radius: 0
        }

        button:focus {
            outline: 1px dotted;
            outline: 5px auto -webkit-focus-ring-color
        }

        button, input, optgroup, select, textarea {
            margin: 0;
            font-family: inherit;
            font-size: inherit;
            line-height: inherit
        }

        button, input {
            overflow: visible
        }

        button, select {
            text-transform: none
        }

        [type=button], [type=reset], [type=submit], button {
            -webkit-appearance: button
        }

        [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
            padding: 0;
            border-style: none
        }

        .hf-tf {
            position: relative;
            display: inline-block;
            font-size: 16px;
            line-height: 1.5;
            width: 100%;
            margin-top: 8px
        }

        .hf-tf > input {
            display: block;
            box-sizing: border-box;
            margin: 0;
            border: none;
            border-top: solid 24px transparent;
            border-bottom: solid 1px rgba(0, 0, 0, .6);
            border-radius: 0;
            padding: 0 12px 8px 2px;
            width: 100%;
            height: inherit;
            color: rgba(0, 0, 0, .87);
            -webkit-text-fill-color: currentColor;
            background-color: rgba(0, 0, 0, 0);
            box-shadow: none;
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
            transition: border-bottom .2s, background-color .2s
        }

        .hf-tf > input + span {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: block;
            box-sizing: border-box;
            padding: 8px 12px 0 2px;
            color: rgba(0, 0, 0, .6);
            font-size: 75%;
            line-height: 16px;
            pointer-events: none;
            transition: color .2s, font-size .2s, line-height .2s
        }

        .hf-tf > input + span::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            display: block;
            width: 100%;
            height: 2px;
            background-color: #7120ff;
            -ms-transform-origin: bottom center;
            transform-origin: bottom center;
            -ms-transform: scaleX(0);
            transform: scaleX(0);
            transition: transform .3s
        }

        .hf-tf:hover > input {
            border-bottom-color: rgba(0, 0, 0, .87)
        }

        .hf-tf > input:not(:focus):placeholder-shown + span {
            font-size: inherit;
            line-height: 64px
        }

        .hf-tf > input:focus {
            outline: 0
        }

        .hf-tf > input:focus + span {
            color: #7120ff
        }

        .hf-tf > input:focus + span::after {
            -ms-transform: scale(1);
            transform: scale(1)
        }

        @media not all and (min-resolution: 0.001dpcm) {
            @supports (-webkit-appearance:none) {
                .hf-tf > input, .hf-tf > input + span, .hf-tf > input + span::after {
                    transition-duration: .1s
                }
            }
        }

        .hf-btn {
            position: relative;
            display: inline-block;
            box-sizing: border-box;
            border: none;
            border-radius: 4px;
            padding: 0 16px;
            width: 100%;
            min-width: 64px;
            height: 40px;
            vertical-align: middle;
            text-align: center;
            text-overflow: ellipsis;
            text-transform: uppercase;
            color: #fff;
            background-color: #485bbd;
            box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
            font-size: 14px;
            letter-spacing: 1px;
            font-weight: 500;
            line-height: 40px;
            overflow: hidden;
            outline: 0;
            cursor: pointer;
            transition: box-shadow .2s
        }

        .hf-btn:focus {
            outline: 2px solid #7120ff;
            outline-offset: 2px
        }

        .hf-btn:active {
            outline: 0 none
        }

        .hf-btn::-moz-focus-inner {
            border: none
        }

        .hf-btn::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            opacity: 0;
            transition: opacity .2s
        }

        .hf-btn::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 50%;
            padding: 50%;
            width: 32px;
            height: 32px;
            background-color: #fff;
            opacity: 0;
            -ms-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
            transition: opacity 1s, transform .5s
        }

        .hf-btn:focus, .hf-btn:hover {
            background-color: #7120ff
        }

        .hf-btn:hover::before {
            opacity: .08
        }

        .hf-btn:focus::before {
            opacity: .24
        }

        .hf-btn:hover:focus::before {
            opacity: .3
        }

        .hf-btn:active {
            box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12)
        }

        .hf-btn:active::after {
            opacity: .32;
            -ms-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0s
        }

        .hf-btn:disabled {
            color: rgba(255, 255, 255, .3);
            background-color: #ccd0ec;
            box-shadow: none;
            cursor: default
        }

        .hf-btn:disabled:focus, .hf-btn:disabled:hover {
            color: rgba(255, 255, 255, .3);
            background-color: #ccd0ec
        }

        .hf-btn:disabled::before {
            opacity: 0
        }

        .hf-btn:disabled::after {
            opacity: 0
        }

        /*Added later*/

        a.hf-btn {
            text-decoration: none;
        }

        /*end of the addition*/

        body, html {
            height: 100%
        }

        .hf-login-page-copy {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: center;
            justify-content: center;
            font-size: .875rem;
            color: rgba(255, 255, 255, .57);
            margin: 2rem 0
        }

        @media screen and (min-width: 800px) {
            .hf-login-page-copy {
                margin: 0 0 2rem
            }
        }

        .hf-login-page {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-pack: justify;
            justify-content: space-between;
            min-height: 100%;
            background-color: #384590;
            background-image: linear-gradient(315deg, #111a6b 0, #80c1f9 100%)
        }

        .hf-login-container {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            background-color: #fff;
            width: 100%;
            -ms-flex-direction: column;
            flex-direction: column;
            max-width: 375px;
            margin: 0
        }

        @media screen and (min-width: 380px) {
            .hf-login-container {
                border-radius: 4px;
                box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2)
            }
        }

        @media screen and (min-height: 734px) {
            .hf-login-container {
                margin: 0
            }
        }

        @media screen and (min-width: 800px) {
            .hf-login-container {
                max-width: 728px;
                min-height: 456px;
                -ms-flex-direction: row;
                flex-direction: row;
                margin: 0 0 4rem 0
            }
        }

        .hf-login-container__brand {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-pack: center;
            justify-content: center;
            -ms-flex-align: center;
            align-items: center;
            background-color: #243179;
            width: 100%;
            padding: 2.5rem 0
        }

        @media screen and (min-width: 380px) {
            .hf-login-container__brand {
                border-radius: 4px 4px 0 0
            }
        }

        @media screen and (min-width: 800px) {
            .hf-login-container__brand {
                width: 50%;
                border-radius: 4px 0 0 4px;
                padding: 0
            }
        }

        .hf-login-container__login {
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            padding: 0 1rem;
            width: 100%;
            min-height: 440px
        }

        @media screen and (min-width: 380px) {
            .hf-login-container__login {
                border-radius: 0 0 4px 4px
            }
        }

        @media screen and (min-width: 800px) {
            .hf-login-container__login {
                width: 50%;
                min-height: 456px;
                border-radius: 0 4px 4px 0
            }
        }

        .hf-login-header {
            margin: 48px 0 8px
        }

        @media screen and (min-width: 800px) {
            .hf-login-header {
                margin: 72px 0 8px
            }
        }

        .hf-login-header h1 {
            font-size: 24px;
            color: rgba(0, 0, 0, .75);
            letter-spacing: .5px;
            text-align: center;
            line-height: 1;
            margin: 0
        }

        .hf-login-main {
            width: 100%;
            max-width: 264px;
            margin: 0 auto
        }

        .hf-tf-tip {
            font-size: .75rem;
            color: rgba(0, 0, 0, .7);
            line-height: 1;
            margin-top: 6px;
            padding-left: 2px
        }

        .hf-btn-container {
            margin-top: 2.75rem
        }

        .hf-login-footer {
            text-align: center;
            margin: auto 0 2rem 0
        }

        .hf-help-link {
            text-transform: uppercase;
            font-size: .75rem;
            font-weight: 500;
            letter-spacing: .5px;
            display: inline-block;
            margin-top: .875rem
        }

        .hf-help-link:link, .hf-help-link:visited {
            text-decoration: none;
            color: #7120ff
        }

        .hf-help-link:active, .hf-help-link:hover {
            text-decoration: none;
            color: #303f9f
        }

        .hf-help-link:focus {
            outline: 2px solid #7120ff;
            outline-offset: 2px
        }

        .hf-help-link:active {
            outline: 0 none
        }

        .hf-tf__icon {
            position: absolute;
            right: 2px;
            top: 50%;
            margin-top: -2px;
            color: #ccd0ec
        }

        .hf-logo-container {
            width: 286px;
            height: 144px;
            color: #fff
        }

        .hf-messages-container {
            width: 100%;
            position: relative;
            z-index: 10
        }

        .hf-login-error-message {
            text-align: center;
            color: rgba(255, 255, 255, .75);
            width: 100%;
            padding: 1rem;
            background-color: #df4b41;
            font-size: 14px;
            position: absolute;
            top: 0;
            left: 0
        }

        @media screen and (min-width: 800px) {
            .hf-login-error-message {
                font-size: 16px
            }
        }

        .hf-login-error .hf-tf > input {
            border-bottom: solid 2px #df4b41;
            color: #df4b41
        }

        .hf-login-error-animated {
            animation-duration: .4s;
            animation-fill-mode: both;
            animation-delay: 1.5s
        }

        @keyframes slideInDown {
            from {
                transform: translate3d(0, -100%, 0)
            }
            to {
                transform: translate3d(0, 0, 0)
            }
        }

        .hf-login-error-animated__slide-down {
            animation-name: slideInDown
        }