:root {
    --navbarbg: #0B102A;
    --navbarbg-dk: #FFFFFF;
    --buttonbg: #009b9d;
    --buttonbg-red:#C94D2D;
    --buttonbg-grey:#7c7a90;
    --inputbdr: #00AAA6;
    --mynpt-green: #18ad9c;
    --mynpt-navy: #1a1f3d;
    --mynpt-blue: #00529e;
    --mynpt-blue-shadow: #004381;
    --mynpt-gray: #767676;
    --mynpt-blue2: #1886AD;
    --mynpt-adblue: #b0bdef;
    --mynpt-requests-green: #17a595;
    --mynpt-requests-amber: #f99532;
    --mynpt-requests-red: #fa0000;
    --mynpt-requests-grey: #7c7c7c;
    --mynpt-requests-purple: #A954DC;
    --mynpt-requests-purple-alt1: #B64DF7;
    --mynpt-requests-purple-alt2: #8640B1;
    --mynpt-requests-filter-ltgrey: #F2F2F2;
    --mynpt-requests-filter-grey: #E2E2E2;
    --mynpt-requests-filter-dkgrey: #C2C2C2;
    --mynpt-requests-filter-border-grey: #C0C0C0;
    --mynpt-requests-background-completed: #007164;
    --mynpt-requests-background-incomplete: #747474;
    --mynpt-hero-image: url('/img/BaglanBeachBG.jpg'); /* default image - can be overidden from appsettings value HeroImage */
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'LatoLatinWeb', 'Helvetica', 'sans-serif' !important;
    padding: 0;
    margin-bottom: 50px;
}

.bolder {
    /*font-family: "LatoLatinWebBlack", 'Helvetica', sans-serif;*/
    font-weight: 900;
}

a, a:visited {
    text-decoration: none;
    color: #0068cb;
}

a.test-link {
    color: #a8a834 !important;
}

h1 {
    margin: 0.3em 0.5em 0.5em 0.5em;
    font-size: 1.3em !important;
    margin: 1em 0em;
    font-weight: 600 !important;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    color: white;
    background-color: var(--navbarbg);
    border-top: solid 0.3em #98beff;
    /*max-height: 80px;*/
}

footer a:focus {
    border: 1px solid #ccc;
}

footer a:focus, footer a:active {
    color: yellow;
}

footer a, footer a:visited {
    text-decoration: none !important;
    color: white;
    display: inline-block;
    margin-left: 1em;
    padding: 0 0.3em 0 0.3em;
}

footer a:hover, footer a:visited:hover {
    color: darkkhaki;
}

/* suppress MS password reveal as it is not supported everywhere */
input[type=password]::-ms-reveal {
    display: none;
}

/* style our noscript banner */
.noscript {
    text-align: center;
    display: block;
    padding: 0.5em;
    border: 1px solid;
    margin: 1em auto;
    max-width: 80%;
    background-color: #f9e98f;
}

a.myNPT {
    text-decoration: none;
}

.inv, .hidden {
    display: none;
}

.mynpt-text-highlighted{
    color: var(--mynpt-requests-purple);
}

div.uneven {
    border-radius: 0 2em 0 2em;
}

.mynpt-show-mobile{ display: none; } /* class to only show on mobile - media query below */

/* --- START BOOTSTRAP/RAZOR OVERRIDES --- */
a.navbar-brand {
    padding: 0;
}

.navbar-right .nav-link.mynpt {
    margin-left: 0.5em;
}

.nav-link.mynpt {
    text-decoration: none !important;
    font-size: 1.1em;
    padding-left: 0.75em !important;
    padding-right: 0.75em !important;
    text-align: center;
    border: 2px solid var(--navbarbg);
}

.nav-link.mynpt:hover, .nav-link.mynpt:active {
    border: 2px solid #249793;
}

.nav-link.mynpt:focus.govuk-button:focus:not(:active):not(:hover) {
    color: yellow;
}

ul.navbar-right li {
    margin-left: 1em;
}

.navbar-brand img {
    display: block;
}

.navbar-collapse ul.navbar-right li {
    margin-left: 0;
}

.container {
    padding-right: var(--bs-gutter-x,1.25rem);
    padding-left: var(--bs-gutter-x,1.25rem);
}

#heroCont.container {
    padding: 0;
}

.container.right {
    text-align: right;
}

.text-danger {
    display: block;
    font-weight: bold;
    margin-bottom: 0.3em;
    background-image: url("/img/warning-icon-red.svg");
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: 0px 1px;
    padding-left: 1.3em;
}

.text-danger.dashboard-error {
    display: inline-block;
    background-position: 0px 0px;
}

.text-danger ul {
    padding-left: 1.3em;
}

/* the tab container ul */
.mynpt.nav-tabs{
    border-bottom:0;
    text-indent: 0;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    margin: 0;
}

/* the li list item */
.mynpt.nav-tabs .nav-item{
    position:relative;
    top: 3px;
    margin-right: 2px;
}

/* the button inside the li */
.mynpt.nav-tabs .nav-link{
    font-weight: bold;
    font-size: 1.2rem;
    border-radius:0;
    color: black;
    border-bottom: 0;
    padding: 0.6rem 2rem 0.3rem 2rem;
    background-color: var(--mynpt-requests-filter-ltgrey);
    border-top: 4px solid var(--mynpt-requests-filter-grey);
}

/* the active button */
.mynpt.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    background-color: var(--mynpt-requests-filter-grey);
    border-top: 4px solid var(--mynpt-requests-filter-dkgrey);
    padding: 0.6rem 2rem;
}

