/*
    Project:    Darlington.gov.uk 2022 Umbraco 10
    Version:    1.0
    Date:       13/07/2022
    Author:     Chris Smith (DBC)
    
    Purpose:    This CSS file houses all the core styling for the masterview and commonly reused styles from across the site.
*/

:root {
    --primary-blue: #007297;
    --primary-grey: #2f2e2e;
    --outline-orange: #d16900;
    --bright-purple: #a1007d;
    --primary-green: #789904;
    --primary-orange: #e87722;
    --dull-purple: #84344e;
    --primary-blue-10: #e4eff3;
    --primary-blue-20: #cae1e9;
    --primary-blue-30: #afd3de;
    --primary-blue-40: #94c5d4;
    --primary-blue-50: #78b6ca;
    --primary-blue-60: #59a8c0;
    --primary-blue-70: #329bb5;
    --primary-blue-80: #008dab;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------Mobile View----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------*/



/*---------------------------------------------------------Header--------------------------------------------------------------------*/



/*----------------------------------Logo Social and Search Section---------------------------------*/

.black {
    background-color: #000;
    height: 280px;
}

#home {
    padding: 5px 10px;
}

    #home a {
        color: #fff;
        display: block;
        padding: 5px;
    }

        #home a:hover img,
        #home a:focus img {
            opacity: .85;
        }

        #home a:focus-visible {
            background-color: transparent;
            outline: 3px solid #ff0;
        }


/*----------Social Icons---------------*/


.social a {
    color: #fff;
    font-size: 2.125rem;
}

    .social a:hover,
    .social a:focus-visible {
        color: #ff0;
    }

    .social a:focus {
        background-color: transparent;
        outline: 3px #ff0 solid;
    }

ul.socialIcons {
    text-align: center;
}

.socialIcons.list-inline > li {
    padding: 0 5px;
}


/*-------------------Search Box------------------*/

.searchBox {
    border: 4px solid var(--primary-blue);
}

button#searchButton {
    padding-top: .75rem;
}

/*------------------Login Links------------------*/

.loggedIn .loginLinksContainer {
    padding-top: 3px;
}

.unAuthLoginLinks {
    display: flex;
    justify-content: space-between;
    margin-top: 13px;
    padding: 0 5%;
}

.loginLinksContainer button {
    font-size: 1.125rem;
    margin-right: 10px;
}
    .loginLinksContainer button,
    .loginLinksContainer a {
        color: #fff;
        font-weight: 600;
        padding: 10px 8px;
        text-decoration: none;
    }

        .loginLinksContainer button:hover,
        .loginLinksContainer button:focus-visible,
        .loginLinksContainer .mdp-log-out-btn:active,
        .loginLinksContainer a:hover,
        .loginLinksContainer a:focus-visible {
            color: var(--alternative-link-hover-color);
        }

        .loginLinksContainer button:hover,
        .loginLinksContainer a:hover {
            text-decoration: underline;
        }

        .loginLinksContainer button:focus-visible,
        .loginLinksContainer a:focus-visible {
            background-color: transparent;
            outline: var(--alternative-link-hover-color) 3px solid;
        }

.mdp-log-out-btn{
    margin-bottom: 3px;
}

/*------------------------------------------------------Footer-----------------------------------------------------*/


