/* ----------------------------------------------------------------------------------------------------
www.ieg4.com Custom CSS 



/* --------------------------------------------------
TABLE OF CONTENTS
    -------------------------------------------------- 

1.0 Fonts
2.0 Custom HTML Header
3.0 Navbar
4.0 Buttons
5.0 Page Host
6.0 Page Header
7.0 Thumbnail Elements
8.0 Font Awesome ElementsRegistration Offered Customisation
9.0 Registration Offered Customisation
10.0 Customised Bootstrap Columns
11.0 Bins Tile Customisations
12.0 Custom Tables
13.0 Custom Calendar in place of dates
14.0 Custom Inputs
15.0 Custom Tile Images & Styling
16.0 Custom FAQ Answers for Benefits
17.0 Custom Track My Requests Styling
18.0 Media Query content for Mobile
19.0 Mini Menu on Mobile
20.0 Custom Alerts & Links
21.0 Miscellaneous Customisations
22.0 Customer Service View Customisations
*/


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

@import url("https://fonts.googleapis.com/css?family=Poppins:400,600,700,300,100");
body, div, h1, h2, .thumbnail .header.caption h3, input, textarea, select, a, p, ul, ol, li, label, span {
	font-family: Helvetica Neue, 'Arial',Helvetica,Arial,Sans-Serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	}

	ul ul, ol ul, ul ol, ol ol, p, li {font-size: 18px;color: #525252; list-style:disc;}

label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 17px;
	color: #525252;
}

span {
    font-size: 18px;
}

small { display: none; }
 

/* ----------------------------------------------------------------------------------------------------
2.0 Custom HTML Header
---------------------------------------------------------------------------------------------------- */

button.btn.btn-info.collapsed {
    width: 100%;
    border-radius: 3px;
    background-color: #f0f0f0;
    border: none;
    color: #333;
    font-size: 17px;
    font-weight: bold;
    text-align: left;
    margin-left: 10px;
    font-weight: bold;
    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);
}


button.btn.btn-info.collapsed:before {
    content: "\f14a";
    font-family: fontawesome;
    padding-right: 5px;
}

button.btn.btn-info {
    background-color: #8b0c41;
    font-size: 17px;
    font-weight: bold;
    width: 100%;
    border-radius: 3px;
    border: none;
    text-align: left;
    padding: 15px 20px;
    font-weight: bold;
    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);
    margin-top: 10px;
}

li.help {
    margin-left: 30px;
    margin-bottom: 0px;
}

button.btn.btn-info.collapsed:after {
    content: " ";
}

button.btn.btn-info:after {
    content: "\f057";
    margin-left: 20px;
    font-family: fontawesome;
     /* IE 9 */
     /* Chrome, Safari, Opera */
    transition: all 0.5s ease-in;
    float: right;
}

a.btn.btn-trash {
    /* display: none; */
    width: 100%;
    text-align: left;
    background-color: #d96a00;
    color: white;
    border-radius: 0px;
    font-size: 17px;
    border: none;
    font-weight: bold;
}
 
/* ----------------------------------------------------------------------------------------------------
3.0 Navbar
---------------------------------------------------------------------------------------------------- */

.nav-tabs > li > a {
    color: #525252 !important;
}

.nav.nav-tabs {
    background-color: gainsboro !important;
    padding: 10px;
}

.navbar.navbar-default .container-fluid {
    background-repeat: no-repeat;
    height: 130px;
    background-image: url(https://hamlet.gov.uk/media/EBC/files/Logos/logo.png);
    background-color: rgb(255, 255, 255);
    background-size: 100px;
    border-bottom: none;
    background-position-x: 90%;
    background-position-y: 50%;
}

.navbar.navbar-default .container-fluid .primary-header {
    margin-top: 20px;
}

.navbar.navbar-default .container-fluid .primary-header:before {
    display:none;
    content: "";
    font-size: 42px;
    font-weight:bold;
    color: #8c0b41;
}

.navbar.navbar-default .container-fluid .primary-header h2 {
    color: #ffffff00;
    display: none;
}

.primary-header {
    margin-top: 35px;
}

.navbar.navbar-default.menu button {
    color: #fff;
    border-style: none;
    margin-top: 4px;
}

.navbar.navbar-default.menu button span:after {
	content: "\f0c9"; margin: 0px 5px 0px 10px;
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-moz-osx-font-smoothing: grayscale;
}

.navbar.navbar-default.menu .container-fluid {
	background-size: cover;
	background-image: linear-gradient(to right, #258437 0%, #258437 50%) !important;
	background-repeat: repeat-x;
}

.nav-pills > li {	font-size: 18px; }


.navbar.navbar-default.menu .navbar-nav > .open > a, .navbar.navbar-default.menu .navbar-nav > .open > a:hover, .navbar.navbar-default.menu .navbar-nav > .open > a:focus {
	color: #ffffff !important;
	background-color: #333;
	border-bottom: 4px solid #3daf2f;
}

.nav-pills > li + li { margin-left: 0px; }

.active { background: transparent; font-weight: bold; }

.nav > li > a {
    color: #fff;
    font-size: 18px;
}


.navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 18px;
}

.navbar.navbar-default.menu .navbar-nav > li > .dropdown-menu {width: 100%;margin-right: 10px;}
.navbar.navbar-default.menu .navbar-nav > li > .dropdown-menu li {padding: 10px 0px;}

.navbar.navbar-default.menu .navbar-nav > li > a:hover, .navbar.navbar-default.menu .navbar-nav > li > a:focus {
    color: #fff !important;
    border-bottom: 4px solid #415467;
    background-color: #415467;
    transition: 0.3s;
    border-radius: 0px;
    background-image: none;
    background-color: #425466;
    border: none;
    transition: all 600ms cubic-bezier(0.73, 0.29, 1, 1);
    box-shadow: inset 0 -81px 0 0 rgb(141, 173, 177);
    cursor: pointer;
    background: #ffffff;
}

.navbar.navbar-default.menu .navbar-nav > .active > a, .navbar.navbar-default.menu .navbar-nav > .active > a:hover, .navbar.navbar-default.menu .navbar-nav > .active > a:focus {
    border-top: none;
    margin-top: 0px;
}




#menu-navbar-collapse > ul:nth-child(2) > li.au-target.active > a {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.08);
    border-bottom: 2px solid #ffffff;
    FONT-WEIGHT: 700;
    font-size: 18px;
}

.person-row .nav > li > a, .page-header .nav > li > a {
    border: 1px solid rgba(200, 200, 200, 0);
    color: #161338 !important;
    background-color: #ffffff;
    border-radius: 2px;
    margin-right: 5px;
    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);
}

#page-content-wrapper > nav > div {

	padding-right:0px !important;
}


a.dropdown-toggle {
    background-color: #fff;
    border-bottom: none;
    color: white !important;
}
.fa-remove:before, .fa-close:before, .fa-times:before {
    content: "\f00d";
    padding-right: 20px;
}



/* ----------------------------------------------------------------------------------------------------
4.0 Core Buttons
---------------------------------------------------------------------------------------------------- */


.btn-primary {
	border-color: transparent;
	border-radius: 3px;
	color: #fff;
	border-bottom: none;
	font-weight: 700;
	line-height: 1.5;
	font-size: 18px;
	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);
	background-color: #258437;
}


.btn-primary:after {
    font-family: FontAwesome;
    padding-left: 10px;
    position: relative;
    font-size: 90%;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, 
.btn-primary.active, .open .dropdown-toggle.btn-primary
{
	background-color: #8dacb2;
	border-color: #8dacb2;
	color: #ffffff;
	transition: 0.3s;
}


button.btn.btn-default.onevu-btn-register {
    border-radius: 3px;
    border-color: transparent;
    font-size: 18px;
    font-weight: bold;
    background-color: #258437;
    color: #ffffff;
    border: 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
    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);
}

button.btn.btn-default.onevu-btn-register:after {
	content: '\f054'; 
	font-family: FontAwesome;
	padding-left: 20px;
	position: relative;
	font-size: 90%;
}

button.btn.btn-default.onevu-btn-register:hover {
	background-color: #8dacb2;
	color: #fff;
	text-decoration: none;
	transition: .3s;
}


a.btn.btn-sm.btn-primary {
	max-width: 95%;
	white-space: normal;
	border-radius: 3px;
	border-color: transparent;
	font-weight: bold;
	background-color: rgb(75, 175, 79);
	color: #ffffff;
	border: 0;
	padding: 15px 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);
}

a.btn.btn-sm.btn-primary:after {
	content: '\f054';
	font-family: FontAwesome;
	padding-left: 10px;
	position: relative;
	font-size: 90%;
}

a.btn.btn-sm.btn-primary:hover {
	background-color: #8dacb2;
	color: #fff;
	text-decoration: none;
	-webkit-transition: .3s;
	transition: .3s;
}

button.pull-right.btn.btn-warning.btn-xs.au-target {color: white;border-bottom: 2px solid rgba(0, 0, 0, 0);width: 100%;margin-left: -0px;padding: 10px 20px;font-size: 18px;margin-top: 31px;}

button.pull-right.btn.btn-warning.btn-xs.au-target:after {
	font-family: 'FontAwesome';
	padding-left: 5px;
	position: relative;
	font-size: 18px;
	content: '\f057';
	color: white;
	float: right;
}


span.btn.btn-default.btn-file:hover {
	background-color: #000;
	border-color: #000;
	color: #ffffff;
	transition: 0.3s;
}

button.btn.btn-primary.onevu-btn-cancel.au-target:hover {
    background-color: black;
    border-color: black;
}


.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
    z-index: 2;
    margin-left: -1px;
    border-color: transparent;
    background-color: #f3801e;
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    font-size: 15px;
    height: 40px;
}

button.btn.btn-primary.onevu-btn-submit.au-target:after {
    font-family: fontawesome;
    content: "\f00c";
}

button.btn.btn-primary.onevu-btn-cancel.au-target:after {
    content: "\f00d";
    font-family: fontawesome;
}

button.btn.btn-primary.onevu-btn-cancel.au-target {
    background-color: crimson;
}


.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-radius: 3px;
    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);
    background-color: #f3801e;
    color: white;
    font-weight: 700;
    line-height: 1.5;
    font-size: 18px;
    border: none;
}

.btn-warning {
    background-color: #4CAF50;
    white-space: normal;
    border-radius: 3px;
    border-color: transparent;
    font-weight: bold;
    border: 0;
    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-warning:hover {
    color: #fff;
    background-color: black;
    border-color: black;
    transition: 0.3s;
}

.navbar.navbar-default.menu {
    height: 52px;
}

div#view-portal:before {
    width: 100%;
    height: 4px;
    background-color: #fff;
    display: block;
    content: " ";
    margin: -5px 0px 5px 0px;
}

button.btn.btn-primary.onevu-btn-cancel.au-target:hover {
    background-color: black;
    border-color: black;
}



/* ----------------------------------------------------------------------------------------------------
5.0 Page Host
---------------------------------------------------------------------------------------------------- */



.page-host { padding-left: 0px;  padding-right: 0px; }

.page-host ol {list-style: none;margin-top: -30px;}

.page-host ol>li {
	border: 1px solid #ffffff;
	border-left: 25px solid #ffffff;
	counter-increment: item;
	padding-left: 15px;
}

.page-host ol>li>span:nth-of-type(2) {
	display: block;
	padding: 15px 20px;
	/* margin-left: -20px; */
	border-bottom: 2px solid #258437;
	border-radius: 3px;
	background-image: linear-gradient(to left, #258437 0%, #258437 50%) !important;
	color: white;
}
.page-host ol>li p:first-of-type {
    margin-top: 20px;
}

.page-host ol>li a.btn { margin: 10px 0px 0px 0px; }

.page-host ol>li ul { list-style-type: square; margin: 15px 0px; padding-right: 25px; }

.page-host ol>li span {text-decoration: none !important;color: white;font-weight: bold;}

div#main-container {
    background-color: white;
}
.row {
    margin-right: 5px;
    margin-left: 5px;
}


.silo-accordian-header{
	  display: block;
                padding: 15px 20px;
                margin-left: -20px;
                border-bottom: 2px solid #258437;
                background-image: linear-gradient(to left, #258437 0%, #258437 50%) !important;
                border-radius: 3px;
                color: white;
                width: 100%;
                text-align:left;
           
}

/* ----------------------------------------------------------------------------------------------------
6.0 Page Header
---------------------------------------------------------------------------------------------------- */



.page-header {
    background-color: rgba(255, 255, 255, 0.87);
    color: #525252;
    border: none;
    padding-bottom: 0px;
    margin: 0px 10px 15px 0px;
    margin-bottom: 30px;
    padding-left: 20px;
    PADDING-RIGHT: 5PX;
    padding-top: 0px;
}

.page-header h1 {
    color: #525252;
    margin-bottom: 10px;
    font-size: 36px;
    font-weight: 700;
    margin-top: 30px;
}

.page-header h2 {
    font-size: 28px;
    font-weight: 400;
    margin-bottom: -20px;
}

.page-header p { font-weight: bold; }
.page-header .nav { max-width: 310px; display: inline; border-radius: 15px; }
.page-header .nav > li.active > a {
	background-color: #258437;
	color: #ffffff !important;
	border: 0;
	border-bottom: 2px solid rgba(0, 0, 0, 0);
	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);
}
.page-header .nav > li > a:hover,
.page-header .nav > li.active > a:hover
{
	background-color: #258437;
	color: #fff !important;
	-webkit-transition: ease-in .3s;
	border-radius: 2px;
	box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);
}