/* --- END BOOTSTRAP/RAZOR OVERRIDES --- */

/* --- START NPT RESPONSIVE OVERRIDES --- */
svg, use {
    height: auto;
    width: auto;
}

.carousel-control-next:hover, .carousel-control-next:focus, .carousel-control-next:active,
.carousel-control-prev:hover, .carousel-control-prev:focus, .carousel-control-prev:active {
    background: none;
}

.carousel-indicators {
    transform: none;
    right: 0;
    left: 0;
    bottom: -25px;
}

/* --- END NPT RESPONSIVE OVERRIDES --- */

/* --- START GOVUK OVERRIDES --- */
.govuk-button.mynpt::before {
    margin: 0;
}

.govuk-button.mynpt {
    background-color: var(--buttonbg);
    border-radius: 0.3em;
    line-height: 2rem;
    box-shadow: none;
    padding: 0.2em 1.5em;
}

.govuk-button.mynpt.uneven {
    border-radius: 0 0.8em 0 0.8em;
    text-decoration: none;
    box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.7);
}

.govuk-button.mynpt.unevensml {
    border-radius: 0 0.6em 0 0.6em;
    font-size: 1em;
    /* margin-right: 0; */
}

.govuk-button.mynpt.blue { background-color: var(--mynpt-blue); }
.govuk-button.mynpt.red{background-color: var(--buttonbg-red);}
.govuk-button.mynpt.grey{background-color: var(--buttonbg-grey);}

.govuk-button.mynpt.btn-danger {
    background-color: #b20000;
}

.govuk-button.mynpt.home {
    max-width: 170px;
    width: 100%;
    margin-bottom: 1em;
    text-align: center !important;
    justify-content: center;
}

.govuk-button.mynpt:focus.govuk-button:focus:not(:active):not(:hover) {
    border-color: #b49e0e;
    box-shadow: none;
}

.govuk-input.mynpt {
    border-color: var(--inputbdr);
    border-radius: 0.3em;
    border-width: 0.18em;
    display: block;
    margin: 0;
}

.govuk-select.mynpt {
    border-color: var(--inputbdr);
    border-radius: 0.3em;
    border-width: 0.18em;
}

.govuk-button.mynpt.no-left-radius, .govuk-input.mynpt.no-left-radius {
    border-radius: 0em 0.3em 0.3em 0;
}


.govuk-button.mynpt.no-right-radius, .govuk-input.mynpt.no-right-radius {
    border-radius: 0.3em 0em 0em 0.3em;
}

.govuk-input.mynpt.mynpt-compound {
    display: inline-block;
    width: 65%;
    border-right: 0;
    /* flex-grow: inherit; */
}

.govuk-button.mynpt.mynpt-compound {
    margin-bottom: 0;
    line-height: 1.85em;
    padding: 0.2em 0.7em;
    font-size: 1em;
    width: 30$;
}

.govuk-label.mynpt-label {
    display: block;
    font-weight: bold;
}

.govuk-details {
    font-size: 1em;
}

.govuk-tag {
    font-family: inherit;
}

.govuk-table__caption {
    caption-side: top;
    color: inherit;
}

.govuk-table {
    font-size: inherit;
}

.govuk-panel.mynpt{
    border-radius: 8px;
    margin-bottom: 2rem;
}

.govuk-panel.mynpt h1,.govuk-panel.mynpt h2, .govuk-panel.mynpt h3, .govuk-panel.mynpt h4, .govuk-panel.mynpt p{
    color:white;
}

.govuk-panel.mynpt h1{
    font-size: 2rem !important;
    margin:0.7rem 0;
}

.govuk-panel.mynpt h2{
    margin-bottom: 1rem;
}

.govuk-panel__body{
    font-family: 'LatoLatinWeb', 'Helvetica', 'sans-serif' !important;
}

.govuk-panel__body p{
    font-size: 1.4rem;
    margin-bottom:0;
}

.govuk-panel--confirmation.mynpt{
    background-color: var(--mynpt-requests-background-completed);
}

.govuk-panel.mynpt.govuk-panel--confirmation[data-status="Completed"] a {
    text-decoration: underline;
    color: #FFFF00 !important;
}

.govuk-panel.mynpt.govuk-panel--confirmation a {
    color: #FFFF00 !important;
}

.govuk-panel.mynpt-panel--inprogress{

}

.govuk-panel.mynpt-panel--notcomplete{
    background-color: var(--mynpt-requests-background-incomplete);
    color: white;
}

    .govuk-panel.mynpt-panel--notcomplete a {
        /*color: #FFFF00 !important;*/
        font-weight: bold;
    }
/* --- END GOVUK OVERRIDES --- */

/* --- START .NET IDENTITY OVERRIDES --- */
.nav-pills a.nav-link {
    line-height: 2.4em;
    color: #333;
    text-align: left;
    text-decoration: none !important;
    border-top: 1px solid #c5c6c6;
    line-height: 2.6rem;
    background: url('/img/icon_chevron.svg') no-repeat;
    background-position: 96% center;
    background-size: 0.6em;
}

.nav-pills a.nav-link.active {
    text-decoration: none;
    background-color: #009b9d;
}
/* --- END .NET IDENTITY OVERRIDES --- */

#navbar {
    background-color: var(--navbarbg);
    border-top: 1px solid white;
    border-bottom: 0;
    color: white;
    padding: 1em 0em;
}

#hero, #hero2 {
    color: white;
    padding: 0 1em;
}

#hero2.container {
    background: #00529e;
    max-width: 1280px;
}

#hero *, #hero2 * {
    color: white;
}