footer {
    background: var(--primary-grey);
    background-image: url(/images/logos/dbc-watermark.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    bottom: 0;
    color: #fff;
    height: 530px;
    padding: 20px 0 10px;
    position: absolute;
    width: 100%;
}

.footerLinks ul {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.footerLinks li {
    margin: .875rem 0;
}

.footerLinks a,
.footerLinks button.btn-link,
.housingAccommodation .officerEmail a {
    color: #fff;
    font-size: 1.375rem;
    font-weight: 600;
    
    padding: .465rem .25rem;
    text-decoration: none;
}

    .footerLinks button.btn-link:hover,
    .footerLinks button.btn-link:focus,
    .footerLinks a:hover,
    .footerLinks a:focus,
    .housingAccommodation .officerEmail a:hover,
    .housingAccommodation .officerEmail a:focus {
        color: var(--alternative-link-hover-color);
        box-shadow: none;
    }

    .footerLinks button.btn-link:hover {
        text-decoration: underline;
    }

    .gTranslate{
        margin: .375rem 0 1rem;
    }

    .footerLinks button.btn-link:focus,
    .footerLinks a:focus,
    .housingAccommodation .officerEmail a:focus,
    .enjoyLogo a:focus {
        outline: #ff0 3px solid;
        text-decoration: none;
    }
    .enjoyLogo a{
        display: block;
        padding: 2px;
    }

.enjoyLogo a:hover img {
    opacity: .8;
}

/*----------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------Sidebar-----------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/

/*------------------------Sidebar Nav-----------------------------*/

.sidebarH2 {
    background-color: var(--primary-blue);
    color: #fff;
    font-size: 1.375rem;
    font-weight: 600;
    margin: 0;
    padding: 10px 0 10px 5px;
    width: 100%;
}

    .sidebarH2 a {
        color: #fff;
        font-weight: 600;
        text-decoration: none;
        padding: 7px 3px;
    }

        .sidebarH2 a:hover,
        .sidebarH2 a:focus {
            background: transparent;
            color: #ff0;
        }

        .sidebarH2 a:focus {
            background-color: transparent;
            outline: 2px solid #ff0;
        }

.sidebarNavigation,
.sidebarRateThisPage,
.sidebarContactUs,
.sidebarOpeningTimes {
    border: var(--primary-blue) solid 1px;
    border-radius: 4px;
    margin: 22px 0 0;
    padding: 0;
}

.sidebarNav {
    list-style: none;
    margin-bottom: 2px;
    padding-left: 0; /*over ride of browser ul styling for IE*/
}

    .sidebarNav li a {
        background-color: #fdfcfc;
        border-top: solid #bbcae0 1px;
        color: #000;
        display: block;
        font-weight: 400;
        padding: 6px 3px 6px 7px;
        text-decoration: none;
    }

    .sidebarNav li:last-child {
        border-bottom: none;
    }

    .sidebarNav li a:hover {
        background-color: #007fa1;
        color: #fff;
    }


#channelNav a:focus {
    background-color: #007fa1;
    color: #fff;
    outline-color: #f68811;
}


/*--------------Rate This Page-----------------*/

.sidebarRateThisPage {
    margin-bottom: 35px;
    padding-bottom: 15px;
}

    .sidebarRateThisPage a {
        font-size: 1.25rem;
        font-weight: 600;
        padding: 9px 8px;
    }

        .sidebarRateThisPage a:focus {
            background-color: transparent;
            outline: 2px solid #f68811;
            text-decoration: none;
        }


.rateThisStars {
    color: #d4cf15;
    padding-top: 10px;
}

    .rateThisStars .fa-solid {
        font-size: 3rem;
        margin: 10px 5px;
    }

/*--------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------Main------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------*/

main#mainContent {
    padding: 0 0 25px;
}

.notVisible {
    display: none;
}

/*--------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------Pagination--------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------*/
#js-no-of-results {
    font-weight: 600;
    margin-bottom: .5rem;
}

/*--------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------PWA Installer-----------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------*/

.installOurApp {
    color: #fff;
    font-size: 1.25rem;
}

.PWA-Installer {
    background-color: rgba(12, 12, 12, 0.95);
    bottom: 0;
    z-index: 100;
    width: 100%;
    height: 125px;
    padding: 20px;
    position: fixed;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 1s;
    animation-name: animatebottom;
    animation-duration: 1s;
    text-align: center;
}


@-webkit-keyframes animatebottom {
    from {
        bottom: -125px;
        opacity: 0
    }

    to {
        bottom: 0px;
        opacity: 1
    }
}

@keyframes animatebottom {
    from {
        bottom: -125px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}


/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------iPhone 12 Pro---------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 390px) {
    .black {
        height: 275px;
    }

}


/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------iPhone 14 Pro Max-----------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 430px) {
    footer{
        height: 535px;
    }
}


/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------S20 Ultra---------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 412px) {
    .black {
        height: 290px;
    }
}

/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------Surface Duo---------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 540px) {
    .black {
        height: 325px;
    }
}