.silo-detail-alt > nav > ol > li {
	width: 100%;
	margin-bottom: 20px;
	/* margin-left: -20px; */
}

.faq-nav-list { clear: both; }



/* ----------------------------------------------------------------------------------------------------
7.0 Thumbnail Elements
---------------------------------------------------------------------------------------------------- */



.thumbnail.silo-header {/* display: none; */margin-top: -50px;margin-left: 5px;background-color: transparent;}

.thumbnail .details.caption {
    background-color: #00477f;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    padding-top: 10px;
}

.thumbnail .caption {color: #525252;margin-left: auto;margin-right: auto;}

.thumbnail {border: none;}

.thumbnail.silo-list.silo-default { border: 1px solid #e6e6e6; border-radius: 10px; }

.thumbnail.silo-list.silo-default:hover { box-shadow: 0px 0px 15px 0px rgba(197,197,197,0.8); transition: 0.5s; }

.au-target.thumbnail.silo-list.silo-default:hover {box-shadow: 0px 0px 15px 0px #eee;transform: scale3d(1.05,1.05,1.05);}


.thumbnail.data-item.personalisation {
    background-color: rgb(236, 236, 236);
    border-radius: 3px;
    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);
    margin-left: 40px;
}


.thumbnail .header.caption h3 {
	font-size: 22px !important;
}
.thumbnail .details.caption h2 { font-size: 18px; }

.thumbnail .details.caption h3 {font-size: 17px;font-weight: 500;color: #ffffff !important;}

.thumbnail .header.caption h3 {
	font-weight: bold;
	/* line-height: 1.3; */
	color: #525252;
	/* background-color: rgb(140, 11, 64); */
	/* border-radius: 3px; */
	/* padding: 5px; */
	margin-bottom: 10px !important;
	width: auto !important;
}

.thumbnail.silo-list * p.sub-title {
	display: -webkit-inline-box;
	text-overflow: ellipsis;
	min-height: 100%;
	font-size: 16px;
	padding: 4px;
	color: #333;
	background-color: rgba(255, 255, 255, 0);
	border-radius: 3px;
	width: 100%;
}

.thumbnail .nav > li > a {background-color: #161338;color: #ffffff !important;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);margin-bottom: 0px !important;}

.thumbnail.form-search { border: 0px solid #e6e6e6; border-radius: 0px; }
.thumbnail.form-search  .details.caption {background-color: #e9eaea;color: #404040;border-radius: 6px;}

.thumbnail.partial-form-summary.au-target:hover {box-shadow: 0px 0px 5px 0px rgb(140, 11, 64);transition: 0.5s;transform: scale3d(1.05,1.05,1.05);}
.thumbnail.partial-form-summary {
	border: none;
	border-radius: 3px;
	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);
}



.thumbnail.form-type-summary.au-target {border-radius: 3px;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);}
.thumbnail.form-type-summary.au-target:hover {box-shadow: 0px 0px 5px 0px rgb(140, 11, 64);transition: 0.5s;transform: scale3d(1.05,1.05,1.05);}
.thumbnail.form-type-summary .header.caption:hover h3 {color: #525252;}
.thumbnail.form-type-summary {
	border-radius: 10px;
	border: none;
	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);
}

.thumbnail.silo-list.silo-default {border: none;border-radius: 3px;background-color: #ffffff;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);}

.thumbnail .header.caption h2 {/* display: none; */}

.thumbnail.process-summary {
	border-radius: 3px;
	border: none;
	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);
}
.thumbnail.process-summary:hover {box-shadow: 0px 0px 15px 0px rgb(140, 11, 64);transition: 0.5s;transform: scale3d(1.05,1.05,1.05);}

.thumbnail.process-detail {
	border-radius: 10px;
	border: none;
	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);
	margin-top: -10px;
}

.thumbnail .items .panel.steps .list-group .list-group-item .icon { padding-right: 10px; }
.thumbnail .items .panel.documents .form-control { height: 40px; }


.thumbnail .details.caption h2 {font-size: 12px;color: #ffffff;font-weight: bold;}

.thumbnail .header.caption .details-link
{
	background-color: #ffffff;
	margin-left: 5px;
	margin-top: 5px;
	width: 55px;
	height: 55px;
	border-radius: 5px;
	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);
}
.thumbnail .header.caption .details-link:hover {cursor: pointer;background-color: #8dadb1;transition: 0.7s;}
.thumbnail .nav > li.active > a {
    background-color: #fff;
    color: #161338 !important;
}

.thumbnail .nav > li > a:hover {
    background-color: #da6a00;
}

.thumbnail.silo-list .header.caption {min-height: 200px;border-radius: 3px !important;}

.col-xs-3.details-link:after {
	position: relative;
	padding: 0px 17px;
	font-size: 90%;
	font-family: fontawesome;
	color: #161338;
	content: '\f054';
}

.col-xs-3.details-link:hover::after {color: white;transition: 0.7s;}

.part-number { display: none; }


/* ----------------------------------------------------------------------------------------------------
8.0 Font Awesome Elements
---------------------------------------------------------------------------------------------------- */


.fa-stack-1x, .fa-stack-2x {	color: #258437; }

.fa-stack-1x { color: #525252; }


.fa { font-size: 22px; }

i.fa.fa-bars {
	color: white;
	font-size: 22px;
	padding-bottom: 15px;
	padding-right: 10px;
}

i.fa.fa-bars:active { color: #525252; }


i.fa.fa-angle-double-right.fa-stack-1x {	font-size: 18px; }

.fa-stack {
	position: relative;
	width: 1em;
	height: 1em;
	line-height: 1em;
	vertical-align: middle;
}

.fa-stack-1x, .fa-stack-2x {
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
}
.fa-stack-1x { line-height: inherit;	font-size: 0.5em; }
.fa-stack-2x { font-size: 1em; }

.fa-stack { display: none !important; }


.fa-check-circle-o:before { content: "\f058" !important; }
.fa-circle-o:before { content: "\f10c" !important; font-size: 30px; }
.fa-arrow-circle-o-right:before { content: "\f0a9" !important; font-size: 30px; }


/* ----------------------------------------------------------------------------------------------------
9.0 Registration Offered Customisation
---------------------------------------------------------------------------------------------------- */


.reg-offered-container {
	background-color: #258437;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.reg-offered {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	background-color: #00477f !important;
	color: #FFF !important;
	padding: 15px !important;
	text-align: left;
	height: 50px;
}

.reg-offered-container {height: 66px;/* display: none; */background-color: #00477f;}

.reg-offered:after {
	display: inline;
	font-family: fontawesome;
	float: right;
	font-size: 25px;
	margin: -34px 15px 0px 5px;
	content: "\f023";
}


/* ----------------------------------------------------------------------------------------------------
10.0 Customised Bootstrap Columns
---------------------------------------------------------------------------------------------------- */


.col.col-xs-2.col-sm-2.col-md-2.col-sm-2 {width: 35%;}

.col.col-xs-10.col-sm-10.col-md-10.col-sm-10 {width: 65%;font-size: 18px;}

.col-md-12 {
    PADDING-LEFT: 0PX;
    PADDING-RIGHT: 0PX;
    /* MARGIN-LEFT: -20PX; */
    /* MARGIN-RIGHT: -20PX; */
}

/* ----------------------------------------------------------------------------------------------------
11.0 Bins Tile Customisations
---------------------------------------------------------------------------------------------------- */



.service-info-item {
    padding: 0 5px 5px 0;
}

.service-item {
    background-color: #f9f9f9;
    /* border: 1px solid #E5E5E5; */
    /* border-radius: 5px; */
    display: table;
    width: 100%;
    margin-bottom: 5px !important;
    margin-top: 5px;
    margin-left: -40px;
}

.service-item-green {
    border-left: 5px solid #367e4d;
}

.service-item:last-of-type {
    margin-bottom: 0;
}

.service-item .service-item-image {
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px;
}

.service-item-black .service-item-image, .service-item-blue .service-item-image, .service-item-brown .service-item-image, .service-item-green .service-item-image {
    width: 70px;
}

.service-item .service-item-content {
    padding-right: 0;
}

.service-item-blue {
    border-left: 5px solid #0855a1;
}

.service-item-brown {
    border-left: 5px solid #A15615;
}

.service-item-black {
    border-left: 5px solid #0E090A;
}


h3, .h3 {
    font-size: 20px;
    margin-bottom: 0px !important;
}

h3.green {
    color: #367e4d;
    font-weight: bold;
}

h3.brown {
    color: #a15615;
    font-weight: bold;
}

h3.blue {
    color: #0855a1;
    font-weight: bold;
}

h3.Black {
    color: #525252;
    font-weight:bold;
}

a.btn.btn-sm.btn-brown.collapsed {
    background-color: #a15615;
    color: #fff;
    border-radius: 3px;
    border-color: transparent;
font-size: 18px;
    border: none;
    margin-bottom: 5px;
    font-weight: bold;
    max-width: 100%;
    white-space: normal;
    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);
}

a.btn.btn-sm.btn-green.collapsed {
    background-color: #367e4d;
    color: #fff;
    border-radius: 3px;
    border-color: transparent;
font-size: 18px;
    border: none;
    margin-bottom: 5px;
    font-weight: bold;
    max-width: 100%;
    white-space: normal;
    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);
}

a.btn.btn-sm.btn-blue {
    background-color: #0855a1;
    color: #fff;
    border-radius: 3px;
    border-color: transparent;
 font-size: 18px;
    border: none;
    margin-bottom: 5px;
    font-weight: bold;
    max-width: 100%;
    white-space: normal;
    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);
}

a.btn.btn-sm.btn-black {
    background-color: #525252;
    color: #fff;
    border-radius: 3px;
    border-color: transparent;
    font-size: 18px;
    border: none;
    margin-bottom: 5px;
    font-weight: bold;
    max-width: 100%;
    white-space: normal;
    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);
}

/* ----------------------------------------------------------------------------------------------------
12.0 Custom Tables
---------------------------------------------------------------------------------------------------- */



.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #258437;
    color: #0f0f0f;
    font-weight: bold;
}

.table-striped > tbody > tr:nth-of-type(even) {
    color: #525252;
    font-weight: bold;
}

th {
    color: white;
    background-color: #9E9E9E !important;
}

/* ----------------------------------------------------------------------------------------------------
13.0 Custom Calendar in place of dates
---------------------------------------------------------------------------------------------------- */

.calendar {
    margin: .25em 10px 10px 0;
    padding-top: 5px;
    float: left;
    width: 80px;
    background: #ffffff;
    background: -moz-linear-gradient(top,#ededef,#ccc);
    font: bold 30px/60px Arial Black,Arial,Helvetica,sans-serif;
    text-align: center;
    color: #525252;
    text-shadow: #fff 0 1px 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    position: relative;
    -moz-box-shadow: 0 2px 2px #888;
    -webkit-box-shadow: 0 2px 2px #888;
    box-shadow: 0 2px 2px #888;
}

.calendar em {
    display: block;
    font: normal bold 11px/30px Arial,Helvetica,sans-serif;
    color: #fff;
    text-shadow: #dc143c 0 -1px 0;
    background: #dc143c;
    /* background: -webkit-gradient(linear,left top,left bottom,from(#04599a),to(#00365a)); */
    background: -moz-linear-gradient(top,#04599a,#00365a);
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top: 1px solid #dc143c;
    width: 80px;
}

.calendar:before, .calendar:after {
    content: '';
    float: left;
    position: absolute;
    top: 5px;
    width: 8px;
    height: 8px;
    background: #111;
    z-index: 1;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 1px 1px #fff;
    -webkit-box-shadow: 0 1px 1px #fff;
    box-shadow: 0 1px 1px #fff;
}

.calendar:before {
    left: 11px;
}

.calendar:after {
    right: 11px;
}

.calendar em:before, .calendar em:after {
    content: '';
    float: left;
    position: absolute;
    top: -5px;
    width: 4px;
    height: 14px;
    background: #dadada;
    background: -webkit-gradient(linear,left top,left bottom,from(#f1f1f1),to(#aaa));
    background: -moz-linear-gradient(top,#f1f1f1,#aaa);
    z-index: 2;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.calendar em:before {
    left: 13px;
}

.calendar em:after {
    right: 13px;
}

.calendarwide {
	width: 140px;
	background: #f0f0f0;
	float: left;
	margin: 0 10px 20px 0;
	overflow: hidden;
	text-align: center;
}

.calendarwide .head {
	background: #258437;
	color: #fff;
	display: block;
	font-weight: bold;
	font-size: 12px;
	padding: 3px 0 2px 0;
}

.calendarwide .day {
	font-size: 30px;
	line-height: 54px;
			font-weight: bold;
		color: #525252;
}




/* ----------------------------------------------------------------------------------------------------
14.0 Custom Inputs
---------------------------------------------------------------------------------------------------- */

input.form-control.au-target, textarea.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;
}

input.form-control.au-target:focus, textarea.form-control:focus {
outline: 2px solid gold;
}



/* ----------------------------------------------------------------------------------------------------
15.0 Custom Tile Images & Styling
---------------------------------------------------------------------------------------------------- */

.page-host ol>li>span:nth-of-type(2):before {
    content: "\f059";
    font-family: fontawesome;
    padding-right: 10px;
}

/*
#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(1) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/Council%20Tax.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 40%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(1) > div:hover {
    //background-position-y: 90%;
    transition: 0.4s;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(2) > div {
    //background-image: url(https://my-test.hamlet.gov.uk/Content/images/Benefits.jpg);
    background-size: cover;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(2) > div:hover {
    //background-position-y: 90%;
    transition: 0.4s;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(4) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/Waste%20and%20Recycling.jpg);
    background-size: cover;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(4) > div:hover {
    background-position-y: 50%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(8) > div {background-image: url(https://my-test.hamlet.gov.uk/Content/images/Planning%20and%20Building%20Control.jpg);background-size: cover;}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(8) > div:hover {
      background-position-y: 50%;
  }

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(6) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/fraud.jpg);
    background-size: cover;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(6) > div:hover {
    background-position-y: 40%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(9) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/Your%20Council.jpg);
    background-size: cover;
}
*/



/* ----------------------------------------------------------------------------------------------------
16.0 Custom FAQ Answers for Benefits
---------------------------------------------------------------------------------------------------- */

.card1 {
    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);
    background-color: #258437;
    color: white;
    padding: 10px;
    margin-top: 10px;
}

p.cardheader {
    font-size: 25px;
    font-weight: 800;
    color: #4caf4f;
}

i.fa.fa-credit-card-alt {
       padding-right: 10px;
}

h1.hero {
    padding-left: 5px;
    font-size: 17px;
}

p.hero {
    color: #525252;
    text-align: center;
}

button.btn.btn-info.collapsed1.collapsed {
    background-color: black;
    color: white;
    margin-left: 10px;
}

button.btn.btn-info.collapsed1.collapsed:before {
    content: " ";
    font-family: fontawesome;
}

button.btn.btn-info.collapsed1.collapsed:after {
    content: "\f067";
    font-family: fontawesome;
}

button.btn.btn-info.collapsed1 {
    background-color: #eee;
    color: #525252;
    margin-left: 10px !important;
}


p.hero1 {
    color: #525252;
    font-size: 35px;
    text-align: center;
}

.card2 {
    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);
    background-color: #4aa844;
    color: white;
    padding: 10px;
    margin-top: 10px;
}

i.fa.fa-check-square {
    padding-right: 10px;
}

.card3 {
    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);
    background-color: #b91235;
    color: white;
    padding: 10px;
    margin-top: 10px;
    margin-left: -10px;
}

i.fa.fa-arrow-up {
    padding-right: 10px;
}

.card4 {
    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);
    background-color: #999;
    color: white;
    padding: 10px;
    margin-top: 10px;
}

i.fa.fa-envelope {
    padding-right: 10px;
}

i.fa.fa-credit-card {
    padding-right: 10px;
}

.panel.panel-default {
    border-radius: 0px;
}

.panel-body {
    color: #525252;
}

.header.caption2 {
    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);
    margin-top: 5px;
    margin-bottom: 5px;
    border-left: 5px solid #258437;
    height: 140px;
}

.header.caption3 {
    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);
    margin-top: 5px;
    margin-bottom: 5px;
    border-left: 5px solid #258437;
    height: 140px;
}

.header.caption2:hover {
    font-weight: bold;
    transition: 0.3s;
    transform: scale3d(1.03,1.03,1.03);
}

.header.caption3:hover {
    font-weight: bold;
    transition: 0.3s;
    transform: scale3d(1.03,1.03,1.03);
}


h3.title1:before {
    content: "\f06a";
    padding-right: 10px;
    font-family: fontawesome;
}

h3.title3:before {
    content: "\f1ad";
    font-family: fontawesome;
    padding-right: 10px;
}

h3.title2:before {
    content: "\f1f8";
    font-family: fontawesome;
    padding-right: 10px;
}


/* ----------------------------------------------------------------------------------------------------
17.0 Custom Track My Requests Styling
---------------------------------------------------------------------------------------------------- */

i.fa.fa-arrow-circle-o-right {
    transform: rotate(90deg);
}

strong.pull-left {
    color: #161338;
}

.list-group.au-target {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: gainsboro;
}

.list-group-item {
    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);
 margin: 20px;
}

.pull-left { font-size: 16px; }
.pull-right {font-size: 14px;}

.col-xs-1.icon.complete.au-target {
	font-size: 30px !important;
	background-color: white;
	padding-bottom: 38px;
	padding-top: 38px;
	padding-right: 30px;
	/* padding-left: 5px; */
	color: #1eba1e;
}

.col-xs-1.icon.in-progress.au-target {
	background-color: #ffffff;
	color: #161338;
	padding-bottom: 38px;
	padding-top: 38px;
	padding-right: 30px;
	font-size: 30px !important;
}

/*Family and friends branding start*/

.navbar.navbar-default.friends-bar .container-fluid a.dropdown-toggle {
    background-color: #258437 !important;
    border-radius: 5px !important;
    margin-top: 2px !important;
}

.navbar.navbar-default.friends-bar .container-fluid a.dropdown-toggle:hover {
    background-color: #8dacb2 !important;
    border-color: #8dacb2 !important;
    color: #ffffff !important;
    transition: 0.3s !important;
}

.navbar.navbar-default.friends-bar .navbar-brand {
    color: #676a6c !important;
    margin-top: 2px !important;
}

.navbar.navbar-default.friends-bar .container-fluid {
    background-image: none !important;
    height: 55px !important;
}

.navbar.navbar-default.friends-bar ul.nav.navbar-nav.navbar-right {
    float: left !important;
    margin-left: 10px;
    width: 330px;
}

.navbar.navbar-default.friends-bar.active {
    background-color: #fff !important;
}

.navbar.navbar-default.friends-bar.active .navbar-nav > li > a:hover, .navbar.navbar-default.friends-bar.active .navbar-nav > li > a:focus {
    backround-color: #FF6F00 !important;
    margin-top: 2px !important;
    border-radius: 5px !important;
}

.navbar.navbar-default.friends-bar.active .navbar-nav > li > a:hover, .navbar.navbar-default.friends-bar.active .navbar-nav > li:first-child + li > a {
    background-color: #FF6F00 !important;
    margin-top: 2px !important;
    border-radius: 5px !important;
}

.navbar.navbar-default.friends-bar.active .navbar-nav > li > a:hover, .navbar.navbar-default.friends-bar.active .navbar-nav > li:first-child > a:hover {
    background-color: #8dacb2 !important;
    border-color: #8dacb2 !important;
    color: #ffffff !important;
    transition: 0.3s !important;
}

span.navbar-brand {
    padding: 0px !important;
    padding-top: 15px !important;
}

/*Family and friends branding end*/

/* ----------------------------------------------------------------------------------------------------
18.0 Media Query content for Mobile
---------------------------------------------------------------------------------------------------- */

@media (max-width: 850px) { 

.card {
	width: 80% !important;
	background: #ffffff;
	/* float: left; */
	margin: 10px;
	margin-top: 20px;
	overflow: hidden;
	text-align: center;
	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);
	border-left: 3px solid #258437;
	padding: 10px;
	height: 100%;
	margin-left: -20px;
}

.navbar.navbar-default .container-fluid {
    background-position-x: 50%;
    background-position-y: 50%;
}

.navbar.navbar-default .container-fluid .primary-header:before {
    content: " ";
}

.primary-header {
    margin-top: 15px;
    }

.thumbnail.silo-list * p.sub-title {
	height: 100%;
	padding: 4px;
	width: 260px;
	margin-top: 40px;
	} 

	.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
}

