html {
    overflow-y: scroll;
}

a {
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    transition: all .2s linear;
}

/* Dynamic theme styles will be applied via inline styles from the components */
.menu-text {
    font-weight: 600 !important;
    letter-spacing: normal !important;
    transition: color 0.2s ease;
}

.dropdown-menu {
    border: none !important;
    /*-webkit-box-shadow: 0 2px 5px -1px rgba(0,0,0,0.2) !important;
    box-shadow: 0 2px 5px -1px rgba(0,0,0,0.2) !important;*/
}

.header {
    padding: 0 !important;
}

.header.navbar.navbar-transparent {
    background: #fff !important;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.header.navbar.navbar-small {
    background: #fff !important;
    border-bottom: none !important;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.2) !important;
}

.header.navbar.navbar-small .navbar-brand, .header.navbar.navbar-small .navbar-nav > li > a{
    padding: 15px;
}

.header .container {
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
}

.header.navbar .navbar-nav > li > a,
.header.navbar .navbar-header .brand-text {
    color: #000;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: normal;
    line-height: 20px;
}

.header .navbar-brand {
    padding: 25px 10px;
    height: auto;
}

.header.navbar.navbar-small .navbar-brand {
    padding: 10px;
}

.header .navbar-toggle,
.header .navbar-toggle:hover,
.header .navbar-toggle:focus {
    margin-top: 23px;
    margin-bottom: 23px;
    background-color: transparent;
    border-color: #8F8E8E;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    transition: all .2s linear;
}

.header.navbar-small .navbar-toggle {
    border-color: #ddd;
    margin-top: 8px;
    margin-bottom: 8px;
}

.header.navbar-transparent .navbar-toggle .icon-bar, .navbar-transparent .navbar-toggle .icon-bar {
    background: #8f8e8e;
}

.header.navbar-small .navbar-toggle .icon-bar {
    background: #888;
}

.header .navbar-brand img {
    max-height: 30px;
    margin: 0;
}

.header .navbar-user img {
    float: left;
    width: 30px;
    height: 30px;
    margin: -5px 10px 0 0;
    border-radius: 30px;
}

.header .navbar-user i {
    float: left;
    font-size: 26px !important;
    line-height: 26px !important;
    margin: -5px 10px 0 0;
}

.header.navbar .navbar-nav > li > a {
    padding: 30px 15px;
}

.row-centered {
    text-align: center;
}

.col-centered {
    display: inline-flex;
    float: none;
    text-align: left;
    margin-right: -4px;
}

.content {
    padding: 30px 15px 35px
}

.header.navbar .navbar-small .navbar-nav > li > a {
    padding: 15px;
}

.navbar-nav > li > .dropdown-menu {
    background: #fff !important;
    margin: 0 !important;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 500px;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.navbar-nav > li > .dropdown-menu::-webkit-scrollbar {
    display: none;
}

.navbar-small .navbar-nav > li > .dropdown-menu {
    background-color: #fff !important;
}

.navbar-nav > li.open .dropdown-menu {
    background: transparent;
}

.navbar-nav .dropdown-menu > li + li {
    border: none !important;
}

.navbar-nav .dropdown-menu > li > a {
    color: #000 !important;
    padding: 10px 15px !important;
}

.navbar-nav .open .dropdown-menu > li > a {
    padding: 5px 15px 5px 25px;
}

.navbar-nav > li.dropdown > .dropdown-menu {
    border-color: #fff;
}

.navbar-nav .dropdown-menu > li.active > a,
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus {
    background: #222 !important;
    color: #00acac !important;
}

.footer {
    padding: 60px 0;
    background: #242a30;
    text-align: center;
    box-shadow: inset 0 100px 80px -80px rgba(0,0,0,0.7);
    -webkit-box-shadow: inset 0 100px 80px -80px rgba(0,0,0,0.7);
}

.footer .footer-brand-logo {
    display: block;
    margin: 0 auto 10px;
    width: 40px;
    border: 20px solid;
    border-color: #4DCACA #31A3A3 #1D8888;
    border-radius: 4px;
}

.footer .footer-brand {
    font-size: 24px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 30px;
}

.footer .social-list {
    margin: 30px 0 0;
    font-size: 20px;
}

footer .link-list,
.footer .link-list {
    font-size: 14px;
}

.footer .link-list {
    margin: 30px 0 0;
}

footer .link-list a:not(:last-child),
.footer .link-list a:not(:last-child) {
    margin-right: 0.5rem;
}

#gritter-notice-wrapper {
    width: 371px !important;
    z-index: 1040 !important;
}

