/* 
    Client: Hounslow Council

        This is the base CSS self theme for organisations using the govService platform developed by Optima Digital Solutions. This CSS fixes several key issues with the default govService CSS.

        DO NOT MAKE ANY CSS CHANGES APART FROM CHANGING VARIABLES IN THIS DOCUMENT AS IF YOU RECEIVE AN UPDATED BASE THEME IT MAY OVERWRITE ANY CUSTOM CHANGES. PLEASE MAKE THE CHANGES IN YOUR RELEVANT INDIVIDUAL CSS FILE.

    Notes:

        Anywhere in this document where we are modifying row / container margins is thanks to Granicus' mis-use of Bootstrap rows without containers. Always ensure that a row falls within a container to ensure correct padding / margins.
*/

:root {
    --primary-color: #652e6c;
    --primary-color-hover: #652e6c;

    --secondary-color: #e0d4fd;
    --secondary-color-hover: #e0d4fd;

    --btn-hover-text-color: #0B0C0C;

    --widget-border-color: #652e6c;
    --cookie-bg-color: #502656;

    --link-primary-color: #0E56E0;
    --link-secondary-color: #002D84;
    --link-tertiary-color: #652e6c;

    --success-color: #00703C;
    --success-color-hover: #01532D;
    --error-color: #D4351C;
    --error-color-hover: #B22A15;
    --info-color: #0E56E0;
    --info-color-hover: #002D84;
    --warning-color: #DF9D36;
    --warning-color-hover: #936115;

    --grey-light-color: #E6E8EA;
    --grey-dark-color: #D8DADB;

    /* Set to 'none' if you want to hide the cancel button that appears at the bottom of each form, set to 'block' if you want it to appear. */
    --cancel-button-display-style: none;

    /* Set to 'underline' if you want anchor links to be underlined, set to 'none' if you do not. */
    --a-text-decoration-style: underline;
    /* If underline is set above, define the thickness in default & visited states. */
    --a-text-decoration-thickness-normal: 1px;
    /* If underline is set above, define the thickness in hover, focus & active states. */
    --a-text-decoration-thickness-hover: 2px;
    /* If underline is set above, this changes the offset of the line from the text. */
    --a-text-underline-offset: 6px;

    /* Set to your imported font family name (or default, e.g. Arial, Helvetic, etc) */
    --font-family-name: "Inter";
}

/* Font Family */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

body,
html {
    font-family: var(--font-family-name), sans-serif !important;
}

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

html._AF body {
    color: #0b0d0d;
}

/* General Changes */

a {
    color: var(--link-primary-color);
    text-decoration: var(--a-text-decoration-style); 
    text-decoration-color: var(--link-primary-color);
    text-decoration-thickness: var(--a-text-decoration-thickness-normal);
    text-underline-offset: var(--a-text-underline-offset);
}

a:hover,
a:focus,
a:active {
    color: var(--link-secondary-color);
    text-decoration: var(--a-text-decoration-style); 
    text-decoration-color: var(--link-secondary-color);
    text-decoration-thickness: var(--a-text-decoration-thickness-hover);
    text-underline-offset: var(--a-text-underline-offset);
}

/*a:visited {
    color: var(--link-primary-color);
    text-decoration: var(--a-text-decoration-style); 
    text-decoration-color: var(--link-primary-color);
    text-decoration-thickness: var(--a-text-decoration-thickness-normal);
    text-underline-offset: var(--a-text-underline-offset);
}*/

.btn,
.btn-af,
button {
    /* We always disable any button text decoration as this is usually not needed, you can change this if required. */
    text-decoration: none !important;
}

/* Cookie Message */

#cookie-message {
    color: #FFFFFF;
    background: var(--cookie-bg-color);
    position: unset !important;
}

#cookie-message a {
    text-decoration: underline;
    color: #FFFFFF;
    font-weight: 600;
}

#close-cookie-message {
    padding: 10px 20px;
    font-size: 16px;
    background: var(--primary-color);
    border-color: var(--primary-color);
    margin: 10px 0 0 !important;
}

/* Top Navigation Bar (govService session badge navigation) */

.navbar-static-top {
    padding: 0.75rem 0 !important;
    background: #333333;
    color: #FFFFFF;
    margin-bottom: 0 !important;
    border: 0 !important;
}

.navbar-static-top a {
    color: #FFFFFF !important;
    font-size: 10pt;
}

.navbar-static-top img {
    width: auto;
    height: 30px;
    margin-right: 5px;
}

.navbar-static-top .navbar-right {
    margin-top: 5px;
}

.dropdown-menu > li > a {
    color: #333333 !important;
    font-size: 14px;
    text-decoration: none !important;
}

