/* Base scale */
html { font-size: 16px; }


/* Make everything a bit smaller on phones */
@media (max-width: 480px) {
    html { font-size: 14px; } /* (Optional) 14–15px works well */
}

/* Very small phones */
@media (max-width: 360px) {
    html { font-size: 12px; }
}

:root { 
    --app-primary-blue: #D0EAF5;
    --app-black: #161925;
    --Primary-Black: #161925;
    --app-secondary-gray: #86878E;
    --app-magenta: #9E4787;
    ----Primary_Magenta: #9E4787;
    --app-surface-white: #FFFFFF;
    --app-surface-yellow: #fffbd4;
    --app-tertiary-grey: #F8F8F8;
    --app-surface-dark-blue: #103340;
    --app-secondary-blue: #F5FCFF;
    --app-dark-blue: #295779CF;
    --brand-green: #52B186; /* replace with your green */
    --primary-green: #52B186; /* replace with your green */
    --brand-white: #ffffff; /* replace with your green */
}
.section-with-decor {
    position: relative;
    overflow: hidden;            /* hides the off-screen start */
}

.section-with-decor::before {
    content: "";
    position: absolute;
    top: 120px;                   /* adjust vertical placement */
    left: -150px;                 /* start off-screen to the left */
    width: 1023px;                /* extend beyond right edge */
    height: 641px;               /* path band height */
    z-index: 0;                  /* under text */
    pointer-events: none;
    flex-shrink: 0;

    background: no-repeat left center / contain url("img/path.svg");
}

.section-with-decor > * {
    position: relative;
    z-index: 1;                  /* ensure content above the SVG */
}

.section-with-decor-right {
    position: relative;
    overflow: hidden;
}

/* Right-half background that always tracks the viewport width */
.section-with-decor-right::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;                 /* match section height */
    right: 0;
    left: 50vw;                /* fallback for older browsers */
    left: 50dvw;               /* dynamic viewport width (updates on resize/UI changes) */
    z-index: 0;
    pointer-events: none;

    background-image: url("img/path2.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% 100% !important;  /* force complete fill */
}

/* Keep content above the background */
.section-with-decor-right > * {
    position: relative;
    z-index: 1;
}


.blob {
    position: absolute;
    top: 0;
    left: 0;
    fill: #023F92;
    width: 50vmax;
    z-index: -1;
    animation: move 10s ease-in-out infinite;
    transform-origin: 50% 50%;
}

@keyframes move {
    0%   { transform: scale(1)   translate(10px, -30px); }
    38%  { transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg); }
    40%  { transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg); }
    78%  { transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg); }
    80%  { transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg); }
    100% { transform: scale(1)   translate(10px, -30px); }
}



.text-field-pill {
    display: flex;
    align-items: center;
    border: 1px solid #86878E;
    justify-content: space-evenly;
    padding: 15px 20px;
    margin: 0 0;
    border-radius: 100px;
}

/* Filled buttons */
.pill-button .mud-button-root.mud-button-filled {
    background-color: var(--brand-green) !important;
}

.pill-button .mud-button-root.mud-button-filled:hover {
    filter: brightness(0.95);
}

/* Outlined buttons */
.pill-button .mud-button-root.mud-button-outlined {
    border-color: var(--brand-green) !important;
    color: #000000 !important;
}

.pill-button .mud-button-root {
    text-transform: none !important;
}

/* Text buttons */
.pill-button .mud-button-root.mud-button-text {
}

/* Apply to all MudButtons */
.pill-button .mud-button-root {
    border-radius: 100px !important; /* pill shape */
    box-shadow: 2px 2px 8px rgba(0,0,0,0.20) !important; /* x=2, y=2, blur=10 */
    color: #ffffff !important;
}

/* Optional: slightly stronger shadow on hover/focus */
.pill-button .mud-button-root:hover,
.pill-button .mud-button-root:focus-visible {
    box-shadow: 3px 3px 12px rgba(0,0,0,0.25) !important;
}


