/* 
    Client: West Suffolk 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 {
        /* Variables for portal & iframe */

        --primary-color: #7d1873;
        --primary-color-hover: #64145c;

        --secondary-color: #64145c;
        --secondary-color-hover: #4f0a48;

        --btn-radius: 0;
        --btn-box-shadow: none;
        --btn-hover-text-color: #FFFFFF;

        --link-primary-color: #1d70b8;
        --link-secondary-color: #003078;
        --link-tertiary-color: #003078;

        --success-color: #00703C;
        --success-color-hover: #01532D;
        --error-color: #D4351C;
        --error-color-hover: #B22A15;
        --info-color: #1d70b8;
        --info-color-hover: #134d7f;
        --warning-color: #b85523;
        --warning-color-hover: #9a471d;

        --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 'inline-block' if you want it to appear. */
        --cancel-button-display-style: inline-block;

        /* Set to 'underline' if you want anchor links to be underlined, set to 'none' if you do not. */
        --a-text-decoration-style: none;
        /* 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: 3px;

        /* Set to your desired font size. */
        --font-size: 15px;

        /* Variables for portal */

        --widget-border-color: #bfc1c3;
        --widget-border-bottom-thickness: 1px;
        --widget-border-bottom-color: #DDDDDD;

        --cookie-bg-color: #444444;
        --cookie-btn-radius: 0;
        --cookie-btn-bg-color: #7d1873;

        --navbar-bg-color: #111111;
        --navbar-link-color: #FFFFFF;

        --footer-bg-color: #111111;
        --footer-text-color: #FFFFFF;

        --header-bg-value: url("//cdn.optimads.net/govService/test/header.jpg") no-repeat 0% 15% / cover;
        --header-logo-align: left;
        --header-text-color: #FFFFFF;
        --header-logo-size: 400px;

        --announcement-bg-color: #004288;
        --announcement-text-color: #FFFFFF;

        --support-login-border-thickness: 0;
        --support-login-border-radius: 5px;
        --support-login-border-color: transparent;
        --support-login-bg-color: #EEEEEE;
        --support-login-bg-hover-color: #E1E1E1;
        /* Set to block to display icons, set to none to remove them. */
        --support-login-display-icons: block;
        /* If the above option is set to block, set the height to 250px, if it's none, set the height to 150px. */
        --support-login-min-height: 250px;

        --support-logout-bg-color: #EEEEEE;
        --support-logout-border-thickness: 0;
        --support-logout-border-radius: 5px;
        --support-logout-border-color: transparent;
    }

/* Font Family */

    body,
    html {
        font-size: var(--font-size);
    }

    body {
        display: flex;
        flex-direction: column;
    }

    /* OVERWRITE WEST SUFFOLK ROW FOR HEADER */
    .row2ws {
        max-width: 100% !important;
    }

/* At request of council, hide auto hiding of navigation on mobile devices. */

    #navigation #navDropdownToggle {
        display: none !important;
    }

    #navigation .navbar-collapse {
        display: block !important;
    }