/* Pill Navigation (govService auto generated navigation) */

#navigation {
    background: #E0D4FE;
    width: 100% !important;
    margin-bottom: 30px !important;
}

#navigation .navbar {
    margin-bottom: 0 !important;
    margin-top: 15px !important;
    border-bottom: none !important;
}

#navigation .row {
    /* We do this because the platform isn't consistent in using .container > .row which 
    causes margin / padding issues across different areas. This brings page content inline. */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 1145px !important;
}

#navigation .navbar .btn {
    box-shadow: none;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    background: none;
    padding: 15px 20px;
    font-weight: 400;
    margin-right: 10px;
    color: #652f6c;
    font-size: 16px;
}

#navigation .navbar .btn.active,
#navigation .navbar .btn.active:hover,
#navigation .navbar .btn.active:focus,
#navigation .navbar .btn.active:active {
    background: #FFFFFF;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-weight: 600;
}

#navigation .navbar .btn .fa-ellipsis-v {
    margin-top: 4px;
}

#navigation .navbar .btn:hover,
#navigation .navbar .btn:focus,
#navigation .navbar .btn:active {
    box-shadow: none;
    background: #FFFFFF !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

#navigation .navbar .caret {
    display: none !important;
}

#navigation .btn-group .btn+.btn, 
#navigation .btn-group .btn+.btn-group, 
#navigation .btn-group .btn-group+.btn, 
#navigation .btn-group .btn-group+.btn-group {
    margin-left: 0 !important;
}

/* Header Alert Banner */

.header-alert {
    color: #FFFFFF;
    background: var(--primary-color);
    padding: 20px 0;
    margin-bottom: 40px;
}

.header-alert p {
    padding: 0;
    margin: 0;
}

.header-alert a {
    color: #FFFFFF;
    text-decoration: underline;
}