/* Filled buttons */
.pill-button-magenta .mud-button-root.mud-button-filled {
    background-color: var(--app-magenta) !important;
}





a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

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

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

@font-face {
    font-family: 'UKNumberPlate';
    src: url('fonts/UKNumberPlate.woff2') format('woff2'), /* Use the best format available */ url('fonts/UKNumberPlate.woff') format('woff'), /* Fallback to .woff */ url('fonts/UKNumberPlate.ttf') format('truetype'); /* Additional fallback */
    font-weight: normal;
    font-style: normal;
}

@media (min-width: 360px) and (max-width: 479px) {
    .date-component {
        font-size: smaller !important;
    }
}

.vin input {
    color: var(--Surface_Dark-blue, #103340);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.72px;
    text-transform: uppercase;
    
    text-align: center;
}

@media (min-width: 360px) and (max-width: 479px) {
    .vin input {
        font-size: calc(20px + .5vw) !important
    }
}

.vin-match {
    background-color: lightgreen;
}

.vin-mismatch {
    background-color: lightpink;
}


.vrm input {
    color: var(--app-black) !important;
    text-align: center !important;
    font-size: 1.5rem !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
    letter-spacing: -0.72px !important;
    text-transform: uppercase !important;
    font-family: 'UKNumberPlate', serif !important;
}

.AllClear {
    padding: 2px 6px 2px 6px;
    color: var(--mud-palette-success-text);
    background-color: var(--mud-palette-success-darken);
    font-weight: 400;
    border: 2px solid #46a529;
    border-radius: 4px;
    font-size: 1.3rem;
}

.hero-unit {
    margin-top: 0px;
    padding: 0px 0 10px 0;
    margin-bottom: 10px;
}

.GlanceLeft {
    border-radius: 10px 0 0 10px;
    text-align: left;
    flex: 0 0 60%; /* Flex-grow, flex-shrink, and flex-basis to 60% */

}

.GlanceRight {
    border-radius: 0 10px 10px 0;
    text-align: left;
    flex: 0 0 40%; /* Flex-grow, flex-shrink, and flex-basis to 60% */
}

.GlanceCommon {
    flex: 100%;
    padding: 0 20px;
    align-items: center;
    background-color: var(--mud-palette-primary-darken);
    color: var(--mud-palette-primary-text);
    height: 70px;
    font-size: 1rem !important;
}

.GlanceAllClear {
    background-color: var(--mud-palette-success-darken);
    text: var(--mud-palette-success-text);
    font-weight: 400;
}

.GlanceAlert {
    background-color: var(--mud-palette-error-darken);
    text: var(--mud-palette-error-text);
}

.GlanceOutOfPackage {
    border: 4px solid var(--mud-palette-error-darken);
    background-color: var(--mud-palette-error-lighten);
    text: var(--mud-palette-error-text);
    text-align: center;
    font-family: var(--mud-typography-subtitle1-family);
    font-size: var(--mud-typography-subtitle1-size);
    font-weight: var(--mud-typography-subtitle1-weight);
}

#glance {
    display: flex;
}

#glance > * {
    display: flex;
}

.shrink { flex: 0 0 auto; align-self: flex-start; width: fit-content; }