#gritter-notice-wrapper p  {
    line-height: inherit;
} 

.gritter-item-wrapper {
    background: none !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}

.gritter-top,
.gritter-item,
.gritter-bottom {
    background: url(images/transparent/black-0.8.png) !important;
    background: rgba(0,0,0,0.8) !important;
}

.gritter-with-image {
    width: 280px !important;
}

.gritter-with-image, .gritter-without-image {
    padding-right: 70px !important;
}

.gritter-image {
    margin: 2px 10px 0 0 !important;
    border-radius: 4px;
}

.gritter-title {
    font-size: 12px !important;
    line-height: 16px !important;
    padding-bottom: 0px !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-shadow: none !important;
}

.gritter-light .gritter-title {
    color: #333 !important;
    font-weight: 600 !important;
}

.gritter-item {
    font-family: inherit !important;
    color: #aaa !important;
    font-size: 10px !important;
    padding: 2px 15px 5px !important;
}

.gritter-close:hover:before,
.gritter-close:focus:before {
    color: #fff;
}

.gritter-light .gritter-item,
.gritter-light .gritter-bottom,
.gritter-light .gritter-top {
    background: url(images/transparent/white-0.98.png) !important;
    background: rgba(255,255,255,0.98) !important;
    color: #999 !important;
}

.gritter-light .gritter-close {
    border-left: 1px solid #ccd0d4;
}

.gritter-light .gritter-close:hover:before,
.gritter-light .gritter-close:focus:before {
    color: #2d353c;
}

.gritter-close,
.gritter-light .gritter-close {
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    background: 0 0 !important;
    width: 70px !important;
    height: auto !important;
    display: block !important;
    bottom: 0;
    border-left: 1px solid #444;
}

.gritter-close:before,
.gritter-light .gritter-close:before {
    content: 'Close' !important;
    position: absolute !important;
    text-align: center !important;
    right: 0 !important;
    color: #999;
    left: 0;
    z-index: 10;
    text-indent: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 9px;
    top: 50% !important;
    margin-top: -5px;
    font-family: inherit;
}

.gritter-close:before,
.gritter-light .gritter-close:before {
    content: 'OK' !important;
}

div.ad {
    text-align: center;
}

div.ad iframe {
    border: none;
}

div.content.ad,
div.content .ad,
div.footer .ad {
    padding-bottom: 35px;
}

div.content .sidebar .ad {
    padding-bottom: 0;
}

/* Responsive improvements */
@media (max-width: 1023px) {
    .header .container {
        padding: 0 10px;
    }
}

@media (max-width: 767px) {
    .header.navbar .navbar-nav > li > a {
        padding: 15px;
        font-size: 14px;
    }

    .navbar-transparent,
    .navbar-collapse {
        background: #fff !important;
        border-top: none;
        box-shadow: 0 2px 4px rgba(0,0,0,.1);
    }

    .navbar-nav > li.dropdown > .dropdown-menu {
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        margin-top: 0;
    }

    .navbar-nav > li > .dropdown-menu {
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
    
    .header .navbar-brand {
        padding: 15px 10px;
    }
    
    .header .navbar-brand img {
        max-height: 25px;
    }
}

@media (max-width: 420px) {
    #gritter-notice-wrapper {
        width: 320px !important;
    }

    .gritter-close, .gritter-light .gritter-close {
        width: 60px !important;
    }

    .gritter-with-image, .gritter-without-image {
        padding-right: 60px !important;
    }

    .gritter-image {
        width: 40px !important;
        height: 40px !important;
        margin-top: 0 !important;
    }

    .gritter-item {
        padding: 0 10px 5px !important;
    }

    .gritter-with-image {
        width: 250px !important;
    }
}

@media (max-width: 360px) {
    #gritter-notice-wrapper {
        width: 280px !important;
    }

    .gritter-with-image {
        width: 210px !important;
    }
}

/* Theme mode specific styles */
.tenant-mode {
    /* Tenant specific styles will be applied dynamically */
}

.neutral-mode {
    /* Neutral theme styles */
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --background-color: #ffffff;
    --text-color: #212529;
}

.wcag-mode {
    /* WCAG high contrast mode - Light purple text on black */
    --primary-color: #ffff00;
    --secondary-color: #DD99FF;
    --background-color: #000000;
    --text-color: #DD99FF;
}

