/* 1. Import the fonts from Google */
@import url('https://fonts.googleapis.com/css2?family=Alice&family=Open+Sans:wght@400;600&display=swap');

/* 2. Apply Open Sans to the body and general text */
body, p, span, li, a {
    font-family: 'Lato', sans-serif !important;
    font-weight: 400;
    -webkit-font-smoothing: antialiased; /* Makes Alice look crisper */
}

/* 3. Apply Alice to all Headings */
h1, h2, h3, h4, h5, .title, .boxTitle {
    font-family: 'Alice', serif !important;
    font-weight: normal !important;
    color: #2d47b6; /* Optional: Sets headings to your Society Blue */
    line-height: 1.3;

}

.WaGadgetMenuHorizontal .menuInner {
    text-align: center !important;
}

.WaGadgetMenuHorizontal .menuInner ul.firstLevel {
    display: inline-block !important;
    float: none !important;
}

.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li {
    display: inline-block !important;
    float: none !important;
}



/* Clean flat style for the 'Authorization Required' login button */
.WaGadgetAuthorizationRequired .loginButton {
    background-color: #2d47b6 !important;
    background-image: none !important;
    color: #ffffff !important;
    
    /* Formatting */
    border: none !important;
    border-radius: 4px !important;
    padding: 12px 25px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    
    /* Remove all shadows */
    box-shadow: none !important;
    
    transition: background-color 0.2s ease;
}

/* Subtle color change on hover without adding depth */
.WaGadgetAuthorizationRequired .loginButton:hover {
    background-color: #2d47b6 !important; /* Slightly darker blue */
    box-shadow: none !important;
}

/* 1. Change the Mobile Header Bar to your Blue */
.WaGadgetMobilePanel .mobilePanel {
    background: #2d47b6 !important;
    color: #ffffff !important;
    box-shadow: none !important; /* Ensures no shadow on the mobile bar */
}

/* 2. Style the Login Button (System Pages & Header) */
.WaGadgetAuthorizationRequired .loginButton,
.WaGadgetLoginButton .loginBoxLinkButton,
.loginBoxPopup .loginButton {
    background-color: #2d47b6 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    font-family: 'Lato', sans-serif !important;
    text-transform: uppercase !important;
    padding: 10px 20px !important;
}

/* 3. The Hover Dropdown Box (Top Right) */
.loginBoxPopup {
    background-color: #ffffff !important;
    border: 2px solid #2d47b6 !important;
    box-shadow: 0px 5px 15px rgba(0,0,0,0.1) !important;
}

/* 4. Ensure text remains readable in the Mobile Panel */
.WaGadgetMobilePanel .mobilePanel a, 
.WaGadgetMobilePanel .mobilePanel span {
    color: #ffffff !important;
}

/* Change the mobile login/hamburger icon color to white */
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton {
    color: #ffffff !important;
}

/* Ensure the specific login icon (the little person) is also white */
.WaGadgetMobilePanel .mobilePanel .buttonLogin:before,
.WaGadgetMobilePanel .mobilePanel .buttonLogin.logged:before {
    color: #ffffff !important;
}
/* Style the Mobile Login Dropdown Box */
.WaGadgetMobilePanel .mobilePanel .loginInner {
    background: #2d47b6 !important; /* Your Blue */
    color: #ffffff !important;      /* White text */
    border-top: 1px solid #2d47b6 !important; /* Slightly darker blue border top */
    box-shadow: 0px 10px 20px rgba(0,0,0,0.2) !important;
}

/* Fix text and label colors inside that mobile box */
.WaGadgetMobilePanel .mobilePanel .loginInner .loginLabel,
.WaGadgetMobilePanel .mobilePanel .loginInner .rememberMe label,
.WaGadgetMobilePanel .mobilePanel .loginInner a {
    color: #ffffff !important;
}

