/*
 * HBC-ONE IFRAME FRAMEWORK
 * Copyright (c) 2025 Hartlepool Borough Council
 */

@import url('https://fonts.googleapis.com/css?family=Muli');

body {
	font-family: Muli, sans-serif !important;
}

#self-content {
  font-family: Muli, sans-serif;
}

* {
	font-family: Muli, sans-serif;
}

#main-content {
	font-family: Muli, sans-serif;
}

/*
 * Warnings
 */

.nb {
	margin-bottom: 16px; 
	margin-top: 16px;        
	padding: 16px;    
}

.nbWarning { 	
	background-color: #b0d6f4;   
	border-left: 12px solid #1c7eca;
}

.nbInfo {
	background-color: #d6e4e8;	    
	border-left: 12px solid #003e52;
}

.nbLinks {    	
	background-color: #b0d6f4;	    
	border-left: 12px solid #1c7eca;
}


.nbCust {   	
	background-color: #b0d6f4;	    
	border-left: 12px solid #1c7eca;
}


/* [Table stuff]

table {
	border-collapse: collapse;
	width: 40%;
	margin-left: auto;
	margin-right: auto;
}

th, td {
	padding: 0.25rem;
	text-align: center;
	border: 1px solid #000;
}


th {
	background: #99ccff;
}

tbody tr:nth-child(even) {
	background: #cce6ff;
}
*/


/* Form sections */

.active-section-name {
	font-size: 16px !important;
	margin-left: 1.25em;
}

.achieveforms-container .sectionsHead {
	border: 1px solid #ddd;
	border-radius: 6px;
	background: #f9f9f9;
}

.sections-toggle-wrapper {
	background: #f9f9f9;
}


/*
 * Form navigation buttons
 */

.achieveforms-container .fillinButtons {
	background: #F9F9F9;
	padding: 0 6px 6px 6px !important;
	border: 1px solid #ddd;
	border-radius: 6px;
}

.achieveforms-container .fillinButtons button {
	margin-top: 6px !important;
	color: white !important;
	font-size: 15px !important;
	font-weight: bold;
	border: 1px solid black;
}

@media (max-width: 420px) {
	.achieveforms-container .fillinButtons button {
		width: 100%;
	}
}

.achieveforms-container .fillinButtons .nextbutton {
	background: #003e52;
	border-color: #003e52;
}

.achieveforms-container .fillinButtons .nextbutton:hover {
	background: #007a99;
}

.achieveforms-container .fillinButtons .cancelbutton {
	background: #003e52;
	border-color: #003e52;
}

.achieveforms-container .fillinButtons .cancelbutton:hover {
	background: #007a99;
}

.achieveforms-container .fillinButtons .previousbutton {
	margin-right: 6px !important;
	background: #878787;
	border-color: #616161;
}

.achieveforms-container .fillinButtons .previousbutton:hover {
	background: #616161;
}

.achieveforms-container .fillinButtons .savebutton {
	background: #003e52;
	border-color: #003e52;
}

.achieveforms-container .fillinButtons .savebutton:hover {
	background: #007a99;
}

.achieveforms-container .fillinButtons .submitbutton {
	background: #003e52;
	border-color: #003e52;
}

.achieveforms-container .fillinButtons .submitbutton:hover {
	background: #007a99;
}

.achieveforms-container .all-sections .fillinButtons {
	border: none !important;
	background: none !important;
	padding: 0 !important;
}


/*
 * All services
 */

.services li {
	border-bottom: 1px solid #eee;
	padding: 10px 5px;
}

.services li:nth-child(even) {
	background: #fdfdfd;
}

.service-groups {
	margin-bottom: 20px;
}

.service-groups a.fsservice-pretty-link {
	color: #333 !important;
	background-color: #f1f1f1 !important;
	border-color: #ddd !important;
	height: 100% !important;
}

.service-groups a.fsservice-pretty-link h2 {
	font-size: 16px !important;
	text-align: center;
	padding: 5px;

}

.service-groups a.fsservice-pretty-link div {
	font-size: 14px !important;
	text-align: center;

}

.service-groups a.fsservice-pretty-link.active {
	background-color: #003e52 !important;
	border-color: hsl(233, 39%, 67%) !important;
}

.service-groups ul.menu {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-line-pack: stretch;
	align-content: stretch;
	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

.service-groups ul.menu li {
	margin-top: 5px;
	padding-right: 0px;
}


/* Misc */

#taskTable_filter {
	transform: translateX(-9px);
}

.desktop_forms {
	max-width: 100% !important;
}

.search-form .btn-search,
.progress-bar {
	background-color: #003e52;
}

@media (max-width: 800px) {
	.search-form::after {
		display: block;
		margin-top: 15px;
		margin-bottom: -5px;
		text-align: center;
		font-size: 18px;
		content: "Please enter the service you require in the search box above, or select a category and then scroll down to see relevant services";
	}
}



/* Don't even ask, mmkay? */