.thumbnail.partial-form-summary .header.caption {height: 200px !important;} 
.thumbnail.form-type-summary .header.caption {height: auto !important;} 
.thumbnail.process-summary .header.caption {height: 200px !important;} 

.view-portal { height: 100%; margin: 0px -10px; }
.view-portal:before
	{
		width: 100%; height: 4px;
		background-color: #258437;
		display: block; content: " ";
		margin: -5px 0px 5px 0px;
	}

.thumbnail.silo-list .header.caption {height: 250px;} 
h4 { padding: 15px; font-size: 25px; } 
.alert-warning {margin: 0 0 20px 20px;} 
.btn-primary {font-size: 18px;} 

.nav-pills.nav-justified li {
		float:left;
		width: 28%;
		white-space: normal;
	}
.nav-pills.nav-justified li:last-of-type { width: 44%; }
.silo-detail-alt > nav > ol > li { width: 100%; } 
.page-header .nav > li { width: 99%; } 
.page-host:after { width: 115%; } 
.page-host ol { padding-left: 35px; } 

}

/* ----------------------------------------------------------------------------------------------------
19.0 Mini Menu on Mobile
---------------------------------------------------------------------------------------------------- */


	.mini-menu {
    color: white;
    background-position: 50% 0px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(https://hamlet.gov.uk/media/EBC/web-files/communications/featured/West_Park_in_the_snow.jpg);
}

.mini-menu .navbar-nav:last-child li:last-child > a {
    background-color: #138A02;
    color: white;
    border-radius: 3px;
    border-color: transparent;
    border-bottom: none;
    font-weight: bold;
    text-align: center;
    width: 225px;
    margin: 20px auto;
    white-space: normal;
    margin-top: 40px;
    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);
}


.mini-menu .content i.close { opacity: 0.95; width: 100%; }

.mini-menu .navbar-nav li a {font-size: 20px;margin-bottom: 10px;color: #fff !important;}

.mini-menu .navbar-nav { text-align: right; }

.mini-menu .navbar-nav:last-child li:last-child > a
{
	background-color: #258437;
	color: #fff;
	border-radius: 3px;
	border-color: transparent;
	border-bottom: none;
	font-weight: bold;
	text-align: center;
	width: 225px;
	margin: 20px auto;
	white-space: normal;
}
.mini-menu .navbar-nav:last-child li:last-child > a:hover,
.mini-menu .navbar-nav:last-child li:last-child > a:focus
{
	background-color: #258437;
	color: #FFF; text-decoration: none;
	transition: .3s; -webkit-transition: .3s;
}

.mini-menu .content {
	margin-left: -15px;
	margin-right: -15px;
	position: relative;
	padding-top: 10px;
	margin-top: 0px;
	padding-right: 20px;
	background-color: rgba(0, 0, 0, 0.32);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	height: 100%;
	background-position: center;
}

.mini-menu .content h1 { display: none; }

.mini-menu .content > h1
{
	display: block;
	font-size: 20px;
	margin-top: 6px;
	margin-bottom: 6px;
	text-align: right;
	font-weight: normal;
	padding-right: 25.5px;
	padding-bottom: 12px;
	color: white;
}

#app > person-home > div.mini-menu > div > div > ul > li:nth-child(1) > a:after {
    content: "\f054";
    font-family: fontawesome;
    padding-left: 10px;
}

#app > person-home > div.mini-menu > div > ul > li.au-target.active > a:after {

    content: "\f059";font-family: fontawesome;padding-left: 10px;

    }

#app > person-home > div.mini-menu > div > ul > li:nth-child(2) > a:after {

    content: "\f044";font-family: fontawesome;padding-left: 10px;

}

#app > person-home > div.mini-menu > div > ul > li:nth-child(3) > a:after {

    content: "\f0ae";font-family: fontawesome;padding-left: 10px;
    
}

#app > person-home > div.mini-menu > div > div > ul > li:nth-child(1) > a {
    /* display: none; */
}


#menu-navbar-collapse > ul:nth-child(2) > li.au-target.active > a:after

{

    content: "\f059";font-family: fontawesome;padding-left: 10px;

}


#menu-navbar-collapse > ul:nth-child(2) > li:nth-child(2) > a:after {

 content: "\f044";font-family: fontawesome;padding-left: 10px;

}

#menu-navbar-collapse > ul:nth-child(2) > li:nth-child(3) > a:after

{

    content: "\f0ae";font-family: fontawesome;padding-left: 10px;

}


#menu-navbar-collapse > ul:nth-child(2) > li:nth-child(4) > a:after {
    content: "\f2bd";
    font-family: fontawesome;
    padding-left: 10px;
}


/* ----------------------------------------------------------------------------------------------------
20.0 Custom Alerts & Links
---------------------------------------------------------------------------------------------------- */

.alert-danger {
    color: white;
    background-color: crimson;
    border-color: #dc143c;
    font-weight: bold;
    font-size: 18px;
}

.alert.alert-danger:before {
    content: "\f071";
    font-family: fontawesome;
    padding-right: 10px;
}

.alert-info {
    color: #ffffff;
    background-color: #2968ac;
    border-color: #2968ac;    
    font-weight: bold;
    font-size: 18px;
}