/* 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);
    }

    .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: var(--font-size);
        border-radius: var(--cookie-btn-radius);
        background: var(--cookie-btn-bg-color);
        border: 0 !important;
        margin: 10px 0 0 !important;
    }

/* Case Notes */

    #self-body .case_notes {
        bottom: 20px !important;
        right: 20px !important;
    }

    #self-body .case_notes .btn-primary {
        background: var(--primary-color) !important;
        color: var(--btn-hover-text-color) !important;
        padding: 12px 18px !important;
        font-size: var(--font-size) !important;
        border: 0 !important;
        border-radius: 0 !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }

    #self-body .case_notes .btn-primary:hover,
    #self-body .case_notes .btn-primary:focus,
    #self-body .case_notes .btn-primary:active {
        background: var(--primary-color-hover);
        color: var(--btn-hover-text-color) !important;
        outline: none !important;
    }

    #self-body .case_notes .fa-circle {
        color: #FFFFFF !important;
    }

    #self-body .case_notes .fa-circle::before {
        content: "\f071" !important;
    }

    .case_notes_bar {
        display: none !important;
    }

    .case-notes-modal .modal-dialog {
        max-width: 75% !important;
    }

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

    .navbar-static-top {
        padding: 10px 0 !important;
        background: var(--navbar-bg-color);
        color: var(--navbar-link-color);
        margin-bottom: 0 !important;
        border: 0 !important;
    }

    .navbar-static-top a {
        color: var(--navbar-link-color) !important;
        text-decoration: none !important;
        font-size: var(--font-size);
    }

    .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: var(--font-size);
    }

    .navbar-static-top .navbar-brand {
        display: none !important;
    }

    #session-badge {
        margin-top: 0 !important;
    }

    #SelfToolbar .login-link, 
    #toolbar .login-link {
        margin-top: 0;
    }

    #registerLink {
        margin-right: 10px !important;
    }

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

    #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: 0 !important;
    }

    #navigation .navbar .btn {
        box-shadow: var(--btn-box-shadow) !important;
        border: 0;
        border-radius: 0;
        margin-bottom: 10px;
        background: var(--primary-color);
        padding: 15px 25px !important;
        font-weight: 600;
        margin-right: 10px;
        color: #FFFFFF;
    }

    #navigation .navbar .btn:hover,
    #navigation .navbar .btn:focus,
    #navigation .navbar .btn:active {
        box-shadow: var(--btn-box-shadow) !important;
        color: var(--btn-hover-text-color);
        background: var(--primary-color-hover);
    }

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

    #navigation a:last-of-type {
        margin-right: 0;
    }

/* Announcement Banner */

    .announcement {
        color: var(--announcement-text-color);
        background: var(--announcement-bg-color);
        padding: 20px;
    }

    .announcement p {
        padding: 0;
        margin: 0;
    }

    .announcement a {
        color: var(--announcement-text-color);
        text-decoration: underline;
    }

    .header+.announcement {
        margin-top: -30px;
    }

    .announcement {
        margin-bottom: 30px;
    }

/* Header */

    .header {
        padding: 50px 0;
        background: var(--header-bg-value);
        margin-bottom: 30px;
        margin-top: 0 !important;
    }

    .header .row {
        display: flex;
        align-items: center;
    }

    #header {
        margin-bottom: 30px;
    }

    /* Combined header */

    .header-combined img {
        width: var(--header-logo-size);
        max-width: 100%;
    }

    .header-combined h1 {
        margin-top: 0;
        margin-bottom: 0;
        color: var(--header-text-color) !important;
        line-height: 1.1;
        font-weight: 600;
        text-align: right;
    }

    .header-combined h3 {
        margin-top: 0;
        margin-bottom: 0;
        color: var(--header-text-color) !important;
        font-weight: 400;
        text-align: right;
    }

    /* Center aligned header */

    .header-logo {
        text-align: var(--header-logo-align);
    }

    .header-logo img {
        width: var(--header-logo-size);
        max-width: 100%;
    }