#heroCont {
    background-color: white;
    background: white url('/img/BaglanBeachBG.jpg') no-repeat;
    background-position: right;
    background-size: auto 100%;
}

#heroLeft {
    border-radius: 0px 30px 30px 0px / 0px 100px 100px 0px;
    ;
    background-color: #00529e;
    padding: 2em 2.5em;
}

#heroLeft2 {
    padding: 2em 2.5em;
    flex-grow: 0.3;
}

#heroMiddle {
    overflow: hidden;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    height: 171%;
    width: 2048px;
}

#heroRight, #heroRight2 {
    min-width: 40%;
}

#heroRight2 {
    background: #00529e var(--mynpt-hero-image) no-repeat;
    background-position: right;
    background-size: auto 100%;
    /* Chromium and Webkit browsers */
    -webkit-mask-image: url('/img/hero_mask_i.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: left;
    -webkit-mask-size: cover;
    /* Firefox and future browser styles */
    mask-image: url('/img/hero_mask_i.svg');
    mask-repeat: no-repeat;
    mask-position: left;
    mask-size: cover;
}

#hero2.identity-hero {
    background-color: #425669;
}

#heroLeft2.identity-hero {
}

#heroRight2.identity-hero {
    background-image: url(/img/BaglanBeachBG.jpg);
}

#hero2.identity-hero a.mynpt.button {
    box-shadow: 6px 6px 5px 0px rgb(35 50 64 / 30%);
}

.heroCurve {
    position: absolute;
    background-color: rgb(8, 80, 161);
    border-radius: 9999px;
    height: 100%;
    width: auto;
    right: 0px;
    transform: translateX(9.6%);
}

#hero a.mynpt.button, #hero2 a.mynpt.button {
    border-radius: 0 0.8em 0 0.8em;
    text-decoration: none;
    box-shadow: 6px 6px 5px 0px rgba(0,67,129,0.9);
}

#hero h1, #hero2 h1 {
    color: white;
    font-size: 2.7em !important;
    margin: 0.3em 0;
}

#hero h2, #hero2 h2 {
    font-size: 1em;
    line-height: 1.3em;
    max-width: 20em;
}

#hero2 h2.mynpt-email {
    background: url('../img/icon_envelope.svg') no-repeat;
    padding-left: 1.3rem;
    background-size: 1em;
    background-position: left center;
    opacity: 0.8;
}


img.logo {
    width: 180px;
    margin: 0 auto 1em;
    display: block;
}

img.logo-sml {
    width: 180px;
    /*
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,1));
    filter: drop-shadow(1px 1px 3px #999);
    */
}

img.logo-sml-img{
    width: 130px;
}

img.logo.horiz {
    width: auto;
    max-height: 100px;
    margin: 0 0 1.8em;
}

img.warning-icon {
    height: 1.4em;
    width: 1.4em;
    margin-right: 0.2em;
    top: -2px;
    position: relative;
}

img.banner {
    margin: 0;
    padding: 0;
    height: 2.6em;
}

button.btn-primary {
    background-color: #3cbc7e;
    border: 0;
    margin: 0.3em 0em;
}

button.btn-primary:hover {
    background-color: #389e6c;
}

.mynpt-form {
    margin: 0 auto;
}

.mynpt-login-panel {
    align-items: center;
    padding: 1em;
    max-width: 500px;
}

.mynpt-login-panel.mynpt-home {
    background-color: #00529e;
    margin: 2rem 0 0 3rem;
    color: white;
}

.mynpt-login-panel.mynpt-home h1,
.mynpt-login-panel.mynpt-home h2 {
    color: white;
}

.mynpt-login-panel.mynpt-home h1 {
    font-size: 1.5rem !important;
    margin-top: 1rem;
}

.mynpt-home div {
    padding-left: 4rem;
    background-repeat: no-repeat;
    background-size: 3rem;
    background-position-x: left;
}

.mynpt-dashbox {
    border: 0.1em solid var(--mynpt-green);
    border-color: var(--mynpt-green);
    border-radius: 0em 0.8em 0em 0.8em;
    border-width: 0.18em;
    max-width: 100%;
    min-height: 160px;
    min-width: 220px;
    text-align: center;
    margin-bottom: 2.5em;
}

.mynpt-dashbox-roadwork {
    border: 0.1em solid var(--mynpt-green);
    border-color: var(--mynpt-green);
    border-radius: 0em 0.8em 0em 0em;
    border-width: 0.18em;
    max-width: 100%;
    min-height: 160px;
    min-width: 220px;
    text-align: center;
    margin-bottom: 2.5em;
}

    .mynpt-dashbox-roadwork.blue {
        border-color: var(--mynpt-blue);
    }

    .mynpt-dashbox.blue {
        border-color: var(--mynpt-blue);
    }

.mynpt-dashbox.black {
    border-color: var(--mynpt-navy);
}

.mynpt-adbanner {
    background-color: #040b25;
    border-radius: 0em 1.6em 0em 1.6em;
    text-decoration: none;
    color: white;
    padding: 0 2.5rem;
    display: flex;
    font-size: 1.1rem;
    margin: auto;
    position: relative;
    top: -15px;
}

.mynpt-adbanner img {
    height: 5.5rem;
    margin: 0.6rem 0;
}

.mynpt-adbanner button {
    background: none;
    border: 2px solid #addef3;
    border-radius: .125rem;
    padding: 0.6rem;
    color: #fff;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
    -webkit-box-shadow: 0px 0px 20px 5px rgba(10,220,239,0.47);
    -moz-box-shadow: 0px 0px 20px 5px rgba(10,220,239,0.47);
    box-shadow: 0px 0px 20px 5px rgba(10,220,239,0.47);
}

