@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@100;400;500;700;800;900&display=swap');

html {
    background: url(/Content/OneView_Lambeth/mylambeth-background-compressed.jpg) no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}



h1,
h2,
h3,
h4 {
    font-family: Open Sans;
}
.form-group .form-control,
body,
h3,
h4,
input,
select,
textarea {
    font-family: Open Sans, sans-serif;
    font-size: 19px !important;
}
body {
    color: #222;
    background-repeat: no-repeat;
    background-position: bottom right;
    background-color: transparent;
}
.navbar {
    background-image: url(https://onevu-lambeth-test.azurewebsites.net/Content/images/logo.svg);
    background-position-x: 18%;
    background-position-y: 50%;
    background-color: #333;
    background-size: 114px;
    height: 62px;
    border-bottom: 10px solid #069;
}
.panel-tile .panel-heading {
    margin-left: 0;
}
.panel-tile .panel-heading h1 {
    font-size: 36px;
    color: #000;
    border-radius: 4px;
    font-weight: 700;
    padding-left: 20px;
}
.panel-tile .panel-body {
    background-color: rgba(255, 255, 255, 0);
    padding-left: 15px;
    padding-right: 15px;
    border-top: 0 solid #fff;
    backdrop-filter: blur(5px);
}
.btn.active,  .btn:hover, .open .dropdown-toggle.btn {
    color: #fff;
    transition: 0.5s;
}
.btn-social {
    width: 100%;
    overflow: auto;
    background: 0 0 !important;
    text-align: center;
    border: 0;
    vertical-align: middle;
    color: #222;
}
.btn-social i {
    height: 70px;
    width: 70px;
    display: inline-block;
    border-radius: 5px;
    color: #fff;
}
.btn-social.facebook i {
    background-color: #3b5998;
    padding: 18px 0 0 0;
}
.btn-social.google i {
    background-color: #dd4b39;
    padding: 17px 0 0 2px;
}
.btn-social .fa {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 3px;
    float: left;
    padding-top: 18px;
    background-color: #0078d7;
}
.btn-social span {
    display: flex;
    margin: 20px 100px;
    font-size: 19px;
}
.fa-facebook:before {
    content: "\f09a";
    font-size: 40px;
}
.fa-google:before {
    content: "\f1a0";
    font-size: 40px;
}
.fa-windows:before {
    content: "\f17a";
    font-size: 32px;
}

.form-control.input-validation-error {
    border-color: #a41d56;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #a41e57;
}
.text-danger {
    color: #a31d56;
}
span.text-danger.field-validation-error:before {
    content: "\f071";
    font-family: fontawesome;
    margin-right: 10px;
}
.local-account {
    padding: 0 20px;
}
div#qtip-0 {
    border: 0;
    background-color: rgb(0 101 154);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(7px);
    color: #fff;
    font-size: 19px;
    line-height: 30px;
    font-weight: 600;
}
fieldset > .col-md-4:before {
    display: block;
    margin-top: -5px;
    margin-bottom: 35px;
    content: "A mylambeth account allows you to access council services in one convenient place. Creating an account is simple and only takes a couple of minutes. All you need to get started is an email address.";
    font-size: 19px;
    white-space: pre-wrap;
}
fieldset > .col-md-4,
fieldset > .col-md-offset-4,
fieldset > .col-sm-6,
fieldset > .col-sm-offset-3 {
    width: 100%;
    float: none;
    margin: 0;
    padding: 0;
}
button.btn.btn-primary,
button.btn.btn-primary.btn-block {
    font-size: 19px;
    background-color: #993399;
    color: #fff !important;
    transition: all 0.5s ease;
    border-radius: 2px !important;
    font-weight: 600;
}
button.btn.btn-primary.btn-block:hover,
button.btn.btn-primary:hover {
}
.panel-tile .panel-footer .btn-primary:nth-of-type(2):hover,
button.btn.btn-primary.btn-block:hover {
    background-color: #7d006b;
}
button.btn.btn-primary.btn-block:hover:after {
    content: "\f054";
    padding-left: 10px;
    font-family: fontawesome;
    transition: 0.3s;
}

