/*

TRS 2.main.css

This describes the display on standard, desktop monitors

Fine-tuning for other formats:
3.small.css - for phones
4.medium.css - for tablet/netbook

 HISTORY                                                            
                                                                         
 Version  Name            Date         Description                  
 =======  ====            ====         ===========                  
   1.0    David Gough     6-03-2016    CR34093 updates for dynamising and pensionable
                                       earnings tabs. Renamed to 1.main_v2 so that changes are
                                       automatically picked up after upgrade
   1.1    David Gough     10-05-2016   CR34291 Place ? icon on its own line to prevent formatting issues
   1.2    David Gough     19-05-2016   File name changed back as IIS bounce to clear cache used in deployment
   1.3    David Gough     25-05-2016   CR34353 removing ToolWithNewLine as it prevents data tip from being included
                                       in pdf output 
   1.4    Punit Mehta     07-01-2021   CHG2005725 Added more variations of div IDs for accessibility compliancev
   1.5    David Gough     17-05-2024   CHG2008444 Updates for McCloud pension changes
*/

/*CHG2008444*/
.mcCloudCheckbox {
    width: 20px;
    height: 20px;
}

div.InnerTabContent#mcCloud_Content {
    border: 0;
}

button.pensionOptionbutton,
button.pensionOptionbuttonActive {
    display: inline-block;
    background-image: unset;
    padding: 0.5em 1em !important;
    border-radius: unset;
    font-weight: 500;
    text-align: left;
    border-style: solid !important;
    border-width: 1px !important;
    border-color: #c5c4c4 !important;
    margin-top: 1px;
    margin-bottom: -1px;
    margin-left: -1px;
    margin-right: -3px;
}

button.pensionOptionbutton {
    color: #000;
    background-color: #fff !important;
}

button.pensionOptionbuttonActive {
    color: #166ccd;
    background-color: #f2f2f2 !important;
}

/* End of CHG2008444 */  

/* CSS hacks (get them out the way early) ----------------------------------- */

        img.BrandingLogo {
            position: static;
            max-width: 100%;
            max-height: 12mm;
            margin: 0 auto !important;
        }

        .fc:after, .formRow:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .fc, .formRow {
            display: inline-block;
        }
        /* Hides from IE-mac \*/
        * html .fc, * html .formRow {
            height: 1%;
        }

        .fc, .formRow {
            display: block;
        }

        /* General selectors -------------------------------------------------------- */

        * {
            outline: none;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: #fff;
            color: #555;
            font-family: Arial, "Helvetica Neue", "Liberation Sans", sans, sans-serif;
            font-size: 87.5%;
        }

        h1, h2, h3, h4, h5, h6 {
            margin: 0;
            padding: 0;
            font-weight: normal;
            color: #06c;
        }

        h3 {
            font-weight: bold;
        }

            h3.AddressHead {
                color: inherit;
                font-size: 1em !important;
                font-weight: bold;
            }

        h4 {
            font-weight: bold;
            margin: 1em 0 0 0;
        }

a {
    color: #06c; /*#112C7E; #06c;*/
    text-decoration: none;
    font-weight: 500;
}

            a:hover {
                text-decoration: underline;
            }

            a.ButtonStyle {
                text-align: center;
                border: 1px solid #da8300;
                border-radius: 0.3em;
                font-weight: bold;
                color: #da8300;
                background-color: #fff;
                background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c7c7c7), to(#ffffff)); /* Old WebKit */
                background-image: -webkit-linear-gradient(top, #c7c7c7, #fff); /* WebKit */
                background-image: -moz-linear-gradient(top, #c7c7c7, #fff); /* Gecko */
                background-image: -ms-linear-gradient(top, #c7c7c7, #fff); /* Presto */
                background: #fff url(Images/fallback-gradient-grey.png) 50% 50% repeat-x; /* Fallback */
                display: block;
                margin: 1em auto;
                width: 25%;
                padding: 0.5em 2em;
            }

            a.wideButton {
                width: 50%;
            }

        p, address {
            line-height: 160%;
            font-style: normal;
        }

            p.Highlight {
                color: #c00;
            }

            p.ResultCount {
                margin: 0 !important;
                color: #06c;
            }

        address {
            margin-bottom: 1em;
        }

        td.address {
            margin-bottom: 0;
        }

        small {
            font-size: 87.5%;
        }

        table {
            border-collapse: collapse;
            border: 0;
        }

        tr.Even {
            background-color: #f6f9fc;
        }

        th, td {
            padding: 0.5em 1em;
            vertical-align: top !important;
        }

thead th {
    background-color: #f2f2f2; /* CHG2008444 #dbe6f5;*/
    color: #166ccd; /* CHG2008444 #06c;*/
}

        td.Lefty {
            text-align: left !important;
        }

        td.righty {
            text-align: right !important;
        }
        /* CR34093 required for dynamising and pensionable earnings tables*/
        td.centre {
            text-align: center !important;
        }

        table dl {
            margin: 0;
            padding: 0;
        }

            table dl dt,
            table dl dd {
                display: inline-block;
            }

            table dl dd {
                margin: 0;
                padding: 0 0 0 8px;
            }

        ul {
            list-style-position: inside;
        }

        .pdfIcon {
            background: white url("Images/icon-pdf-small.png") 5px 50% no-repeat;
            padding-left: 25px;
        }

        /* Page areas --------------------------------------------------------------- */

        .preview-container {
            background: transparent url('Images/preview-watermark.png') no-repeat scroll top center;
            max-width: 974px;
        }

        div#pageHeader,
        div#pageFooter,
        div#containment,
        div#breadcrumb,
        div#pageInnerBody,
        div#pageOuterBody,
        div#pageBody {
            margin: 0 auto;
            padding: 0;
            max-width: 974px;
            clear: both;
            font-size: 1em;
        }

        div.pensionGlossaryContainer {
            display: none;
        }

        /* Floats ------------------------------------------------------------------- */

        .FRight {
            float: right;
        }

        .FLeft {
            float: left;
        }

        /* Masthead ----------------------------------------------------------------- */

        div#pageHeader div#branding {
            height: 121px;
            background: #fff url("Images/bg-masthead_CR35500.png") 0 0 no-repeat;
        }

            div#pageHeader div#branding h1 {
                height: 121px;
                background: transparent url("Images/bg-heading_CR35500.png") top right no-repeat;
                text-indent: -9999em;
                cursor: pointer;
            }

            div#pageHeader div#branding h2 {
                text-indent: -9999em;
            }

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

        div.MenuShimStart,
        div.MenuShimEnd {
            display: inline-block;
            padding: 3px 0 0 0;
            float: left;
            margin: 0 0 0 31px;
        }

        div.MenuShimEnd {
            margin: 0;
        }