a.mynpt-adbanner {
    text-decoration: none !important;
    color: white;
}

.mynpt-adbanner p {
    margin: 0;
    text-align: center;
    text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 12px #fff, 0 0 20px #0fa, 0 0 40px #0fa, 0 0 45px #0fa, 0 0 55px #0fa, 0 0 75px #0fa;
    text-shadow: rgba(10,220,239,0.68) 0px 0px 5px;
    text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 20px #228dff,0 0 35px #228dff,0 0 40px #228dff;
}

.mynpt-pagination{
    margin-bottom: 4rem;
    margin-left: calc(var(--bs-gutter-x)* -.5); /* remove gutter */
}

.mynpt-pagination span {
    display: inline-block;
    line-height: 2rem;
    padding: 0.4rem 1rem;
    font-weight: bold;
    text-align: left;
    margin-left: 0;
}

table.mynpt-wide-table {
    width: 97%;
    margin: 1% 1.5% !important;
}

details.mynpt-recycling ul {
    margin: 1em 0 0 0;
    padding-left: 0;
}

details.mynpt-recycling ul li {
    padding: 1em;
    margin: 0 0 1em 0;
    border: 0.15rem solid var(--mynpt-green);
    border-radius: 0em 0.8em 0em 0.8em;
}

.mynpt-dashbox h2 {
    border-radius: 0em 0.4em 0em 0em;
    font-size: 1.2em;
    padding: 0.6em 0.6em 0.6em 1em;
    margin-bottom: 0;
    font-weight: normal;
    color: white;
    background-color: var(--mynpt-green);
    text-align: left;
}

.mynpt-dashbox-roadwork h2 {
    border-radius: 0em 0.4em 0em 0em;
    font-size: 1.2em;
    padding: 0.6em 0.6em 0.6em 1em;
    margin-bottom: 0;
    font-weight: normal;
    color: white;
    background-color: var(--mynpt-green);
    text-align: left;
}

span.mynpt-ref {
    font-size: 1.1rem;
}

.mynpt-dashbox h3 {
}

.mynpt-dashbox h4 {
}

.mynpt-dashbox h5 {
    font-size: 2em;
    font-weight: bold;
}

.mynpt-text-blue {
    color: var(--mynpt-blue);
}

.mynpt-text-grey {
    color: var(--mynpt-gray);
}

.mynpt-text-adblue {
    color: var(--mynpt-adblue);
}

h5.tax-band {
    font-size: 3rem;
}

h2.mynpt-dash-hdr {
    background-repeat: no-repeat;
    background-size: auto 66%;
    background-position-x: 0.5em;
    background-position-y: 41%;
    padding-left: 2.7em;
}

.bin-icon {
    background-image: url('/img/icon_bin.svg');
}

.councillor-icon {
    background-image: url('/img/icon_medal.svg');
}

.counciltax-icon {
    background-image: url('/img/icon_home.svg');
}

.account-icon {
    background-image: url('/img/icon_person.svg');
}

.report-icon {
    background-image: url('/img/icon_report.svg');
}

.requests-icon {
    background-image: url('/img/icon_doc.svg');
}

.school-icon {
    background-image: url('/img/icon_edu.svg');
}

.car-icon{
    background-image: url('/img/icon_car.svg');
}

.mynpt-dash-hdr.school, .mynpt-dash-hdr.counciltax {
    padding-left: 2.7em;
}

.mynpt-dashbox.blue h2 {
    background-color: var(--mynpt-blue);
}

.mynpt-dashbox-roadwork.blue h2 {
    background-color: var(--mynpt-blue);
}

.mynpt-dashbox.black h2 {
    background-color: var(--mynpt-navy);
}


.mynpt-dashbox h3 {
    font-size: 1em;
    font-weight: bold;
}

h3.mynpt-calendar {
    background: transparent url('/img/icon_calendar_blu.svg') no-repeat;
    background-size: 100%;
    width: 9rem;
    height: 8.2rem;
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    text-align: center;
    padding: 1em 0 0 0;
    font-size: 1em;
}

h3.mynpt-calendar.Green {
    background: transparent url('/img/icon_calendar_grn.svg') no-repeat;
}

.mynpt-calendar .calendar-hdr {
    color: white;
    margin-bottom: 1.5em;
    margin-top: 0.2rem;
}

.mynpt-calendar .calendar-line1 {
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 0.2em;
}

.mynpt-calendar .calendar-line2 {
    font-weight: normal;
    font-size: 0.9em;
}

.mynpt-boxedtext {
    border-radius: 1.5em;
    background-color: var(--mynpt-green);
    color: white;
    font-size: 0.9em;
    line-height: 1.8em;
    width: 70%;
    margin: 1em auto;
    padding: 0.2em 0 0 0;
}

.mynpt-boxedtext.Blue {
    background-color: var(--mynpt-blue);
}

img.mynpt-councillor {
    width: 40%;
    padding: 0.2em;
    border: 1px solid #999;
}

img.mynpt-councillor-base {
    height: 4em;
}

/* CAROUSEL STYLING */
.mynpt.carousel .carousel-control-next, .mynpt.carousel .carousel-control-prev {
    align-items: start;
    margin-top: 3em;
}

.mynpt.carousel .carousel-indicators {
    margin: 0 22% -2em 22%;
}

.mynpt.carousel-dark .carousel-indicators [data-bs-target] {
    background-color: #aaa;
    /* width:80px; */
    margin-right: 0px;
    margin-left: 0px;
    width: 100%;
}