/* Style the 'Log in' button inside that mobile box */
.WaGadgetMobilePanel .mobilePanel .loginInner .loginButton {
    background-color: #e9e8e8 !important; /* White button */
    color: #2d47b6 !important;           /* Blue text */
    border: none !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

/* Ensure the Mobile Icon is white (not gold) */
.WaGadgetMobilePanel .mobilePanel .mobilePanelButton {
    color: #ffffff !important;
}
/* 1. The Mobile Bar and its Icons */
.WaGadgetMobilePanel .mobilePanel {
    background: #2d47b6 !important;
}

.WaGadgetMobilePanel .mobilePanel .mobilePanelButton {
    color: #ffffff !important; /* Forces icons to white */
}

/* 2. The Menu Dropdown (When you click the Hamburger) */
.WaGadgetMobilePanel .mobilePanel .menuInner,
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel {
    background: #2d47b6 !important;
    border-top: 1px solid rgba(255,255,255,0.2) !important;
}

/* 3. The Menu Links (Fixing that gold #e7c57f) */
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li > .item > a {
    color: #ffffff !important; /* Change gold to white */
    font-family: 'Lato', sans-serif !important;
}

/* Selected/Active Menu Item */
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel > li.sel > .item > a {
    background-color: rgba(255,255,255,0.1) !important; /* Subtle highlight for current page */
    color: #ffffff !important;
}

/* 4. The Login Dropdown (When you click the Person icon) */
.WaGadgetMobilePanel .mobilePanel .loginInner {
    background: #2d47b6 !important;
    color: #ffffff !important;
    border-top: 1px solid rgba(255,255,255,0.2) !important;
}

/* 5. The Login Button inside the dropdown */
.WaGadgetMobilePanel .mobilePanel .loginInner .loginButton {
    background-color: #ffffff !important;
    color: #2d47b6 !important;
    border-radius: 4px !important;
    font-weight: bold !important;
}
/* 1. Sub-menu container background */
.WaGadgetMobilePanel .mobilePanel .menuInner ul ul {
    background-color: #2d47b6 !important; /* A slightly darker blue for depth */
    padding: 0 !important;
}

/* 2. Sub-menu item links */
.WaGadgetMobilePanel .mobilePanel .menuInner ul ul li .item a {
    color: #ffffff !important;
    padding-left: 30px !important; /* Indents sub-items for clarity */
    font-size: 16px !important;    /* Slightly smaller than top-level */
    text-transform: none !important; /* Often looks better for sub-pages */
}

/* 3. Sub-menu HOVER state */
.WaGadgetMobilePanel .mobilePanel .menuInner ul ul li .item a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* 4. Fix for the parent 'First Level' container again */
.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel {
    background: #2d47b6 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}
/* 1. Force the input background to White and text to Dark Gray */
.WaGadgetMobilePanel .mobilePanel .loginInner .loginContainerForm [class$='TextBox'] input[class$='TextBoxControl'],
.WaGadgetMobilePanel .mobilePanel .loginInner input[type="text"],
.WaGadgetMobilePanel .mobilePanel .loginInner input[type="password"] {
    background-color: #ffffff !important;
    color: #2d47b6 !important; /* Removes the gold text */
    border: 1px solid #2d47b6 !important;
    box-shadow: none !important;
    height: 35px !important;
    padding: 5px 10px !important;
    -webkit-appearance: none; /* Fixes iOS inner shadows */
}

/* 2. Fix the "Placeholder" text (the ghost text before you type) */
/* This ensures the 'Email' and 'Password' hints aren't gold either */
.WaGadgetMobilePanel .mobilePanel .loginInner input::-webkit-input-placeholder { color: #2d47b6 !important; }
.WaGadgetMobilePanel .mobilePanel .loginInner input::-moz-placeholder { color: #2d47b6 !important; }
.WaGadgetMobilePanel .mobilePanel .loginInner input:-ms-input-placeholder { color: #2d47b6 !important; }


/* 1. Login Icons and Links - Blue Box with White Text/Icon */
.WaGadgetLoginForm .loginContainer .loginLink,
.WaGadgetLoginForm .loginContainer.authenticated .loginLink,
.WaGadgetLoginForm .loginContainer .loginLink a,
.WaGadgetLoginForm .loginContainer .loginLink span {
    background: #2d47b6 !important; /* Your Blue Box */
    color: #ffffff !important;      /* White Text and Icon */
    text-decoration: none;
    padding: 5px 10px;             /* Optional: adds breathing room inside the blue box */
    border-radius: 4px;            /* Optional: slight rounding for a cleaner look */
}

/* 2. Calendar View Switchers - Overriding Specificity */
body .WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button] span, 
body .WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button] span:hover {
    background: #2d47b6 !important; /* Your Blue */
    color: #ffffff !important;      /* White Text */
    font-family: 'Lato', sans-serif !important;
    text-transform: uppercase !important;
    border: none !important;
    box-shadow: none !important;
}
/* 1. Main Login Panel Container */
.WaGadgetLoginForm .loginPanel {
    background: #2d47b6 !important; /* Your Blue */
    color: #ffffff !important;      /* Ensure text inside is white */
    border: 1px solid #2d47b6 !important; /* Match border to blue */
}

/* 2. Adjusting the "Arrow" pointing up */
/* This removes the gray border arrow */
.WaGadgetLoginForm .loginPanel:before {
    border-bottom-color: #2d47b6 !important;
}

/* This changes the main white arrow to blue */
.WaGadgetLoginForm .loginPanel:after {
    border-bottom-color: #2d47b6 !important;
}

/* 3. Ensuring labels/links inside the blue panel are visible */
.WaGadgetLoginForm .loginPanel label,
.WaGadgetLoginForm .loginPanel a,
.WaGadgetLoginForm .loginPanel .mandatorySymbol {
    color: #ffffff !important;
}

/* 4. Optional: Keep input fields white for readability */
.WaGadgetLoginForm .loginPanel input[type="text"],
.WaGadgetLoginForm .loginPanel input[type="password"] {
    background: #ffffff !important;
    color: #333333 !important;
}
/* 1. Login Icon Circle */
.WaGadgetLoginForm .loginContainer .loginLink,
.WaGadgetLoginForm .loginContainer.authenticated .loginLink {
    background: #2d47b6 !important; /* Blue Background */
    color: #ffffff !important;      /* White Icon/Text */
    
    /* Makes it a Circle */
    width: 40px !important;         /* Adjust size as needed */
    height: 40px !important;        /* Must match width */
    border-radius: 50% !important;  /* The magic for circles */
    
    /* Centering the icon inside */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;          /* Reset padding to keep circle perfect */
    text-decoration: none;
    overflow: hidden;
}

/* Ensure the anchor/text inside is also white */
.WaGadgetLoginForm .loginContainer .loginLink a,
.WaGadgetLoginForm .loginContainer .loginLink span {
    color: #ffffff !important;
}

/* 2. Login Panel (The dropdown box) */
.WaGadgetLoginForm .loginPanel {
    background: #2d47b6 !important;
    color: #ffffff !important;
    border: 1px solid #2d47b6 !important;
}

/* 3. The Arrow pointing up to the circle */
.WaGadgetLoginForm .loginPanel:before,
.WaGadgetLoginForm .loginPanel:after {
    border-bottom-color: #2d47b6 !important;
}


/* 2. Calendar View Switchers - Complete Override */

/* Target the buttons, the links inside them, and the hover states */
body .WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button] span,
body .WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button] a,
body .WaGadgetEventsStateCalendar #idViewSwitchersTable .selected span,
body .WaGadgetEventsStateCalendar #idViewSwitchersTable .selected a {
    background-color: #2d47b6 !important; /* Force Blue Background */
    color: #ffffff !important;            /* Force White Text (Kills the Gold) */
    font-family: 'Lato', sans-serif !important;
    text-transform: uppercase !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Specifically kill the hover state if it turns back to gold/gray */
body .WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button]:hover span,
body .WaGadgetEventsStateCalendar #idViewSwitchersTable div[id*=Button]:hover a {
    background-color: #1a2e8c !important; /* Slightly darker blue on hover */
    color: #ffffff !important;
}