div#mainMenu {
    background-color: #f2f2f2; /* CHG2008444 #efeff2; */
    display: block !important;
    border: 1px solid #06c;
    border-right: 0;
    border-left: 0;
    height: 27px;
    padding-top: 4px;
}

            div#mainMenu button#menuReveal {
                display: none;
            }

            div#mainMenu ul {
                height: 1.7em;
                margin: 0;
                padding: 4px 0 0 0;
                float: left;
            }

                div#mainMenu ul li {
                    background-color: #EFEFF2;
                    list-style-type: none;
                    display: inline;
                    padding: 0 0.5em 6px 0.5em;
                }

                    div#mainMenu ul li.Sep {
                        padding: 0;
                    }

                    div#mainMenu ul li a {
                        color: #000;
                    }

                    div#mainMenu ul li.Selected {
                        background: #efeff2 url("Images/menu-indicator.png") 50% 100% no-repeat;
                    }

                        div#mainMenu ul li.Selected a {
                            color: #06c;
                        }

            div#mainMenu div.FRight {
                padding: 0;
            }

            div#mainMenu div#accountManagement.FRight {
                background: transparent url("Images/icon-user.png") 0 50% no-repeat;
                padding: 3px 28px 0 21px;
            }

        form#logoutForm {
            margin: 0;
            padding: 0;
            display: inline;
        }

            form#logoutForm button.LinkLike {
                margin: 0;
                padding: 0;
                border: 0;
                background: none;
                color: #06c;
                cursor: pointer;
            }

        button.LinkLike:before {
            font-weight: normal !important;
            content: " | ";
            color: #000;
        }

        /* Breadcrumb --------------------------------------------------------------- */

        div#breadcrumb ul {
            margin: 0;
            font-size: 0.75em;
            padding: 0.75em 2.65em;
        }

            div#breadcrumb ul li {
                display: inline;
                padding: 0 0.35em;
            }

                div#breadcrumb ul li.First {
                    padding-left: 0;
                }

                div#breadcrumb ul li a {
                    color: #666;
                }

        /* Login page-specific ------------------------------------------------------ */

        div.LoginBox {
            border: 1px solid #c5c4c4;
            border-radius: 0.3em;
            padding: 1em;
            margin: 0.5em auto;
        }

        .LoginAside {
            float: right;
            padding: 1em;
            margin: 0;
            width: 33%;
        }

        .LoginEsrLogo {
            float: right;
            padding: 1em;
            margin: 0;
            margin-left: 5%;
        }

        .LoginAside a.ButtonStyle {
            padding: 0.5em 0;
            width: 100%;
            margin: 0;
        }

        div.LoginBox h2 {
            padding: 0.75em 1em;
            margin: 0 0 0.5em 0;
            font-weight: bold;
            border-radius: 3px;
            background-color: #06c;
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a96c2), to(#2b6c9b)); /* Old WebKit */
            background-image: -webkit-linear-gradient(top, #1a96c2, #2b6c9b); /* WebKit */
            background-image: -moz-linear-gradient(top, #1a96c2, #2b6c9b); /* Gecko */
            background-image: -ms-linear-gradient(top, #1a96c2, #2b6c9b); /* Trident */
            background-image: -o-linear-gradient(top, #1a96c2, #2b6c9b); /* Presto */
            background: #06c url(Images/fallback-gradient-blue.png) 50% 50% repeat-x; /* Fallback */
            color: #fff;
        }

        .LoginBox a.ButtonStyle {
            padding: 0.5em 0;
            width: 100%;
            margin: 0;
        }

        div#quad {
            margin: 0 1em;
        }

        div.QuadBox {
            border: 1px solid #06c;
            border-radius: 0.3em;
            padding: 1em;
            margin: 0 1em 1em 0;
            float: left;
            width: 44%;
        }

            div.QuadBox p {
                margin: auto 1em;
            }

        /* Homepage-specific -------------------------------------------------------- */

        div#splash {
            border: 2px solid #06c;
            height: 149px;
            background: #e9f5fd url("Images/homepage-splash.png") 100% 100% no-repeat;
            background-size: auto 100%;
            margin: 18px 13px 29px 12px;
            padding: 0;
        }

            div#splash h1 {
                font-size: 2em;
                padding: 0.5em 0em 0em 1em;
            }

        div#infoPanels {
            padding: 0 1%;
        }

            div#infoPanels div {
                width: 31.125%;
                float: left;
                padding: 0 1.5%;
            }

                div#infoPanels div div.ImagePlaceholder {
                    clear: both;
                    float: none;
                    width: auto;
                    padding: 0.5em 0;
                    height: 40px;
                }

                div#infoPanels div h1 {
                    font-size: 1.15em;
                }

        div#infoPanelLeft {
            padding-left: 0 !important;
        }

        div#infoPanelRight {
            float: right !important;
            padding-right: 0 !important;
        }

        /* Help page-specific ------------------------------------------------------- */

        div.FAQBox {
            width: 47.5%;
            margin: 0 0 20px 2.5%;
            float: right;
            max-height: 270px;
            min-height: 270px;
        }

            div.FAQBox.Left {
                float: left;
                margin-left: 0;
            }

        ul.HelpQuestionsList {
            margin: 7px 0 17px 0;
            padding: 0;
            border: 1px solid #c5c4c4;
            border-right: 0;
            border-left: 0;
        }

            ul.HelpQuestionsList li {
                padding: 9px 8px !important;
                list-style-position: inside;
                list-style-image: url('Images/bullet-arrow.png');
                background-color: #f7f7f7;
                border-bottom: 1px solid #c5c4c4;
            }

                ul.HelpQuestionsList li.Last {
                    border: 0;
                }

            ul.HelpQuestionsList ul {
                list-style-position: outside !important;
            }

            ul.HelpQuestionsList li > ul > li {
                padding: 0 0 0 1em !important;
                list-style-image: none;
                list-style-type: disc;
                border: 0;
                font-size: 0.875em;
                list-style-position: outside !important;
            }

            ul.HelpQuestionsList li ul li a {
                color: #039 !important;
            }

        p.Question {
            color: #06c;
        }

        /* Sidebar ------------------------------------------------------------------ */
        div#outerSideBar,
        div#sideBar {
            float: left;
            width: 22.5%;
            padding-left: 2.5%;
        }

            div#outerSideBar h1.AlternativeHeading,
            div#sideBar h1.AlternativeHeading {
                display: none;
            }

            div#outerSideBar div,
            div#sideBar div {
                border: 1px solid #c5c4c4;
                border-radius: 3px;
                margin-bottom: 1em;
                padding: 1em 12px;
            }

                div#outerSideBar div#actions,
                div#sideBar div#actions {
                    padding-bottom: 0;
                }

                div#outerSideBar div h1,
                div#sideBar div h1 {
                    font-size: 1.5em;
                }

                div#outerSideBar div#actions h1,
                div#outerSideBar div#sideSearch h1,
                div#outerSideBar div.StatementAuxInfo h2,
                div#sideBar div#actions h1,
                div#sideBar div#sideSearch h1,
                div#sideBar div.StatementAuxInfo h2 {
                    font-size: 1em;
                    padding: 0.75em 1em;
                    font-weight: 500; /* CHG2008444 changed from bold */
                    border-radius: 5px;
                    background-color: #f49600; /*#896936; CHG2008444 #f49600*/
                    color: #0e0d0d; /* CHG200844 #fff;*/
                }

                div#outerSideBar div ul,
                div#sideBar div ul {
                    margin: 0 !important;
                    padding: 5px 0px 0px 0px;
                }

            div#outerSideBar form input[type=submit],
            div#sideBar form input[type=submit] {
                float: right;
            }

            div#outerSideBar div ul li,
            div#sideBar div ul li {
                margin: 0px 0;
            }

                div#outerSideBar div ul li.First,
                div#sideBar div ul li.First {
                    margin-top: 0;
                }

            div#outerSideBar table,
            div#sideBar table {
                border: 0;
                padding: 0;
                margin: 0;
            }

                div#outerSideBar table th,
                div#sideBar table th {
                    font-weight: normal;
                    width: 6em;
                    padding: 1em 0;
                    text-align: left;
                }

                div#outerSideBar table td,
                div#sideBar table td {
                    font-weight: bold;
                }

            div#outerSideBar div p,
            div#sideBar div p {
                margin-bottom: 0;
            }

        div#sideSearch form {
            margin: 1em 0 0 0;
        }

        div#sideSearch label {
            display: block;
            clear: both;
            width: 8em;
            margin: 0.25em 0;
            font-weight: bold;
            padding-bottom: 2px;
        }

        div#sideSearch input[type=text] {
            width: 100%;
            margin: 0 0 0.75em 0;
        }

        /*DEV7*/
        div#sideSearch td {
            word-wrap: break-word;
            word-break: break-all;
            white-space: pre-wrap;
        }

        div#actionMenu {
            border: 0 !important;
            font-size: 100% !important;
            margin-bottom: 0 !important;
            padding: 0 !important;
        }

            div#actionMenu ul {
                margin: 0;
                padding: 5px 0 5px 4px !important;
            }

                div#actionMenu ul li {
                    list-style-type: none;
                }

                    div#actionMenu ul li div {
                        margin: 0;
                        border: 0;
                        padding: 10px 0 10px 8px;
                    }

                    div#actionMenu ul li.Selected div {
                        background: transparent url("Images/bullet-selected-action.png") 0 13px no-repeat;
                    }

                    div#actionMenu ul li div a {
                        color: #333;
                    }

                    div#actionMenu ul li.Selected div a {
                        color: #06c !important;
                    }

        div.ImagePlaceholder {
            height: 40px;
            border: 2px solid #06c !important;
            border-radius: 0 !important;
            background-color: #92d3e7;
            text-align: center;
            color: #900;
            margin: 1em 0;
        }

        div#mobileSideBarDuplication {
            display: none;
        }

        /* Main view ---------------------------------------------------------------- */
        div#pageInnerBody div.centerdView {
            float: none;
            margin: 0 auto;
        }

        div#pageOuterBody div.centerdView {
            float: none;
            margin: 0 auto;
        }

        div#pageBody div.centerdView {
            float: none;
            margin: 0 auto;
        }

        div#view {
            float: right;
            width: 70%;
            padding: 0 2.5% 0 2.5%;
        }

            div#view h1,
            div#view h2,
            div#view h3 {
                margin-bottom: 0.5em;
            }

            div#view h1 {
                font-size: 1.7em;
            }

            div#view h2 {
                font-size: 1.25em;
            }

            div#view h3 {
                font-size: 1.125em;
            }

        #content h2 {
            margin-top: 2.5em;
        }

        div#view div.ImagePlaceholder.FRight {
            margin-left: 5%;
            width: 45%;
        }


        div#view ul {
            padding: 0 0 0 1.5em;
            list-style-position: outside;
        }

        ul.OuterTabs {
            padding: 0 !important;
            list-style-position: inside !important;
        }

        ul.InnerTabs {
            padding: 0 !important;
            list-style-position: inside !important;
        }

        ul.InnerInnerTabs {
            padding: 0 !important;
            list-style-position: inside !important;
        }

        div#view ul li {
            margin: 0;
            padding: 0 0 0 0.75em;
            line-height: 160%;
        }

        div#view ul ul {
            padding-left: 1.5em;
        }

        /* Tab controls, containers and content ------------------------------------- */

        div#combinedMenu_Trigger,
        div.InnerMenuDisplay,
        div ul#combinedMenu,
        div#combinedMenu_Display,
        div#mobileHeading h1 {
            display: none;
        }

        ul.OuterTabs {
            display: block !important;
            margin: 0;
            padding: 0;
        }

        ul.InnerTabs{
            display: block !important;
            margin: 0;
            /*SR1303025 margin-bottom: 10px;*/
            padding: 0;
        }

      ul.InnerInnerTabs {
            display: block !important;
            margin: 0;
            /*SR1303025 margin-bottom: 10px;*/
            padding: 0;
        }

        ul.OuterTabs li.Tab {
            list-style-type: none;
            margin: 0 !important;
            padding: 0 !important;
            float: left;
        }

        ul.InnerTabs li.Tab{
            list-style-type: none;
            margin: 0 !important;
            padding: 0 !important;
            float: left;
        }

        ul.InnerInnerTabs li.Tab{
            list-style-type: none;
            margin: 0 !important;
            padding: 0 !important;
            float:left !important;
        }

        ul.OuterTabs li.Tab a {
            padding: 0.625em !important;
            color: #000;
            background-color: #fff;
            border-top: 1px solid #c5c4c4;
            border-left: 1px solid #c5c4c4;
            border-right: 1px solid #c5c4c4;
            display: block;
        }

        /*  SR1303025 */

        ul.InnerTabs li.Tab a{
            padding: 0.625em !important;
            color: #000;
            background-color: #fff;
            border-style: solid;
            border-width: 1px;
            border-color: #c5c4c4;
            margin-top: 10px;
            margin-bottom: -1px;
            margin-left: -1px ;
            margin-right: -1px;
            padding: 0px;
            display: block;
        }

        ul.InnerInnerTabs li.Tab a{
            padding: 0.625em !important;
            color: #000;
            background-color: #fff;
            border-style: solid;
            border-width: 1px;
            border-color: #c5c4c4;
            margin-top: 0px;
            margin-bottom: -1px;
            margin-left: -1px;
            margin-right: -1px;
            padding: 0px;
            display: block ;
        }

        /*ul.OuterTabs li.First a{
        border-right: 0;
        border-top-left-radius: 5px;
    }
    ul.InnerTabs li.First a {
        border-right: 0;
        border-top-left-radius: 5px;
    }

    ul.OuterTabs li.Last a{
        border-top-right-radius: 5px;
        border-left: 0;
    }
    ul.InnerTabs li.Last a {
        border-top-right-radius: 5px;
        border-left: 0;
    }*/