.mynpt.carousel-dark .carousel-indicators [data-bs-target].active {
    background-color: var(--mynpt-green);
}

.mynpt.carousel .councillor-indicators {
    /*bottom: -132px;*/
    border-top: 1px solid #999;
    border-radius: 0 0 0 1em;
    width: 100%;
    margin: 4em 0 0 0;
    padding-top: 1em;
    background-color: #e8e8e8;
    position: static;
}

.mynpt-school-carousel-button {
    margin-top: 0 !important;
    height: 3em;
    top: -0.3em;
}

.mynpt-councillor-carousel-button{
    height: 10em;
}

.mynpt-school-carousel-button .carousel-control-prev-icon,
.mynpt-school-carousel-button .carousel-control-next-icon {
    background-size: 50% 50% !important;
}

/* END CAROUSEL STYLING */

/* TOGGLE SWITCH STYLING */
.mynpt-toggle:before, .mynpt-toggle:after {
    content: "";
}

.mynpt-toggle:before {
    display: block;
    background: linear-gradient(to bottom, #fff 0%, #eee 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    width: 24px;
    height: 24px;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: left 0.25s;
}

.mynpt-toggle:hover .mynpt-toggle:before {
    background: linear-gradient(to bottom, #fff 0%, #fff 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.mynpt-toggle {
    display: inline-block;
    background: #ccc;
    border-radius: 16px;
    border: 0;
    width: 58px;
    height: 32px;
    position: relative;
    vertical-align: middle;
    transition: background 0.25s;
}

.mynpt-toggle[aria-pressed=true] {
    background: #56c080;
    background: #009b9d;
}

.mynpt-toggle-grey {
    background: #a4a2a266 !important;
    opacity: 0.5 !important;
}

.mynpt-toggle[aria-pressed=true]:before {
    left: 30px;
}

.mynpt-toggle-label {
    margin-left: 5px;
    line-height: 32px;
    display: inline-block;
}

[aria-pressed=false] + .reveal {
    display: none;
}
/* END TOGGLE SWITCH */

/* SCHOOL DASH DETAILS STYLES */

.schoolDetails {
    flex-wrap: wrap;
    margin-bottom: 2em;
}

.schoolDetails.noSchools {
    /*border: 1px dashed #d1d1d1;*/
    background-image: repeating-linear-gradient(0deg, #d1d1d1, #d1d1d1 10px, transparent 10px, transparent 20px, #d1d1d1 20px), repeating-linear-gradient(90deg, #d1d1d1, #d1d1d1 10px, transparent 10px, transparent 20px, #d1d1d1 20px), repeating-linear-gradient(180deg, #d1d1d1, #d1d1d1 10px, transparent 10px, transparent 20px, #d1d1d1 20px), repeating-linear-gradient(270deg, #d1d1d1, #d1d1d1 10px, transparent 10px, transparent 20px, #d1d1d1 20px);
    background-size: 2px 100%, 100% 2px, 2px 100%, 100% 2px;
    background-position: 0 0, 0 0, 100% 0, 0 100%;
    background-repeat: no-repeat;
    border-radius: 5px;
    margin: 2em;
    padding: 2em;
}

.schoolDetails.noSchools h4 {
    color: var(--mynpt-blue);
}

.schoolDetails h3 {
    color: white;
    opacity: 62%;
    font-size: 2em;
    font-size: 1.2em;
    letter-spacing: 0.02em;
}

.schoolDetails .sdbox {
    background-color: var(--mynpt-green);
    color: white;
    padding: 0.6em;
    text-align: left;
}

.schoolDetails .tl {
}

.schoolDetails .statRow {
    margin-bottom: 0.2em;
}

.schoolDetails .tl, .schoolDetails .br {
}

.schoolDetails .tr, .schoolDetails .bl {
}

.schoolDetails .tr {
    border-radius: 0px 1.3em 0px 0px;
}

.schoolDetails .bl {
    border-radius: 0 0 0 1.3em;
    background-color: var(--mynpt-gray);
}

.schoolDetails .br {
    background-color: var(--mynpt-blue2);
}

.termDate {
    border-right: 2px solid white;
    margin-right: 4%;
    padding-right: 3%;
    align-items: flex-start;
    display: flex;
}

.termDate:last-of-type {
    border-right: 0;
    margin-right: 0;
}

.termDate span {
}

.termDate-Title {
    margin-right: 0.5em;
    line-height: 1.2em;
}

.termDate-Cont {
    width: 2.5em;
    text-align: center;
}

.termDate-Day {
    font-size: 1.6em;
    line-height: 1em;
}

.termDate-Mon {
    text-transform: uppercase;
}

/* END SCHOOL DASH DETAILS STYLES */

a.mynpt-dashlink, a.mynpt-dashlink:visited,
a.mynpt-dashrow, a.mynpt-dashrow:visited {
    color: #333;
    text-align: left;
    text-decoration: none !important;
    border-top: 1px solid #c5c6c6;
    display: block;
    line-height: 2.6rem;
    background: url('/img/icon_chevron.svg') no-repeat;
    background-position: right center;
    background-size: 0.6em;
}

a.mynpt-dashlink.active, a.mynpt-dashlink.active:visited,
a.mynpt-dashrow.active, a.mynpt-dashrow.active:visited {
    background-image: url('/img/icon_chevron_wht.svg');
}

a.mynpt-dashlink:hover, a.mynpt-dashrow:hover {
    color: #004e9c;
}

a.mynpt-dashrow, a.mynpt-dashrow:visited {
    background: none;
}

a.mynpt-dashrow strong {
    color: #004a9a;
    display: inline-block;
    width: 30%;
    min-width: 84px;
}


label .field-label {
    display: block;
}

label .field-hint {
    font-weight: normal;
    font-size: 0.8em;
}

label .field-error {
    font-size: 0.8em;
    margin: 1em 0 0.5em 0;
    line-height: 1.5em;
    display: none;
    height: 1.5em;
    color: #B10D1E;
}

.error-box {
    border: 2px dashed #e7b8bc;
    padding: 1.3em 1.3em 0em 1.3em;
}

.errorSummary {
    border: 0.18em solid #B10D1E;
    border-radius: 0.3em;
    padding: 1em;
    margin-bottom: 1em;
}

.errorSummary h2 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

.errorSummary ul {
    padding-left: 0;
}

.errorSummary li {
    list-style: none;
}

.errorSummary a, .errorSummary a:visited {
    color: #B10D1E;
    font-weight: bold;
}

.no-gutter {
    --bs-gutter-x: 1.5rem;
}

.loader {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border-top: 5px solid var(--inputbdr);
    border-right: 5px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    position: relative;
    margin: 1em auto;
}

.mynpt-checkbox {
    width: 1.25em;
    height: 1.25em;
    margin: 0 0.15em 0 0;
}

.column-left {
    width: 15%;
}

.column-right {
    width: 85%;
}

.column-text-align {
    text-align: left;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.blur-section {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    background-color: #FFFFFF;
}

.mynpt-updatepanel {
    border-bottom: 1px dashed #333;
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
}

/* ///---- My Requests ----\\\ */

.dot {
    height: 1rem;
    width: 1rem;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
    position: relative;
    top: 0.2rem;
}

.mynpt-request {
    margin-bottom: 1rem;
}

.mynpt-request .row{
    --bs-gutter-x:0;
}

.mynpt-request-inner {
    border: 1px solid #ccc;
    padding: 1rem 2rem 0 2rem;
}

.mynpt-request-progress {
    display: block;
    height: 0.3em;
    position: relative;
    top: 3px;
}

.mynpt-request-tag {
}

.mynpt-request-progress.green, .dot.green {
    background-color: var(--mynpt-requests-green);
}

.mynpt-request-progress.amber, .dot.amber {
    background-color: var(--mynpt-requests-amber);
}

.mynpt-request-progress.red, .dot.red {
    background-color: var(--mynpt-requests-red);
}

.mynpt-request-progress.grey, .dot.grey {
    background-color: var(--mynpt-requests-grey);
}

.mynpt-request-progress.purple, .dot.purple {
    background-color: var(--mynpt-requests-purple);
}

.mynpt-request-progress.amber {
    width: 50%;
}

.mynpt-request-progress.purple {
    width: auto;
}

.mynpt-request-cont{
    margin-top: 2.5rem;
    padding-top: 2.5rem;
    border-top: 2px solid var(--mynpt-requests-filter-border-grey);
}

.filter-row {
    background-color: var(--mynpt-requests-filter-grey);
    /* --bs-gutter-x: 1.5rem; */
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y)* -1);
    /* margin-right: calc(var(--bs-gutter-x)* -.5); */
    margin-left: calc(var(--bs-gutter-x)* -.5);
    padding: 1em;
}

.filter-border-top{
    border-top: 4px solid var(--mynpt-requests-filter-border-grey);
}

.filter-row.dark{
    background-color: var(--mynpt-requests-filter-dkgrey);
}

.filter-left-column {
    width: 35% !important;
}

.filter-right-column {
    padding-left: 1rem;
    border-left: 2px solid var(--mynpt-requests-filter-border-grey);
}

.mynpt-request-step-cont{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-right: 1.4rem;
}

.mynpt-request-row.no-line .mynpt-request-step-line{
    display:none !important;
}

.mynpt-request-step-line{
    width: 2px;
    background-color: var(--mynpt-requests-background-completed);
    flex-grow: 1;
    position: absolute;
    top: 1.5rem;
    bottom: 0;
    left: 50%;
    height: 110%;
    transform: translateX(-50%);
    z-index: -1;
}

.mynpt-request-step{
    height: 3rem;
    width: 3rem;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    top: 0.2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

.mynpt-request-step img{
    width: 50%;
}

.mynpt-request-step.step-completed, .mynpt-request-step.step-inprogress{
    background-color: var(--mynpt-requests-background-completed);
}

.mynpt-request-step.step-incomplete{
    background-color: var(--mynpt-requests-background-incomplete);
}

.mynpt-request-table{
    background-color: var(--mynpt-requests-filter-grey);
    border-top: 4px solid var(--mynpt-requests-filter-dkgrey);
}

table.mynpt-request-table th, table.mynpt-request-table td{
    padding: 1rem;
}

table.mynpt-request-table tr td, table.mynpt-request-table tr th{
    border-bottom: 1px solid var(--mynpt-requests-filter-dkgrey);
}

table.mynpt-request-table tr:last-child td, table.mynpt-request-table tr:last-child th{ 
    border:0;
}

.mynpt-map{
    border:1px solid var(--mynpt-requests-filter-dkgrey);
    border-top: 4px solid var(--mynpt-requests-filter-dkgrey);
    margin-bottom: 2rem;
}

.govuk-panel.mynpt h1{
    font-weight: normal !important;
}

.mynpt-map div.govuk-form-group{margin:0;}

.mynpt-default-cases .row{
    margin-left: 0 !important;
    border-color: #b1b4b6 !important;
}

.mynpt-cases-mobilestatus{
    background-color: var(--mynpt-requests-filter-ltgrey);
    border-radius: 0.4rem;
}

.mynpt-cases-mobilestatus p{
    margin: 0;
    padding: 0.2rem 0.4rem;
}

/* ///-- End My Requests --\\\ */

/* ///-- Account Management Navigation --\\\ */
.custom-toggler-icon::before {
    content: '\25BE'; /* Downwards facing triangle */
    display: inline-block;
    font-size: 1.5rem; /* Increase the size */
    font-weight: bold; /* Make it bolder */
    transition: transform 0.3s ease;
}

.navbar-toggler.collapsed .custom-toggler-icon::before {
    transform: rotate(0deg); /* Downwards facing */
}

.navbar-toggler:not(.collapsed) .custom-toggler-icon::before {
    transform: rotate(180deg); /* Upwards facing */
}

nav.mynpt-acct-nav.navbar-light{
    padding: 0;
    margin: 0rem 0rem 3rem 0rem;
}

nav.mynpt-acct-nav.navbar-light .navbar-toggler{
    color: black !important;
    border: 0.15rem solid #333 !important;
    border-radius: 0.25em;
    padding-top: 0.7rem;
}

nav.mynpt-acct-nav.navbar-light .navbar-toggler span{
    position: relative;
    top: -0.2rem;
}

nav.mynpt-acct-nav.navbar-light button.navbar-toggler:focus{
    border: 0.15rem solid black !important;
    box-shadow: 0 0 0 .1rem #666;
}

nav.mynpt-acct-nav.navbar-light .navbar-collapse ul {
    width: 100% !important;
}

nav.mynpt-acct-nav.navbar-light .navbar-collapse ul li{
    width: 100%;
}

.MaintenanceBanner{
    background-color: #f8f4a2;
    border: 1px dashed #ccc;
    padding: 0.7em;
}

.MaintenanceBanner .govuk-phase-banner__content__tag{
    background-color: #A84300 !important;
}

/* ///-- End Account Management Navigation --\\\ */

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* desktop only styles */
@media (min-width: 580px) {
    .navbar-right {
        float: right;
        margin-left: auto;
    }

    button.btn-primary {
        margin: 0.3rem 0rem 0.3rem 0.75rem;
        padding: 0.2rem 0.5rem;
    }

    .mynpt-login-panel {
        min-width: 460px;
    }

    #login-left {
        min-width: 460px;
    }

    #login-right {
        min-width: 400px;
        max-width: 400px;
    }

    .mynpt-form {
        margin: 0 !important;
        max-width: none;
    }

    .mynpt-dashbox:not(:first-child) {
        margin-left: 1em;
    }

    .mynpt-dashbox:not(:last-child) {
        margin-right: 1em;
    }
}

/* Bootstrap Column collapser */
@media (max-width: 1398px){
    .termDate-Cont{
        width: 2rem;
    }
    .termDate-Day {
        font-size: 1.3em;
    }

    .termDate-Mon {
        font-size: 0.8em;
    }
}

/* 
Capture when screen is not wide enough for school dash stats .
We need to make some of the padding and font sizes slightly smaller. 
Change is almost un-noticable.
*/
@media (min-width: 990px) and (max-width: 1200px) {
    .termDate-Cont{
        width: 2rem;
    }
    .termDate-Day {
        font-size: 1.3em;
    }

    .termDate-Mon {
        font-size: 0.8em;
    }

    .termDate {
        margin-right: 3%;
        padding-right: 2%;
    }

    .termDate-Cont {
        width: 2em;
    }

    .termDate-Title {
        margin-right: 0.2em;
    }

    .schoolDetails h3 {
        font-size: 1.16em;
    }

    .mynpt-login-panel.mynpt-home, #login-right.mynpt-home {
        margin-left: 0;
        /* max-width: 460px; */
    }

    .schoolDetails .bl {
        border-radius: 0;
    }
}