/* If there are specific "active" or "selected" indicators (often gold) */
body .WaGadgetEventsStateCalendar #idViewSwitchersTable .selected {
    background-color: #2d47b6 !important;
    border-bottom: 2px solid #ffffff !important; /* Optional: white underline for active tab */
}


/* 1. Change Calendar Event Blocks from Gold to Blue */
.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar td > div {
    background: #2d47b6 !important; /* Replaces #cda44b (Gold) with Blue */
    color: #ffffff !important;      /* Keeps text white */
    border-radius: 3px;            /* Optional: makes event tags look cleaner */
}

/* 2. Target the Links inside those event blocks */
.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar td > div a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* 3. Fixing the Day Headers (if they are still gold/gray) */
.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar th {
    background-color: #2d47b6 !important;
    color: #ffffff !important;
}

/* 4. Fixing the "Today" highlight (often gold) */
.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar td.today {
    border: 2px solid #2d47b6 !important;
}


/* 1. Force the Hover background to remain your Blue */
.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar td > div:hover {
    background: #2d47b6 !important; /* Forces brand blue on hover */
    color: #ffffff !important;      /* Ensures text stays white */
}

/* 1. Target the DIV and every element inside it on hover */
.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar td > div:hover,
.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar td > div:hover *, 
.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar td > div a:hover {
    background-color: #2d47b6 !important; /* Force Brand Blue */
    background-image: none !important;    /* Kills any gradient overlays */
    color: #ffffff !important;            /* Force White text */
}

/* 2. Target the Table Cell (TD) to stop it from changing color */
.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar td:hover {
    background-color: transparent !important;
}

/* 3. If it's a "Selected" or "Active" state causing the blue */
.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar td > div.selected,
.WaGadgetEventsStateCalendar .monthViewType .EventListCalendar td > div.active {
    background-color: #2d47b6 !important;
}
/* Update Calendar Year View Header */
.WaGadgetEventsStateCalendar .yearViewType .EventListCalendar a.yearViewHeader {
    background-color: #2d47b6 !important; /* Your Blue */
    color: #ffffff !important;            /* White Text */
    display: block !important;           /* Ensures background fills the space */
    padding: 5px !important;             /* Adds breathing room */
    text-decoration: none !important;
    font-family: 'Lato', sans-serif !important;
}

/* Ensure it stays blue/white when hovered */
.WaGadgetEventsStateCalendar .yearViewType .EventListCalendar a.yearViewHeader:hover {
    background-color: #1a2e8c !important; /* Slightly darker blue on hover */
    color: #ffffff !important;
}