.theme-title>h1,
.theme-title>h1 span,
.theme-title>span {
    text-align: left;
    line-height: 1
}

:root {
    --themecolor: #000000;
    --titlecolor: #ffffff;
    --forgottext: "Forgot Password";
    --login-text: "Login to your account";
    --theme-image-desktop: url(https://cdn.rarejob.com/ph/assets/jpg/tutor-img-843.jpg);
    --theme-image-desktop-title: url(https://cdn.rarejob.com/ph/assets/png/tutor-img-2002.png);
    --theme-image-mobile: url(https://cdn.rarejob.com/ph/assets/jpg/tutor-img-845.jpg);
    --theme-image-tablet: url(https://cdn.rarejob.com/ph/assets/jpg/tutor-img-844.jpg);
}

.header-login,
.login-wrapper.bg {
    background-color:var(--themecolor);
}

.halloween,
.mobile-bg {
    background-repeat: no-repeat;
    background-size:cover;
    background-position:center;
}

.halloween {
    background-image:var(--theme-image-desktop);
    background-position:top left;
    background-repeat: no-repeat;
    background-size:cover;
}

.mobile-bg {
    background-image:var(--theme-image-mobile);
    height: 100%;
    width: 100%;
    background-position: right top;
    opacity: .3;
    background-size: 64vh;
    margin-left: 0px;
}

.desktop-only {
    display: flex;
}

.mobile-only {
    display: none !important
}

.theme-title {
    max-width: 1170px;
    margin: 0 auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    height: 70%;
    color: var(--titlecolor);
    position: absolute;
    z-index: 1;
    left: unset;
    top: 20px;
    right:20px;
    text-align: right;
}

.theme-title>h1 {
    font-size: 32px
}
.theme-title img {
    width: 40vh;
    position: absolute;
    left: 0;
    top:0;
    margin-left: 40vh;
}
.theme-title>h1 span {
    font-size: 24px
}

.attribution-text {
    font-size: 11px;
    color: #fff;
    position: absolute;
    bottom: 15px;
    left: 15px;
    display: block
}

.modal-new-footer {
    position: relative;
    z-index: 11;
}

.form-wrapper {
    z-index: 999999999 !important
}
.login-img {
    position: absolute;
    width: 20% !important;
    left: 7%;
    top:24%;
}
@media only screen and (max-height:640px) {
    .login-mobile-image {
        clip-path: circle(350px at 40% calc(60vh - 440px)) !important
    }

    .mobile-circle {
        bottom: calc(100vh - 44%) !important
    }

    .mobile-bg {
        background-position: center top
    }
}

@media only screen and (max-width:450px) {

    .login-mobile-image img,
    .theme-title {
        max-width: 100%
    }

    .desktop-only {
        display: none !important
    }

    .mobile-only {
        display: block !important
    }

    #login-form,
    .halloween,
    .login-wrapper.bg {
        background: 0 0
    }

    #login-form .apply-wrap h5,
    #login-form .btn-login span,
    #login-form .forgotpass-link span,
    #login-form .input-group-addon,
    .login-desc,
    .login-title,
    .title-anim-wrap,
    lottie-player {
        display: none
    }

    .theme-title br,
    .theme-title h1 {
        display: block
    }

    .theme-title h1,
    .theme-title h1 span {
        font-family: Montserrat, sans-serif !important;
        font-size: 24px !important;
        font-weight: 700;
        margin-top: 0;
        margin-right: 0;
        text-align: right !important;
        line-height: 1.2;
        text-shadow: none
    }

    .theme-title>span {
        font-size: 12px
    }

    .full-screen .flex-container {
        justify-content: flex-end !important;
        flex-direction: column !important
    }

    .form-wrapper {
        background: 0 0 !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 0 !important;
        display: block !important;
        z-index: 999999999 !important;
        height: auto !important
    }

    .login-wrapper {
        background-image: none !important;
        background-color: #fff
    }

    .login-mobile-image {
        display: block !important;
        background: var(--themecolor);
        clip-path: circle(350px at 40% calc(65vh - 430px))
    }

    .mobile-circle {
        display: block !important;
        position: absolute;
        background-color: #c3d600;
        border-radius: 50%;
        width: 398px;
        height: 398px;
        bottom: calc(100vh - 53%);
        right: -120px;
        z-index: 2
    }

    .full-screen .flex-container {
        justify-content: flex-start
    }

    .nav-brand {
        width: 139px !important;
        height: 102px !important;
        clip-path: circle(150px at 0 -70px)
    }

    .nav-brand a.logo {
        margin-top: 22px !important;
        width: 50px !important;
        height: 37px !important
    }

    #login-form .info-box.danger {
        background: 0 0 !important;
        color: #ff8383 !important;
        padding: 5px !important;
        margin: 5px 0
    }

    .theme-title {
        color: var(--titlecolor);
        position: absolute;
        top: 25%;
        left: unset;
        right: 20px;
        z-index: 99999999;
        margin: unset;
        display: block;
        height: auto;
        text-align: left;
        transform: translate(0, 0)
    }

    #login-form {
        width: 100% !important;
        position: relative;
        z-index: 9
    }

    #login-form .form-control {
        height: 50px;
        padding: 6px 20px
    }

    #login-form .btn-login {
        width: 50px !important;
        height: 50px !important
    }

    #login-form .btn-login::before {
        content: "\f090";
        font-family: fa !important;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        font-size: 24px
    }

    #login-form .btnlogin-wrap {
        top: 0 !important;
        display: block;
        height: 10px
    }

    #login-form .btnlogin-wrap::before {
        content: var(--login-text);
        display: block;
        font-size: 18px;
        position: absolute;
        color: #333;
        top: 12px
    }

    #login-form .btnlogin-wrap .btn {
        float: right
    }

    #login-form .apply-wrap {
        width: 50%;
        float: left
    }

    #login-form .input-group-addon {
        background-color: #fff !important;
        border-right: transparent
    }

    #login-form .input-group-addon:last-child,
    #login-form .input-group-btn:first-child>.btn-group:not(:first-child)>.btn,
    #login-form .input-group-btn:first-child>.btn:not(:first-child),
    #login-form .input-group-btn:last-child>.btn,
    #login-form .input-group-btn:last-child>.btn-group>.btn,
    #login-form .input-group-btn:last-child>.dropdown-toggle,
    #login-form .input-group.inline .form-control:last-child {
        border-radius: 50px !important
    }

    #login-form .login-input {
        width: 100% !important
    }

    #login-form .apply-btn {
        text-align: left
    }

    #login-form .apply-btn a {
        border: none !important;
        color: #333 !important;
        background-color: transparent !important;
        padding: 12px 0 !important
    }

    #login-form .apply-btn a::after {
        content: "";
        display: block;
        width: 75px;
        height: 5px;
        background: linear-gradient(93deg, #408d47 0, #8dc63f 36%, #bfd730 59%, #eea849 91%);
        opacity: .6;
        margin: 9px auto 18px;
        border-top: 0
    }

    #login-form .forgotpass-link {
        position: absolute;
        bottom: 0;
        right: 25px
    }

    #login-form .forgotpass-link .forgot-pass {
        font-size: 100% !important
    }

    #login-form .forgotpass-link .forgot-pass::before {
        content: var(--forgottext) !important;
        display: block;
        color: #ff8383 !important
    }

    #login-form .forgotpass-link .forgot-pass::after {
        content: "";
        display: block;
        width: 121px;
        height: 5px;
        background: #ff8383;
        opacity: .6;
        margin: 9px auto 18px;
        border-top: 0
    }
}