/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------Large Mobile View (COL-SM)---------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 576px) {
/*    .black {
        height: 320px;
    }*/
}

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------Small Tablet View (COL-MD)----------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 768px) {
    /*----------------------------------------------------------------------------------------------------------------------------------------------*/
    /*-----------------------------------------------------------Header (COL-MD)--------------------------------------------------------------------*/
    /*----------------------------------------------------------------------------------------------------------------------------------------------*/

    /*----------------------------------Logo Social and Search Section (COL-MD)---------------------------------*/

    .black {
        height: 120px;
    }

    .titleContainer {
        padding-top: 10px;
    }

    .search {
        padding-top: 13px;
    }

    /*----------Social Icons (COL-MD)---------------*/

    .social {
        padding-top: 25px;
    }

        .social a .fa-brands {
            font-size: 2.25rem;
        }

    .socialIcons.list-inline > li {
        padding: 0;
    }


    /*------------------Login Links (COL-MD)------------------*/
    .unAuthLoginLinks {
        display: flex;
        justify-content: start;
        margin-bottom: 0;
        padding: 0;
    }


    /*----------------------------------------------------------------------------------------------------------------------------------------------*/
    /*---------------------------------------------------------------Footer (COL-MD)----------------------------------------------------------------*/
    /*----------------------------------------------------------------------------------------------------------------------------------------------*/

    footer {
        height: 320px;
        padding: 0 0 10px;
    }

    /*----------------------------------------------A-Z-(COL-MD)-----------------------------------------------*/
    nav.a-z {
        background-color: #007297;
        height: 34px;
        padding-top: 7px;
    }

    .a-z ul {
        color: #fff;
        font-size: .9375rem;
        font-weight: 600;
        padding-left: 0;
    }

    .a-z li {
        display: inline-block;
        margin-right: 1px;
    }

        .a-z li a {
            color: #fff;
            padding: 3px;
            text-decoration: none;
        }

            .a-z li a:hover {
                color: #ff0;
                text-decoration: underline;
            }

            .a-z li a:focus {
                background-color: transparent;
                box-shadow: none;
                outline: 3px solid #ff0;
            }

    .footerLinks {
        margin-top: 30px;
    }

    .translateEnjoy {
        margin-top: 45px;
    }


    /*----------------------------------------------Breadcrumb (COL-MD)-----------------------------------------------*/

    .breadcrumbBG {
        background-color: #eae9e9;
        margin-bottom: 1px;
        margin-top: 1px;
        padding: 2px 0;
    }

    /*--------------------------------------------------------------------------------------------------------*/
    /*--------------------------------------------PWA Installer (COL-MD)--------------------------------------*/
    /*--------------------------------------------------------------------------------------------------------*/

    .PWA-Installer {
        height: 130px;
        padding: 20px 30px;
        right: 0;
        width: 40%;
    }

}

    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------- Tablet View (COL-LG)---------------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media only screen and (min-width: 992px) {

        /*----------------------------------------------------------------------------------------------------------------------------------------------*/
        /*-----------------------------------------------------------Header (COL-LG)--------------------------------------------------------------------*/
        /*----------------------------------------------------------------------------------------------------------------------------------------------*/

        /*----------------------------------Logo Social and Search Section (COL-LG)---------------------------------*/

        .black {
            height: 130px;
        }

        .search {
            padding-top: 23px;
        }


        /*----------Social Icons (COL-LG)---------------*/

        .social {
            padding-top: 35px;
        }

            .social a {
                font-size: 2.25rem;
            }

        .socialIcons.list-inline > li {
            padding: 0 5px;
        }

        /*----------------------------------------------------------------------------------------------------------------------------------------------*/
        /*---------------------------------------------------------------------Footer (COL-LG)----------------------------------------------------------*/
        /*----------------------------------------------------------------------------------------------------------------------------------------------*/

        /*---------A-Z (COL-LG)-------------*/

        .a-z ul {
            font-size: 1.125rem;
        }

        .a-z li{
            margin-right: 5px;
        }

        nav.a-z {
            padding-top: 3px;
        }

        .enjoyLogo {
            padding-top: 25px;
        }

        /*----------------------------------------------------------------------------------------------------------------------------------------------*/
        /*---------------------------------------------------------------Sidebar (COL-LG)---------------------------------------------------------------*/
        /*----------------------------------------------------------------------------------------------------------------------------------------------*/

        /*--------------------------------------------------------------------------------------------------------*/
        /*--------------------------------------------PWA Installer (COL-LG)--------------------------------------*/
        /*--------------------------------------------------------------------------------------------------------*/

        .PWA-Installer {
            width: 30%;
        }


        /*----------------------------------------------Breadcrumb (COL-LG)-----------------------------------------------*/

        /*stop bootstrap styling conflicting*/
        .breadcrumb-item + .breadcrumb-item {
            padding-left: 0;
        }

     

        .breadcrumb {
            --s: 15px;
        }

            .breadcrumb {
                display: flex;
                gap: 5px;
                list-style: none;
                margin: 0 20px 0 0;
                padding: 0;
            }

                .breadcrumb li {
                    clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%,var(--s) 50%);
                    margin: 0 calc(var(--s)/-2);
                }

                    .breadcrumb li:first-child {
                        clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%);
                        margin-left: 0;
                    }

                    .breadcrumb li:last-child {
                        margin-right: 0;
                    }

                    .breadcrumb li a {
                        background-color: #686868;
                        box-sizing: border-box;
                        color: #fff;
                        display: block;
                        font-size: 1.25rem;
                        font-weight: 600;
                        height: 100%;
                        padding: 7px calc(10px + var(--s));
                        position: relative;
                        text-decoration: none;
                    }

                    .breadcrumb li:last-child a {
                        background-color: #077297;
                    }

                    .breadcrumb li a:hover,
                    .breadcrumb li a:focus-visible {
                        background: #203466;
                        box-shadow: none;
                    }

                    .breadcrumb li a:focus-visible {
                        color: #ff0;
                        outline: none;
                    }



    }

    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------- Small Desktop View (COL-XL)-----------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

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

        /*----------------------------------------------------------------------------------------------------------------------------------------------*/
        /*-----------------------------------------------------------Header (COL-XL)--------------------------------------------------------------------*/
        /*----------------------------------------------------------------------------------------------------------------------------------------------*/
        .titleContainer {
            padding-top: 0;
        }


        /*----------Social Icons (COL-XL)---------------*/

        .social a {
            font-size: 2.25rem;
        }

        /*----------------------------------------------------------------------------------------------------------------------------------------------*/
        /*---------------------------------------------------------------Footer (COL-XL)----------------------------------------------------------------*/
        /*----------------------------------------------------------------------------------------------------------------------------------------------*/

        footer {
            height: 310px;
        }


        /*---------A-Z (COL-XL)-------------*/

        .footerLinks {
            padding-top: 20px;
        }

            .footerLinks ul {
                padding-left: 4px;
            }

        .a-z li a {
            padding: 3px 6px;
        }

        /*--------------------------------------------------------------------------------------------------------*/
        /*--------------------------------------------PWA Installer (COL-XL)--------------------------------------*/
        /*--------------------------------------------------------------------------------------------------------*/

        .PWA-Installer {
            width: 25%;
        }
    }

    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------- Large Desktop View (COL-XXL)----------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media only screen and (min-width: 1400px) {

        /*----------------------------------------------------------------------------------------------------------------------------------------------*/
        /*----------------------------------------------------------Header (COL-XXL)--------------------------------------------------------------------*/
        /*----------------------------------------------------------------------------------------------------------------------------------------------*/

        /*----------------------------------Logo Social and Search Section (COL-XXL)---------------------------------*/

        .black {
            height: 145px;
        }

        .search {
            padding-top: 32px;
        }

        ul.socialIcons{
            margin-top: 1rem;
        }

        .social a .fa-brands {
            font-size: 2.75rem;
        }

        /*----------------------------------------------------------------------------------------------------------------------------------------------*/
        /*-----------------------------------------------------------Footer (COL-XXL)-------------------------------------------------------------------*/
        /*----------------------------------------------------------------------------------------------------------------------------------------------*/

        /*----------------------------------------------A-Z-(COL-XXL)-----------------------------------------------*/


        .a-z li {
            margin-right: 10px;
        }

            .a-z li a {
                padding: 3px 5px;
            }


        .translateEnjoy {
            margin-top: 60px;
        }

        /*----------------------------------------------------------------------------------------------------------------------*/
        /*----------------------------------------------------Sidebar (COL-XXL)-------------------------------------------------*/
        /*----------------------------------------------------------------------------------------------------------------------*/

        /*--------------Rate This Page (COL-XXL)-----------------*/
        .rateThisStars .fa-solid {
            font-size: 2.875rem;
            margin: 10px 4px;
        }
    }

    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------- Large Desktop View (COL-XXXL)---------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media only screen and (min-width: 1600px) {

        /*---------------------------------------------------------Header (COL-XXXL)--------------------------------------------------------------------*/


        /*----------------------------------Logo Social and Search Section (COL-XXXL)---------------------------------*/

        .social a .fa-brands {
            font-size: 3rem;
        }

        /*----------------------------------------------A-Z-(COL-XXXL)-----------------------------------------------*/


        .a-z li {
            margin-right: 18px;
        }

            .a-z li a {
                padding: 3px 7px;
            }


        /*--------------------------------------------------------------------------------------------------------*/
        /*--------------------------------------------PWA Installer (COL-XXXL)------------------------------------*/
        /*--------------------------------------------------------------------------------------------------------*/

        .PWA-Installer {
            width: 20%;
        }
    }



    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------------------------------------- Large Desktop View (COL-XXXXL)--------------------------------------------------------------------------*/
    /*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

    @media only screen and (min-width: 1920px) {

        /*----------------------------------------------A-Z-(COL-XXXL)-----------------------------------------------*/


        .a-z li {
            margin-right: 20px;
        }

            .a-z li a {
                padding: 3px 10px;
            }


        /*--------------------------------------------------------------------------------------------------------*/
        /*-------------------------------------------PWA Installer (COL-XXXXL)------------------------------------*/
        /*--------------------------------------------------------------------------------------------------------*/

        .PWA-Installer {
            width: 15%;
        }

    }

.field-validation-valid {
    display: none;
}