a {
    color: #0755a1;
}

a:hover {
    color: #1b9615;
}

.alert.alert-warning {
    margin-bottom: 30px;
    margin-left: 0px;
    background-color: #8dacb2;
    color: white;
    font-weight: bold;
    border: 2px solid #8dacb2;
}

/* ----------------------------------------------------------------------------------------------------
21.0 Miscellaneous Customisations
---------------------------------------------------------------------------------------------------- */




#main-container > div > router-view > div > div > router-view > compose > div.au-target.silo-detail-alt.row.silo-default > nav > ol > li:nth-child(1) > markdown-with-html > div:nth-child(1) > div {
    /* margin-top: 30px; */
}

img.councillor {
    padding: 0 !important;
}

.header.councillor {
    margin: 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);
}

.card {
	width: 32% !important;
	background: #ffffff;
	/* float: left; */
	margin: 10px;
	margin-top: 20px;
	overflow: hidden;
	text-align: center;
	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);
	border-left: 3px solid #258437;
	padding: 10px;
	height: 100%;
	margin-left: -20px;
}

span.topstrip {
	background: #004c9a;
	color: #fff;
	display: block;
	font-size: 12px;
	/* text-align: left; */
	padding-left: 3px;
	padding: 3px 0 2px 0;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	 font-weight: bold;
}

span.accountno {
	background: #f0f0f0;
	color: #fff;
	display: block;
	font-size: 30px;
	padding: 7px 0 2px 0;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	height: 43px;
		font-weight: bold;
		color: #525252;
	
}

span.lowerstrip {
	background: #004c9a;
	color: #fff;
	display: block;
	font-size: 12px;
	/* text-align: left; */
	padding-left: 3px;
	padding: 3px 0 2px 0;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	height: 10px;
}


/* ----------------------------------------------------------------------------------------------------
22.0 Customer Service View Customisations
---------------------------------------------------------------------------------------------------- */


.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: #262626;
    text-decoration: none;
    background-color: rgba(245, 245, 245, 0);
}

.navbar.navbar-default.management-menu li.customer:hover {
    background-color: #efefef;
}

.person-row .nav > li > a:hover {
    background-color: #4aa844;
    transition: ease-in 0.3s;
    color: white !important;
}

.navbar.navbar-default.menu .navbar-nav > .active > a {
    border-bottom: 2px solid gold;
}

ul.dropdown-menu > li {
    padding: 4px;
    list-style: none;
}

ul.dropdown-menu > li:hover {
    background-color: #dcebf9;
    padding-left: 10px;
    transition: 0.3s;
}


.row.flank-menu-container {
    border-radius: 3px;
}

.flank-menu .btn-end:hover {
    cursor: pointer;
}

.flank-menu .btn-end:after {
    content: "Start a call";
    font-size: 20px;
    padding-left: 10px;
}



.pagination > li:last-child > a, .pagination > li:last-child > span {

    padding-top: 4px;
}

.pagination > li:first-child > a, .pagination > li:first-child > span {
    padding-top: 4px;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #0160a8;
    border-color: #0160a8;
}

a.dropdown-toggle {
    color: #525252 !important;
}

#menu-navbar-collapse > ul:nth-child(1) > li > a {
    color: white !important;
    background: transparent;
}

#menu-navbar-collapse > ul:nth-child(1) > li > a:hover, #menu-navbar-collapse > ul:nth-child(1) > li > a:focus {
    color: white !important;
}

.navbar.navbar-default .container-fluid .secondary-header img {
    height: 50px;
}

.navbar.navbar-default .container-fluid .primary-header img {
    height: 130px;
    margin-bottom:30px;
}


.secondary-header {
    display: none;
}

.navbar.navbar-default.management-menu .container-fluid {
    background-image: none;
    height: 51px;
    background-color: #293846;
}

.navbar.navbar-default .container-fluid .primary-header:before {
    margin-top: 0px;
}

.navbar.navbar-default.management-menu .navbar-nav > li > a {color: #525252 !important;}

.navbar.navbar-default.management-menu .navbar-nav > li > a:hover, .navbar.navbar-default.management-menu .navbar-nav > li > a:focus {
    color: white !important;
    background-color: #0854a1;
}

.navbar.navbar-default.management-menu input::-webkit-input-placeholder {
    color: #ffffff;
}

.row.person-row {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
}

.person-row h3:before {
}

.person-row h4:before {
    content: "\f0e0";
    font-family: fontawesome;
    padding-right: 10px;
}
.navbar.navbar-default.management-menu input::-webkit-input-placeholder {
    color: #525252;
}

button.btn.btn-default.dropdown-toggle.au-target {
    border: 1px solid rgba(200, 200, 200, 0);
    color: #161338 !important;
    background-color: #ffffff;
    border-radius: 2px;
    margin-right: 5px;
    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);
    font-size: 18px;
    width: 300px;
    text-align: left;
}

.flank-menu .btn-end {
    background-color: #1ba11d;
    padding: 20px;
}

.alert-success {
    color: #ffffff;
    background-color: #4CAF50;
    border-color: #4CAF50;
    font-weight: bold;
    font-size: 18px;
}

.call-end {
    color: #C34545;
    border-color: #C34545;
    border-radius: 3px;
    background-color: white;
    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);
}

.alert > p, .alert > ul {
    margin-bottom: 0;
    color: white;
}



/* ----------------------------------------------------------------------------------------------------
23.0 Hamlet Images
---------------------------------------------------------------------------------------------------- */

/*
#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(16) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/neighbourhood%20wardens.jpg);
    background-size: 100%;
    background-position-y: 40%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(19) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/licensing.jpg);
    background-size: cover;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(20) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/elections.jpg);
    background-size: 100%;
    background-position-y: 20%;
    background-position-x: 10%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(14) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/Green%20Space%20and%20Street%20Scene.jpg);
    background-size: 100%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(17) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/Dogs%20-%20Neighbourhood%20Dog%20Wardens.jpg);
    background-size: 100%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(15) > div {
    background-size: 100%;
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/Environmental%20Health.jpg);
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(14) > div:hover {
    background-position-y: 40%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(17) > div:hover {
    background-position-y: 90%;
    background-position-x: 10%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(16) > div:hover {
    background-position-y: 90%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(19) > div:hover {
    background-position-y: 90%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(20) > div:hover {
    background-position-y: 90%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(15) > div:hover {}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(15) > div:hover {
    background-position-y: 90%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(9) > div:hover {
    background-position-y: 90%;
}
*/

.table {
    font-size: 17px;
}

.table > tbody > tr.success > td {
    background-color: #009688;
}

.footercard {
    margin-left: -30px;
    margin-right: 30px;
}

#main-container > div > router-view > div > div > router-view > compose > div.au-target.silo-detail-alt.row.silo-default > nav > ol > li:nth-child(1) > markdown-with-html > div:nth-child(4) {
    margin-top: -21px;
}

.reg-offered h2 {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    margin-top: 3px;
    vertical-align: middle;
}




/* JMc New Multiple Accounts Styling */

.btn-warning {
    color: #fff;
    background-color: crimson;
    border-color: crimson;
}

.btn-warning:hover {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
    transition: ease-in 0.2s;
}

span.personalise-another.invert {
    width: 100% !important;
    margin-top: 10px;
    white-space: normal;
    border-radius: 3px;
    border-color: transparent;
    font-weight: bold;
    background-color: rgb(0, 0, 0);
    color: #ffffff;
    border: 0;
    padding: 10px 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);
}

span.personalise-another.invert:hover {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
    transition: ease-in 0.2s;
}

span.personalise-another.invert:after {
    content: "\f067";
    font-family: fontawesome;
    float: right;
}

span.context-item-value {
    font-size: 17px;
    font-weight: bold;
    color: #525252;
}

#main-container > div > router-view > div > div > router-view > compose > compose > div.row.context-row > div > div > div:nth-child(1) > span.context-item-label:after {
    content: " being viewed";
}


#main-container > div > router-view > div > div > router-view > compose > compose > div.row.context-row > div > div > div:nth-child(1) > span.context-item-label, #main-container > div > router-view > div > div > router-view > compose > compose > div.row.context-row > div > div > div:nth-child(2) > span.context-item-label {
    background-color: #258437;
    color: white;
    padding: 15px 20px;
    font-size: 18px;
}

#main-container > div > router-view > div > div > router-view > compose > compose > div.row.context-row > div > div > div:nth-child(1) > span.context-item-label {

border-top-left-radius: 3px;
border-bottom-left-radius: 3px;


}


#main-container > div > router-view > div > div > router-view > compose > compose > div.row.context-row > div > div > div:nth-child(2) > span.context-item-label {

border-top-right-radius: 3px;
border-bottom-right-radius: 3px;

}


.reg-offered h2 {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    margin-top: 3px;
    vertical-align: middle;
}


#main-container > person-information > div:nth-child(2) > div > div:nth-child(2) > p {
    color: white !important;
}


@media (max-width: 767px) {.alert-warning {	margin: 0 0 20px 0; } 

.card {
	width: 90% !important;
	background: #ffffff;
	/* float: left; */
	margin: 10px;
	margin-top: 20px;
	overflow: hidden;
	text-align: center;
	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);
	border-left: 3px solid #258437;
	padding: 10px;
	height: 100%;
	margin-left: -20px;
}

.col.col-xs-2.col-sm-2.col-md-2.col-sm-2 {width: 100%;}
.col.col-xs-10.col-sm-10.col-md-10.col-sm-10 {width: 100%;}

.silo-detail-alt > nav > ol > li > span:not(:first-child) { font-size: 16px; } 

button.pull-right.btn.btn-warning.btn-xs.au-target {
    margin-top: 10px !important;

}

}





.banner {
    width: 100%;
    background-color: #18643d;
    color: white;
    font-size: 28px;
    border-radius: 4px;
    font-weight: bold;
    padding: 5px;
}

.Band {
    float: right;
    margin-top: -43px;
    margin-right: 5px;
}

p.banner {
    font-size: 19px;
    text-align: center;
}

.Balance {
    text-align: center;
    margin-top: -10px;
    margin-bottom: 10px;
}

p.TotalBalance {
    text-align: center;
}



.newcard {
    width: 95%;
    background: #ffffff;
    float: left;
    height: 980px;
    padding: 10px;
    margin: 0 10px 20px 0;
    overflow: hidden;
    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);
}

.chartcard {
    width: 100%;
    margin-top: 15px !important;
    min-height: 465px;
    background: #ffffff;
    float: left;
    padding: 10px;
    margin: 0 10px 20px 0;
    overflow: hidden;
    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);
}



.card1 {
    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);
    background-color: #ffffff;
    color: white;
    padding: 10px;
    margin-top: 10px;
}

i.fa.fa-credit-card-alt {
       padding-right: 10px;
}

h1.hero {
    padding-left: 5px;
    font-size: 24px;
}

p.hero {
    color: #333;
    text-align: center;
}

button.btn.btn-info.collapsed1.collapsed {
    background-color: black;
    color: white;
}

button.btn.btn-info.collapsed1.collapsed:before {
    content: " ";
    font-family: fontawesome;
}

button.btn.btn-info.collapsed1.collapsed:after {
    content: "\f067";
    font-family: fontawesome;
}

button.btn.btn-info.collapsed1 {
    background-color: #eee;
    color: #525252;
}


.circle-p, .circle-d, .circle-c, .circle-l, .circle-e, .circle-cc, .circle-cg, .circle-de  {
    height: 24px;
    width: 24px;
    border-radius: 24px;
    background-color: purple;
    float: left;
    margin-right: 10px;
    background: linear-gradient(#3F51B5 0, #673AB7 100%);
}

.circle-e  {
     background: linear-gradient(#e9eaea00 0, #364d71 100%);
}

.piechart-amounts {
    float: right;
    margin-top: -37px;
    font-weight: bold;
    font-size: 18px;    
    color: #3a3a3a;
}

td.capitals {
    text-transform: capitalize !important;
}

/* ----------------------------------------------------------------------------------------------------
www.ieg4.com Custom CSS © IEG4 Ltd.
---------------------------------------------------------------------------------------------------- */


/* --------------------------------------------------
TABLE OF CONTENTS
    -------------------------------------------------- 

1.0 Fonts
2.0 Custom HTML Header
3.0 Navbar
4.0 Buttons
5.0 Page Host
6.0 Page Header
7.0 Thumbnail Elements
8.0 Font Awesome ElementsRegistration Offered Customisation
9.0 Registration Offered Customisation
10.0 Customised Bootstrap Columns
11.0 Bins Tile Customisations
12.0 Custom Tables
13.0 Custom Calendar in place of dates
14.0 Custom Inputs
15.0 Custom Tile Images & Styling
16.0 Custom FAQ Answers for Benefits
17.0 Custom Track My Requests Styling
18.0 Media Query content for Mobile
19.0 Mini Menu on Mobile
20.0 Custom Alerts & Links
21.0 Miscellaneous Customisations
22.0 Customer Service View Customisations
*/


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

@import url("https://fonts.googleapis.com/css?family=Poppins:400,600,700,300,100");
body, div, h1, h2, .thumbnail .header.caption h3, input, textarea, select, a, p, ul, ol, li, label, span {
	font-family: Helvetica Neue, 'Arial',Helvetica,Arial,Sans-Serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	}

	ul ul, ol ul, ul ol, ol ol, p, li {font-size: 18px;color: #525252; list-style:disc;}

label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 17px;
	color: #525252;
}

span {
    font-size: 18px;
}

small { display: none; }
 

/* ----------------------------------------------------------------------------------------------------
2.0 Custom HTML Header
---------------------------------------------------------------------------------------------------- */

button.btn.btn-info.collapsed {
    width: 100%;
    border-radius: 3px;
    background-color: #f0f0f0;
    border: none;
    color: #333;
    font-size: 17px;
    font-weight: bold;
    text-align: left;
    margin-left: 10px;
    font-weight: bold;
    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);
}


button.btn.btn-info.collapsed:before {
    content: "\f14a";
    font-family: fontawesome;
    padding-right: 5px;
}

button.btn.btn-info {
    background-color: #8b0c41;
    font-size: 17px;
    font-weight: bold;
    width: 100%;
    border-radius: 3px;
    border: none;
    text-align: left;
    padding: 15px 20px;
    font-weight: bold;
    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);
    margin-top: 10px;
}