/* WCAG Mode - Force body and all content containers to use black background */
.wcag-mode,
.wcag-mode body,
.wcag-mode .page-content,
.wcag-mode .content,
.wcag-mode .main-content,
.wcag-mode .content-wrapper,
.wcag-mode .container-fluid,
.wcag-mode .container,
.wcag-mode #main-content,
.wcag-mode main,
.wcag-mode section,
.wcag-mode article,
.wcag-mode .bg-white,
.wcag-mode .bg-gray-50,
.wcag-mode [class*="bg-"] {
    background-color: #000000 !important;
    color: #DD99FF !important;
}

/* WCAG Mode - Ensure all text elements inherit the correct color */
.wcag-mode p,
.wcag-mode span,
.wcag-mode div,
.wcag-mode li,
.wcag-mode td,
.wcag-mode th {
    color: #DD99FF !important;
}

/* High contrast mode enhancements */
.high-contrast {
    /* Force high contrast borders and outlines */
}

.high-contrast * {
    border-color: currentColor !important;
}

.high-contrast a:focus,
.high-contrast button:focus,
.high-contrast input:focus,
.high-contrast select:focus,
.high-contrast textarea:focus {
    outline: 3px solid currentColor !important;
    outline-offset: 2px !important;
}

/* Reduced motion support */
.reduced-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

/* Focus mode enhancements */
.focus-mode *:focus {
    outline: 4px solid #ffff00 !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 8px rgba(255, 255, 0, 0.3) !important;
}

/* Responsive font sizing */
html {
    font-size: 100%;
}

@media (max-width: 640px) {
    html {
        font-size: 87.5%;
    }
}

/* WCAG mode - Light purple text, yellow borders, black background */
.wcag-mode,
.wcag-mode * {
    background-color: #000000 !important;
    color: #DD99FF !important;
}

.wcag-mode .header,
.wcag-mode .navbar {
    background-color: #000000 !important;
    border-bottom: 3px solid #ffff00 !important;
}

.wcag-mode .navbar-nav > li > a,
.wcag-mode h1,
.wcag-mode h2,
.wcag-mode h3,
.wcag-mode h4,
.wcag-mode h5,
.wcag-mode h6,
.wcag-mode p,
.wcag-mode span,
.wcag-mode div,
.wcag-mode td,
.wcag-mode th,
.wcag-mode label {
    color: #DD99FF !important;
    font-weight: 600 !important;
}

.wcag-mode .navbar-nav > li > a:hover,
.wcag-mode .navbar-nav > li > a:focus {
    background-color: #ffff00 !important;
    color: #000000 !important;
    font-weight: 700 !important;
}

.wcag-mode .dropdown-menu {
    background-color: #000000 !important;
    border: 3px solid #ffff00 !important;
}

.wcag-mode .dropdown-menu > li > a {
    color: #DD99FF !important;
    font-weight: 600 !important;
}