.sReg {
    /*we want it just wide enough for the text*/
    display: inline-block;
    border-radius: 5px;

    color: var(--Primary_Black, #161925);
    font-size: 3.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 2px;


    background-color: #FFFF00;
    margin: 0;
    padding: 8px 12px;
    text-align: center;
    /*font-size: calc(30px + 4vw);*/
    font-family: 'UKNumberPlate', serif !important;
}

.SectionHeader {
    /*background-color: #e3e3e3;*/
    text-align: left;
    color: var(--Primary_Black);
}

.SectionHeaderAlert {
    composes: SectionHeader;
    background-color: #b75a5a !important;
}

@media (min-width: 360px) and (max-width: 479px) {
    .SectionMainContent {
        padding: 10px 10px !important;
        margin-bottom: 20px !important;
    }
}

@media (min-width: 360px) and (max-width: 479px) {
    .mud-expand-panel .mud-expand-panel-header {
        padding: 4px 6px !important;
    }
}

.SectionMainContent {
    padding: 20px 20px;
    margin-bottom: 40px;
}

#report .DataItem {
    color: var(--Primary_Black, #161925);
    font-size: 1.3rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.54px;
}

#report label {
    color: var(--Primary_Black, #161925);
    font-size: 1.3rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.54px;    
}

#report h2 {
    font-weight: 700;
    margin-top: 0px;
    /*color: #4a4a4a;*/
    line-height: 42px;
    padding: 8px;
    margin-bottom: 0px;
    font-size: 1.5rem;
}

#report .report-inner-surface {
    background-color: var(--app-surface-white); 
    padding: 15px; 
    border-radius: 10px;
}

#report .report-inner-surface-grey {
    background-color: var(--app-tertiary-grey);  
    padding: 15px; 
    border-radius: 10px;
}
#report .report-inner-surface-magenta {
    background-color: var(--app-magenta);  
    padding: 15px; 
    border-radius: 10px;
}


/* CO2 */
.Co2Container {
    width: 100%;
    height: 450px;
}

.Co2Bar {
}

.Co2BarOn {
    background-color: #e3e3e3;
    width: 100%;
    height: 28px;
    float: left;
    margin-bottom: 5px;
}

.co2all {
    height: 28px;
    text-align: right;
    border-radius: 0 17px 17px 0px;
    padding-top: 3px;
    padding-right: 3px;
    float: left;
    clear: left;
    margin-bottom: 5px;
}

.ActualCo2 {
    float: right;
    height: 28px;
    text-align: left;
    border-radius: 17px 0 0 17px;
    padding-top: 3px;
    padding-left: 3px;
    margin-bottom: 5px;
    color: #fff;
    line-height: 22px;
}

.Co2A {
    background-color: #6c1f7d;
    width: 10%;
}

.Co2B {
    background-color: #0065b3;
    width: 15%;
}

.Co2C {
    background-color: #51c7ab;
    width: 20%;
}

.Co2D {
    background-color: #73bf45;
    width: 25%;
}

.Co2E {
    background-color: #f9ed1b;
    width: 30%;
}

.Co2F {
    background-color: #f7941d;
    width: 35%;
}

.Co2G {
    background-color: #f7631d;
    width: 40%;
}

.Co2H {
    background-color: #f7451d;
    width: 45%;
}

.Co2I {
    background-color: #f22907;
    width: 50%;
}

.Co2J {
    background-color: #d5523c;
    width: 55%;
}

.Co2K {
    background-color: #9f493a;
    width: 60%;
}

.Co2L {
    background-color: #552e27;
    width: 65%;
}

.Co2M {
    background-color: #000;
    width: 70%;
}


.ActualA {
    background-color: #6c1f7d;
    width: 60%;
}

.ActualB {
    background-color: #0065b3;
    width: 55%;
}

.ActualC {
    background-color: #51c7ab;
    width: 50%;
}

.ActualD {
    background-color: #73bf45;
    width: 45%;
}

.ActualE {
    background-color: #f9ed1b;
    width: 40%;
}

.ActualF {
    background-color: #f7941d;
    width: 35%;
}

.ActualG {
    background-color: #f7631d;
    width: 30%;
}

.ActualH {
    background-color: #f7451d;
    width: 30%;
}

.ActualI {
    background-color: #f22907;
    width: 30%;
}

.ActualJ {
    background-color: #d5523c;
    width: 30%;
}

.ActualK {
    background-color: #9f493a;
    width: 30%;
}

.ActualL {
    background-color: #552e27;
    width: 30%;
}

.ActualM {
    background-color: #000;
    width: 25%;
}

