:root {
  --color-navy: #00557E;
  --color-blue-graphic: #008DB2;
  --color-light-blue: #BAD7EC;
  --color-header-blue: #00648E;
  --color-soft-blue-bg: #F1F7FB;
  --color-green: #008076;
  --color-dark-teal: #0F5278;
  --color-magenta: #E50065;
  --color-dropdown-blue: #00648B;
  --color-orange: #EA5A12;
  --color-white: #FFFFFF;
  --color-purple: #775195;
  --color-sky: #DCEFFA;
  --color-gray: #4B4B4B;
  --color-red: #c02b0a;
}

@font-face {
    font-family: 'Lexend';
    src: url('../fonts/Lexend-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Lexend', sans-serif;
}

footer.footer {
     background: url(../img/footer.png) 100% 50px no-repeat var(--color-navy); 
     padding: 40px 0 50px 0;
     position: relative; 
     z-index: 1;
}

footer.footer ul.social li a svg {
    width: 100%;
    height: 100%;
}

/*
Do you find this page useful colour updates
*/

.section.section-useful .field-actions .btn.btn-success {
    background-color: var(--color-green) !important;
    border-color: var(--color-green) !important;
}

.section-useful .gform_wrapper input[type=submit]:hover, .section-useful .gform_wrapper input[type=submit]:focus {
    background: var(--color-white) !important;
}

.section .gform_wrapper input[type="submit"] {
    background: var(--color-green);
}

.section.section-useful .field-feedback.field-feedback-success, .section-useful .gform_wrapper input[type=submit] {
    background-color: var(--color-green) !important;
    border: 2px solid var(--color-white);
    
    
}
.section-useful .gform_wrapper {
    width: 100%;
    max-width: 100%;
}
.section-useful .gform_wrapper input[type=submit] {
    text-transform: none;
    min-width: 150px;
    font-size: 16px;
    padding: 0.5rem 1rem;
    line-height: 1em;
    min-height: 40px !important;
}

.section-useful .gform_wrapper.gravity-theme .gfield_error label {
    color: var(--color-red);
}

.section-useful .validation_error {
    
    background: #fff9f9;
    border-radius: 5px;
    border: 1.5px solid var(--color-red);
    box-shadow: 0 1px 4px rgba(0,0,0,.11),0 0 4px rgba(18,25,97,.0405344);
    margin-block-end: 8px;
    margin-block-start: 8px;
    padding-block: 16px;
    padding-inline-end: 16px;
    padding-inline-start: 48px;
    position: relative;
    width: 100%;
    padding: 20px 30px;
}

.gform_wrapper.gravity-theme .gform_validation_errors>h2, .gform_wrapper .gform_validation_errors > h2 {

    color: var(--color-red) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 17.6px !important;
    margin-block-end: 12px !important;
    margin-block-start: 0 !important;
    margin-inline: 0 !important;
    text-align: center !important;

}

.gform_wrapper .gfield_error [aria-invalid="true"] {
    border: 1px solid var(--color-red);
}

.gform_wrapper.gravity-theme .gfield_error .gfield_repeater_cell label, .gfield_error label, .gform_wrapper.gravity-theme .gfield_error label, .gform_wrapper.gravity-theme .gfield_error legend, .gform_wrapper.gravity-theme .gfield_validation_message, .gform_wrapper.gravity-theme .validation_message, .gform_wrapper.gravity-theme [aria-invalid=true]+label, .gform_wrapper.gravity-theme label+[aria-invalid=true], .gfield_description.validation_message.gfield_validation_message {
    color: var(--color-red) !important;
}

.gfield_error {
    background: var(--color-white);
    border: 1px solid var(--color-red);
    border-radius: 4px;
    padding:10px 30px;
}

.section .gfield_description:before {
    color: var(--color-green);
}

.gfield_error .gfield_description:before {
    color: var(--color-red);
}

.section-useful .gfield_error label, .section .gfield_description {
    font-weight: 700 !important
}
.gform_wrapper.gravity-theme .gform_validation_errors>h2.hide_summary {
    margin: 0 !important;
    padding: 0 !important;
}
.section.section-useful .field-feedback.field-feedback-success {
    background: var(--color-green) !important;
}

.section.section-useful .field-actions .btn.btn-success:hover, .section.section-useful .field-actions .btn.btn-success:focus {
    border-color: var(--color-green) !important;
    background-color: transparent !important;
    color: var(--color-green) !important;

}

/* Media-Filming in Thanet */
.page-template-media-filming .section.section-heading {
    background-color: var(--color-dropdown-blue);
}

.page-template-media-filming .box.box-blue {
    background: var(--color-light-blue);
}

.page-template-media-filming .section.section-heading .btn.btn-round.btn-primary.active, .page-template-media-filming .section.section-heading .btn.btn-round.btn-primary:hover {
    color: var(--color-header-blue);
}

/*Call to action color changes*/
.single-faq .box.box-light {
    background: var(--color-light-blue);
}

.single-faq .btn.btn-danger {
    background: var(--color-magenta);
    border-color: var(--color-magenta);

}

.single-faq .btn.btn-danger:hover {
    background: var(--color-white);
    color: var(--color-magenta);
    border-color: var(--color-magenta);
}
/* Header Navigation */
header.header .header-nav ul.nav li a,
header.header .header-nav ul.nav-no-dd li a {
    background: var(--color-magenta);
    border: 2px solid var(--color-white);
}

.section.section-menu {
    background-color: var(--color-dropdown-blue) !important;
}

header.header .header-search .btn-warning {
    background-color: var(--color-orange);
    background: var(--color-orange);
    border-color: var(--color-orange);
    outline: 2px solid var(--color-white);
    outline-offset: -2px;
    border-radius: 0 25px 25px 0;
}

header.header .header-search .input-group-btn .btn.btn-success {
    background-color: var(--color-light-blue);
    border-color: var(--color-light-blue);
    color: var(--color-dark-teal);
    outline: 2px solid var(--color-white);
    outline-offset: -2px;
    border-radius: 25px 0 0 25px;
}

header.header .header-search input::placeholder {
    color: var(--color-gray);
}

section.section-menu .btn.btn-default,
.section.section-menu .btn.btn-primary:hover {
    color: var(--color-header-blue) !important;
}
/* A-Z Search Button */
header.header .header-search .input-group-btn .btn.btn-success {
    background-color: var(--color-light-blue);
    border-color: var(--color-light-blue);
    color: var(--color-dark-teal);
    outline: 2px solid var(--color-white);
    outline-offset: -2px;
}

header.header .header-search .input-group-btn .btn.btn-success:hover {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
    outline: 2px solid var(--color-white);
    outline-offset: -2px;
}

/* Search Button */
/*header.header .header-search .input-group-btn .btn.btn-warning { 
    
}*/

header.header .header-search .btn-warning {
    background-color: var(--color-orange);
    background: var(--color-orange);
    border-color: var(--color-orange);
    outline: 2px solid var(--color-white);
    outline-offset: -2px;
}


.home .tmpl-general-banner .box { 
    background-color: var(--color-navy);
}

.section .section-header a { 
    color: var(--color-navy);
}

.section.section-services {
    background: var(--color-light-blue);
}

.section.section-services .btn {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
}

.section.section-services .btn.btn-info:hover {
    background: var(--color-white);
    border-color: var(--color-navy);
    color: var(--color-navy);
}

.section.section-services .field-title a {
    color: var(--color-navy);
    border-bottom: 1px solid var(--color-navy);
}

.newsroom-intro-section .newsroom-card-categ {
    color: var(--color-navy);
}

.section.section-meetings {
    background: var(--color-light-blue);
}

.btn.btn-danger {
    background: var(--color-magenta);
    border: 2px solid var(--color-magenta);
}

.btn.btn-danger:hover {
    color: var(--color-magenta);
}

.section.section-find {
    background: var(--color-light-blue);
}

.collection-bins-box {
    background-color: var(--color-soft-blue-bg);
    border: 1px solid var(--color-light-blue);
}

.btn.btn-info {
    background: var(--color-navy);
    border: 2px solid var(--color-navy);
}

.btn.btn-info:hover {
    border-color: var(--color-navy);
    color: var(--color-navy);
}

.green .collection-bins-box-bottom:before {
    background-color: var(--color-green);
}

.section.section-heading {
    background-color: var(--color-header-blue) !important;
}
.box.box-light {
    background: var(--color-light-blue);
}

/* Hyperlink styling*/
.field-body a:not(.btn, .btn-danger, .banner-link) {
    font-weight: bold;
    color: var(--color-navy) !important;
}

header.header .header-nav ul.nav li a {
    border: none !important; 
    position: relative;
    background-color: var(--color-magenta);
    filter: drop-shadow(2px 0 0 #fff) 
            drop-shadow(-2px 0 0 #fff) 
            drop-shadow(0 2px 0 #fff) 
            drop-shadow(0 -2px 0 #fff);
}

header.header .header-nav ul.nav li a:after {
    content: '';
    position: absolute;
    left: 0;
    top: 100%; 
    width: 100%;
    height: 30px;
    background: url(../img/icon_menu.svg) 50% 0 no-repeat;
}

/* @media screen and (max-width:769px) {
    header.header .header-nav ul.nav li a:after {
        left:13px;
        top:70%;
        width: 80%;
    }
} */

@media screen and (max-width: 767px) and (max-width: 1199px){
    header.header .header-nav ul.nav li a.active:after,
    header.header .header-nav ul.nav-no-dd li a.active:after {
        display: block;
        top: 95%;
        left: auto;
        right:auto;
        width: 100%;
        transform: none;
        overflow: hidden;
        background-size: 80%;
    }
}

.newsroom-banner .section-header .btn.btn-danger:hover {
    background: var(--color-white);
    border: 2px solid var(--color-magenta);
    color: var(--color-magenta);
}

.table-responsive table.blueheadernobackground.responsive-table {
    border-color: var(--color-navy);
}

.table-responsive table.blueheadernobackground.responsive-table thead th {
    background-color: var(--color-navy);
    color: var(--color-white);
    border-right: 1px solid var(--color-white);
}

.table-responsive table.blueheadernobackground.responsive-table thead tr th:last-child {
    border-right: 1px solid var(--color-navy);
}

.table-responsive table.blueheadernobackground.responsive-table td {
    border-color: var(--color-navy);
}

.newsroom-intro-section .newsroom-latest-news .section-header {
    border-top: 15px solid var(--color-magenta);
}

.newsroom-intro-section .blue-border {
    border-top: 10px solid var(--color-navy);
}

.newsroom-intro-section .green-border {
    border-top: 10px solid var(--color-green);
}

.newsroom-intro-section .purple-border {
    border-top: 10px solid var(--color-purple);
}

@media screen and (min-width: 992px) {
    .newsroom-banner {
        background-color:  var(--color-light-blue) !important;
    }
}

/* Service page */
.section.section-online {
    background: var(--color-light-blue);
}

.section-online.section .section-content .box {
    background: var(--color-white);
}

.section.section-online .box .field-title a {
    color: var(--color-navy);
}

.section.section-page .accordion-heading {
    background: var(--color-light-blue);

}

.section.section-page .accordion-content {
    background: var(--color-sky);
}

.section.section-support {
    background: var(--color-sky);
}

.section.section-support .section-header h2.section-title {
	color: var(--color-navy);
}

footer.footer ul.links li a {
    font-weight: normal;
}

header.header .logo {
    background-size: contain;
    height: 90px;
    width: 90px;
}