.wcag-mode .dropdown-menu > li > a:hover,
.wcag-mode .dropdown-menu > li > a:focus {
    background-color: #ffff00 !important;
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Syncfusion Components WCAG Support */
.wcag-mode .e-schedule,
.wcag-mode .e-schedule *,
.wcag-mode .e-btn,
.wcag-mode .e-btn *,
.wcag-mode .e-calendar,
.wcag-mode .e-calendar *,
.wcag-mode .e-grid,
.wcag-mode .e-grid *,
.wcag-mode .e-toolbar,
.wcag-mode .e-toolbar *,
.wcag-mode .e-input-group,
.wcag-mode .e-input-group *,
.wcag-mode .e-dropdownlist,
.wcag-mode .e-dropdownlist *,
.wcag-mode .e-datepicker,
.wcag-mode .e-datepicker *,
.wcag-mode .e-popup,
.wcag-mode .e-popup * {
    background-color: #000000 !important;
    color: #DD99FF !important;
    border-color: #ffff00 !important;
    font-weight: 600 !important;
}

.wcag-mode .e-schedule .e-work-cells,
.wcag-mode .e-schedule .e-date-header-wrap,
.wcag-mode .e-schedule .e-content-wrap,
.wcag-mode .e-schedule .e-time-cells-wrap,
.wcag-mode .e-schedule .e-header-cells,
.wcag-mode .e-schedule .e-day-wrapper,
.wcag-mode .e-schedule .e-month-wrapper {
    background-color: #000000 !important;
    color: #DD99FF !important;
    border-color: #ffff00 !important;
}

.wcag-mode .e-schedule .e-appointment,
.wcag-mode .e-schedule .e-event,
.wcag-mode .e-schedule .e-appointment-details {
    background-color: #333333 !important;
    color: #DD99FF !important;
    border: 2px solid #ffff00 !important;
    font-weight: 600 !important;
}

/* Additional Syncfusion WCAG overrides for buttons and controls */
.wcag-mode .e-btn,
.wcag-mode .e-toolbar-item,
.wcag-mode .e-tbar-btn,
.wcag-mode .e-tbar-btn-text,
.wcag-mode .e-button {
    background-color: #000000 !important;
    color: #DD99FF !important;
    border: 2px solid #ffff00 !important;
    font-weight: 600 !important;
}

.wcag-mode .e-btn:hover,
.wcag-mode .e-toolbar-item:hover,
.wcag-mode .e-tbar-btn:hover {
    background-color: #ffff00 !important;
    color: #000000 !important;
    border-color: #ffff00 !important;
    font-weight: 700 !important;
}

/* Syncfusion dropdown and popup overrides */
.wcag-mode .e-list-item,
.wcag-mode .e-ddl,
.wcag-mode .e-content {
    background-color: #000000 !important;
    color: #DD99FF !important;
    border-color: #ffff00 !important;
}

/* Syncfusion Scheduler specific WCAG overrides */
.wcag-mode .e-schedule .e-date-header,
.wcag-mode .e-schedule .e-navigate,
.wcag-mode .e-schedule .e-header-date,
.wcag-mode .e-schedule .e-header-day,
.wcag-mode .e-schedule .e-current-day {
    background-color: #ffff00 !important;
    color: #000000 !important;
    font-weight: 700 !important;
}

.wcag-mode .e-schedule .e-date-header:hover,
.wcag-mode .e-schedule .e-navigate:hover {
    background-color: #000000 !important;
    color: #ffff00 !important;
    border: 2px solid #ffff00 !important;
}

.wcag-mode .e-list-item:hover,
.wcag-mode .e-list-item.e-hover {
    background-color: #ffff00 !important;
    color: #000000 !important;
}

/* WCAG mode for all text inputs and form elements */
.wcag-mode input,
.wcag-mode textarea,
.wcag-mode select,
.wcag-mode .form-control {
    background-color: #000000 !important;
    color: #DD99FF !important;
    border: 2px solid #ffff00 !important;
    font-weight: 600 !important;
}

.wcag-mode input:focus,
.wcag-mode textarea:focus,
.wcag-mode select:focus,
.wcag-mode .form-control:focus {
    background-color: #000000 !important;
    color: #ffff00 !important;
    border-color: #ffff00 !important;
    outline: 3px solid #ffff00 !important;
    outline-offset: 2px !important;
}

/* WCAG mode for main layout containers */
.wcag-mode #public-layout-container,
.wcag-mode #main-content,
.wcag-mode .container,
.wcag-mode .row,
.wcag-mode .col,
.wcag-mode main,
.wcag-mode article,
.wcag-mode section {
    background-color: #000000 !important;
    color: #DD99FF !important;
}

/* WCAG mode buttons and links */
.wcag-mode button,
.wcag-mode .btn,
.wcag-mode a {
    background-color: #333333 !important;
    color: #DD99FF !important;
    border: 2px solid #ffff00 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

.wcag-mode button:hover,
.wcag-mode .btn:hover,
.wcag-mode a:hover {
    background-color: #ffff00 !important;
    color: #000000 !important;
    border-color: #ffff00 !important;
    font-weight: 700 !important;
}

/* Force override for stubborn white backgrounds and inline styles */
.wcag-mode .bg-white,
.wcag-mode .background-white,
.wcag-mode [style*="background: white"],
.wcag-mode [style*="background-color: white"],
.wcag-mode [style*="background: #fff"],
.wcag-mode [style*="background-color: #fff"],
.wcag-mode [style*="background: rgb(255"],
.wcag-mode [style*="background-color: rgb(255"] {
    background-color: #000000 !important;
    color: #DD99FF !important;
}

/* Force override for all divs and sections */
.wcag-mode div,
.wcag-mode section,
.wcag-mode article,
.wcag-mode aside,
.wcag-mode main {
    background-color: transparent !important;
}

/* Scheduler specific overrides for WCAG mode */
.wcag-mode .scheduler-component,
.wcag-mode .scheduler-component .bg-white,
.wcag-mode .scheduler-component .rounded-lg,
.wcag-mode .scheduler-component .shadow-md,
.wcag-mode #master-page-container,
.wcag-mode #page-content,
.wcag-mode #page-header,
.wcag-mode #rows,
.wcag-mode .custom-row,
.wcag-mode .component {
    background-color: #000000 !important;
    color: #DD99FF !important;
}

/* Force scheduler divs to black background */
.wcag-mode .scheduler-component > div,
.wcag-mode .scheduler-component div[class*="bg-"],
.wcag-mode #master-page-container > div,
.wcag-mode #page-content > div {
    background-color: #000000 !important;
}

/* Ensure page wrapper and content areas are black */
.wcag-mode .page-wrapper,
.wcag-mode .content-wrapper,
.wcag-mode #app,
.wcag-mode #blazor-app {
    background-color: #000000 !important;
    color: #DD99FF !important;
}