/* styles when not enough room for two columns */
@media (max-width: 990px) {
    #login-right {
        min-width: 460px;
        max-width: 460px;
    }

    #hero h1, #hero2 h1 {
        font-size: 2em !important;
    }

    #hero h2, #hero2 h2{
        max-width: 12em;
    }

    #heroRight, #heroRight2 {
        min-width: auto;
    }

    .mynpt-adbanner {
        font-size: 0.8rem;
        justify-items: center !important;
        padding-bottom: 0rem;
    }

    .mynpt-adbanner img {
        height: 3.5rem;
        margin: 0.6rem 0;
    }

    .mynpt-adbanner p{
        font-size: 1rem !important;
        margin: 0 auto;
    }

    .mynpt-login-panel.mynpt-home {
        margin-left: 0;
    }

    .mynpt-request-inner {
        padding: 1rem 0.5rem 0 0.5rem;
    }

    .mynpt-dashbox:nth-child(3) {
        margin-left: 0em;
        width: 100%;
    }

    .mynpt-dashbox:not(:nth-child(3)) {
        margin-right: 0em;
    }
    
    .filter-view-bar{
        background-color: var(--mynpt-requests-filter-grey);
        padding: 0.6rem;
        text-align: right;
    }

    .termDate-Day {
        font-size: 1.4em;
    }

    .termDate-Mon {
        font-size: 0.9em;
    }
}

