/* ---------- Fonts ----------- */

@import url("https://fonts.googleapis.com/css?family=Lato:400,700,300");

body, div, h1, h2, h3, h4, p, a, input, textarea, select {
	font-family: Lato, Poppins, sans-serif;
	background-color: transparent;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---------- Background Image(s) ----------- */

html {background: url(https://www.bucksmore.com/app/uploads/2016/01/shutterstock_238484848.jpg)center center no-repeat fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}

/* ---------- Navbar ----------- */

.navbar {
    height: 130px;
    background-image: url(https://www.cambridge.gov.uk/css/ccc-logo-white.png), linear-gradient(to right,#004a83 15%,#0b2265 50%,#004a83 85%);
    background-size: 80px, cover;
    border-bottom: none;
    background-position-x: 10%;
    background-position-y: 50%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* ---------- Navbar Council Label ----------- */

.navbar:after {content: "My Cambridge";padding-left: 10%;font-size: 42px;font-weight:bold;color: #ffffff;float: right;padding-right: 100px;}

/* ---------- Panels ----------- */

.panel.panel-tile {
    margin-top: 5%;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: rgba(0, 74, 131, 0.9);
    border: none !Important;
    border-radius: 3px;
}

.panel-tile .panel-heading {
       text-align: center;
}
.panel-tile .panel-body {
    border-top: none;
    color: white;
}

.panel-tile .panel-heading h1 {
    color: #ffffff;
    font-size: 32px;
    font-weight: bold;
}

/* ---------- Input Fields ----------- */

.form-group .form-control {margin: 0;line-height: 18px;box-shadow: none !important;padding: 6px 12px;background-color: rgb(255, 255, 255);border-radius: 0px !important;height: 35px;width: 90%;font-size: 17px;box-sizing: content-box;border: 3px solid #12173391 !important;font-weight: 700;margin-bottom: 5px;}
.has-error .form-control { border-color: #c10000; }

/* ---------- Input Fields Icons and Goooold Focus ----------- */

.input-group-addon {
    color: #333;
    text-align: center;
    background-color: rgba(238, 238, 238, 0);
    border: 1px solid rgba(204, 204, 204, 0);
    border-radius: 0px;
    font-weight: bold;
    font-size: 20px;
}

.fa-envelope-o:before {
    content: "\f0e0";
}

.fa-key:before {
    content: "\f023";
}


.form-group .form-control:focus {
    outline: 2px solid #004a83;
    transition: 0.2s;
}

/* ---------- Custom Labels for Email/Social Sign In ----------- */

.col-md-6.local-account:before {
    content: "Using the email you previously signed up with";
    font-size: 20px;
    color: #000;
    font-weight: bold;
}

.col-md-6.external-providers:before {
    content: "Or it's quickest to sign up using these:";
    font-weight: bold;
    color: #000;
    font-size: 20px;
}

.col-md-6.external-providers {
    padding-top: 20px;
}

body > div.container.page-login > div:nth-child(2) > div > div > div.panel-body > div:nth-child(2) > div.col-md-6.local-account > form > fieldset {
    padding-top: 20px;
}

.panel-tile .panel-body h3 {
    display: none;
}


/* ---------- Buttons ----------- */

button.btn.btn-primary.btn-block {
  display: inline-block;
  font-weight: bold;
  font-size: 20px;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  position: relative;
  background: #cbe2fe;
  color: black;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
button.btn.btn-primary.btn-block:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #004a83;
  border-radius: 3px;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

button.btn.btn-primary.btn-block:hover:before, button.btn.btn-primary.btn-block:focus:before, button.btn.btn-primary.btn-block:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}


/* ---------- Registration Buttons ----------- */

body > div.container.body-content > div > form > div.panel-footer > button:nth-child(1) {
  display: inline-block;
  font-weight: bold;
  font-size: 20px;
  transform: perspective(1px) translateZ(0);
  position: relative;
  background: #cbe2fe;
  color: black;
  transition-property: color;
  transition-duration: 0.3s;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

body > div.container.body-content > div > form > div.panel-footer > button:nth-child(2) {
  display: inline-block;
  font-weight: bold;
  font-size: 20px;
  transform: perspective(1px) translateZ(0);
  position: relative;
  float: left;
  background: crimson;
  color: white !important;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}


body > div.container.body-content > div > form > div.panel-footer > button:nth-child(1):before, body > div.container.body-content > div > form > div.panel-footer > button:nth-child(2):before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #004a83 !important;
  border-radius: 3px;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

body > div.container.body-content > div > form > div.panel-footer > button:nth-child(1):hover:before, body > div.container.body-content > div > form > div.panel-footer > button:nth-child(2):hover:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

/* ---------- Social Sign In Buttons ----------- */

.btn-social
{
    width: 100%;
    overflow: auto;
    color: black;
    background: none !important;
    text-align: center;
    border: 0px;
    vertical-align: middle;
}
.btn-social i
{
	height: 70px; width: 70px; display: inline-block;
	border-radius: 70px; color: #fff;
	-webkit-border-radius: 70px; -moz-border-radius: 70px;
}
.btn-social.facebook i { background-color: #3B5998; padding: 18px 0px 0px 0px; }
.btn-social.google i { background-color: #DD4B39; padding: 17px 0px 0px 2px; }
.btn-social span
{
    display: flex;
    font-size: 20px;
    font-weight: 700;
    margin: 20px 100px;
    color: #fff;
}
.fa-facebook-f:before, .fa-facebook:before { content: "\f09a"; font-size: 40px; }
.fa-google:before { content: "\f1a0"; font-size: 40px; }



.page-login .list-unstyled li
{text-align: center;}

a.btn.btn-social.btn-block.openidconnect {/* display: none; */background-color: #0078d7;}

.fa-windows:before {
    content: "\f17a";
    font-size: 30px;
}

i.fa.fa-windows {
    background-color: #0078d7;
    padding: 18px 0px 0px 0px;
}


button.btn.btn-primary.btn-block:hover:after {
    content: "\f054";
    padding-left: 10px;
    font-family: fontawesome;
    transition: 0.3s;
}

a.btn.btn-social.btn-block.openidconnect:hover {
    background-color: #0078d7 !important;
}

a.btn.btn-social.btn-block.facebook:hover {
    background-color: #3b5998 !important;
}

a.btn.btn-social.btn-block.google:hover {
    background-color: #dd4b39 !important;
}

.btn-social span:hover {
    color: #ffffff !important;
}

/* ---------- Create an account/forgot password links ----------- */

a:hover, a:focus {
    color: #ffffff;
    text-decoration: none;
    background-color: #5cb85c;
    padding: 10px;
    border-radius: 2px;
    transition: 0.3s;
}

a.ng-binding {
    font-size: 16px;
    color: #fff;
}

body > div.container.page-login > div:nth-child(2) > div > div > div.panel-body > div:nth-child(2) > div.col-md-6.local-account > ul > li:nth-child(1) > a:before {
    content: "\f0a3";
    font-family: fontawesome;
    padding-right: 15px;
    color: #000;
}

body > div.container.page-login > div:nth-child(2) > div > div > div.panel-body > div:nth-child(2) > div.col-md-6.local-account > ul > li:nth-child(2) > a:before {
    font-family: fontawesome;
    content: "\f13e";
  padding-right: 15px;
    color: #000;
}

@media (max-width: 992px)
{
    body > div.container.page-login > div:nth-child(2) > div > div > div.panel-body > div:nth-child(2) > div.col-md-6.local-account > ul > li:nth-child(1) > a:before
    {
        color: #ffffff;
    }
    
    body > div.container.page-login > div:nth-child(2) > div > div > div.panel-body > div:nth-child(2) > div.col-md-6.local-account > ul > li:nth-child(2) > a:before
    {
        color: #ffffff;
    }
}



a.ng-binding:hover {
    color: #000;
    text-decoration: underline;
    background-color: transparent !important;
}

/* ---------- Registration Page ----------- */


.col-sm-offset-3 {
    margin-left: 25%;
    width: 100%;
    float: none;
    margin: 0;
    padding: 0;
}

a.list-group-item:hover, a.list-group-item:focus {
    text-decoration: none;
    background-color: #5cb85c;
    padding: 10px;
    padding-left: 30px;
    font-weight:bold;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

p.space-bottom-small, p {
    font-size: 17px !Important;
}

.text-danger.validation-summary-errors {
    background-color: crimson;
    padding: 10px;
    border-radius: 3px;
    font-weight: bold;
}
body > div.container.body-content > div > form > div.panel-body > fieldset > div > div.text-danger.validation-summary-errors:before {content: "\f071";font-family: fontawesome;}

body > div.container.body-content > div > form > div.panel-body > fieldset > div > div.text-danger.validation-summary-errors > ul:before {
    content: "Warnings";
    margin-left: -40px;
}







/* ---------- Custom Error Styling ----------- */

span.text-danger.field-validation-error {
    background-color: crimson;
    color: white;
    width: 100%;
    height: 30px;
    font-size: 16px;
    padding: 5px;
    margin-top: 10px !important;
    text-align: center;
}

span.text-danger.field-validation-error:before {
    content: "\f071";
    font-family: fontawesome;
    padding-right: 10px;
}

body > div.container.page-login > div:nth-child(1) > div > div:before {
    content: "\f071";
    font-family: fontawesome;
    padding-right: 10px;
}

.alert-danger {
    background-color: crimson;
    border-color: crimson;
    color: white;
    font-size: 20px;
}


/* ---------- Custom Password Tooltip ----------- */

.qtip-default {
    background-color: gold;
    color: #333;
    font-size: 16px;
    line-height: 1.0;
    font-weight: bold;
    /* padding: 10px; */
    border-radius: 3px;
}

#qtip-0-content > div > ul > li::before {
    content: "\f14a";
    font-family: fontawesome;
font-size: 20px;
}

#qtip-0-content > div > ul > li {
    list-style: none;
    text-align: center;
color: #333 !important;
}

#qtip-0-content > div > ul {
padding-left: 0px;
}


/* ---------- Desktop Specifics ----------- */

@media (min-width: 992px) {

.local-account {
    border-right: 1px solid rgba(231, 234, 236, 0);
    padding-right: 40px;
    width: 48%;
    background-color: rgb(255, 255, 255);
    margin-right: 10px;
    margin-left: 20px;
    height: 430px;
    padding-top: 20px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}

.panel-tile .panel-body .external-providers {
    margin-bottom: 20px;
    background-color: rgb(255, 255, 255);
    width: 48%;
    height: 430px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}

.btn-social span {
    color: #000;
}

a.ng-binding {font-weight:bold;color: #000;}

}


/* ---------- Mobile Device Specifics ----------- */


@media(max-width:992px) {
    .local-account {padding-bottom: 40px;}
    .external-providers {
        border-top: 3px dotted gainsboro;
        border-top: 2px dashed #ffffff;
        border-bottom: 1px dashed #ffffff;
        box-shadow: inset 0 -1px 0 0 #ffffff, inset 0 1px 0 0 #ffffff, 0 1px 0 0 #ffffff, 0 -1px 0 0 #ffffff;
        margin-bottom: 1px;}
    
    .navbar:after {display: none !important}

.navbar {
    background-position-x: 50%;
}

  input#AddressSearch {
    width: 80% !Important;
}  

.panel-tile .panel-body .external-providers{
width:100%;
padding-bottom:20px;
}

.panel-tile .panel-heading {
    text-align: left;
    margin-left: 15px;
}

.fa-windows:before {
    content: "\f17a";
    font-size: 35px;
}

i.fa.fa-windows {
    background-color: #0078d7;
    padding: 13px 0px 0px 0px;
}

.btn-social.facebook i {
    padding: 13px 3px 0px 0px;
}

.btn-social.google i {
    padding: 13px 0px 0px 1px;
}

.navbar {
    background-color: #004a83;
    /* background-image: none !important; */
    margin-bottom: 0px;
}

.col-md-6.local-account:before {
    color: #fff;
}

.col-md-6.external-providers:before {
    color: #fff;
}

.input-group-addon {
    color: #fff;
}

.panel.panel-tile {
    background-color: rgba(0, 74, 131, 0.9);
    border: none !important;
}

span.text-danger.field-validation-error {
    background-color: crimson;
    outline: 2px solid crimson;
    font-size: 13px;
    margin-top: 10px !important;
    padding: 4px;
}



.form-group .form-control {
    margin-bottom: 15px;
    text-align: center;
}



}


@media only screen and (max-width: 600px) { .btn-social span { margin-left: 90px; } }


li {
    color: white;
}

label {
    font-size: 18px;
}

input#AddressSearch {
    margin: 0;
    line-height: 18px;
    box-shadow: none !important;
    padding: 6px 12px;
    background-color: rgb(255, 255, 255);
    border-radius: 0px !important;
    height: 35px;
    width: 90%;
    font-size: 17px;
    box-sizing: content-box;
    border: 3px solid #12173391 !important;
    font-weight: 700;
    margin-bottom: 5px;
}

select#DateOfBirthModel_Year {
    /* margin-left: -65px; */
}

select#DateOfBirthModel_Month {
    /* margin-left: -35px; */
    margin-right: 0px !important;
}

.input-group-btn {
    border-top-left-radius: 10px;
}

button#addsearch {
    border-radius: 10%;
    margin-left: -30px;
    height: 50px;
    margin-top: 15px;
    background-color: #cbe2fe;
    border: 2px solid #cbe2fe;
    color: black;
}

body > div.container.body-content > div > form > div.panel-body > fieldset > div > div.input-group:before {
    /* content: "Search for your address"; */
    color: white;
    font-weight: bold;
}

.form-group {
    color: white !Important;
    font-weight: bold !important;
} 

body > div.container.body-content > div > form > div.panel-footer > button:nth-child(1):hover {
    color: white !important;
}




fieldset > .col-md-4 {
    color: #fff;
    font-size: 17px;
}


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



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

.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;}