.Co2MajorMark {
    padding: 0px;
    background-color: #fff;
    min-width: 60px;
    width: 60px; /* Prevent shrink below intended size */
    height: 80px;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0; /* Keep width in flex rows on narrow screens */
}

.Co2MajorMarkLetter {
    font-size: 1.875rem;
    font-weight: 600;
    color: #fff;
    line-height: 76px;
}

.LetterR {
    font-weight: 600;
    line-height: 22px;
    background-color: #fff;
    border-radius: 16px;
    font-size: 1rem;
    width: 22px;
    text-align: center;
    float: left;
    color: #000;
    margin-right: 5px;
}

.Letter {
    font-weight: 600;
    line-height: 22px;
    background-color: #fff;
    border-radius: 16px;
    font-size: 1rem;
    width: 22px;
    text-align: center;
    float: right;
}


/* Running Costs*/

.Co2Number {
    font-size: 1.42rem;
    font-weight: 600;
    white-space: nowrap;
}


.mot-accordian-header {
    border-bottom: 1px solid var(--app-magenta);
    padding: 25px 12px !important;
    background: transparent !important;
    /*color: var(--vdi-accordian-mot-header-text);*/
    cursor: pointer;
    font-size: 1rem;
    transition: all .1s;
    position: relative;
    /* box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.15); */
    overflow: hidden;
    height: 62px;
}

.mot-accordian-body {
    padding: 0 !important;
    background: var(--app-surface-white) !important;
    /*color: var(--vdi-accordian-mot-header-text);*/
    font-size: 1rem !important;
    transition: all .1s !important;
    letter-spacing: -0.48px !important;
    line-height: 50% !important;
    position: relative;
    /* box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.15); */
    overflow: hidden;
}

.equipment-accordian-header {
    padding: 25px 12px !important;
    color: var(--mud-palette-text-secondary) !important;
    background: var(--mud-palette-background-grey) !important;
    cursor: pointer;
    font-size: 1rem;
    transition: all .3s;
    position: relative;
    /* box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.15); */
    overflow: hidden;
    height: 62px;
}

@media (min-width: 360px) and (max-width: 510px) {
    .mot-accordian-header {
        padding: 16px 4px !important;
        font-size: 0.8125rem !important;
    }
}

@media (min-width: 360px) and (max-width: 510px) {
    .mot-header-accordian-state-passed, .mot-header-accordian-state-failed {
        width: 66px !important;
        font-size: .875rem !important;
        padding: 3px;
        left: 13px;
    }
}

.mot-header-accordian-state-passed {
    display: inline-block;
    align-content: center;
    /*min-width: 160px;*/
    background-color: var(--mud-palette-success-darken);
    color: var(--mud-palette-success-text);
    border-radius: 8px;
    width: 75%;
    height: 32px;
    font-size: 1.3rem;
    text-align: center;
    padding: 3px;
    margin: auto;
}

.mot-header-accordian-state-failed {
    display: inline-block;
    align-content: center;
    background-color: var(--mud-palette-error-darken);
    color: var(--mud-palette-error-text);
    border-radius: 8px;
    width: 75%;
    height: 32px;
    font-size: 1.3rem;
    text-align: center;
    padding: 3px;
    margin: auto;
}

.MOTCommon {
    max-width: 70%;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 1rem;
    display: flex;
    justify-content: center;
}

.MOTFailed {
    background-color: var(--mud-palette-error);
    color: var(--app-surface-white);
}

.MOTPass {
    background-color: var(--mud-palette-success);
    color: var(--app-surface-white);
}

.MOTCurrentStatus {
    font-weight: 300;
    font-size: 1rem;
    padding: 1px 10px;
    color: #fff;
}

.miniplate {
    float: left;
    padding: 4px;
    background-color: #ebb72b;
    color: #000;
    width: 140px;
    font-family: 'UKNumberPlate', serif;
    font-size: 1.375rem;
    font-weight: 500;
    text-align: center;
    border-radius: 4px;
    margin-right: 12px;
}