@media (min-width: 768px) {
    .mynpt-form {
        margin: 0 auto !important;
        max-width: 406px; /* added 6px for Welsh words! */
    }
}

/* styles to match 768px or bootstrap's 'sm' styles */
@media (max-width: 768px){
    .filter-right-column{ 
        border: 0; 
        padding-left: 0; 
        margin-top: 1.5rem; 
        border-top: 2px solid var(--mynpt-requests-filter-border-grey); 
        padding-top: 1rem;
    }

    .mynpt-adbanner {
        padding: 0rem 1.5rem;
    }

    .mynpt-adbanner p{
        margin: 0 0 0 0 !important;
    }

    img.logo-sml {
        width: 120px;
    }

    img.logo-sml-img{
        width: 40%;
        margin-right: 8% !important;
    }

    /* styles for collapsed acct mgmt navbar*/

    nav.mynpt-acct-nav.navbar-light .navbar-collapse ul {
        width: 100% !important;
        border: 0.1rem solid #666;
    }

    nav.mynpt-acct-nav.navbar-light .nav-pills a.nav-link.active{
        border-radius:0;
        margin: 0 !important;
    }

    nav.mynpt-acct-nav.navbar-light .navbar-collapse ul li{
        padding: 0;
    }
}


@media (max-width: 650px) {
    ul .navbar-right li a, ul.navbar-right li button {
    }
    .filter-view-bar{background-color: transparent;}
}
/* ------------------------------------ mobile only styles -------------------------------------------------------------------------------- */
@media (max-width: 40.0625em) {
    body {
        font-size: 1.1em;
    }

    .mynpt-adbanner {
        padding-bottom: 1rem;
        padding: 0.5rem 1rem 0.5rem 1rem;
    }

    .mynpt-adbanner img{
        height: 3rem;
    }

    .mynpt-adbanner button{
        align-self: center;
        margin: 0.6rem auto !important;
        width: 70%;
        text-align: center !important;
    }
    .mynpt-adbanner p {
        margin: 0;
        font-size: 0.8rem !important;
        text-align: center;
        text-shadow: 0 0 2px #fff,0 0 6px #fff,0 0 6px #fff,0 0 0px #228dff,0 0 0px #228dff,0 0 0px #228dff;
    }

    #hero a.mynpt.button, #hero2 a.mynpt.button {
        width: 100% !important;
        line-height: 2.5em;
        padding: 0.1em 1em;
    }

    #heroLeft2 {
        max-width: 70%;
        padding: 1em 1.5em;
    }

    #heroRight2{
        align-content: flex-start !important;
    }

    #login-right {
        min-width: initial;
        max-width: initial;
    }

    footer {
        max-height: 200px;
    }

    footer .container {
        justify-content: center;
    }

    footer p.me-auto, footer div.footerLinks {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    footer div.footerLinks {
        margin-top: 0 !important;
    }
    /*
    footer div.footerLinks a {
        margin: 0;
    }*/

    .noflexmobile {
        flex: none !important;
        display: block !important;
    }

    .govuk-input.mynpt {
        max-width: 100%;
        font-size: 1.2em;
    }

    .govuk-button.mynpt {
        font-size: 1.2em;
    }

    .govuk-button.mynpt.home {
        max-width: 100%;
    }

    .navbar-collapse ul {
        padding-bottom: 2em;
    }

    .navbar-collapse ul li {
        width: 80%;
    }

    .navbar-collapse li button, .navbar-collapse li a {
        margin: 0.3em 0 0em 0 !important;
    }

    img.logo.horiz {
        margin: 0 auto 1.8em;
    }

    img.logo-sml {
        width: 60%;
        margin-right:8% !important;
    }

    img.logo-sml-img{
        width: 60%;
        margin-right: 8% !important;
        max-width:120px;
    }

    .mynpt-form {
        width: 100%;
        max-width: none;
        margin: 0 auto;
    }

    .mynpt-adbanner button {
        margin-top: 1rem;
    }

    .mynpt-login-panel {
        max-width: 100%;
    }

    .govuk-button.mynpt.no-left-radius, .govuk-input.mynpt.no-left-radius {
        border-radius: 0em 0em 0.3em 0.3em;
    }

    .govuk-button.mynpt.no-right-radius, .govuk-input.mynpt.no-right-radius {
        border-radius: 0.3em 0.3em 0em 0em;
    }

    .govuk-input.mynpt.mynpt-compound {
        width: 100%;
        border-right: 0.18em solid var(--inputbdr);
        border-bottom: 0;
    }

    .govuk-button.mynpt.mynpt-compound {
        margin-bottom: 0;
        line-height: 1.85em;
        padding: 0.2em 0.7em;
        font-size: 1em;
    }

    #mynpt-mgmt-nav {
        margin-bottom: 2rem;
        border-bottom: 1px solid #ccc;
    }

    #mynpt-mgmt-cont {
        margin-bottom: 2rem;
    }

    #btnViewAllRequests {
        width: 94%;
        margin: 1rem 3% 1rem 3%;
    }

    .schoolDetails .bl {
        border-radius: 0;
    }

    .schoolDetails .tr {
        border-radius: 0;
    }

    .mynpt-pagination span{
        width: 100%;
        display: block;
        font-weight: bold;
        text-align: center;
        border: 0;
    }

    .mynpt-request-step.step-completed::after, .mynpt-request-step.step-inprogress::after{
        height: calc(100% + 4rem);
    }

    td.mynpt-status-cell.text-nowrap{
        white-space: normal !important; /* fix for welsh statuses */
    }

    .mynpt-hide-mobile{ display: none; }
    .mynpt-show-mobile{ display: block; }

    footer div.footerLinks a{
        margin-bottom: 1rem;
    }

    h3.mynpt-acct-hdr{
        font-size: 1.6rem !important;
        display: flex;
        align-items: center;
        font-size: 1.6rem;
    }

    h3.mynpt-acct-hdr:after{
        content: "";
        flex-grow: 1;
        height: 1px;
        background-color: var(--mynpt-green);
        margin-left: 10px;
    }
}