/* Homepage Widgets */

    .widget-panel {
        padding: 30px;
        margin-bottom: 20px;
        background: #FFFFFF;
        border: 1px solid #DDDDDD;
        border-bottom: 8px solid var(--widget-border-color);
        color: #000000;
    }

    #app-content .widget-panel .btn-default {
        margin-right: 4px;
        margin-bottom: 4px;
    }

    #app-content .widget-panel {
        padding-bottom: 26px;
    }

    .widget-panel .btn-default {
        background: var(--primary-color);
        color: #FFFFFF;
        border: none;
        font-size: 16px;
        padding: 10px 25px;
    }

    .widget-panel .btn-default:hover,
    .widget-panel .btn-default:focus,
    .widget-panel .btn-default:active {
        color: var(---btn-hover-text-color);
        background: var(--secondary-color);
    }

    .widget-header {
        margin-bottom: 20px;
    }

    .widget-header > h1 {
        padding-bottom: 20px;
        border-bottom: 1px solid #DDDDDD;
        font-size: 20px;
        margin-top: 0;
        font-weight: 600;
    }

    .widget-content iframe {
        margin-bottom: 5px;
    }

    .widget-external-services {
        text-align: center;
    }

    .widget-external-services .btn {
        margin-top: 20px;
    }

    .widget-image {
        width: 48px;
        height: 48px;
        margin-bottom: 15px;
    }

    .widget-external-link {
        display: block;
        font-size: 16px;
        margin: 0;
    }

    /* User Widget */

    .widget-user-data {
        text-align: left;
    }

    .widget-user-data .widget-email,
    .widget-user-data .widget-address {
        margin-bottom: 10px;
    }

    .widget-user-data .widget-options > ul {
        padding: 0;
        list-style-type: none;
    }

    .widget-user-data .widget-options > ul > li:last-of-type {
        margin-right: 0;
    }

    .widget-user-data .widget-options > ul > li {
        display: inline-block;
        margin-right: 10px;
    }

    /* Councillor Widget */

    .widget-councillor-list img {
        max-height: 80px;
    }

    .widget-councillor-list .widget-councillor-data h3 {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 16px;
    }

    .widget-councillor-list .widget-councillor-data p {
        margin: 0;
        font-size: 16px;
    }

    .widget-councillor-list > .row {
        margin-bottom: 15px;
    }

    .widget-councillor-list .col-xs-3 {
        text-align: center;
    }

    /* Waste Widget */

    .widget-waste-list img {
        max-width: 100px;
        width: 100%;
    }

    .widget-waste-list .widget-waste-data h3 {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .widget-waste-list .widget-waste-data p {
        margin: 0;
    }

    .widget-waste-list > .row {
        margin-bottom: 15px;
    }

    .widget-waste-data > a {
        margin-top: 5px;
    }

    /* Account Widget */

    .widget-content > .widget-account h4 {
        margin-top: 0;
        margin-bottom: 5px;
    }

    .widget-content > .widget-account p {
        margin: 0;
    }

    .widget-content > .widget-account a {
        margin-top: 5px;
    }

    .widget-content > .widget-account {
        border-bottom: 1px solid #DDDDDD;
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .widget-content > .widget-account:last-of-type {
        border-bottom: 0;
        margin-bottom: 15px;
        padding-bottom: 0;
    }

/* Logout Form */

.logout-form {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    max-width: 100%;
    color: #333333;
    border: 3px solid var(--primary-color);
    background: #F5F5F7;
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 30px;
}

.logout-form h2 {
    font-weight: 600;
    margin-top: 0;
}

.logout-form p {
    margin-bottom: 0;
}

/* Login Form */

.login-form {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    color: #333333;
    padding: 20px;
    margin-bottom: 30px; 
}

.login-homepage {
    margin: 0;
    background: none;
    padding: 0;
    border: none;
}

.login-form h1 {
    margin-top: 0;
    font-weight: 600;
}

.login-form .control-label {
    text-align: left !important;
    text-transform: lowercase;
}

.login-form .login-btn-group, 
.login-form .resetLink {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

    /* REGISTER BUTTON */

    .login-form .login-btn-group .btn:nth-child(2) {
        order: 1;
        background: transparent !important;
        border: 2px solid var(--primary-color);
        color: var(--primary-color);
        padding: 10px 25px !important;
        font-size: 16px !important;
        width: 100%;
        max-width: 125px !important;
    }

    .login-form .login-btn-group .btn:nth-child(2):hover,
    .login-form .login-btn-group .btn:nth-child(2):focus,
    .login-form .login-btn-group .btn:nth-child(2):active {
        background: var(--secondary-color-hover) !important;
        border: 2px solid transparent;
        color: var(--btn-hover-text-color);
    }
    
    /* LOGIN BUTTON */

    .login-form .login-btn-group .btn:nth-child(1) {
        order: 2;
        border: 2px solid transparent;
        padding: 10px 25px !important;
        font-size: 16px !important;
        width: 100%;
        max-width: 125px !important;
    }

/*
.login-form .resetLink {
    text-transform: lowercase !important;
}*/

    /* CANCEL LOGIN BUTTON */

    .login-form .login-btn-group .btn.pull-right {
        display: none;
        order: 3;
    }

.login-form input {
    box-shadow: none;
    border-radius: 0;
    border: 1px solid #DDDDDD;
    height: 40px;
}

.login-form input:hover,
.login-form input:focus {
    box-shadow: none;
    border: 1px solid #CCCCCC;
}

.login-form .control-label::first-letter,
.login-form .resetLink::first-letter {
    text-transform: uppercase;
}

.login-form .btn-default {
    background: var(--primary-color);
    color: #FFFFFF;
    border: none;
    font-size: 14px;
    padding: 10px 15px;
}

.login-form .btn-default:hover,
.login-form .btn-default:focus,
.login-form .btn-default:active {
    color: var(---btn-hover-text-color);
    background: var(--secondary-color);   
}

.login-form .row-login {
    display: inline-block;
    margin-top: 30px;
    width: 100%;
}

.login-form .row-login .provider-div {
    width: 33.33% !important;
}

.login-form .row-login p {
    font-size: 14px;
    position: static;
    margin-top: -30px;
    margin-bottom: 0;
    width: 100%;
    font-weight: 500;
}

.login-form .row-login .text-warning {
    display: none !important;
}

.login-form .row-login .thumbnail {
    border-radius: 0;
    border: 3px solid var(--primary-color);
}

/* PNotify */

.ui-pnotify-container {
    padding: 15px 20px !important;
    font-size: 16px !important;
    color: #FFFFFF !important;
    background-color: var(--primary-color) !important;
    border: 0 !important;
}

.ui-pnotify button {
    margin-right: 10px !important;
    outline: none !important;
}

.ui-pnotify-container .ui-pnotify-action-bar {
    justify-content: flex-start !important;
    margin-top: 10px !important;
}

.ui-pnotify .btn-danger {
    background-color: var(--error-color) !important;
    border-color: var(--error-color) !important;
}

.ui-pnotify .btn-default {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
}

.ui-pnotify .btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
}

/* Font Awesome Fixes (we change the content so that the existing govService icons work with Font Awesome V5). */

.fa-sign-out:before {
    content: "\f2f5" !important;
}

.fa-pencil-square-o:before {
    content: "\f14b" !important;
}

/* Media Queries */

@media only print, only screen and (max-width: 768px) {
        /* Navigation under header */

    #navigation .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

    #navigation {
        padding: 0 30px !important;
        width: 100% !important;
        margin-bottom: 0;
    }

    #navigation .navbar {
        margin-top: 30px !important;
        margin-bottom: 0 !important;
    }

    #navigation .navbar .btn {
        margin-bottom: 30px;
        margin-top: 0;
        background: #f5f5f7;
        border: 3px solid var(--primary-color);
        border-radius: 0;
        font-size: 0;
        color: transparent;
    }

    #navigation .navbar .btn:hover,
    #navigation .navbar .btn:active,
    #navigation .navbar .btn:focus {
        background: var(--secondary-color);
        border-color: var(--secondary-color);
        border-radius: 0 !important;
    }

    #navigation .navbar .btn::before {
        content: "Navigation";
        font-size: 18px;
        color: var(--primary-color);
    }

    #navigation .navbar .btn:hover::before,
    #navigation .navbar .btn:active::before,
    #navigation .navbar .btn:focus::before {
        color: var(--btn-hover-text-color);
    }

    #navigation .navbar-nav {
        margin-top: 0;
    }

    #navigation .navbar-nav > li {
        border: 0 !important;
        margin-bottom: 5px;
    }

    #navigation .navbar-nav > li:last-of-type {
        margin-bottom: 15px !important;
    }

    #navigation .navbar-nav > li > a {
        background: var(--primary-color);
        font-size: var(--font-size);
        color: #FFFFFF;
        padding: 15px 20px;
        font-weight: 500 !important;
        text-decoration: none !important;
    }

    #navigation .navbar-collapse {
        max-height: 1000px !important;
    }

    #SelfToolbar .navbar-header,
    #toolbar .navbar-header {
        float: unset !important;
        margin-bottom: 0 !important;
        text-align: center;
    }

    #navigation .row {
        width: unset !important;
    }

    .navbar-static-top .navbar-brand {
        width: 100%;
    }

    .navbar-static-top .navbar-nav {
        text-align: center !important;
        margin-top: 20px !important;
        margin-bottom: 0 !important;
    }

    .navbar-static-top .nav > li {
        display: inline-block !important;
    }

    .navbar-static-top .nav > li > a {
        padding: 10px;
    }

    .navbar-static-top .nav > li > a i {
        font-size: 16px !important;
    }

    .navbar-static-top .displayname,
    .navbar-static-top .homepage {
        display: none !important;
    }

    .navbar-static-top .dropdown-menu {
        text-align: center;
        border-radius: 0;
        width: 100%;
        padding: 0;
        border: 0 !important;
    }

    .navbar-static-top .dropdown-menu > li > a {
        padding: 10px 20px;
    }

    .navbar-static-top .dropdown-menu .divider {
        display: none !important;
    }

    .navbar-static-top .dropdown {
        position: unset !important;
    }

    .login-form .row-login .provider-div {
        width: 100% !important;
    }

    #self-content .row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .login-form .btn-default {
        margin-bottom: 0 !important;
    }
}