/* WCAG mobile menu specific styling */
.wcag-mode .mobile-menu,
.wcag-mode .fixed.inset-y-0,
.wcag-mode .lg\\:hidden,
.wcag-mode .translate-x-0,
.wcag-mode [class*="translate-x"] {
    background-color: #000000 !important;
    color: #DD99FF !important;
    border-left: 3px solid #ffff00 !important;
}

/* WCAG mobile menu expanded state */
.wcag-mode .toolbar-controls.expanded,
.wcag-mode .mobile-submenu-content.expanded {
    background-color: #000000 !important;
}

.wcag-mode .mobile-menu-item,
.wcag-mode .mobile-menu-item a {
    background-color: #000000 !important;
    color: #DD99FF !important;
    border-bottom: 1px solid #ffff00 !important;
    font-weight: 600 !important;
}

.wcag-mode .mobile-menu-item:hover,
.wcag-mode .mobile-menu-item a:hover {
    background-color: #ffff00 !important;
    color: #000000 !important;
    font-weight: 700 !important;
}

.wcag-mode .e-btn:hover,
.wcag-mode .e-schedule .e-appointment:hover,
.wcag-mode .e-calendar .e-cell:hover,
.wcag-mode .e-grid .e-row:hover {
    background-color: #ffff00 !important;
    color: #000000 !important;
    font-weight: 700 !important;
}

.wcag-mode .e-input-group.e-control-wrapper input,
.wcag-mode .e-input-group input,
.wcag-mode .e-textbox,
.wcag-mode .e-numerictextbox input {
    background-color: #000000 !important;
    color: #DD99FF !important;
    border: 2px solid #ffff00 !important;
    font-weight: 600 !important;
}

.wcag-mode .e-input-group.e-control-wrapper input:focus,
.wcag-mode .e-input-group input:focus,
.wcag-mode .e-textbox:focus {
    background-color: #000000 !important;
    color: #DD99FF !important;
    border-color: #ffff00 !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 0, 0.3) !important;
    outline: 2px solid #ffff00 !important;
}

/* Form elements */
.wcag-mode input,
.wcag-mode textarea,
.wcag-mode select,
.wcag-mode button {
    background-color: #000000 !important;
    color: #DD99FF !important;
    border: 2px solid #ffff00 !important;
    font-weight: 600 !important;
}

.wcag-mode input:focus,
.wcag-mode textarea:focus,
.wcag-mode select:focus,
.wcag-mode button:hover,
.wcag-mode button:focus {
    background-color: #ffff00 !important;
    color: #000000 !important;
    outline: 3px solid #DD99FF !important;
    font-weight: 700 !important;
}

/* Tables */
.wcag-mode table,
.wcag-mode table th,
.wcag-mode table td {
    background-color: #000000 !important;
    color: #DD99FF !important;
    border: 2px solid #ffff00 !important;
}

.wcag-mode table th {
    font-weight: 700 !important;
}

.wcag-mode table tr:hover {
    background-color: #333333 !important;
}

/* Links */
.wcag-mode a {
    color: #DD99FF !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

.wcag-mode a:hover,
.wcag-mode a:focus {
    background-color: #ffff00 !important;
    color: #000000 !important;
    font-weight: 700 !important;
    outline: 2px solid #DD99FF !important;
}