@import '_content/Incolink.Components/Incolink.Components.rjwi76wdp9.bundle.scp.css';
@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.25o87uqmvr.bundle.scp.css';

/* /Components/Layout/AccountLayout.razor.rz.scp.css */
.navbar-styles[b-sdm0d6lzku] {
    background-color: var(--surface-action, #055F9F); /*Banner - Deep_Blue */
}

/* These error classes are for styling the BoundaryError component - this is just the default project styling at the moment */
#blazor-error-ui[b-sdm0d6lzku] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-sdm0d6lzku] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/MainInteractiveLayout.razor.rz.scp.css */
/* These error classes are for styling the error message that display for unhandled errors on interactive render mode pages
   Shows an light yellow centred modal.  It's a slight variation on the default Blazor project styling which has it showing at the bottom
   of a page.
   It uses a similar styling to that used on Error page and MainStaticLayout.razor.
*/

#blazor-error-ui[b-hnx0dnnr4m] {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050; /* Same as Bootstrap modal */
    background-color: #fffbe6; /* Light yellow modal feel */
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    max-width: 500px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

#blazor-error-ui .dismiss[b-hnx0dnnr4m] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* CSS for NavMenu component - to be used on pages where the user is logged in.
    
   Consider moving these to main.css because other sites will probably need similar navigation styling and you can't use CSS variables associated with :root because of
   CSS isolation... so while I've kept the var usage, it will always use the fallback value)

   ::deep is required for styling of child components
*/


/* GENERAL MENU FORMATTING */

.navbar-styles[b-u5p7jppwny] {
    background-color: var(--surface-action, #055F9F); /*Banner - Deep_Blue*/
}

[b-u5p7jppwny] .nav-link {
    color: var(--text-on-action, #FFF) ; /*Override custom bootstrap theme to use all white instead of mix of colours*/
    font-size: 1.25rem;
    line-height: 0.75rem; /* This prevents too much whitespace appearing under the menu text, might be better ways but this works */
}


/* ACTIVE MENU ITEM FORMATTING */

[b-u5p7jppwny] .nav-link.active {
    /* Erik liked having more orange on our site to match our brand but our designer Vivek thought using Orange to show which menu item was active 
    could be hard to see against the blue - the compromise is to leave the menu items as white but put an orange underline
    */
    /*color: var(--text-action-2, #F47D20) !important;*/ /*Override the nav-link colour to show selected nav item */
    font-weight: 700; /* One way to show which menu item is selected */
}

[b-u5p7jppwny] .navbar-nav .nav-link.active {
    position: relative;
}

/* This styling creates the orange underline for the selected desktop menu item */
[b-u5p7jppwny] .navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 4px; /* Thickness of the marker */
    background-color: var(--text-action-2, #F47D20); /* The marker color */
}

/* Hide "active menu item" orange desktop underline when showing mobile version - mobile version does it via the HR styling below */
@media (max-width: 767.98px) {
    [b-u5p7jppwny] .navbar-nav .nav-link.active::after {
        display: none; 
    }
}

/* Show "active menu item" orange underline for mobile menu by styling HR element below selected item */
.nav-link.active + hr[b-u5p7jppwny] {
    height: 4px; /* Thickness of the underline */
    background-color: var(--text-action-2, #F47D20); /* Orange color */
    border: none;
}


/* PROFILE FORMATTING */

[b-u5p7jppwny] .profile-circle {
    /*Typography*/
    color: var(--text-headings, #022F4F) !important;
    text-align: center;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    /*Layout*/
    display: flex;
    width: 2.5rem; /* Needs to be rems otherwise if you change to very large font size in Chrome the intials will be bigger than the circle they are in */
    height: 2.5rem; /* Needs to be rems otherwise if you change to very large font size in Chrome the intials will be bigger than the circle they are in */
    padding: 7px 6px 6px 6px; 
    /*Style*/
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* Turns the border into a circle */
    border: 0.125rem solid var(--border-primary, #D0D1D4); /* Using rems for the grey border width makes it look better when using very large font size */
    background: var(--surface-primary, #FFF);
}

.profile-display-name[b-u5p7jppwny] {
    color: var(--text-on-action, #FFF);
    font-family: Tofino;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.1rem; /* Helps with edge case when screen size is shrunk to just above medium - the name has a large gap without this */
}

.profile-union-name[b-u5p7jppwny] {
    color: var(--text-on-action, #FFF);
    font-family: Tofino;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.profile-impersonation-details[b-u5p7jppwny] {
    color: var(--text-on-action, #FFF);
    font-family: Tofino;
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 500;
    line-height: normal;
}
/* /Components/Pages/Account/ChangePassword.razor.rz.scp.css */
.password-requirements[b-u1tr2c4kq9] {
    list-style: none;
    padding: 0;
}

.password-requirements li[b-u1tr2c4kq9] {
    color: var( --text-body, #444955);
    display: flex;
    align-items: center;
}

.password-requirements li img[b-u1tr2c4kq9] {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

.password-requirements li img[b-u1tr2c4kq9] {
    content: url('/_content/Incolink.Components/images/info-circle-fill.svg');
}

.password-requirements li.valid[b-u1tr2c4kq9] {
    color: var(--text-success, #23A36D);
}

.password-requirements li.valid img[b-u1tr2c4kq9] {
    content: url('/_content/Incolink.Components/images/checkbox-circle-fill.svg');
}

.password-requirements li.valid[b-u1tr2c4kq9] {
    color: var(--text-success, #23A36D);
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */

/* /Components/Pages/Account/ResetPassword.razor.rz.scp.css */
.password-requirements[b-moe5vme3h2] {
    list-style: none;
    padding: 0;
}

.password-requirements li[b-moe5vme3h2] {
    color: var( --text-body, #444955);
    display: flex;
    align-items: center;
}

.password-requirements li img[b-moe5vme3h2] {
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

.password-requirements li img[b-moe5vme3h2] {
    content: url('/_content/Incolink.Components/images/info-circle-fill.svg');
}

.password-requirements li.valid[b-moe5vme3h2] {
    color: var(--text-success, #23A36D);
}

.password-requirements li.valid img[b-moe5vme3h2] {
    content: url('/_content/Incolink.Components/images/checkbox-circle-fill.svg');
}

.password-requirements li.valid[b-moe5vme3h2] {
    color: var(--text-success, #23A36D);
}