li.help {
    margin-left: 30px;
    margin-bottom: 0px;
}

button.btn.btn-info.collapsed:after {
    content: " ";
}

button.btn.btn-info:after {
    content: "\f057";
    margin-left: 20px;
    font-family: fontawesome;
     /* IE 9 */
     /* Chrome, Safari, Opera */
    transition: all 0.5s ease-in;
    float: right;
}

a.btn.btn-trash {
    /* display: none; */
    width: 100%;
    text-align: left;
    background-color: #d96a00;
    color: white;
    border-radius: 0px;
    font-size: 17px;
    border: none;
    font-weight: bold;
}
 
/* ----------------------------------------------------------------------------------------------------
3.0 Navbar
---------------------------------------------------------------------------------------------------- */

.nav-tabs > li > a {
    color: #525252 !important;
}

.nav.nav-tabs {
    background-color: gainsboro !important;
    padding: 10px;
}

.navbar.navbar-default .container-fluid {
    background-repeat: no-repeat;
    height: 130px;
    background-image: url(https://hamlet.gov.uk/media/EBC/files/Logos/logo.png);
    background-color: rgb(255, 255, 255);
    background-size: 100px;
    border-bottom: none;
    background-position-x: 90%;
    background-position-y: 50%;
}

.navbar.navbar-default .container-fluid .primary-header {
    margin-top: 20px;
}

.navbar.navbar-default .container-fluid .primary-header:before {
    display:none;
    content: "";
    font-size: 42px;
    font-weight:bold;
    color: #8c0b41;
}

.navbar.navbar-default .container-fluid .primary-header h2 {
    color: #ffffff00;
    display: none;
}

.primary-header {
    margin-top: 35px;
}

.navbar.navbar-default.menu button {
    color: #fff;
    border-style: none;
    margin-top: 4px;
}

.navbar.navbar-default.menu button span:after {
	content: "\f0c9"; margin: 0px 5px 0px 10px;
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-moz-osx-font-smoothing: grayscale;
}

.navbar.navbar-default.menu .container-fluid {
	background-size: cover;
	background-image: linear-gradient(to right, #258437 0%, #258437 50%) !important;
	background-repeat: repeat-x;
}

.nav-pills > li {	font-size: 18px; }


.navbar.navbar-default.menu .navbar-nav > .open > a, .navbar.navbar-default.menu .navbar-nav > .open > a:hover, .navbar.navbar-default.menu .navbar-nav > .open > a:focus {
	color: #ffffff !important;
	background-color: #333;
	border-bottom: 4px solid #3daf2f;
}

.nav-pills > li + li { margin-left: 0px; }

.active { background: transparent; font-weight: bold; }

.nav > li > a {
    color: #fff;
    font-size: 18px;
}


.navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 18px;
}

.navbar.navbar-default.menu .navbar-nav > li > .dropdown-menu {width: 100%;margin-right: 10px;}
.navbar.navbar-default.menu .navbar-nav > li > .dropdown-menu li {padding: 10px 0px;}

.navbar.navbar-default.menu .navbar-nav > li > a:hover, .navbar.navbar-default.menu .navbar-nav > li > a:focus {
    color: #fff !important;
    border-bottom: 4px solid #415467;
    background-color: #415467;
    transition: 0.3s;
    border-radius: 0px;
    background-image: none;
    background-color: #425466;
    border: none;
    transition: all 600ms cubic-bezier(0.73, 0.29, 1, 1);
    box-shadow: inset 0 -81px 0 0 rgb(141, 173, 177);
    cursor: pointer;
    background: #ffffff;
}

.navbar.navbar-default.menu .navbar-nav > .active > a, .navbar.navbar-default.menu .navbar-nav > .active > a:hover, .navbar.navbar-default.menu .navbar-nav > .active > a:focus {
    border-top: none;
    margin-top: 0px;
}




#menu-navbar-collapse > ul:nth-child(2) > li.au-target.active > a {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.08);
    border-bottom: 2px solid #ffffff;
    FONT-WEIGHT: 700;
    font-size: 18px;
}

.person-row .nav > li > a, .page-header .nav > li > a {
    border: 1px solid rgba(200, 200, 200, 0);
    color: #161338 !important;
    background-color: #ffffff;
    border-radius: 2px;
    margin-right: 5px;
    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);
}

#page-content-wrapper > nav > div {

	padding-right:0px !important;
}


a.dropdown-toggle {
    background-color: #fff;
    border-bottom: none;
    color: white !important;
}
.fa-remove:before, .fa-close:before, .fa-times:before {
    content: "\f00d";
    padding-right: 20px;
}



/* ----------------------------------------------------------------------------------------------------
4.0 Core Buttons
---------------------------------------------------------------------------------------------------- */


.btn-primary {
	border-color: transparent;
	border-radius: 3px;
	color: #fff;
	border-bottom: none;
	font-weight: 700;
	line-height: 1.5;
	font-size: 18px;
	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);
	background-color: #258437;
}


.btn-primary:after {
    font-family: FontAwesome;
    padding-left: 10px;
    position: relative;
    font-size: 90%;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, 
.btn-primary.active, .open .dropdown-toggle.btn-primary
{
	background-color: #8dacb2;
	border-color: #8dacb2;
	color: #ffffff;
	transition: 0.3s;
}


button.btn.btn-default.onevu-btn-register, button.btn.btn-default.au-target {
    border-radius: 3px;
    border-color: transparent;
    font-size: 18px;
    font-weight: bold;
    background-color: #258437;
    color: #ffffff;
    border: 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
    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);
}

button.btn.btn-default.onevu-btn-register:after {
	content: '\f054'; 
	font-family: FontAwesome;
	padding-left: 20px;
	position: relative;
	font-size: 90%;
}

button.btn.btn-default.onevu-btn-register:hover {
	background-color: #8dacb2;
	color: #fff;
	text-decoration: none;
	transition: .3s;
}


a.btn.btn-sm.btn-primary {
	max-width: 95%;
	white-space: normal;
	border-radius: 3px;
	border-color: transparent;
	font-weight: bold;
	background-color: rgb(75, 175, 79);
	color: #ffffff;
	border: 0;
	padding: 15px 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);
}

a.btn.btn-sm.btn-primary:after {
	content: '\f054';
	font-family: FontAwesome;
	padding-left: 10px;
	position: relative;
	font-size: 90%;
}

a.btn.btn-sm.btn-primary:hover {
	background-color: #8dacb2;
	color: #fff;
	text-decoration: none;
	-webkit-transition: .3s;
	transition: .3s;
}

button.pull-right.btn.btn-warning.btn-xs.au-target {color: white;border-bottom: 2px solid rgba(0, 0, 0, 0);width: 100%;margin-left: -0px;padding: 10px 20px;font-size: 18px;margin-top: 31px;}

button.pull-right.btn.btn-warning.btn-xs.au-target:after {
	font-family: 'FontAwesome';
	padding-left: 5px;
	position: relative;
	font-size: 18px;
	content: '\f057';
	color: white;
	float: right;
}


span.btn.btn-default.btn-file:hover {
	background-color: #000;
	border-color: #000;
	color: #ffffff;
	transition: 0.3s;
}

button.btn.btn-primary.onevu-btn-cancel.au-target:hover {
    background-color: black;
    border-color: black;
}


.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
    z-index: 2;
    margin-left: -1px;
    border-color: transparent;
    background-color: #f3801e;
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    font-size: 15px;
    height: 40px;
}

button.btn.btn-primary.onevu-btn-submit.au-target:after {
    font-family: fontawesome;
    content: "\f00c";
}

button.btn.btn-primary.onevu-btn-cancel.au-target:after {
    content: "\f00d";
    font-family: fontawesome;
}

button.btn.btn-primary.onevu-btn-cancel.au-target {
    background-color: crimson;
}


.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-radius: 3px;
    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);
    background-color: #f3801e;
    color: white;
    font-weight: 700;
    line-height: 1.5;
    font-size: 18px;
    border: none;
}

.btn-warning {
    background-color: #4CAF50;
    white-space: normal;
    border-radius: 3px;
    border-color: transparent;
    font-weight: bold;
    border: 0;
    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-warning:hover {
    color: #fff;
    background-color: black;
    border-color: black;
    transition: 0.3s;
}

.navbar.navbar-default.menu {
    height: 52px;
}

div#view-portal:before {
    width: 100%;
    height: 4px;
    background-color: #fff;
    display: block;
    content: " ";
    margin: -5px 0px 5px 0px;
}

button.btn.btn-primary.onevu-btn-cancel.au-target:hover {
    background-color: black;
    border-color: black;
}



/* ----------------------------------------------------------------------------------------------------
5.0 Page Host
---------------------------------------------------------------------------------------------------- */



.page-host { padding-left: 0px;  padding-right: 0px; }

.page-host ol {list-style: none;margin-top: -30px;}

.page-host ol>li {
	border: 1px solid #ffffff;
	border-left: 25px solid #ffffff;
	counter-increment: item;
	padding-left: 15px;
}

.page-host ol>li>span:nth-of-type(2) {
	display: block;
	padding: 15px 20px;
	/* margin-left: -20px; */
	border-bottom: 2px solid #258437;
	border-radius: 3px;
	background-image: linear-gradient(to left, #258437 0%, #258437 50%) !important;
	color: white;
}
.page-host ol>li p:first-of-type {
    margin-top: 20px;
}

.page-host ol>li a.btn { margin: 10px 0px 0px 0px; }

.page-host ol>li ul { list-style-type: square; margin: 15px 0px; padding-right: 25px; }

.page-host ol>li span {text-decoration: none !important;color: white;font-weight: bold;}

div#main-container {
    background-color: white;
}
.row {
    margin-right: 5px;
    margin-left: 5px;
}


.silo-accordian-header{
	  display: block;
                padding: 15px 20px;
                margin-left: -20px;
                border-bottom: 2px solid #258437;
                background-image: linear-gradient(to left, #258437 0%, #258437 50%) !important;
                border-radius: 3px;
                color: white;
                width: 100%;
                text-align:left;
           
}

/* ----------------------------------------------------------------------------------------------------
6.0 Page Header
---------------------------------------------------------------------------------------------------- */



.page-header {
    background-color: rgba(255, 255, 255, 0.87);
    color: #525252;
    border: none;
    padding-bottom: 0px;
    margin: 0px 10px 15px 0px;
    margin-bottom: 30px;
    padding-left: 20px;
    PADDING-RIGHT: 5PX;
    padding-top: 0px;
}

.page-header h1 {
    color: #525252;
    margin-bottom: 10px;
    font-size: 36px;
    font-weight: 700;
    margin-top: 30px;
}

.page-header h2 {
    font-size: 28px;
    font-weight: 400;
    margin-bottom: -20px;
}

.page-header p { font-weight: bold; }
.page-header .nav { max-width: 310px; display: inline; border-radius: 15px; }
.page-header .nav > li.active > a {
	background-color: #258437;
	color: #ffffff !important;
	border: 0;
	border-bottom: 2px solid rgba(0, 0, 0, 0);
	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);
}
.page-header .nav > li > a:hover,
.page-header .nav > li.active > a:hover
{
	background-color: #258437;
	color: #fff !important;
	-webkit-transition: ease-in .3s;
	border-radius: 2px;
	box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);
}

.silo-detail-alt > nav > ol > li {
	width: 100%;
	margin-bottom: 20px;
	/* margin-left: -20px; */
}

.faq-nav-list {clear: both;}



/* ----------------------------------------------------------------------------------------------------
7.0 Thumbnail Elements
---------------------------------------------------------------------------------------------------- */



.thumbnail.silo-header {/* display: none; */margin-top: -50px;margin-left: 5px;background-color: transparent;}

.thumbnail .details.caption {
    background-color: #00477f;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    padding-top: 10px;
}