button.btn.btn-primary.btn-block:focus, button.btn.btn-primary.btn-block:active {
    background-color: #630056;
}
a.btn.btn-social.btn-block.openidconnect:hover {
    background-color: #0078d7 !important;
    border-radius: 5px;
}
a.btn.btn-social.btn-block.facebook:hover {
    background-color: #3b5998 !important;
    border-radius: 5px;
}
a.btn.btn-social.btn-block.google:hover {
    background-color: #dd4b39 !important;
    border-radius: 5px;
}
.panel-tile .panel-footer .btn-primary:nth-of-type(1):hover:after {
    content: "\f054";
    font-family: fontawesome;
    margin-left: 10px;
}
.panel-tile .panel-footer .btn-primary:nth-of-type(1):hover {
    transition: 0.3s;
    background-color: #7d006b;
}
.panel-tile .panel-footer .btn-primary:nth-of-type(2):hover:before {
    font-family: fontawesome;
    content: "\f053";
    margin-right: 10px;
}
a:focus, a:active {
    text-decoration: none;
    transition: 0.7s;
    background: #ff6600;
    color: black;
    outline: 2px solid black;
}
.col-md-6.local-account:before {
    margin-top: 0;
    content: "Using the email address and password you signed up with.";
    font-size: 19px;
    white-space: pre-wrap;
}
.col-md-6.external-providers:before {
    content: "Or it's quicker to get access through these services";
    font-size: 19px;
}
.panel-tile .panel-body h3,
h3.ng-binding {
    display: none;
}
.container.page-login {
    margin-top: 2%;
}
.container > .navbar-header {
    float: right;
    margin-top: 60px;
}
html.ng-scope {
    height: 100vh;
}
fieldset > .col-md-4 .form-group .form-control:focus,
input#AddressSearch:focus,
input#password:focus,
input#username:focus {
    box-shadow: 0 0 0 2px #222, 0 0 0 5px #ff6600;
    transition: 0.3s ease-out;
}
div.col-md-6.local-account > form > fieldset {
    margin-top: 30px;
}
button#addsearch {
    height: 46px;
    background: #993399;
    border: #993399 1px;
    margin-top: 0px;
}
.fa-key:before {
    content: "\f023";
    font-size: 19px;
}
.fa-envelope-o:before {
    content: "\f0e0";
}
.container > .navbar-header {
    width: 100%;
    height: 50px !important;
    margin-top: 120px !important;
    padding-top: 10px;
    padding-bottom: 10px !important;
}
.navbar-header:after {
    float: right;
    content: "mylambeth";
    font-size: 28px;
    font-weight: 600;
    color: #fff !important;
    right: 55px;
    top: 10px;
    position: absolute;
}
@media (max-width: 768px) {
    
.panel-tile .panel-heading h1 {
    font-size: 32px;
}

.form-control {
    padding: 10px !Important;
}


.form-group .form-control, body, h3, h4, input, select, textarea,
.col-md-6.local-account:before, .col-md-6.external-providers:before,.btn-social span {
    font-size: 16px !Important;
}

    .navbar {
        background-position-x: 50%;
        background-position-y: 30%;
    }
    .container > .navbar-header {
        background-color: #069;
        width: 100%;
        margin-top: 120px;
    }
    span.navbar-brand.ng-binding:before {
        font-size: 26px !important;
        color: #fff;
    }
    .container.page-login {
        margin-top: 10px;
    }
    .panel-tile {
        background-color: #ffffff;
    }
    .col-md-6.external-providers {
        padding-top: 30px !important;
    }
    .container > .navbar-header {
        width: 100vw;
        height: 50px !important;
        margin-top: 62px !important;
        padding-top: 10px;
        padding-bottom: 10px !important;
    }
    .navbar-header:after {
        content: "mylambeth";
        font-size: 26px;
        font-weight: 700;
        color: #fff !important;
        left: 29vw;
        top: 66px;
        position: absolute;
    }
}

fieldset > .col-md-4 {
    font-size: 19px;
}
fieldset > .col-md-4 > .form-group:before {
    line-height: 45px;
}

.col-md-6.external-providers {
    /* display: none !important; */
    width: 100%;
    border-top: 2px solid #f6f6f6;
    padding-top: 20px;
}
.col-md-6.local-account {
    width: 100%;
}
.container.page-login {
    width: 50%;
}

.input-group-addon {
    background-color: transparent;
    border: none;
}

.form-control {
    border: 2px solid black;
    height: auto;
    padding: 20px;
    border-radius: 0px;
    font-size: 19px;
}

.btn:focus {
    outline: 5px solid #ff6600;
}


@media (max-width: 768px) {
    .container.page-login {
        width: 90%;
        margin-top: 110px !important;
    }
}

.page-login .list-unstyled li {
    margin-top: 30px;
    text-align: left;
    color: #069 !important;
}
span.navbar-brand {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    left: 0px;
    color: #fff;
    z-index: 999;
    padding-left: 30px !important;
}

fieldset.confirm-email-panel > .col-md-4 > .form-group:nth-of-type(1):before {
    content: "Enter your date of birth: *";
}

fieldset.confirm-email-panel > .col-md-4 > .form-group:nth-of-type(2):before {
    content: "Enter your postcode: *";
}

fieldset.confirm-email-panel > .col-md-4 > .form-group:nth-of-type(3):before {
    content: "Enter a password: *";
}

fieldset.confirm-email-panel > .col-md-4 > .form-group:nth-of-type(4):before {
    content: "Repeat the password you entered: *";
}

fieldset.confirm-email-panel > .col-md-4:before {
    content: "";
}

.navbar:after {
    position: absolute;
    right: 55px;
    top: 70px;
}

@media (max-width: 768px) {
    .navbar {
        height: 72px;
    }

    span.navbar-brand {
        padding-top: 5px;
        padding-bottom: 5px;
        height: 50px;
    }


.navbar:after {
    position: absolute;
    right: 15px;
    top: 150px;
    font-size: 14px;
}

}



/* ---------- Winter Release 2021 Specifics ----------- */



h3#registrationMechanismTitle {
    display: block;
    font-size: 20px;
    font-weight: bold;
}

.local-account, .external-providers, .panel-tile .panel-body .external-providers
 {height: 500px;}


.btn-primary:focus, .btn-social:focus,
button.btn.btn-primary.btn-block:focus, button.btn.btn-primary.btn-block:active,
a:focus, a:active
 {box-shadow: 0px 0px 0px 4px gold;}