/* Whats On */
main.whats_on {
        margin:0 var(--layoutpadding) 0 var(--layoutpadding);
}


main.whats_on section#serviceHeader{
    height:320px;
    background-color:var(--paleblue);
    padding:0 var(--layoutpadding);
    margin:0 var(--layoutpaddingNeg);
    }

main.whats_on section#serviceHeader h1{
    padding:20px 0 0 0;
    font-size:36px;
    height:auto;
    margin:0;
}

main.whats_on h2{
    font-size:28px;
    margin:30px 0 14px 0;
    }

main.whats_on h3{
    font-size:20px;
    color:var(--darkgrey);
    margin:25px 0 14px 0;
    }

main.whats_on h4{
    font-size:17px;
    color:var(--darkgrey);
    margin:10px 0;
    }

main.whats_on p{
    max-width:800px;
    margin:15px 0;
    }



main.whats_on section#serviceButtons{
    padding:40px var(--layoutpadding) 0 var(--layoutpadding);
}

main.whats_on section#serviceButtons div{    
    display:flex;
    flex-wrap:wrap;
    gap:24px 16px;
}

main.whats_on section#serviceButtons div a{
    display:inline-block;
    height:80px;
    width:300px;
    border:1px solid var(--midgrey);
    border-radius:var(--radius);
    text-decoration:none;
    font-size:17px;
    font-weight:bold;
    align-content:center;
    padding:0 30px 0  20px;
    background-image: url('/control/images/svg/arrow_forward_24dp_1F1F1F.svg');
    background-size: 24px;
    background-repeat:no-repeat;
    background-position-x:315px;
    background-position-y:center;
}

main.whats_on section#serviceButtons div a:hover{
    background-color:var(--midgrey);
    text-decoration:underline;
}


/* Online Forms */
main.onlineforms h1{
    height: 170px;
    background-color: var(--paleblue);
    font-size: 36px;
    text-align: left;
    padding: 20px 0 0 var(--layoutpadding);
    margin:0 0 20px 0;
}

main.onlineforms fieldset{
    border:none;
    }

main.onlineforms fieldset legend{
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow:hidden;
    position:absolute;
    white-space:nowrap;
    }
main.onlineforms  fieldset fieldset{
    border-radius:var(--radius);
    border:1px solid var(--black);
}
main.onlineforms fieldset  fieldset legend{
    clip:unset;
    clip-path:unset;
    height:auto;
    width:auto;
    overflow:unset;
    position:relative;
    white-space:unset;
    color:var(--blue);
    font-size:28px;
    }

main.onlineforms fieldset fieldset fieldset{
    border:none;
}

main.onlineforms fieldset fieldset fieldset legend{
    color:var(--black);
    font-size:17px;
}

main.onlineforms input[type="button"]{
    color:var(--white);
    padding: 15px 30px;
    margin: 0 0 0 0;
    background-color:var(--blue);
    width:auto !important;
    border:1px solid var(--black);
    max-width:unset;
    border-radius:var(--radius);
    font-size:17px;
}

main.onlineforms div#submitPanel{
    margin:0 0 30px 0;
}

main.onlineforms input[type="button"]:hover{
    background-color:var(--black);
}

main.onlineforms .radio-left-h input[type="radio"]{
    margin-right:5px;
}

main.onlineforms .radio-top-v label{
    margin:5px 0 5px 5px;
}

main.onlineforms .radio-top-h label{
    margin:5px 0 5px 5px;
}

main.onlineforms > p{
    margin:0 var(--layoutpadding);
    padding:10px 0;
}

main.onlineforms > p > a[href="https://www.fareham.gov.uk"]{
    color:var(--white);
    padding: 15px 30px;
    margin: 0 0 20px 0;
    background-color:var(--blue);
    border:1px solid var(--black);
    border-radius:var(--radius);
    font-size:17px;
    display:inline-block;
}

main.onlineforms .formlayoutinner input, main.onlineforms .formlayoutinner select, main.onlineforms .formlayoutinner textarea {
    max-width: 80vw !important;
}

@media only screen and (min-width: 1000px) and (max-width: 1200px) {
}

@media only screen and (min-width: 769px) and (max-width: 999px) {
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 999px) {
}