.thumbnail .caption {color: #525252;margin-left: auto;margin-right: auto;}

.thumbnail {border: none;}

.thumbnail.silo-list.silo-default { border: 1px solid #e6e6e6; border-radius: 10px; }

.thumbnail.silo-list.silo-default:hover { box-shadow: 0px 0px 15px 0px rgba(197,197,197,0.8); transition: 0.5s; }

.au-target.thumbnail.silo-list.silo-default:hover {box-shadow: 0px 0px 15px 0px #eee;transform: scale3d(1.05,1.05,1.05);}


.thumbnail.data-item.personalisation {
    background-color: rgb(236, 236, 236);
    border-radius: 3px;
    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);
    margin-left: 40px;
}


.thumbnail .header.caption h3 {
	font-size: 22px !important;
}
.thumbnail .details.caption h2 { font-size: 18px; }

.thumbnail .details.caption h3 {font-size: 17px;font-weight: 500;color: #ffffff !important;}

.thumbnail .header.caption h3 {
	font-weight: bold;
	/* line-height: 1.3; */
	color: #525252;
	/* background-color: rgb(140, 11, 64); */
	/* border-radius: 3px; */
	/* padding: 5px; */
	margin-bottom: 10px !important;
	width: auto !important;
}

.thumbnail.silo-list * p.sub-title {
	display: -webkit-inline-box;
	text-overflow: ellipsis;
	min-height: 100%;
	font-size: 16px;
	padding: 4px;
	color: #333;
	background-color: rgba(255, 255, 255, 0);
	border-radius: 3px;
	width: 100%;
}

.thumbnail .nav > li > a {background-color: #161338;color: #ffffff !important;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);margin-bottom: 0px !important;}

.thumbnail.form-search { border: 0px solid #e6e6e6; border-radius: 0px; }
.thumbnail.form-search  .details.caption {background-color: #e9eaea;color: #404040;border-radius: 6px;}

.thumbnail.partial-form-summary.au-target:hover {box-shadow: 0px 0px 5px 0px rgb(140, 11, 64);transition: 0.5s;transform: scale3d(1.05,1.05,1.05);}
.thumbnail.partial-form-summary {
	border: none;
	border-radius: 3px;
	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);
}



.thumbnail.form-type-summary.au-target {border-radius: 3px;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);}
.thumbnail.form-type-summary.au-target:hover {box-shadow: 0px 0px 5px 0px rgb(140, 11, 64);transition: 0.5s;transform: scale3d(1.05,1.05,1.05);}
.thumbnail.form-type-summary .header.caption:hover h3 {color: #525252;}
.thumbnail.form-type-summary {
	border-radius: 10px;
	border: none;
	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);
}

.thumbnail.silo-list.silo-default {border: none;border-radius: 3px;background-color: #ffffff;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);}

.thumbnail .header.caption h2 {/* display: none; */}

.thumbnail.process-summary {
	border-radius: 3px;
	border: none;
	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);
}
.thumbnail.process-summary:hover {box-shadow: 0px 0px 15px 0px rgb(140, 11, 64);transition: 0.5s;transform: scale3d(1.05,1.05,1.05);}

.thumbnail.process-detail {
	border-radius: 10px;
	border: none;
	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);
	margin-top: -10px;
}

.thumbnail .items .panel.steps .list-group .list-group-item .icon { padding-right: 10px; }
.thumbnail .items .panel.documents .form-control { height: 40px; }


.thumbnail .details.caption h2 {font-size: 12px;color: #ffffff;font-weight: bold;}

.thumbnail .header.caption .details-link
{
	background-color: #ffffff;
	margin-left: 5px;
	margin-top: 5px;
	width: 55px;
	height: 55px;
	border-radius: 5px;
	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);
}
.thumbnail .header.caption .details-link:hover {cursor: pointer;background-color: #8dadb1;transition: 0.7s;}
.thumbnail .nav > li.active > a {
    background-color: #fff;
    color: #161338 !important;
}

.thumbnail .nav > li > a:hover {
    background-color: #da6a00;
}

.thumbnail.silo-list .header.caption {min-height: 200px;border-radius: 3px !important;}

.col-xs-3.details-link:after {
	position: relative;
	padding: 0px 17px;
	font-size: 90%;
	font-family: fontawesome;
	color: #161338;
	content: '\f054';
}

.col-xs-3.details-link:hover::after {color: white;transition: 0.7s;}

.part-number { display: none; }


/* ----------------------------------------------------------------------------------------------------
8.0 Font Awesome Elements
---------------------------------------------------------------------------------------------------- */


.fa-stack-1x, .fa-stack-2x {	color: #258437; }

.fa-stack-1x { color: #525252; }


.fa { font-size: 22px; }

i.fa.fa-bars {
	color: white;
	font-size: 22px;
	padding-bottom: 15px;
	padding-right: 10px;
}

i.fa.fa-bars:active { color: #525252; }


i.fa.fa-angle-double-right.fa-stack-1x {	font-size: 18px; }

.fa-stack {
	position: relative;
	width: 1em;
	height: 1em;
	line-height: 1em;
	vertical-align: middle;
}

.fa-stack-1x, .fa-stack-2x {
	position: absolute;
	left: 0;
	width: 100%;
	text-align: center;
}
.fa-stack-1x { line-height: inherit;	font-size: 0.5em; }
.fa-stack-2x { font-size: 1em; }

.fa-stack { display: none !important; }


.fa-check-circle-o:before { content: "\f058" !important; }
.fa-circle-o:before { content: "\f10c" !important; font-size: 30px; }
.fa-arrow-circle-o-right:before { content: "\f0a9" !important; font-size: 30px; }


/* ----------------------------------------------------------------------------------------------------
9.0 Registration Offered Customisation
---------------------------------------------------------------------------------------------------- */


.reg-offered-container {
	background-color: #258437;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

.reg-offered {
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	background-color: #00477f !important;
	color: #FFF !important;
	padding: 15px !important;
	text-align: left;
	height: 50px;
}

.reg-offered-container {height: 66px;/* display: none; */background-color: #00477f;}

.reg-offered:after {
	display: inline;
	font-family: fontawesome;
	float: right;
	font-size: 25px;
	margin: -34px 15px 0px 5px;
	content: "\f023";
}


/* ----------------------------------------------------------------------------------------------------
10.0 Customised Bootstrap Columns
---------------------------------------------------------------------------------------------------- */


.col.col-xs-2.col-sm-2.col-md-2.col-sm-2 {width: 35%;}

.col.col-xs-10.col-sm-10.col-md-10.col-sm-10 {width: 65%;font-size: 18px;}

.col-md-12 {
    PADDING-LEFT: 0PX;
    PADDING-RIGHT: 0PX;
    /* MARGIN-LEFT: -20PX; */
    /* MARGIN-RIGHT: -20PX; */
}

/* ----------------------------------------------------------------------------------------------------
11.0 Bins Tile Customisations
---------------------------------------------------------------------------------------------------- */



.service-info-item {
    padding: 0 5px 5px 0;
}

.service-item {
    background-color: #f9f9f9;
    /* border: 1px solid #E5E5E5; */
    /* border-radius: 5px; */
    display: table;
    width: 100%;
    margin-bottom: 5px !important;
    margin-top: 5px;
    margin-left: -40px;
}

.service-item-green {
    border-left: 5px solid #367e4d;
}

.service-item:last-of-type {
    margin-bottom: 0;
}

.service-item .service-item-image {
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px;
}

.service-item-black .service-item-image, .service-item-blue .service-item-image, .service-item-brown .service-item-image, .service-item-green .service-item-image {
    width: 70px;
}

.service-item .service-item-content {
    padding-right: 0;
}

.service-item-blue {
    border-left: 5px solid #0855a1;
}

.service-item-brown {
    border-left: 5px solid #A15615;
}

.service-item-black {
    border-left: 5px solid #0E090A;
}


h3, .h3 {
    font-size: 20px;
    margin-bottom: 0px !important;
}

h3.green {
    color: #367e4d;
    font-weight: bold;
}

h3.brown {
    color: #a15615;
    font-weight: bold;
}

h3.blue {
    color: #0855a1;
    font-weight: bold;
}

h3.Black {
    color: #525252;
    font-weight:bold;
}

a.btn.btn-sm.btn-brown.collapsed {
    background-color: #a15615;
    color: #fff;
    border-radius: 3px;
    border-color: transparent;
font-size: 18px;
    border: none;
    margin-bottom: 5px;
    font-weight: bold;
    max-width: 100%;
    white-space: normal;
    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);
}

a.btn.btn-sm.btn-green.collapsed {
    background-color: #367e4d;
    color: #fff;
    border-radius: 3px;
    border-color: transparent;
font-size: 18px;
    border: none;
    margin-bottom: 5px;
    font-weight: bold;
    max-width: 100%;
    white-space: normal;
    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);
}

a.btn.btn-sm.btn-blue {
    background-color: #0855a1;
    color: #fff;
    border-radius: 3px;
    border-color: transparent;
 font-size: 18px;
    border: none;
    margin-bottom: 5px;
    font-weight: bold;
    max-width: 100%;
    white-space: normal;
    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);
}

a.btn.btn-sm.btn-black {
    background-color: #000000;
    color: #fff;
    border-radius: 3px;
    border-color: transparent;
    font-size: 18px;
    border: none;
    margin-bottom: 5px;
    font-weight: bold;
    max-width: 100%;
    white-space: normal;
    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);
}

/* ----------------------------------------------------------------------------------------------------
12.0 Custom Tables
---------------------------------------------------------------------------------------------------- */



.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f0f0f0;
    font-weight: bold;
}

.table-striped > tbody > tr:nth-of-type(even) {
    color: #525252;
    font-weight: bold;
}

th {
    color: white;
    background-color: #9E9E9E !important;
}

/* ----------------------------------------------------------------------------------------------------
13.0 Custom Calendar in place of dates
---------------------------------------------------------------------------------------------------- */

.calendar {
    margin: .25em 10px 10px 0;
    padding-top: 5px;
    float: left;
    width: 80px;
    background: #ffffff;
    background: -moz-linear-gradient(top,#ededef,#ccc);
    font: bold 30px/60px Arial Black,Arial,Helvetica,sans-serif;
    text-align: center;
    color: #525252;
    text-shadow: #fff 0 1px 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    position: relative;
    -moz-box-shadow: 0 2px 2px #888;
    -webkit-box-shadow: 0 2px 2px #888;
    box-shadow: 0 2px 2px #888;
}

.calendar em {
    display: block;
    font: normal bold 11px/30px Arial,Helvetica,sans-serif;
    color: #fff;
    text-shadow: #dc143c 0 -1px 0;
    background: #dc143c;
    /* background: -webkit-gradient(linear,left top,left bottom,from(#04599a),to(#00365a)); */
    background: -moz-linear-gradient(top,#04599a,#00365a);
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top: 1px solid #dc143c;
    width: 80px;
}

.calendar:before, .calendar:after {
    content: '';
    float: left;
    position: absolute;
    top: 5px;
    width: 8px;
    height: 8px;
    background: #111;
    z-index: 1;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0 1px 1px #fff;
    -webkit-box-shadow: 0 1px 1px #fff;
    box-shadow: 0 1px 1px #fff;
}

.calendar:before {
    left: 11px;
}

.calendar:after {
    right: 11px;
}

.calendar em:before, .calendar em:after {
    content: '';
    float: left;
    position: absolute;
    top: -5px;
    width: 4px;
    height: 14px;
    background: #dadada;
    background: -webkit-gradient(linear,left top,left bottom,from(#f1f1f1),to(#aaa));
    background: -moz-linear-gradient(top,#f1f1f1,#aaa);
    z-index: 2;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.calendar em:before {
    left: 13px;
}

.calendar em:after {
    right: 13px;
}

.calendarwide {
	width: 140px;
	background: #f0f0f0;
	float: left;
	margin: 0 10px 20px 0;
	overflow: hidden;
	text-align: center;
}

.calendarwide .head {
	background: #258437;
	color: #fff;
	display: block;
	font-weight: bold;
	font-size: 12px;
	padding: 3px 0 2px 0;
}

.calendarwide .day {
	font-size: 30px;
	line-height: 54px;
			font-weight: bold;
		color: #525252;
}




/* ----------------------------------------------------------------------------------------------------
14.0 Custom Inputs
---------------------------------------------------------------------------------------------------- */

input.form-control.au-target, textarea.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;
}

input.form-control.au-target:focus, textarea.form-control:focus {
outline: 2px solid gold;
}



/* ----------------------------------------------------------------------------------------------------
15.0 Custom Tile Images & Styling
---------------------------------------------------------------------------------------------------- */

.page-host ol>li>span:nth-of-type(2):before {
    content: "\f059";
    font-family: fontawesome;
    padding-right: 10px;
}

/*
#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(1) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/Council%20Tax.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 40%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(1) > div:hover {
    //background-position-y: 90%;
    transition: 0.4s;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(2) > div {
    //background-image: url(https://my-test.hamlet.gov.uk/Content/images/Benefits.jpg);
    background-size: cover;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(2) > div:hover {
    //background-position-y: 90%;
    transition: 0.4s;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(4) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/Waste%20and%20Recycling.jpg);
    background-size: cover;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(4) > div:hover {
    background-position-y: 50%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(8) > div {background-image: url(https://my-test.hamlet.gov.uk/Content/images/Planning%20and%20Building%20Control.jpg);background-size: cover;}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(8) > div:hover {
      background-position-y: 50%;
  }

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(6) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/fraud.jpg);
    background-size: cover;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(6) > div:hover {
    background-position-y: 40%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(9) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/Your%20Council.jpg);
    background-size: cover;
}
*/



/* ----------------------------------------------------------------------------------------------------
16.0 Custom FAQ Answers for Benefits
---------------------------------------------------------------------------------------------------- */

.card1 {
    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);
    background-color: #258437;
    color: white;
    padding: 10px;
    margin-top: 10px;
}

p.cardheader {
    font-size: 25px;
    font-weight: 800;
    color: #4caf4f;
}

i.fa.fa-credit-card-alt {
       padding-right: 10px;
}

h1.hero {
    padding-left: 5px;
    font-size: 17px;
}

p.hero {
    color: #525252;
    text-align: center;
}

button.btn.btn-info.collapsed1.collapsed {
    background-color: black;
    color: white;
    margin-left: 10px;
}

button.btn.btn-info.collapsed1.collapsed:before {
    content: " ";
    font-family: fontawesome;
}

button.btn.btn-info.collapsed1.collapsed:after {
    content: "\f067";
    font-family: fontawesome;
}

button.btn.btn-info.collapsed1 {
    background-color: #eee;
    color: #525252;
    margin-left: 10px !important;
}


p.hero1 {
    color: #525252;
    font-size: 35px;
    text-align: center;
}

.card2 {
    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);
    background-color: #4aa844;
    color: white;
    padding: 10px;
    margin-top: 10px;
}

i.fa.fa-check-square {
    padding-right: 10px;
}

.card3 {
    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);
    background-color: #b91235;
    color: white;
    padding: 10px;
    margin-top: 10px;
    margin-left: -10px;
}

i.fa.fa-arrow-up {
    padding-right: 10px;
}

.card4 {
    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);
    background-color: #999;
    color: white;
    padding: 10px;
    margin-top: 10px;
}

i.fa.fa-envelope {
    padding-right: 10px;
}

i.fa.fa-credit-card {
    padding-right: 10px;
}

.panel.panel-default {
    border-radius: 0px;
}

.panel-body {
    color: #525252;
}

.header.caption2 {
    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);
    margin-top: 5px;
    margin-bottom: 5px;
    border-left: 5px solid #258437;
    height: 140px;
}

.header.caption3 {
    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);
    margin-top: 5px;
    margin-bottom: 5px;
    border-left: 5px solid #258437;
    height: 140px;
}

.header.caption2:hover {
    font-weight: bold;
    transition: 0.3s;
    transform: scale3d(1.03,1.03,1.03);
}

.header.caption3:hover {
    font-weight: bold;
    transition: 0.3s;
    transform: scale3d(1.03,1.03,1.03);
}


h3.title1:before {
    content: "\f06a";
    padding-right: 10px;
    font-family: fontawesome;
}

h3.title3:before {
    content: "\f1ad";
    font-family: fontawesome;
    padding-right: 10px;
}

h3.title2:before {
    content: "\f1f8";
    font-family: fontawesome;
    padding-right: 10px;
}


/* ----------------------------------------------------------------------------------------------------
17.0 Custom Track My Requests Styling
---------------------------------------------------------------------------------------------------- */

i.fa.fa-arrow-circle-o-right {
    transform: rotate(90deg);
}

strong.pull-left {
    color: #161338;
}

.list-group.au-target {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: gainsboro;
}

.list-group-item {
    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);
 margin: 20px;
}

.pull-left { font-size: 16px; }
.pull-right {font-size: 14px;}

.col-xs-1.icon.complete.au-target {
	font-size: 30px !important;
	background-color: white;
	padding-bottom: 38px;
	padding-top: 38px;
	padding-right: 30px;
	/* padding-left: 5px; */
	color: #1eba1e;
}

.col-xs-1.icon.in-progress.au-target {
	background-color: #ffffff;
	color: #161338;
	padding-bottom: 38px;
	padding-top: 38px;
	padding-right: 30px;
	font-size: 30px !important;
}

/*Family and friends branding start*/

.navbar.navbar-default.friends-bar .container-fluid a.dropdown-toggle {
    background-color: #258437 !important;
    border-radius: 5px !important;
    margin-top: 2px !important;
}

.navbar.navbar-default.friends-bar .container-fluid a.dropdown-toggle:hover {
    background-color: #8dacb2 !important;
    border-color: #8dacb2 !important;
    color: #ffffff !important;
    transition: 0.3s !important;
}

.navbar.navbar-default.friends-bar .navbar-brand {
    color: #676a6c !important;
    margin-top: 2px !important;
}

.navbar.navbar-default.friends-bar .container-fluid {
    background-image: none !important;
    height: 55px !important;
}

.navbar.navbar-default.friends-bar ul.nav.navbar-nav.navbar-right {
    float: left !important;
    margin-left: 10px;
    width: 330px;
}

.navbar.navbar-default.friends-bar.active {
    background-color: #fff !important;
}

.navbar.navbar-default.friends-bar.active .navbar-nav > li > a:hover, .navbar.navbar-default.friends-bar.active .navbar-nav > li > a:focus {
    backround-color: #FF6F00 !important;
    margin-top: 2px !important;
    border-radius: 5px !important;
}

.navbar.navbar-default.friends-bar.active .navbar-nav > li > a:hover, .navbar.navbar-default.friends-bar.active .navbar-nav > li:first-child + li > a {
    background-color: #FF6F00 !important;
    margin-top: 2px !important;
    border-radius: 5px !important;
}

.navbar.navbar-default.friends-bar.active .navbar-nav > li > a:hover, .navbar.navbar-default.friends-bar.active .navbar-nav > li:first-child > a:hover {
    background-color: #8dacb2 !important;
    border-color: #8dacb2 !important;
    color: #ffffff !important;
    transition: 0.3s !important;
}

span.navbar-brand {
    padding: 0px !important;
    padding-top: 15px !important;
}

/*Family and friends branding end*/

/* ----------------------------------------------------------------------------------------------------
18.0 Media Query content for Mobile
---------------------------------------------------------------------------------------------------- */

@media (max-width: 767px) { 
.card {
	width: 90% !important;
	background: #ffffff;
	/* float: left; */
	margin: 10px;
	margin-top: 20px;
	overflow: hidden;
	text-align: center;
	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);
	border-left: 3px solid #258437;
	padding: 10px;
	height: 100%;
	margin-left: -20px;
}

.navbar.navbar-default .container-fluid {
    background-position-x: 50%;
    background-position-y: 50%;
}

.navbar.navbar-default .container-fluid .primary-header:before {
    content: " ";
}

.primary-header {
    margin-top: 15px;
    }

.thumbnail.silo-list * p.sub-title {
	height: 100%;
	padding: 4px;
	width: 260px;
	margin-top: 40px;
	} 

	.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
}

.thumbnail.partial-form-summary .header.caption {height: 200px !important;} 
.thumbnail.form-type-summary .header.caption {height: auto !important;} 
.thumbnail.process-summary .header.caption {height: 200px !important;} 

.view-portal { height: 100%; margin: 0px -10px; }
.view-portal:before
	{
		width: 100%; height: 4px;
		background-color: #258437;
		display: block; content: " ";
		margin: -5px 0px 5px 0px;
	}

.thumbnail.silo-list .header.caption {height: 250px;} 
h4 { padding: 15px; font-size: 25px; } 
.alert-warning {margin: 0 0 20px 20px;} 
.btn-primary {font-size: 18px; margin: 1px;} 

.nav-pills.nav-justified li {
		float:left;
		width: 28%;
		white-space: normal;
	}
.nav-pills.nav-justified li:last-of-type { width: 44%; }
.silo-detail-alt > nav > ol > li { width: 100%; } 
.page-header .nav > li { width: 99%; } 
.page-host:after { width: 115%; } 
.page-host ol { padding-left: 35px; } 

}