@media only screen and (min-width:450px) and (max-width:769px) {
    .theme-title h1 {
        display: block
    }

    .title-anim-wrap,
    lottie-player {
        display: none
    }
}

@media only screen and (max-width:768px) {
    .form-wrapper {
        -webkit-align-items: center !important;
        -ms-flex-align: center !important;
        align-items: center !important
    }

    .theme-title {
        width: auto !important;
        margin: 0 auto !important
    }

    .theme-title h1 {
        text-align: center
    }
}

@media only screen and (min-width:769px) and (max-width:1170px) {
    .login-img-new {
        width: auto !important;
        height: 100vh !important
    }

    .theme-title {
        margin-left: 50px align-self:center
    }
}

@media only screen and (min-width:451px) and (max-width:1024px) {
    .halloween {
        background-image: var(--theme-image-tablet);
        background-position:center;
        background-repeat: no-repeat;
        background-size:cover;
    }
    .form-wrapper {
        background: rgba(250,250,250,.8);
    }
    .nav-brand a.logo {
        z-index: 2;
    }
    .form-wrapper {
        z-index: 1 !important;
    }
    .login-wrapper.bg {
        background-image: var(--theme-image-desktop-bg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .login-mobile-image {
        display: none !important
    }
    .mobile-circle {
        display: none !important
    }
    .theme-title {
        display:none;
        width: 0%;
        margin: 0 auto;
        position: absolute;
        top: 20px;
        left: 20px;
        right: unset;
    }
}

@media only screen and (min-width:1735px) {
    .theme-title {
        width: 100%;
        
        margin: 0 auto
    }
}

.mobile-circle {
    display: none
}

.login-mobile-image {
    position: absolute;
    top: 0;
    z-index: 3;
    height: 100%;
    width: 100%;
    display: none
}

.desktop-only.theme-title small {
    font-size: 24px;
    font-family: "Roboto Mono", monospace
}

:host {
    width: unset !important;
    height: unset !important
}

@media only screen and (max-width:500px) {
    .apply-btn {
        margin: 0 auto 15px !important
    }
}