/* 
    Optima Digital Solutions

        Base CSS self theme for organisations using the govService platform. This CSS fixes several key issues with the default govService CSS. It is recommended to leave this base CSS file as is and only update colours as needed. Any additions should be made in the appropriate self css file.

    Colours:

        Blue - #007cbb
        Blue Dark - #006498

    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.
*/

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

body,
html {
    font-family: "Inter", sans-serif !important;
}

a {
    color: #007cbb;
}

a:hover,
a:focus,
a:active {
    color: #006498;
}

/* Cookie Message */

#cookie-message {
    color: #FFFFFF;
    background: #007cbb;
    position: unset !important;
}

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

#close-cookie-message {
    padding: 10px 20px;
    font-size: 16px;
    background: #006498;
    border-color: #006498;
    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: 18px;
}

.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: 16px;
}

/* 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: none;
    border: 0;
    border-radius: 0;
    margin-bottom: 10px;
    background: #007cbb;
    padding: 15px 20px;
    font-weight: 600;
    margin-right: 10px;
}

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

#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: #007cbb;
    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-left: 5px solid #007cbb;
        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: #007cbb;
        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 {
        background: #006498;
    }

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

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

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

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

    .widget-external-link {
        display: block;
        text-decoration: none;
        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-width: 100px;
        width: 100%;
    }

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

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

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


    /* 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 #007cbb;
    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 {
    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: #007cbb;
    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 {
    background: #006498;   
}

.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 #007cbb;
}

/* 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 .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }

    #navigation {
        padding: 0 20px !important;
    }

    #navigation .navbar .btn {
        margin-bottom: 20px;
        margin-top: -10px;
        background: #f5f5f7;
        border: 3px solid #006498;
        color: #006498;
    }

    #navigation .navbar .btn:hover,
    #navigation .navbar .btn:active,
    #navigation .navbar .btn:focus {
        background: #006498;
        color: #FFFFFF;
    }

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

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

    #navigation .navbar-nav > li > a {
        background: #007cbb;
        color: #FFFFFF;
    }

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

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

    .navbar-static-top .navbar-nav {
        text-align: center !important;
        margin-top: 30px !important;
        margin-bottom: -15px !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;
    }

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

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

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

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

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

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