._AF input[type=date].error:focus,
._AF input[type=date]:focus,
._AF input[type=datetime-local].error:focus,
._AF input[type=datetime-local]:focus,
._AF input[type=datetime].error:focus,
._AF input[type=datetime]:focus,
._AF input[type=email].error:focus,
._AF input[type=email]:focus,
._AF input[type=month].error:focus,
._AF input[type=month]:focus,
._AF input[type=number].error:focus,
._AF input[type=number]:focus,
._AF input[type=password].error:focus,
._AF input[type=password]:focus,
._AF input[type=search].error:focus,
._AF input[type=search]:focus,
._AF input[type=tel].error:focus,
._AF input[type=tel]:focus,
._AF input[type=text].error:focus,
._AF input[type=text]:focus,
._AF input[type=time].error:focus,
._AF input[type=time]:focus,
._AF input[type=url].error:focus,
._AF input[type=url]:focus,
._AF input[type=week].error:focus,
._AF input[type=week]:focus,
._AF select.error:focus,
._AF select:focus,
._AF textarea.error:focus,
._AF textarea:focus,
.achieveforms-container input[type=date].error:focus,
.achieveforms-container input[type=date]:focus,
.achieveforms-container input[type=datetime-local].error:focus,
.achieveforms-container input[type=datetime-local]:focus,
.achieveforms-container input[type=datetime].error:focus,
.achieveforms-container input[type=datetime]:focus,
.achieveforms-container input[type=email].error:focus,
.achieveforms-container input[type=email]:focus,
.achieveforms-container input[type=month].error:focus,
.achieveforms-container input[type=month]:focus,
.achieveforms-container input[type=number].error:focus,
.achieveforms-container input[type=number]:focus,
.achieveforms-container input[type=password].error:focus,
.achieveforms-container input[type=password]:focus,
.achieveforms-container input[type=search].error:focus,
.achieveforms-container input[type=search]:focus,
.achieveforms-container input[type=tel].error:focus,
.achieveforms-container input[type=tel]:focus,
.achieveforms-container input[type=text].error:focus,
.achieveforms-container input[type=text]:focus,
.achieveforms-container input[type=time].error:focus,
.achieveforms-container input[type=time]:focus,
.achieveforms-container input[type=url].error:focus,
.achieveforms-container input[type=url]:focus,
.achieveforms-container input[type=week].error:focus,
.achieveforms-container input[type=week]:focus,
.achieveforms-container select.error:focus,
.achieveforms-container select:focus,
.achieveforms-container textarea.error:focus,
.achieveforms-container textarea:focus {
	-webkit-box-shadow: inset 0 0 8px rgba(102, 175, 233, .6);
	box-shadow: inset 0 0 8px rgba(102, 175, 233, .6);
}

input[type=checkbox]:checked+label.btn, input[type=radio]:checked+label.btn
{
background-color: #003e52;
}

.achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.valid input[data-type=date-subfield], .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.valid input[type=checkbox]+label.btn, .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.valid input[type=radio]+label.btn, .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.valid+input.other-input

{
border-color: #003e52;
}

.no-touch .achieveforms-container .field fieldset.fieldInput.valid input[type=checkbox]+label.btn:hover, .no-touch .achieveforms-container .field fieldset.fieldInput.valid input[type=radio]+label.btn:hover

{
background-color: #003e52;
}

input[type=checkbox]:checked+label.btn, input[type=radio]:checked+label.btn
{
background-color: #003e52;
}

._AF .postfix-wrapper.valid .postfix, ._AF .prefix-wrapper.valid .prefix, ._AF input.valid, ._AF select.valid, ._AF textarea.valid, .achieveforms-container .postfix-wrapper.valid .postfix, .achieveforms-container .prefix-wrapper.valid .prefix, .achieveforms-container input.valid, .achieveforms-container select.valid, .achieveforms-container textarea.valid 
{
    border-color: #003e52;
}


.achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.valid input[type=checkbox]+label:before, .achieveforms-container .all-sections .field .fieldContent fieldset.fieldInput.valid input[type=radio]+label:before

{
color: #003e52;
}


body._AF a, body._AF div, body._AF h1, body._AF h2, body._AF h3, body._AF h4, body._AF h5, body._AF p, body._AF span:not(.fa), div._AF a, div._AF div, div._AF h1, div._AF h2, div._AF h3, div._AF h4, div._AF h5, div._AF p, div._AF span:not(.fa), html._AF a, html._AF div, html._AF h1, html._AF h2, html._AF h3, html._AF h4, html._AF h5, html._AF p, html._AF span:not(.fa) {

font-family: 'Muli', sans-serif;

}

a#btn-login.btn.btn-custom {
    color: #003e52 !important;
    letter-spacing: 1px;
    padding-top: 20px;
    outline: none !important;
    border: 2px solid transparent;
}

a#btn-register.btn.btn-primary {
    color: #fff;
    background-color: #003e52;
    border-color: #003e52;
}