/* ----------------------------------------------------------------------------------------------------
19.0 Mini Menu on Mobile
---------------------------------------------------------------------------------------------------- */


	.mini-menu {
    color: white;
    background-position: 50% 0px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(https://hamlet.gov.uk/media/EBC/web-files/communications/featured/West_Park_in_the_snow.jpg);
}

.mini-menu .navbar-nav:last-child li:last-child > a {
    background-color: #138A02;
    color: white;
    border-radius: 3px;
    border-color: transparent;
    border-bottom: none;
    font-weight: bold;
    text-align: center;
    width: 225px;
    margin: 20px auto;
    white-space: normal;
    margin-top: 40px;
    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);
}


.mini-menu .content i.close { opacity: 0.95; width: 100%; }

.mini-menu .navbar-nav li a {font-size: 20px;margin-bottom: 10px;color: #fff !important;}

.mini-menu .navbar-nav { text-align: right; }

.mini-menu .navbar-nav:last-child li:last-child > a
{
	background-color: #258437;
	color: #fff;
	border-radius: 3px;
	border-color: transparent;
	border-bottom: none;
	font-weight: bold;
	text-align: center;
	width: 225px;
	margin: 20px auto;
	white-space: normal;
}
.mini-menu .navbar-nav:last-child li:last-child > a:hover,
.mini-menu .navbar-nav:last-child li:last-child > a:focus
{
	background-color: #258437;
	color: #FFF; text-decoration: none;
	transition: .3s; -webkit-transition: .3s;
}

.mini-menu .content {
	margin-left: -15px;
	margin-right: -15px;
	position: relative;
	padding-top: 10px;
	margin-top: 0px;
	padding-right: 20px;
	background-color: rgba(0, 0, 0, 0.32);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	height: 100%;
	background-position: center;
}

.mini-menu .content h1 { display: none; }

.mini-menu .content > h1
{
	display: block;
	font-size: 20px;
	margin-top: 6px;
	margin-bottom: 6px;
	text-align: right;
	font-weight: normal;
	padding-right: 25.5px;
	padding-bottom: 12px;
	color: white;
}

#app > person-home > div.mini-menu > div > div > ul > li:nth-child(1) > a:after {
    content: "\f054";
    font-family: fontawesome;
    padding-left: 10px;
}

#app > person-home > div.mini-menu > div > ul > li.au-target.active > a:after {

    content: "\f059";font-family: fontawesome;padding-left: 10px;

    }

#app > person-home > div.mini-menu > div > ul > li:nth-child(2) > a:after {

    content: "\f044";font-family: fontawesome;padding-left: 10px;

}

#app > person-home > div.mini-menu > div > ul > li:nth-child(3) > a:after {

    content: "\f0ae";font-family: fontawesome;padding-left: 10px;
    
}

#app > person-home > div.mini-menu > div > div > ul > li:nth-child(1) > a {
    /* display: none; */
}


#menu-navbar-collapse > ul:nth-child(2) > li.au-target.active > a:after

{

    content: "\f059";font-family: fontawesome;padding-left: 10px;

}


#menu-navbar-collapse > ul:nth-child(2) > li:nth-child(2) > a:after {

 content: "\f044";font-family: fontawesome;padding-left: 10px;

}

#menu-navbar-collapse > ul:nth-child(2) > li:nth-child(3) > a:after

{

    content: "\f0ae";font-family: fontawesome;padding-left: 10px;

}


#menu-navbar-collapse > ul:nth-child(2) > li:nth-child(4) > a:after {
    content: "\f2bd";
    font-family: fontawesome;
    padding-left: 10px;
}


/* ----------------------------------------------------------------------------------------------------
20.0 Custom Alerts & Links
---------------------------------------------------------------------------------------------------- */

.alert-danger {
    color: white;
    background-color: crimson;
    border-color: #dc143c;
    font-weight: bold;
    font-size: 18px;
}

.alert.alert-danger:before {
    content: "\f071";
    font-family: fontawesome;
    padding-right: 10px;
}

.alert-info {
    color: #ffffff;
    background-color: #2968ac;
    border-color: #2968ac;    
    font-weight: bold;
    font-size: 18px;
}


a {
    color: #0755a1;
}

a:hover {
    color: #1b9615;
}

.alert.alert-warning {
    margin-bottom: 30px;
    margin-left: 0px;
    background-color: #8dacb2;
    color: white;
    font-weight: bold;
    border: 2px solid #8dacb2;
}

/* ----------------------------------------------------------------------------------------------------
21.0 Miscellaneous Customisations
---------------------------------------------------------------------------------------------------- */




#main-container > div > router-view > div > div > router-view > compose > div.au-target.silo-detail-alt.row.silo-default > nav > ol > li:nth-child(1) > markdown-with-html > div:nth-child(1) > div {
    /* margin-top: 30px; */
}

img.councillor {
    padding: 0 !important;
}

.header.councillor {
    margin: 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);
}