/* Jumbotron (GDPR messaging) */

    .jumbotron {
        border-radius: 0 !important;
        border-left: 8px solid var(--primary-color) !important;
    }

    .jumbotron h2 {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        font-weight: 600;
    }

    .jumbotron p {
        font-size: var(--font-size);
        font-weight: 400;
    }

    .jumbotron .my-4 {
        /* We hide the line before buttons. */
        display: none !important;
    }

    .consent-accept,
    .consent-decline {
        margin-top: -15px !important;
    }

    .consent-accept {
        box-shadow: var(--btn-box-shadow) !important;
        border: 0;
        border-radius: 0;
        margin-bottom: 10px;
        background: var(--primary-color);
        padding: 15px 25px !important;
        font-weight: 600;
        margin-right: 10px;
        color: #FFFFFF;
    }

    .consent-accept:hover, 
    .consent-accept:focus, 
    .consent-accept:active {
        box-shadow: var(--btn-box-shadow) !important;
        color: var(--btn-hover-text-color);
        background: var(--primary-color-hover);
        outline: none !important;
    }

    .consent-decline {
        box-shadow: var(--btn-box-shadow) !important;
        border: 0;
        border-radius: 0;
        margin-bottom: 10px;
        background: var(--error-color);
        padding: 15px 25px !important;
        font-weight: 600;
        margin-right: 10px;
        color: #FFFFFF;
    }

    .consent-decline:hover, 
    .consent-decline:focus, 
    .consent-decline:active {
        box-shadow: var(--btn-box-shadow) !important;
        color: var(--btn-hover-text-color);
        background: var(--error-color-hover);
        outline: none !important;
    }

/* Homepage Widgets */

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

    .widget-panel .btn-default {
        background: var(--primary-color);
        box-shadow: var(--btn-box-shadow) !important;
        color: #FFFFFF;
        border: none;
        font-size: var(--font-size);
        padding: 12px 22px;
        margin-bottom: 5px;
        border-radius: var(--btn-radius);
    }

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

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

    .widget-header > h1 {
        padding-bottom: 20px;
        border-bottom: 1px solid var(--widget-border-color);
        font-size: 28px;
        margin-top: 0;
    }

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

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

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

    .widget-external-services .widget-external-services-icon {
        font-size: 96px;
        margin-bottom: 10px;
        color: #333333;
    }

    .widget-external-link {
        display: block;
        font-size: var(--font-size);
        margin: 0;
    }

    /* User Widget */

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

    .widget-user-data .widget-user-options {
        margin-top: 15px;
    }

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

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

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

    /* Councillor Widget */
    
    .widget-councillor-list .widget-councillor-record {
        border-left: 5px solid var(--widget-border-bottom-color);
        margin-bottom: 20px;
        padding: 5px 20px;
    }

    .widget-councillor-list .widget-councillor-record:last-of-type {
        margin-bottom: 0;
    }

    .widget-councillor-list .widget-councillor-record h4 {
        margin-top: 0;
        margin-bottom: 5px;
    }

    .widget-councillor-list .widget-councillor-record a {
        margin-bottom: 0;
    }

    .widget-councillor-list .widget-councillor-record ul {
        padding: 0;
        list-style-type: none;
        margin: 0;
    }

    /* Waste Widget */

    .widget-waste-list > .row {
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        margin-left: 0;
        margin-right: 0;
    }

    .widget-waste-list > .row:last-of-type {
        margin-bottom: 20px;
    }

    .widget-waste-list .col-md-3 {
        text-align: center;
    }

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

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

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

    /* 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: var(--support-logout-border-thickness) solid var(--support-logout-border-color);
        background: var(--support-logout-bg-color);
        border-radius: var(--support-logout-border-radius);
        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,
    .login-form h2 {
        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 {
        text-align: right;
        display: block;
    }

    .login-form .resetLink {
        text-transform: lowercase;
    }

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

    .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: var(--font-size);
        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%;
        max-width: 100% !important;
    }

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

    .login-form .row-login p {
        position: unset;
        font-size: 18px;
        margin-top: 0;
        margin-bottom: 0;
        width: 100%;
        font-weight: 600;
    }

    .login-form .row-login .text-warning {
        font-size: 12px;
        background: #cc4242;
        padding: 5px;
        color: #FFFFFF;
        border-radius: 4px;
        margin-top: 5px;
        display: block;
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }

    .login-form .row-login .thumbnail {
        border-radius: var(--support-login-border-radius);
        border: var(--support-login-border-thickness) solid var(--support-login-border-color); 
        background: var(--support-login-bg-color) !important;
        min-height: var(--support-login-min-height) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .login-form .row-login .thumbnail:hover,
    .login-form .row-login .thumbnail:focus,
    .login-form .row-login .thumbnail:active {
        background: var(--support-login-bg-hover-color) !important;
    }

    .login-form .row-login .provider-div img {
        display: var(--support-login-display-icons) !important;
        border-radius: 100%;
        width: 30%;
        margin-bottom: 0;
    }

    .content2 {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

    .content2 .login-form {
        text-align: left;
        padding: 0 !important;
    }

    .content2 .row-login {
        margin-left: -15px !important;
    }

/* Why register & login modal for forms */

    .custom-whyregister p {
        margin-bottom: 0;
    }

    .whyregister-icons {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .whyregister-icons img {
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 75px;
        margin-bottom: 15px;
    }

    .whyregister-icons {
        text-align: center !important;
    }

    @media only print, only screen and (max-width: 768px) {
        .whyregister-icons .col-md-3 {
            margin-bottom: 20px;
        }

        .whyregister-icons .col-md-3:last-of-type {
            margin-bottom: 0;
        }
    }

    #anonymousLoginScreen #btn-register {
        margin-right: 10px !important;
    }

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

    #anonymousLoginScreen .btn:hover,
    #anonymousLoginScreen .btn:focus,
    #anonymousLoginScreen .btn:active {
        color: #FFFFFF !important;
        background: var(--primary-color-hover);  
        padding: 10px 15px !important;
        box-shadow: none !important;
        margin-top: 0 !important;
    }

    #anonymousLoginScreen .btn-custom {
        letter-spacing: normal !important;  
    }

    #btn-register + .clearfix {
        display: none;
    }

    #anonymousLoginScreen #btn-anon {
        background: transparent !important;
        color: var(--primary-color) !important;
        border: none;
        font-size: 14px !important;
        padding: 10px 15px;
        margin-top: 10px !important;
    }

    #anonymousLoginScreen #btn-anon:hover,
    #anonymousLoginScreen #btn-anon:focus,
    #anonymousLoginScreen #btn-anon:active {
        color: var(--primary-color) !important;
        background: transparent !important;
        padding: 10px 15px !important;
        box-shadow: none !important;
        margin-top: 10px !important;
    }