.miniplate-bigger {
    float: left;
    padding: 30px 30px 20px 30px;
    background-color: #FFFF00;
    color: #000;
    /*width: 200px;*/
    font-family: 'UKNumberPlate', serif;
    font-size: 3.125rem;
    font-weight: 500;
    text-align: center;
    border-radius: 10px;
}

/*SVG*/
.circ {
    opacity: 0;
    stroke-dasharray: 130;
    stroke-dashoffset: 130;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

.tick {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    -webkit-transition: stroke-dashoffset 1s 0.5s ease-out;
    -moz-transition: stroke-dashoffset 1s 0.5s ease-out;
    -ms-transition: stroke-dashoffset 1s 0.5s ease-out;
    -o-transition: stroke-dashoffset 1s 0.5s ease-out;
    transition: stroke-dashoffset 1s 0.5s ease-out;
}

.drawn + svg .path {
    opacity: 1;
    stroke-dashoffset: 0;
}

.sgv22 {
    width: 50%;
    max-width: 50px;
    margin: 0 auto;
}

@media print {
    /*.report-content, canvas, .mud-chart-serie {*/
    /*    -webkit-print-color-adjust: exact !important;*/
    /*    print-color-adjust: exact !important;*/
    /*},*/
    .no-print, .no-print * {
        display: none !important;
        visibility: hidden !important;
    },
    /*.print-keep-together, .print-keep-together * {*/
    /*    break-inside: avoid !important;*/
    /*    !* For older browser compatibility *!*/
    /*    page-break-inside: avoid !important;*/
    /*}*/
}

@media screen {
    .no-screen, .no-screen * {
        display: none !important;
    }
}

.HistoryIssues {
    background-color: #be5757;
    padding: 2px 4px;
    color: #fff;
    font-size: .75rem;
    width: 22px;
    text-align: center;
    min-width: 22px;
    float: left;
    margin-right: 5px;
}

.IssueLegendText {
    margin-left: 5px;
    color: #000;
}

.slogan {
    font-size: 3.125rem !important;
    line-height: 120%;
    letter-spacing: -1.5px;
    font-weight: 700 !important;
    color: var(--mud-palette-text-primary) !important;
}

.mud-layout {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

.footer {
    z-index: calc(var(--mud-zindex-drawer) - 1);
    color: var(--app-surface-white);
    background-color: var(--app-surface-dark-blue);
    transition: margin 225ms cubic-bezier(0,0,.2,1) 0ms,width 225ms cubic-bezier(0,0,.2,1) 0ms;
    font-size: .875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.42px;    
}

.hero-navbar-underline .mud-nav-link .mud-nav-link-text {
    white-space: nowrap;
    border-bottom: 2px solid #dbab45;
}

.hero-section-top {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--mud-palette-background-grey-lighten);
    padding: 10px 2px 0 0;
}

.hero-section {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--mud-palette-background-grey-lighten);
    padding: 30px 0;
}

@media (min-width: 768px) {
    .hero-section {
        height: 500px;
        padding: 30px 0;
    }

    .hero-section-top {
        padding: 10px 10px 0 0;
    }
}


.extra-small-icon.mud-icon-button { /* Target the MudIconButton specifically */
    color: var(--mud-palette-primary);
    margin-top: -6px;
    margin-left: -6px;
    padding: 4px; /* Adjust padding to make the button itself smaller */
}

.extra-small-icon .mud-icon-root { /* Target the icon within the button */
    font-size: 1rem; /* Adjust the icon size directly. MudBlazor uses font-size for SVG icons too */
    width: 16px;     /* Explicitly set width */
    height: 16px;    /* Explicitly set height */
}

/*

STRIPE embedded styles (StripeEmbeddedCheckoutComponent)

*/

.stripe-checkout-container {
    margin: 0 auto;
    padding: 20px;
    font-family: Poppins, Noto Serif, Arial, Roboto, sans-serif;

    /* For very small screens (360px and up) */
    width: 100%;
    max-width: 360px;
}