ul.OuterTabs li.Tab.Active a {
    color: #166ccd; /* CHG2008444 #06c;*/
    background-color: #f2f2f2; /* CHG2008444 #dbe6f5;*/
}

ul.InnerTabs li.Tab.Active a {
    color: #166ccd; /* CHG2008444 #06c;*/
    background-color: #f2f2f2; /* CHG2008444 #dbe6f5; */
}

ul.InnerInnerTabs li.Tab.Active a {
    color: #166ccd; /* CHG2008444 #06c;*/
    background-color: #f2f2f2; /* CHG2008444 #dbe6f5; */
}

        ul.InnerTabs li.Tab a{
            padding: 0.5em 1em !important;
        }

        ul.InnerInnerTabs li.Tab a{
            padding: 0.5em 1em !important;
        }


        div.SettingsBox,
        div.TabContent,
        div.InnerTabContent,
        div.InnerInnerTabContent {
            margin: 0 0 0 0;
            padding: 13px;
            display: none;
            border: 1px solid #c5c4c4;
            border-radius: 0.5em;
            border-top-left-radius: 0;
        }

        div.InnerTabContent,
        div.InnerInnerTabContent {
            padding: 13px 0;
        }

        div.SettingsBox {
            border-top-left-radius: 0.5em !important;
            display: block;
        }

            div.SettingsBox th {
                padding: 0px;
            }

        div.InnerTabContent,
        div.InnerInnerTabContent {
            margin-top: 0em !important;
        }

        div.TabContent div.InnerTabContent div.InnerInnerTabContent {
            border-radius: 0;
            border-left: 0;
            border-right: 0;
            border-bottom: 0;
        }

        div.InnerTabContent#summary_Content {
            border: 0;
        }

        div.TabContent.ActiveContent,
        div.InnerTabContent.ActiveContent, 
        div.InnerInnerTabContent.ActiveContent {
            display: block;
        }

        img.PensionLogo {
            float: right;
        }

        p.EmployersContribution {
            font-size: 1.25em;
            line-height: 120%;
            color: #000;
            font-weight: bold;
            width: 70%;
            margin-top: 0;
            padding: 10px 0px 10px 75px;
            background: url(/staticcontent/styles/images/piggy-bank.png) 0 0 no-repeat transparent;
        }

        span.EmployersContributionValue {
            color: #da8300;
        }

        div#pieChartMobile {
            display: none;
        }

        div#pieChart {
            float: right;
            width: 37.5%;
        }

            div#pieChart img#doughnut {
                width: 100%;
            }

        div.LocalBenefits,
        div.EmploymentData {
            border-top: 1px solid #06c;
            padding: 17px 0 0 0;
        }

        /* Tables ------------------------------------------------------------------- */

        /* -------------------------------------------- Details and financial summary */

        table.TRSDetails {
            margin: 1em 0;
            width: 100%;
            border-top: 1px solid #06c;
        }

            table.TRSDetails th,
            table.TRSDetails td {
                border-bottom: 1px solid #06c !important;
                padding: 0.5em 0.25em !important;
            }

            table.TRSDetails tbody th {
                font-weight: bold;
                text-align: left;
            }