/* PNotify */

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

    .ui-pnotify button {
        margin-right: 10px !important;
        outline: none !important;
        background: #000000;
        border: 0 !important;
        padding: 5px 7px !important;
        border-radius: 6px;
    }

    .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: #333333 !important;
        border-color: #333333 !important;
        color: #FFFFFF !important;
    }

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

/* Footer */

    footer {
        margin-top: auto !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) {
        /* Header */

        .header-logo {
            text-align: center;
        }

        .header-logo img {
            width: 500px;
            max-width: 75%;
        }

        /* Announcement */

        .announcement p {
            margin-left: 15px;
            margin-right: 15px;
        }

        /* Footer */

        .footer .container {
            padding-left: 0;
            padding-right: 0;
        }

        /* 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-bottom: 0;
        }

        #navigation .navbar .btn {
            margin-bottom: 20px;
            margin-top: -10px;
            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);
        }

        #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);
        }

        .navbar-nav {
            margin-top: 0;
            margin-bottom: 0 !important;
        }

        #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: 700 !important;
        }

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

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

        /* Navigation above header */

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

        .navbar-static-top .navbar-nav {
            text-align: center !important;
            margin-top: 30px !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: var(--font-size) !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;
        }

        /* Misc */

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

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

        #self-content {
            padding-left: 30px !important;
            padding-right: 30px !important;
        }

        .homepage-container {
            padding-left: 15px !important;
            padding-right: 15px !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: 768px) {
        .widget-external-services .widget-external-link {
            margin-bottom: 5px;
        }

        .widget-external-services .widget-external-link:last-of-type {
            margin-bottom: 0;
        }

        .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;
            width: 100%;
        }

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

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

        .widget-waste-list > .row {
            display: block;
            text-align: center;
        }
    }