/* For larger screens */
@media (min-width: 500px) {
    .stripe-checkout-container {
        width: 500px;
        max-width: min(500px, 100vh);
        max-height: 100vh;
    }
}

.checkout-header {
    color: var(--Primary_Black, #161925);
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.9px;
    text-align: center;
}

.checkout-sub-header {
    color: var(--Primary_Black, #161925);

    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.48px;
    text-align: center;
    margin-bottom: 30px;
}

.checkout-header h3 {
    color: #32325d;
    font-weight: 400;
    margin-bottom: 8px;
}

.loading-container {
    text-align: center;
    padding: 40px 20px;
}

.loading-container p {
    margin-top: 16px;
    color: #6b7280;
    font-size: .875rem;
}

.checkout-element {
    min-height: 400px;
}

.alert {
    padding: 12px 16px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
}

body {
    /*margin: 0;*/
    /*font-family: 'Prompt', sans-serif;*/
    /*color: white;*/
    /*background: #202731;*/
    overflow-x: hidden;
}

section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 400px;
    padding-top: 100px;
}


/* Curved bg with plain CSS */
.curve {
    position: absolute;
    height: 250px;
    width: 100%;
    bottom: 0;
    text-align: center;
}

.curve::before {
    content: '';
    display: block;
    position: absolute;
    border-radius: 100% 50%;
    width: 55%;
    height: 100%;
    transform: translate(85%, 60%);
    background-color: hsl(216, 21%, 16%);
}

.curve::after {
    content: '';
    display: block;
    position: absolute;
    border-radius: 100% 50%;
    width: 55%;
    height: 100%;
    background-color: #3c31dd;
    transform: translate(-4%, 40%);
    z-index: -1;
}

/* Bubble bg with plain CSS */
.bubble::after {
    content: '';
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%;
    position: absolute;
    bottom: 0;
    z-index: -1;
    width: 100%;
    background-color: #0f0f10;
    height: 85%;
}

/* Curved bg with SVG via https://www.shapedivider.app/ */
.wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.wave svg {
    position: relative;
    display: block;
    width: calc(103% + 1.3px);
    height: 262px;
}

.wave .shape-fill {
    fill: hsl(240, 3%, 6%);
}

/* SVG background image via https://haikei.app/ */
.spacer {
    aspect-ratio: 960/300;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.layer1 {
    background-image: url('./img/layer1.svg');
}
.layer2 {
    background-image: url('./img/layer2.svg');
}

.flip {
    transform: rotate(180deg);
}

/* Blobs SVG background image via https://haikei.app/ */
.blob-motion {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transform: none;
    z-index: -1;
    pointer-events: none;
}

.blob-content {
    position: relative;
    z-index: auto;
}

.blobs {
    width: 100%;
    background: url('./img/blobs/blob-teriarty-blue.svg') white  no-repeat bottom / cover;
}


/* Scoped 100px border-radius for Mud inputs */
.rounded-100-inputs .mud-input-root,
.rounded-100-inputs .mud-input-control {
    border-radius: 100px !important;
}

/* Outlined variant border (fieldset) */
.rounded-100-inputs .mud-input-root.mud-input-outlined fieldset.mud-input-outlined-border,
.rounded-100-inputs .mud-input-control.mud-input-outlined fieldset.mud-input-outlined-border {
    border-radius: 100px !important;
}

/* Ensure inner slot respects radius */
.rounded-100-inputs .mud-input-root .mud-input-slot,
.rounded-100-inputs .mud-input-control .mud-input-slot {
    border-radius: 100px !important;
    overflow: hidden !important;
}


.form-horizontal {
    max-width: 425px;
    /*display: flex;*/
    /*flex-direction: row;*/
    /*align-items: stretch;*/
    /*justify-content: space-between;*/
    width: 100%;
}



/* Disable ripple and hover visuals on the password adornment icon */
.auth-page .no-adorn-effects .mud-input-adornment .mud-icon-button .mud-ripple {
    display: none !important;
}

/* Remove any hover/active background or shadow for the adornment icon */
.auth-page .no-adorn-effects .mud-input-adornment .mud-icon-button,
.auth-page .no-adorn-effects .mud-input-adornment .mud-icon-button,
.auth-page .no-adorn-effects .mud-input-adornment .mud-icon-button:hover,
.auth-page .no-adorn-effects .mud-input-adornment .mud-icon-button:focus {
    box-shadow: none !important;
    background: transparent !important;
}

.auth-page .no-adorn-effects .mud-button-root {
    color: var(--app-secondary-gray) !important;
}

/* Always render link text in dark blue */
.auth-page a,
.auth-page a:visited,
.auth-page a:active,
.auth-page .mud-link,
.auth-page .mud-link:visited,
.auth-page .mud-link:hover,
.auth-page .mud-link:active {
    /*color: red !important;*/
    color: var(--app-surface-dark-blue, #000) !important;
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: -0.42px;
}

/* Ensure icons inside links inherit the same color */
.auth-page .mud-link .mud-icon-root,
.auth-page a .mud-icon-root {
    color: inherit !important;
}


.top-bar .mud-button-root {
    padding: 10px 20px !important;
}


/*GRID FONT RESIZING*/
/* Establish a container query context around the grid */
.grid-wrap { container-type: inline-size; }

/* Baseline tweaks (optional) */
.grid-wrap .mud-table,
.grid-wrap .mud-table-cell,
.grid-wrap .mud-typography,
.grid-wrap .mud-text,
.grid-wrap .mud-button-root,
.grid-wrap .mud-chip {
    font-size: 0.95rem;
}

/* As the container gets narrower, progressively tighten typography and padding */
@container (max-width: 1100px) {
    .grid-wrap .mud-table,
    .grid-wrap .mud-table-cell,
    .grid-wrap .mud-typography,
    .grid-wrap .mud-text { font-size: 0.9rem; }
    .grid-wrap .mud-table-cell { padding: 6px 10px; }
}

@container (max-width: 900px) {
    .grid-wrap .mud-table,
    .grid-wrap .mud-table-cell,
    .grid-wrap .mud-typography,
    .grid-wrap .mud-text { font-size: 0.85rem; }
    .grid-wrap .mud-table-cell { padding: 6px 8px; }
}

@container (max-width: 750px) {
    .grid-wrap .mud-table,
    .grid-wrap .mud-table-cell,
    .grid-wrap .mud-typography,
    .grid-wrap .mud-text { font-size: 0.8rem; }
    .grid-wrap .mud-table-cell { padding: 4px 6px; }
}

/* Tighten header cells similarly */
@container (max-width: 900px) {
    .grid-wrap .mud-table-head .mud-table-cell,
    .grid-wrap .mud-datagrid-header .mud-table-cell { font-size: 0.85rem; padding: 6px 8px; }
}
/* Responsive two-per-row layout for LabelAndData groups */
.pairs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px; /* row gap | column gap */
    align-items: stretch;
}

/* Each rendered LabelAndData root (MudStack with class label-and-data) */
.pairs > .label-and-data {
    box-sizing: border-box;
    flex: 1 1 420px; /* prefer ~420px per item */
    max-width: 50%;  /* never exceed half the row to cap at two columns */
    min-width: 260px; /* avoid over-squishing on very narrow widths */
}


/* Makes the visual shape perfectly circular and applies an alpha-aware shadow */
.logo-circle-shadow {
    display: inline-block;        /* ensures consistent rendering across browsers */
    border-radius: 50%;           /* keeps the element box circular */
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}

/* Optional: slightly softer, wider shadow */
.logo-circle-shadow.soft {
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
}

/* Optional: add a subtle outline if your logo sits on dark backgrounds */
.logo-circle-shadow.with-outline {
    /* stack an ultra-tight light outline before the main shadow */
    filter:
            drop-shadow(0 0 1px rgba(255,255,255,0.6))
            drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}


/* CBD timelines: shared styles applied only when you opt-in with class="cbd-timeline" */
.cbd-timeline .date {
    color: var(--Primary_Black, #161925);
    font-size: 1.125rem !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal  !important;
}

.cbd-timeline .date-ago {
    color: var(--Primary_Black, #161925);
    font-size: .875rem !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

/* Remove the triangular pointer regardless of where MudBlazor attaches it */
.cbd-timeline .mud-timeline-item-content::before,
.cbd-timeline .mud-timeline-item-content::after,
.cbd-timeline .mud-timeline-item-content > .mud-paper::before,
.cbd-timeline .mud-timeline-item-content > .mud-paper::after,
.cbd-timeline .mud-timeline-item-content > .mud-card::before,
.cbd-timeline .mud-timeline-item-content > .mud-card::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Remove any shadow/drop-shadow from the dot, its icon/svg, and the line */
.cbd-timeline .mud-timeline-item-dot,
.cbd-timeline .mud-timeline-dot,               /* variant for other MudBlazor versions */
.cbd-timeline .mud-timeline-item .mud-icon-root,
.cbd-timeline .mud-timeline-item svg,
.cbd-timeline .mud-timeline-line {
    box-shadow: none !important;
    filter: none !important;
}

/* Defensive: ensure anything inside the dot container also has no shadow */
.cbd-timeline .mud-timeline-item-dot *,
.cbd-timeline .mud-timeline-dot * {
    box-shadow: none !important;
    filter: none !important;
}

.not-included-in-package {
    display: flex;
    padding: 8px !important;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    border-radius: 10px;
    border: 1px solid var(--app-dark-blue, #9E4787);
    background: var(--app-tertiary-grey, #FFF);

    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.48px;
}

/* Utility classes to apply MudBlazor Body typography on plain elements */
.typo-body1 {
    font-family: var(--mud-typography-body1-family);
    font-size: var(--mud-typography-body1-size);
    font-weight: var(--mud-typography-body1-weight);
    letter-spacing: var(--mud-typography-body1-letter-spacing);
    line-height: var(--mud-typography-body1-lineheight, var(--mud-typography-body1-line-height));
    color: var(--mud-palette-text-primary);
}

.typo-body2 {
    font-family: var(--mud-typography-body2-family);
    font-size: var(--mud-typography-body2-size);
    font-weight: var(--mud-typography-body2-weight);
    letter-spacing: var(--mud-typography-body2-letter-spacing);
    line-height: var(--mud-typography-body2-lineheight, var(--mud-typography-body2-line-height));
    color: var(--mud-palette-text-primary);
}

.cbd-big-loader .mud-progress-circular{ width:196px !important; height:196px !important; }
.cbd-big-loader .mud-progress-circular svg{ width:196px !important; height:196px !important; }


@media (min-width: 1280px) {
    .px-lg-30 {
        padding-left: 120px !important;
        padding-right: 120px !important;
    }
}

/*@media (min-width: 1280px) {*/
/*    .px-lg-30 {*/
/*        padding-left: 10px !important;*/
/*        padding-right: 0 !important;*/
/*    }*/
/*}*/

.check-details-warning {
    border-radius: 10px;
    background: var(--Primary_Magenta, #9E4787);
    color: var(--brand-white);
    display: flex;
    padding: 15px 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    align-self: stretch;
    margin-top: 30px;
}

.check-details-warning a,
.content a:visited {
    color: var(--app-surface-white);
    text-decoration: underline;
}

.check-details-warning a:hover,
.check-details-warning a:focus {
    color: var(--app-secondary-blue); /* adjust if you prefer the same magenta */
    text-decoration: underline;
}

.report-skel-hero { background-color: var(--app-secondary-blue, #eaf6fb); }
.report-skel-alert { background-color: #8d3a8f22; } /* light purple tint */

/* Make Skeletons a bit softer */
.mud-skeleton { border-radius: 8px; }