th.Level1 {
    color: #3EBDDE;
}

            th.Level1 div {
                background-color: #3EBDDE;
            }

th.Level2 {
    color: #D179A1;
}

            th.Level2 div {
                background-color: #D179A1;
            }

        th.Level3 {
            color: #82B81A;
        }

            th.Level3 div {
                background-color: #82B81A;
            }

        th.Level4 {
            color: #A30132;
        }

            th.Level4 div {
                background-color: #A30132;
            }

        th.Level5 {
            color: #009534;
        }

            th.Level5 div {
                background-color: #009534;
            }

        th.Level6 {
            color: #E52018;
        }

            th.Level6 div {
                background-color: #E52018;
            }

        th.Level7 {
            color: #F39900;
        }

            th.Level7 div {
                background-color: #F39900;
            }

        th.Level8 {
            color: #006649;
        }

            th.Level8 div {
                background-color: #006649;
            }

        th.Level9 {
            color: #BA6A80;
        }

            th.Level9 div {
                background-color: #BA6A80;
            }

        th.Level10 {
            color: #56008C;
        }

            th.Level10 div {
                background-color: #56008C;
            }

        th.Level11 {
            color: #EC9084;
        }

            th.Level11 div {
                background-color: #EC9084;
            }

        th.Level12 {
            color: #008AC9;
        }

            th.Level12 div {
                background-color: #008AC9;
            }

        th.Level13 {
            color: #004C92;
        }

            th.Level13 div {
                background-color: #004C92;
            }

        th.Level14 {
            color: #7A6BA4;
        }

            th.Level14 div {
                background-color: #7A6BA4;
            }

        th.Level15 {
            color: #00ABAF;
        }

            th.Level15 div {
                background-color: #00ABAF;
            }

        table.FinancialSummary {
            width: 60%;
            margin-bottom: 2em;
            border-bottom: 3px double #06c;
            padding: 0.5em 0 0.5em 0;
        }

            table.FinancialSummary th {
                text-align: left;
                font-weight: bold; /* CHG2008444 normal;*/
            }

                table.FinancialSummary th div {
                    display: inline;
                    font-size: 1em;
                    width: 1em;
                    height: 1em;
                    padding: 0 0.25em;
                    margin: 0 0.5em 0 0;
                }

            table.FinancialSummary td {
                color: #000;
                font-weight: bold;
                padding: 0 !important;
                line-height: 180%;
                text-align: right;
            }

            table.FinancialSummary th {
                padding: 0 !important;
                line-height: 180%;
            }

            table.FinancialSummary th,
            table.FinancialSummary td {
            }

            table.FinancialSummary tr.PreTotal th,
            table.FinancialSummary tr.PreTotal td {
                padding-bottom: 1em !important;
            }

            table.FinancialSummary tr.TotalRow {
                font-size: 1.33em;
                padding: 0.5em 0;
            }

                table.FinancialSummary tr.TotalRow th {
                    color: #06c;
                    font-weight: bold;
                    padding: 0.5em 0;
                    border-top: 1px solid #06c !important;
                }

                table.FinancialSummary tr.TotalRow td {
                    padding: 0.5em 0;
                    border-top: 1px solid #06c;
                }

        /* ------------------------------------------------------ Employers statement */

        table.EmpDetails {
            margin: 0 0 1em 0;
        }

            table.EmpDetails tbody th {
                font-weight: bold;
                text-align: left;
            }

        /* -------------------------------------------------------- Pension statement */

        table.PractitionerTotalsBox {
            float: right;
            display: inline-block;
            font-size: 1em;
        }

            table.PractitionerTotalsBox th {
                font-weight: normal;
                text-align: left;
            }

            table.PractitionerTotalsBox td {
                font-weight: bold;
            }

        /* CR34093 */