.card {
	width: 32% !important;
	background: #ffffff;
	/* float: left; */
	margin: 10px;
	margin-top: 20px;
	overflow: hidden;
	text-align: center;
	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);
	border-left: 3px solid #258437;
	padding: 10px;
	height: 100%;
	margin-left: -20px;
}

span.topstrip {
	background: #004c9a;
	color: #fff;
	display: block;
	font-size: 12px;
	/* text-align: left; */
	padding-left: 3px;
	padding: 3px 0 2px 0;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	 font-weight: bold;
}

span.accountno {
	background: #f0f0f0;
	color: #fff;
	display: block;
	font-size: 30px;
	padding: 7px 0 2px 0;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	height: 43px;
		font-weight: bold;
		color: #525252;
	
}

span.lowerstrip {
	background: #004c9a;
	color: #fff;
	display: block;
	font-size: 12px;
	/* text-align: left; */
	padding-left: 3px;
	padding: 3px 0 2px 0;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	height: 10px;
}


/* ----------------------------------------------------------------------------------------------------
22.0 Customer Service View Customisations
---------------------------------------------------------------------------------------------------- */


.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: #262626;
    text-decoration: none;
    background-color: rgba(245, 245, 245, 0);
}

.navbar.navbar-default.management-menu li.customer:hover {
    background-color: #efefef;
}

.person-row .nav > li > a:hover {
    background-color: #4aa844;
    transition: ease-in 0.3s;
    color: white !important;
}

.navbar.navbar-default.menu .navbar-nav > .active > a {
    border-bottom: 2px solid gold;
}

ul.dropdown-menu > li {
    padding: 4px;
    list-style: none;
}

ul.dropdown-menu > li:hover {
    background-color: #dcebf9;
    padding-left: 10px;
    transition: 0.3s;
}


.row.flank-menu-container {
    border-radius: 3px;
}

.flank-menu .btn-end:hover {
    cursor: pointer;
}

.flank-menu .btn-end:after {
    content: "Start a call";
    font-size: 20px;
    padding-left: 10px;
}



.pagination > li:last-child > a, .pagination > li:last-child > span {

    padding-top: 4px;
}

.pagination > li:first-child > a, .pagination > li:first-child > span {
    padding-top: 4px;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #0160a8;
    border-color: #0160a8;
}

a.dropdown-toggle {
    color: #525252 !important;
}

#menu-navbar-collapse > ul:nth-child(1) > li > a {
    color: white !important;
    background: transparent;
}

#menu-navbar-collapse > ul:nth-child(1) > li > a:hover, #menu-navbar-collapse > ul:nth-child(1) > li > a:focus {
    color: white !important;
}

.navbar.navbar-default .container-fluid .secondary-header img {
    height: 50px;
}

.navbar.navbar-default .container-fluid .primary-header img {
    height: 90px;
    margin-bottom:30px;
}


.secondary-header {
    display: none;
}

.navbar.navbar-default.management-menu .container-fluid {
    background-image: none;
    height: 51px;
    background-color: #293846;
}

.navbar.navbar-default .container-fluid .primary-header:before {
    margin-top: 0px;
}

.navbar.navbar-default.management-menu .navbar-nav > li > a {color: #525252 !important;}

.navbar.navbar-default.management-menu .navbar-nav > li > a:hover, .navbar.navbar-default.management-menu .navbar-nav > li > a:focus {
    color: white !important;
    background-color: #0854a1;
}

.navbar.navbar-default.management-menu input::-webkit-input-placeholder {
    color: #ffffff;
}

.row.person-row {
    margin-left: -15px;
    margin-right: -15px;
    padding-left: 15px;
}

.person-row h3:before {
}

.person-row h4:before {
    content: "\f0e0";
    font-family: fontawesome;
    padding-right: 10px;
}
.navbar.navbar-default.management-menu input::-webkit-input-placeholder {
    color: #525252;
}

button.btn.btn-default.dropdown-toggle.au-target {
    border: 1px solid rgba(200, 200, 200, 0);
    color: #161338 !important;
    background-color: #ffffff;
    border-radius: 2px;
    margin-right: 5px;
    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);
    font-size: 18px;
    width: 300px;
    text-align: left;
}

.flank-menu .btn-end {
    background-color: #1ba11d;
    padding: 20px;
}

.alert-success {
    color: #ffffff;
    background-color: #4CAF50;
    border-color: #4CAF50;
    font-weight: bold;
    font-size: 18px;
}

.call-end {
    color: #C34545;
    border-color: #C34545;
    border-radius: 3px;
    background-color: white;
    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);
}

.alert > p, .alert > ul {
    margin-bottom: 0;
    color: white;
}



/* ----------------------------------------------------------------------------------------------------
23.0 hamlet Images
---------------------------------------------------------------------------------------------------- */

/*
#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(16) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/neighbourhood%20wardens.jpg);
    background-size: 100%;
    background-position-y: 40%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(19) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/licensing.jpg);
    background-size: cover;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(20) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/elections.jpg);
    background-size: 100%;
    background-position-y: 20%;
    background-position-x: 10%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(14) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/Green%20Space%20and%20Street%20Scene.jpg);
    background-size: 100%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(17) > div {
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/Dogs%20-%20Neighbourhood%20Dog%20Wardens.jpg);
    background-size: 100%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(15) > div {
    background-size: 100%;
    background-image: url(https://my-test.hamlet.gov.uk/Content/images/Environmental%20Health.jpg);
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(14) > div:hover {
    background-position-y: 40%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(17) > div:hover {
    background-position-y: 90%;
    background-position-x: 10%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(16) > div:hover {
    background-position-y: 90%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(19) > div:hover {
    background-position-y: 90%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(20) > div:hover {
    background-position-y: 90%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(15) > div:hover {}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(15) > div:hover {
    background-position-y: 90%;
}

#main-container > div > router-view > div > div > router-view > div:nth-child(4) > div:nth-child(9) > div:hover {
    background-position-y: 90%;
}
*/

.table {
    font-size: 17px;
}

.table > tbody > tr.success > td {
    background-color: #009688;
}

.footercard {
    margin-left: -30px;
    margin-right: 30px;
}

#main-container > div > router-view > div > div > router-view > compose > div.au-target.silo-detail-alt.row.silo-default > nav > ol > li:nth-child(1) > markdown-with-html > div:nth-child(4) {
    margin-top: -21px;
}

.reg-offered h2 {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    margin-top: 3px;
    vertical-align: middle;
}




/* JMc New Multiple Accounts Styling */

.btn-warning {
    color: #fff;
    background-color: crimson;
    border-color: crimson;
}

.btn-warning:hover {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
    transition: ease-in 0.2s;
}

span.personalise-another.invert {
    width: 100% !important;
    margin-top: 10px;
    white-space: normal;
    border-radius: 3px;
    border-color: transparent;
    font-weight: bold;
    background-color: rgb(0, 0, 0);
    color: #ffffff;
    border: 0;
    padding: 10px 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);
}

span.personalise-another.invert:hover {
    color: #fff;
    background-color: #000000;
    border-color: #000000;
    transition: ease-in 0.2s;
}

span.personalise-another.invert:after {
    content: "\f067";
    font-family: fontawesome;
    float: right;
}

span.context-item-value {
    font-size: 17px;
    font-weight: bold;
    color: #525252;
}

#main-container > div > router-view > div > div > router-view > compose > compose > div.row.context-row > div > div > div:nth-child(1) > span.context-item-label:after {
    content: " being viewed";
}


#main-container > div > router-view > div > div > router-view > compose > compose > div.row.context-row > div > div > div:nth-child(1) > span.context-item-label, #main-container > div > router-view > div > div > router-view > compose > compose > div.row.context-row > div > div > div:nth-child(2) > span.context-item-label {
    background-color: #258437;
    color: white;
    padding: 15px 20px;
    font-size: 18px;
}

#main-container > div > router-view > div > div > router-view > compose > compose > div.row.context-row > div > div > div:nth-child(1) > span.context-item-label {

border-top-left-radius: 3px;
border-bottom-left-radius: 3px;


}


#main-container > div > router-view > div > div > router-view > compose > compose > div.row.context-row > div > div > div:nth-child(2) > span.context-item-label {

border-top-right-radius: 3px;
border-bottom-right-radius: 3px;

}


.reg-offered h2 {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    margin-top: 3px;
    vertical-align: middle;
}


#main-container > person-information > div:nth-child(2) > div > div:nth-child(2) > p {
    color: white !important;
}


@media (max-width: 767px) {.alert-warning {	margin: 0 0 20px 0; } 
.card {
	width: 90% !important;
	background: #ffffff;
	/* float: left; */
	margin: 10px;
	margin-top: 20px;
	overflow: hidden;
	text-align: center;
	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);
	border-left: 3px solid #258437;
	padding: 10px;
	height: 100%;
	margin-left: -20px;
}

.col.col-xs-2.col-sm-2.col-md-2.col-sm-2 {width: 100%;}
.col.col-xs-10.col-sm-10.col-md-10.col-sm-10 {width: 100%;}

.silo-detail-alt > nav > ol > li > span:not(:first-child) { font-size: 16px; } 

button.pull-right.btn.btn-warning.btn-xs.au-target {
    margin-top: 10px !important;

}

}





.banner {
    width: 100%;
    background-color: #18643d;
    color: white;
    font-size: 28px;
    border-radius: 4px;
    font-weight: bold;
    padding: 5px;
}

.Band {
    float: right;
    margin-top: -43px;
    margin-right: 5px;
}

p.banner {
    font-size: 19px;
    text-align: center;
}

.Balance {
    text-align: center;
    margin-top: -10px;
    margin-bottom: 10px;
}

p.TotalBalance {
    text-align: center;
}



.newcard {
    width: 95%;
    background: #ffffff;
    float: left;
    height: 980px;
    padding: 10px;
    margin: 0 10px 20px 0;
    overflow: hidden;
    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);
}

.chartcard {
    width: 100%;
    margin-top: 15px !important;
    min-height: 465px;
    background: #ffffff;
    float: left;
    padding: 10px;
    margin: 0 10px 20px 0;
    overflow: hidden;
    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);
}



.card1 {
    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);
    background-color: #ffffff;
    color: white;
    padding: 10px;
    margin-top: 10px;
}

i.fa.fa-credit-card-alt {
       padding-right: 10px;
}

h1.hero {
    padding-left: 5px;
    font-size: 24px;
}

p.hero {
    color: #333;
    text-align: center;
}

button.btn.btn-info.collapsed1.collapsed {
    background-color: black;
    color: white;
}

button.btn.btn-info.collapsed1.collapsed:before {
    content: " ";
    font-family: fontawesome;
}

button.btn.btn-info.collapsed1.collapsed:after {
    content: "\f067";
    font-family: fontawesome;
}

button.btn.btn-info.collapsed1 {
    background-color: #eee;
    color: #525252;
}


.circle-p, .circle-d, .circle-c, .circle-l, .circle-e, .circle-cc, .circle-cg, .circle-de  {
    height: 24px;
    width: 24px;
    border-radius: 24px;
    background-color: purple;
    float: left;
    margin-right: 10px;
    background: linear-gradient(#3F51B5 0, #673AB7 100%);
}

.circle-e  {
     background: linear-gradient(#e9eaea00 0, #364d71 100%);
}

.piechart-amounts {
    float: right;
    margin-top: -37px;
    font-weight: bold;
    font-size: 18px;
    color: #3a3a3a;
}

td.capitals {
    text-transform: capitalize !important;
}



.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {

outline: none !important;
  border: 3px solid black;
    padding: 10px;

    box-shadow: 0px 0px 0px 3px gold;

}

.person-row .nav > li > a:focus{

	outline: none !important;
  border: 3px solid black;
    padding: 10px;

    box-shadow: 0px 0px 0px 3px gold;
}

.btn-primary:focus{
	outline: none !important;
  border: 3px solid black;
    padding: 10px;

    box-shadow: 0px 0px 0px 3px gold;
	
}

.thumbnail .nav > li.active > a:focus {
	outline: none !important;
  border: 3px solid black;
    padding: 10px;

    box-shadow: 0px 0px 0px 3px gold;
}

.thumbnail .nav > li > a:focus {
   	outline: none !important;
  border: 3px solid black;
    padding: 10px;

    box-shadow: 0px 0px 0px 3px gold;
}

.person-row .nav > li > a:focus, .page-header .nav > li > a:focus{

   	outline: none !important;
  border: 3px solid black;
    padding: 10px;

    box-shadow: 0px 0px 0px 3px gold;
}


#top-banner > nav > div.container-fluid > div.primary-header > h1 {
    display: none;
}


a.btn.btn-sm.btn-primary:focus {
	  	outline: none !important;
  border: 3px solid black;
    padding: 10px;

    box-shadow: 0px 0px 0px 3px gold;
}


/*
nav.faq-nav-list div.collapse {
    display: block !important;
}
*/

#main-container > div > router-view > div > div > router-view > compose > compose > div.row.context-row > div > div > div:nth-child(2) > span.context-item-label { display: none; }

#main-container > div > router-view > div > div > router-view > compose > compose > div.row.context-row > div > div > div:nth-child(2) > span.context-item-value { display: none; }