@media only screen and (max-width: 320px){

}


    /* MyAccount */

    main.myaccount div.myAccountWholePlaceHolder {
        margin: 0 var(--layoutpadding);
    }

    main.myaccount div[id$="uxMasterUpdatePanel"] {
        margin-bottom: 20px;
    }

    main.myaccount h1 {
        padding: 20px var(--layoutpadding) 0 var(--layoutpadding);
        font-size: 36px;
        height: 170px;
        background-color: var(--paleblue);
        margin: 0 var(--layoutpaddingNeg) 0 var(--layoutpaddingNeg);
    }

    main.myaccount h2 {
        margin-top: 20px;
    }

    main.myaccount img[alt="MyAccount Logo"] {
        float: unset !important;
        position: absolute;
        right: 150px;
        top: 161px;
    }

    main.myaccount p {
        padding: 5px 0;
        max-width: 820px;
    }

    main.myaccount div[id$="pnlMyAccountQuickLinks"] {
        position: absolute;
        right: 61px;
        text-align: right;
    }

    /*main.myaccount div[id$="pnlMyAccountQuickLinks"] img{*/
    /*display:none;*/
    /*}

main.myaccount div[id$="pnlMyAccountQuickLinks"] img::before{
    content: "";
    content: attr(alt);
    height:100px;
    display:block;
    width:100px;
}*/
    main.myaccount div.myAccountServicePanel {
        border: 1px solid var(--blue);
        border-radius: var(--radius);
    }

        main.myaccount div.myAccountServicePanel span.FBCStandardNavStyleMedium {
            font-weight: bold;
            margin: 5px;
        }

        main.myaccount div.myAccountServicePanel a.serviceLink {
            margin: 5px;
        }

    main.myaccount .serviceSuggestion {
        border: 1px solid var(--blue);
        border-radius: var(--radius);
    }

        main.myaccount .serviceSuggestion a {
            color: var(--blue);
        }

        main.myaccount .serviceSuggestion:hover {
            background-color: var(--palegrey);
        }

    main.myaccount .myAccountMenuOption .myAccountQLSystemsHolder #divMyAccountsQLSystemsMain {
        width: unset;
        border-radius: var(--radius);
    }

        main.myaccount .myAccountMenuOption .myAccountQLSystemsHolder #divMyAccountsQLSystemsMain div {
            text-align: left;
            background-color: var(--white) !important;
        }

    main.myaccount a {
    }

        main.myaccount a:hover {
            text-decoration: none;
        }

    main.myaccount div[id$="uxHeaderPanel"] h1 {
        margin-left: -61px !important;
    }



    main.myaccount div[id$="uxMasterUpdatePanel"] div.myAccountBodyPlaceHolder h1 {
        margin-top: -26px;
    }

    main.myaccount div[id$="uxMasterUpdatePanel"] div.myAccountBodyPlaceHolder div.message {
        border-color: var(--blue);
    }

    main.myaccount div[id$="uxPagePanel"] table {
        margin: 0;
    }

    main.myaccount .revenuesRadioList {
        margin: 5px;
    }

    /* casetrackerplanning */

    main.casetrackerplanning .detailsContainer {
        margin: 0 !important;
    }

    main.casetrackerplanning h1 {
        padding: 35px var(--layoutpadding) 0 122px;
        font-size: 36px;
        height: 170px;
        background-color: var(--paleblue);
        margin: -15px var(--layoutpaddingNeg) 0 var(--layoutpaddingNeg);
    }

    main.casetrackerplanning div.searchKeywordsContainer {
        margin: 20px var(--layoutpadding);
    }

    main.casetrackerplanning div.searchResultsContainer {
        margin: 20px var(--layoutpadding);
    }

        main.casetrackerplanning div.searchResultsContainer .searchResultsTableSelected {
            background-color: var(--blue);
            color: var(--white);
        }

            main.casetrackerplanning div.searchResultsContainer .searchResultsTableSelected a {
                color: var(--white);
            }

    main.casetrackerplanning form > .coreDetailsContainer {
        margin: 20px var(--layoutpadding);
    }

    main.casetrackerplanning .pnlPageContent1 {
        margin: 20px var(--layoutpadding);
    }

    /* PCN */

    main.pcn h1 {
        padding: 35px var(--layoutpadding) 0 122px;
        font-size: 36px;
        height: 170px;
        background-color: var(--paleblue);
        margin: -15px var(--layoutpaddingNeg) 0 var(--layoutpaddingNeg);
    }

    main.pcn #BodyPlaceHolder_pnlLogin {
        margin: 20px var(--layoutpadding);
    }

        main.pcn #BodyPlaceHolder_pnlLogin input[type="submit"] {
            color: var(--white);
            padding: 15px 30px;
            margin: 20px 0 20px 0;
            background-color: var(--blue);
            border: 1px solid var(--black);
            border-radius: var(--radius);
            font-size: 17px;
            display: inline-block;
        }


        main.pcn #BodyPlaceHolder_pnlLogin h2 {
            margin: 10px 0;
        }

        main.pcn #BodyPlaceHolder_pnlLogin p {
            padding: 10px 0;
        }

    main.pcn > p > a {
        display: inline-block;
        padding: 20px var(--layoutpadding);
    }

    /* Cats Map */

    main.catsmap .searchpanel {
        margin: 0 var(--layoutpadding);
    }

    main.catsmap h1 {
        height: 170px;
        background-color: var(--paleblue);
        font-size: 36px;
        text-align: left;
        padding: 20px 0 0 var(--layoutpadding);
        margin: 0 0 20px var(--layoutpaddingNeg);
    }

    main.catsmap p {
        margin: 10px 0;
    }

    main.catsmap input[type="submit"] {
        color: var(--white);
        padding: 15px 30px;
        margin: 0 0 20px 0;
        background-color: var(--blue);
        border: 1px solid var(--black);
        border-radius: var(--radius);
        font-size: 17px;
        display: inline-block;
    }

    /* internetlookups */

    main.internetlookups h1 {
        height: 170px;
        background-color: var(--paleblue);
        font-size: 36px;
        text-align: left;
        padding: 20px 0 0 var(--layoutpadding);
    }

    main.internetlookups div[id$="uxViewAllLookupsPanel"] {
        position: absolute;
        top: 260px;
        left: var(--layoutpadding);
    }

        main.internetlookups div[id$="uxViewAllLookupsPanel"] a {
            color: var(--white) !important;
            padding: 15px 30px;
            margin: 0 0 20px 0;
            background-color: var(--blue);
            border: 1px solid var(--black);
            border-radius: var(--radius);
            font-size: 17px;
            display: inline-block;
        }

    main.internetlookups input[type="submit"] {
        color: var(--white);
        padding: 15px 30px;
        margin: 0 0 20px 0;
        background-color: var(--blue);
        border: 1px solid var(--black);
        border-radius: var(--radius);
        font-size: 17px;
        display: inline-block;
    }

    main.internetlookups div[id$="uxExportPanel"] {
        margin: 0 var(--layoutpadding);
    }

    main.internetlookups div[id$="uxResultsPanel"] {
        margin: 0 var(--layoutpadding);
    }

    /* cilcalc */

    main.cilcalc h1 {
        height: 170px;
        background-color: var(--paleblue);
        font-size: 36px;
        text-align: left;
        padding: 20px 0 0 var(--layoutpadding);
    }

    main.cilcalc .calc-container {
        padding: 0 !important;
        margin: 20px var(--layoutpadding);
    }

        main.cilcalc .calc-container p {
            padding: 10px 0;
        }

        main.cilcalc .calc-container input[type="submit"] {
            color: var(--white);
            padding: 15px 30px;
            margin: 0 0 20px 0;
            background-color: var(--blue);
            border: 1px solid var(--black);
            border-radius: var(--radius);
            font-size: 17px;
            display: inline-block;
        }

            main.cilcalc .calc-container input[type="submit"]:hover {
                background-color: var(--black);
            }

        main.cilcalc .calc-container input[type="reset"] {
            color: var(--white);
            padding: 15px 30px;
            margin: 0 0 20px 0;
            background-color: var(--blue);
            border: 1px solid var(--black);
            border-radius: var(--radius);
            font-size: 17px;
            display: inline-block;
        }

            main.cilcalc .calc-container input[type="reset"]:hover {
                background-color: var(--black);
            }

    /* findmynearest */
    main.findmynearest {
        margin: 0 var(--layoutpadding) 0 var(--layoutpadding);
    }

        main.findmynearest h1 {
            height: 170px;
            background-color: var(--paleblue);
            font-size: 36px;
            text-align: left;
            padding: 20px 0 0 var(--layoutpadding);
            margin: 0 var(--layoutpaddingNeg) 20px var(--layoutpaddingNeg);
        }

        main.findmynearest > div > p:nth-of-type(1) {
            position: relative;
            top: -150px;
        }

        main.findmynearest div:nth-of-type(3) {
            margin: 20px 0;
            padding: 15px !important;
        }

        main.findmynearest input[type="submit"] {
            color: var(--white);
            padding: 15px 30px;
            margin: 0 0 20px 0;
            background-color: var(--blue);
            border: 1px solid var(--black);
            border-radius: var(--radius);
            font-size: 17px;
            display: inline-block;
        }

            main.findmynearest input[type="submit"]:hover {
                background-color: var(--black);
            }

        main.findmynearest div[id$="uxPropertyAttributesPanel"] {
            margin: 20px 0;
        }

            main.findmynearest div[id$="uxPropertyAttributesPanel"] h2 {
                margin: 0 0 10px 0;
            }

            main.findmynearest div[id$="uxPropertyAttributesPanel"] p {
                margin: 0 0 10px 0;
            }

            main.findmynearest div[id$="uxPropertyAttributesPanel"] > div {
                padding: 15px !important;
            }

        main.findmynearest div[id$="uxViewServicesPanel"] {
            margin: 20px 0;
        }

            main.findmynearest div[id$="uxViewServicesPanel"] > div {
                padding: 15px !important;
            }

    /* landlordschedule */
    main.landlordschedule {
        margin: 0 var(--layoutpadding) 0 var(--layoutpadding);
    }

        main.landlordschedule div {
            float: unset !important;
        }

        main.landlordschedule h1 {
            height: 170px;
            background-color: var(--paleblue);
            font-size: 36px;
            text-align: left;
            padding: 20px 0 0 var(--layoutpadding);
            margin: 0 var(--layoutpaddingNeg) 20px var(--layoutpaddingNeg);
        }

        main.landlordschedule input[type="submit"] {
            color: var(--white);
            padding: 15px 30px;
            margin: 0 0 20px 0;
            background-color: var(--blue);
            border: 1px solid var(--black);
            border-radius: var(--radius);
            font-size: 17px;
            display: inline-block;
        }

            main.landlordschedule input[type="submit"]:hover {
                background-color: var(--black);
            }

    /* letselect */
    main.letselect {
        margin: -20px var(--layoutpadding) 0 var(--layoutpadding);
    }

        main.letselect img[alt="LetSelect logo"] {
            position: absolute;
            right: 40px;
        }

        main.letselect h1 {
            height: 170px;
            background-color: var(--paleblue);
            font-size: 36px;
            text-align: left;
            padding: 20px 0 0 var(--layoutpadding);
            margin: 0 var(--layoutpaddingNeg) 20px var(--layoutpaddingNeg);
        }

        main.letselect p {
            margin: 10px 0;
        }

        main.letselect a[href="letselect_menu.aspx"] {
            color: var(--white);
            padding: 15px 30px;
            margin: 0 0 20px 0;
            background-color: var(--blue);
            border: 1px solid var(--black);
            border-radius: var(--radius);
            font-size: 17px;
            display: inline-block;
            text-decoration: none;
        }

            main.letselect a[href="letselect_menu.aspx"]:hover {
                background-color: var(--black);
            }

        main.letselect > form {
            position: relative;
        }

            main.letselect > form > p:nth-of-type(1) {
                position: absolute;
                top: 90px;
            }

            main.letselect > form > p:nth-of-type(2) {
                position: absolute;
                top: 120px;
            }

    /* performanceindicators */
    main.performanceindicators {
        margin: -20px var(--layoutpadding) 0 var(--layoutpadding);
    }

        main.performanceindicators .indicators-page {
            max-width: unset !important;
            padding: 0;
        }

            main.performanceindicators .indicators-page h1 {
                height: 170px;
                background-color: var(--paleblue);
                font-size: 36px;
                text-align: left;
                padding: 20px 0 0 var(--layoutpadding);
                margin: 0 var(--layoutpaddingNeg) 20px var(--layoutpaddingNeg);
            }

        main.performanceindicators .details-page {
            max-width: unset;
            padding: 0;
            position: relative;
        }

            main.performanceindicators .details-page .return-link-container {
                position: absolute;
                top: 90px;
            }

            main.performanceindicators .details-page h1 {
                height: 170px;
                background-color: var(--paleblue);
                font-size: 36px;
                text-align: left;
                padding: 20px 0 0 var(--layoutpadding);
                margin: 0 var(--layoutpaddingNeg) 20px var(--layoutpaddingNeg);
            }