@media only print, only screen and (max-width: 992px) {
    .navbar-static-top .homepage {
        display: none !important;
    }
}

@media only print, only screen and (min-width: 768px) {
    .navbar-nav.navbar-right:last-child {
        margin-right: 0;
    }
}

/* Widget Media Queries */

@media only print, only screen and (min-width: 768px) {
    .widget-external-services > .row > .col-md-6:nth-child(1) > .widget-external-link,
    .widget-external-services > .row > .col-md-6:nth-child(2) > .widget-external-link {
        margin-bottom: 10px;
    }
}

@media only print, only screen and (max-width: 1201px) {
    /*.widget-councillor-list .widget-councillor-data,
    .widget-waste-list .widget-waste-data {
        margin-top: 30px;
    }*/
}

@media only print, only screen and (min-width: 1200px) {
    /*.widget-councillor-list .widget-councillor-data {
        margin-top: 45px;
    }*/

    .widget-waste-list .widget-waste-data {
        margin-top: 15px;
    }
}

@media only print, only screen and (max-width: 768px) {
    .widget-external-services .widget-external-link {
        margin-bottom: 10px;
    }

    .widget-councillor-list,
    .widget-waste-list {
        text-align: left;
    }

    .widget-councillor-list .widget-councillor-data,
    .widget-waste-list .widget-waste-data {
        margin-top: 10px;
    }

    .widget-panel .btn-default {
        margin-bottom: 5px;
    }

    .widget-panel .btn-default:last-of-type {
        margin-bottom: 0;
    }

    .widget-panel {
        margin-left: -15px;
        margin-right: -15px;
    }
}