table.dynamisingTotalsBox { float: right !important; display: inline-block;font-size: 1em;}
table.dynamisingTotalsBox th { font-weight: bold; text-align: left;} /*CHG2008444 change to bold*/
table.dynamisingTotalsBox td { font-weight: bold; text-align:right;}

        table.PensionStatementTable,
        table.PensionStatementBox {
            border: 0;
            margin-bottom: 1.25em !important;
        }

        table.PensionStatementTable {
            min-width: 75%;
        }

            table.PensionStatementTable th,
            table.PensionStatementTable td {
                border: 1px solid #06c;
            }

            table.PensionStatementTable th,
            table.PensionStatementBox th {
                font-weight: 500; /* CHG2008444 normal;*/
            }

            table.PensionStatementTable td,
            table.PensionStatementBox td {
                font-weight: bold;
            }

        table.PensionStatementBox th,
        table.PensionStatementBox td {
            padding: 0.5em;
        }

        table.PensionStatementTable tbody td {
            text-align: right;
            font-weight: bold;
        }

        table.PensionStatementTable thead th {
            text-align: right;
        }

            table.PensionStatementTable thead th.First,
            table.PensionStatementTable tbody th,
            table.PensionStatementBox td,
            table.PensionStatementBox tbody th {
                text-align: left;
            }

        table.PensionStatementBox tbody th {
            width: 21em;
            white-space: nowrap;
        }

        table.PensionStatementTable tbody th {
            width: 15em;
            white-space: nowrap;
        }

        /* ----------------------------------------------------------- Search results */

        table.SearchResults {
            margin: 1em 0;
            width: 100%;
            border: 1px solid #c5c4c4;
            font-size: 0.875em;
        }

            table.SearchResults th,
            table.SearchResults td {
                border-bottom: 1px solid #c5c4c4;
            }

            table.SearchResults thead th {
                text-align: right;
            }

                table.SearchResults th,
                table.SearchResults td,
                table.SearchResults thead th.First {
                    text-align: left;
                }

                    table.SearchResults thead th.First span {
                        padding-left: 10px !important;
                    }

            table.SearchResults span {
                display: block;
                padding-left: 20px;
                text-align: left;
            }

                table.SearchResults span.notLive {
                    background: url(Images/no-tick.png) 0 50% no-repeat transparent;
                }

                table.SearchResults span.live {
                    background: url(Images/tick.png) 0 50% no-repeat transparent;
                }

            table.SearchResults td.First a {
                color: #000;
                font-weight: bold;
            }

            table.SearchResults thead th {
                text-align: left;
            }

        /* ----------------------------------------------------------------- Citizens */

        table.CitizensTable {
            margin-bottom: 1.25em !important;
        }

            table.CitizensTable thead th {
                text-align: left;
            }

        /* ----------------------------------------------------------------- KnownFacts */
        table.KnownFacts {
            margin-bottom: 1.25em !important;
            font-size: 0.875em;
            border: 1px solid #c5c4c4;
        }

            table.KnownFacts thead th {
                text-align: left;
            }

        /* Forms -------------------------------------------------------------------- */

        form {
            margin: 0;
            padding: 0;
        }

        fieldset {
            margin: 0.5em 0;
            padding: 0;
            border: 0;
        }

        legend {
            font-weight: bold;
            padding: 0;
        }

        input[type=button],
        input[type=reset],
        input[type=submit],
        button {
            padding: 0.5em 1em;
            margin: 0 0 0.5em 0;
            font-weight: bold;
            border-radius: 3px;
            border: 1px solid #da8300;
            background-color: #fff;
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c7c7c7), to(#ffffff)); /* Old WebKit */
            background-image: -webkit-linear-gradient(top, #c7c7c7, #ffffff); /* WebKit */
            background-image: -moz-linear-gradient(top, #c7c7c7, #ffffff); /* Gecko */
            background-image: -ms-linear-gradient(top, #c7c7c7, #ffffff); /* Trident */
            background-image: -o-linear-gradient(top, #c7c7c7, #ffffff); /* Presto */
            background: #fff url("Images/fallback-gradient-grey.png") 50% 50% repeat-x; /* Fallback */
            color: #da8300;
        }

        input[type=reset],
        input.cancel1Button1 {
            border: 1px solid #06c;
            background-color: #06c;
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#c7c7c7)); /* Old WebKit */
            background-image: -webkit-linear-gradient(top, #ffffff, #c7c7c7); /* WebKit */
            background-image: -moz-linear-gradient(top, #ffffff, #c7c7c7); /* Gecko */
            background-image: -ms-linear-gradient(top, #ffffff, #c7c7c7); /* Trident */
            background-image: -o-linear-gradient(top, #ffffff, #c7c7c7); /* Presto */
            background: #06c url("Images/fallback-gradient-grey.png") 50% 50% repeat-x; /* Fallback */
            color: #fff;
        }

        fieldset.ViewForm {
            margin: 0 0 1em 1em;
        }

            fieldset.ViewForm label {
                display: block;
                /*float: left;
    clear: both;*/
                width: 10em;
                margin: 0;
                /*margin: 1em 0 0 1em;*/
            }

            fieldset.ViewForm.longerLabel label {
                width: auto;
            }

            fieldset.ViewForm label div {
                font-size: 0.65em;
                width: auto;
            }

            fieldset.ViewForm th {
                font-weight: normal;
                text-align: left;
            }

            div.FormValue,
            fieldset.ViewForm div.ImageUpload,
            fieldset.ViewForm input[type=text],
            fieldset.ViewForm select,
            fieldset.ViewForm textarea,
            fieldset.ViewForm div.Editor,
            fieldset.ViewForm div.Button {
                font-size: 1em;
                display: block;
                font-family: Arial, "Helvetica Neue", "Liberation Sans Mono", sans-serif, sans;
                width: 20em;
                margin: 0;
                /*float: left;
    clear: right;
    margin: 1em 9em 0 1em;*/
            }

                fieldset.ViewForm textarea[readonly] {
                    background-color: #F0F0EE;
                    color: #666;
                }

        div.FormValue {
            font-weight: bold;
            margin: 0;
        }

        fieldset.ViewForm select {
            width: 20.5em;
        }

        fieldset.ViewForm div.Button {
        }

        fieldset.ViewForm textarea {
            height: 9em;
        }

        fieldset.ViewForm input.hp {
            visibility: hidden;
            width: 1px;
            height: 1px;
            position: absolute;
            left: -9999em;
        }

        div.QuadBox button,
        button.LoginAction {
            border: 1px solid #da8300;
            border-radius: 0.3em;
            font-weight: bold;
            color: #da8300;
            background-color: #fff;
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c7c7c7), to(#ffffff)); /* Old WebKit */
            background-image: -webkit-linear-gradient(top, #c7c7c7, #fff); /* WebKit */
            background-image: -moz-linear-gradient(top, #c7c7c7, #fff); /* Gecko */
            background-image: -ms-linear-gradient(top, #c7c7c7, #fff); /* Presto */
            background: #fff url(images/fallback-gradient-grey.png) 50% 50% repeat-x; /* Fallback */
            display: block;
            margin: 1em auto;
            width: 75%;
            padding: 0.5em;
        }

        .showKnownfactsButton {
            margin-top: 1em !important;
        }

        button.LoginAction {
            width: auto;
        }

        input.SmallButton {
            padding: 0.25em 0.5em !important;
            font-size: 0.65em !important;
            font-weight: normal !important;
        }

        label.accessText {
            display: inline !important;
        }

        ul.BoxTicker {
            margin: 0 0 0 1em;
            padding: 0;
        }

            ul.BoxTicker li {
                margin: 0.5em 0;
                list-style-type: none;
            }

        div#view form {
            border-top: 1px solid #c5c4c4;
            padding-top: 1em;
        }

        div#view div.SettingsBox form:first-child {
            border: 0;
        }

        .typeahead.dropdown-menu {
            background-color: #fff;
            border: 1px solid #c5c4c4;
            position: absolute;
            top: -5em;
            padding: 0;
            list-style-type: none;
            box-shadow: 0 0 5px #c5c4c4;
        }

            .typeahead.dropdown-menu li {
                padding: 0.5em;
                width: 20em;
            }

                .typeahead.dropdown-menu li:hover,
                .typeahead.dropdown-menu li.active {
                    color: #fff !important;
                    background-color: #06c !important;
                }

                    .typeahead.dropdown-menu li:hover a,
                    .typeahead.dropdown-menu li.active a {
                        color: #fff !important;
                    }

                .typeahead.dropdown-menu li strong {
                    color: #f60;
                }

                .typeahead.dropdown-menu li.active strong,
                .typeahead.dropdown-menu li:hover strong {
                    color: #fc0;
                }

        /* Modals and popouts ------------------------------------------------------- */

        .longPopout {
            width: 700px !important;
            overflow: auto;
            max-height: 500px;
        }

        .popout {
            width: 420px;
            display: none;
            float: left;
            position: fixed;
            top: 160px;
            left: 320px;
            border: 1px solid #c5c4c4;
            background-color: #fff;
            box-shadow: 0 0 5px #999;
            z-index: 9999;
            padding: 0.5em;
            border-radius: 0.5em;
        }

            .popout #bodypop,
            .popout #bodykfc,
            .popout #bodypop2,
            .popout #body {
                padding-left: 8px;
                padding-right: 8px;
            }

            .popout #headerpop,
            .popout #headerpop2,
            .popout #headerkfc,
            .popout #header {
                padding: 0.75em 1em;
                margin: 0 0 0.5em 0;
                font-weight: bold;
                border-radius: 3px;
                background-color: #06c;
                background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a96c2), to(#2b6c9b)); /* Old WebKit */
                background-image: -webkit-linear-gradient(top, #1a96c2, #2b6c9b); /* WebKit */
                background-image: -moz-linear-gradient(top, #1a96c2, #2b6c9b); /* Gecko */
                background-image: -ms-linear-gradient(top, #1a96c2, #2b6c9b); /* Trident */
                background-image: -o-linear-gradient(top, #1a96c2, #2b6c9b); /* Presto */
                background: #06c url(Images/fallback-gradient-blue.png) 50% 50% repeat-x; /* Fallback */
                color: #fff;
            }

            .popout h3, header h3 {
                color: #fff;
            }

            .popout h3, headerkfc h3 {
                color: #fff;
            }

            .popout h3, headerpop h3 {
                color: #fff;
            }

            .popout h3, headerpop2 h3 {
                color: #fff;
            }
            .popout h4, header h4 {
                font-size: 0.9em;
                margin-bottom: 8px;
            }

            .popout #buttonspop,
            .popout #buttonspop2,
            .popout #buttons {
                text-align: right;
                margin-right: 8px;
            }

            .popout #errorText {
                color: #900;
            }

            .popout #image {
                background-image: url("Images/ExampleBenefits.png");
                background-size: contain;
                width: 420px;
                height: 700px;
            }

            .popout #reasonForm {
                border-top: none;
                padding-top: 0em;
            }

        #dialog {
            position: absolute;
            z-index: 9999;
            display: none;
            background-color: #eee;
            padding: 1em !important;
            font-size: 1em;
            font-weight: bold;
            border: 1px solid #c5c4c4;
            box-shadow: 0 0 5px #999;
        }

            #dialog img {
                display: block;
                margin: 1em;
                border: 1px solid #c5c4c4;
            }

        #Preview {
            position: absolute;
            background-color: #eee;
            border: 1px solid #c5c4c4;
            box-shadow: 0 0 10px #999;
            z-index: 9999;
            padding: 1em;
            height: auto;
        }

        .PreviewContent {
            border: 1px solid #c5c4c4;
            padding: 1em;
            background-color: #fff;
            height: auto;
        }

            .PreviewContent h1,
            .PreviewContent h2,
            .PreviewContenth3 {
                margin-bottom: 0.5em;
            }

            .PreviewContent .preview-header, .employer-benifits-header {
                overflow: hidden;
            }

                .PreviewContent .preview-header img, .employer-benifits-header img {
                    float: right;
                    margin-top: -30px;
                    margin-bottom: 5px;
                }

        /* System messages and errors ----------------------------------------------- */

        h1.Error {
            color: #900;
            margin-top: 1em;
            font-size: 1.5em;
            font-weight: bold;
        }

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

        .validation-summary-errors {
            background-color: #F2DEDE;
            border: 1px solid #EED3D7;
            color: #B94A48;
        }

            .validation-summary-errors p {
                padding: 8px 10px;
                margin: 0px;
            }

        .form-success {
            color: #468847;
            background-color: #DFF0D8;
            border-color: #D6E9C6;
            padding: 8px;
            margin-bottom: 10px;
        }

        div#outerSideBar .validation-summary-errors ul,
        div#sideBar .validation-summary-errors ul {
            margin: 0;
            padding: 0;
        }

        .validation-summary-errors ul {
            list-style-type: none;
        }

        .field-validation-error {
            font-size: 1em;
            display: block;
            float: left;
            clear: right;
            width: 19.5em;
            margin: 0;
            padding: 0.5em;
            color: #B94A48;
            background-color: #fcc;
        }

        /* Help bubbles ------------------------------------------------------------- */

        #modalMask {
            position: fixed;
            top: 0px;
            left: 0px;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #06c;
            display: none;
            z-index: 9500;
        }

        #helpContainer {
            background-color: transparent;
            position: absolute;
            bottom: 15px;
            left: -116px;
            z-index: 9995;
            display: none;
            width: 250px;
            font-size: 14px;
        }

        #helpPointer {
            background: transparent url("Images/help-bubble-pointer.png") 50% bottom no-repeat;
            position: relative;
            top: -3px;
            width: 100%;
            height: 20px;
            overflow: hidden;
            z-index: 9999;
        }

        #helpBubble {
            border-radius: 0.5em;
            box-shadow: 0 0 10px #999;
            background-color: #fff;
            border: 1px solid #c5c4c4;
            z-index: -1;
            white-space: normal;
        }

            #helpBubble h1 {
                font-size: 2em;
                margin: 0;
                font-weight: normal;
                background-color: #eee;
                border-bottom: 1px solid #ccc;
                border-top: 1px solid #fff;
                border-radius: 0.5em;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                color: #666;
                padding: 0.5em;
            }

            #helpBubble p {
                line-height: 1.5em;
                margin: 0 !important;
                font-size: 0.9em;
                padding: 1em;
                color: #555;
            }

        .Tool {
            display: inline-block;
            font-size: 1em;
            background: transparent url("Images/icon-help.png") 0 0 no-repeat;
            cursor: help;
            width: 20px;
            height: 20px;
            text-align: left;
            font-weight: normal;
        }

        
        th .Tool {
            float: left;
        }

        /* CR34291 Place ? icon on its own line. CR34353 removed 
        .ToolWithNewLine {
            display: inline-block;
            font-size: 1em;
            background: transparent url("Images/icon-help.png") 0 0 no-repeat;
            cursor: help;
            width: 100%;
            height: 20px;
            text-align: left;
            font-weight: normal;
        }

        th.ToolWithNewLine {
            float: left;
        }*/

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

        div#pageFooter {
            text-align: center;
            padding: 3em;
        }

            div#pageFooter div#strapline {
                background-color: #06c;
                color: #fff;
                font-style: oblique;
                padding: 0.5em 0;
                text-align: center;
                cursor: pointer;
            }

                div#pageFooter div#strapline a {
                    color: #fff;
                }

        ul#footerMenuList {
            margin: 1.5em 0 0.5em 0;
            padding: 0;
            color: #06c;
        }

            ul#footerMenuList li {
                list-style-type: none;
                display: inline;
                padding: 0.25em;
            }


        /* Pension Statement */
        div#view #pensionBenefits_Content h3 {
            margin: 40px 0px 10px 0px;
        }

        #partialEmployerNoQuerySubmissionPlaceholder {
            float: left;
            border: 1px solid #999;
            width: 19em;
            padding: 0px 10px;
        }

        /* Added by Neil King for errors & exceptions */

        .error {
            color: #a30132;
            font-weight: bold;
            font-size: 1.2em;
            margin: 8px;
        }

        .errorActions {
            color: #33a86a;
            font-weight: bold;
        }

        .stack {
            font-size: 0.8em;
            color: #555;
        }

        .innerStack {
            margin-top: 8px;
            font-size: 0.8em;
            color: #555;
        }

        .popoutclose {
            float: right;
            color: #fff;
        }



        .padding-left-2em {
            padding-left: 2em;
        }

        .financial-year-statement {
            color: #CC0000;
            font-weight: bold;
            text-decoration: underline;
        }

        div#view ul.annual-leave-help-text {
            list-style-type: none;
            margin: 0;
            padding-left: 0;
        }

            div#view ul.annual-leave-help-text li {
                padding-left: 0;
                margin-left: 0.7em;
                text-indent: -0.7em;
            }

        .annual-leave-entitlement-input {
            margin-top: 2px !important;
        }

        .required::after {
            content: "*"; 
        }

        .reqRed::after {
            content: "*";
            color: #cc0000;
        }