html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
}

page {
    height: 100% !important;
}

/* Scoped away from the new admin shell.

   This painted every <main> pure black for the old layout, where <main> was the
   dark frame around a white .content panel. The new shell's <main> is the themed
   content area, and this rule - with !important - was overriding its background
   in both themes: the page stayed black in light mode, which left headings drawn
   in the light theme's dark ink invisible against it.

   Kept rather than deleted so any other <main> still gets the old treatment. */
main:not(.wx-content) {
    background-color: #000 !important;
    display: flex;
    flex-direction: column;
}

.content {
    padding-top: 1.1rem;
    border-top-left-radius: 25px !important;
    background-color: #fff !important; 
    flex-grow: 1; 
    height: 100% !important; 
    overflow-y: auto; 
}

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

.btn.btn-primary {
    background-color: #e5841e !important; /* Orange color */
    border-color: #e5841e !important; /* Match border to background */
    color: white !important; /* Text color */
}

.btn.btn-primary:hover {
    background-color: #ffaa52 !important; 
    border-color: #ffaa52 !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
   
    background-color: #fff !important; 
    border-color: #fff !important;
    color: #000 !important; 
}

.btn.btn-primary:disabled {
    background-color: #e5841e !important;
    border-color: #e5841e !important;
    color: white !important;
    opacity: 0.65;
}

.btn:focus,
.btn:active:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.2rem #fff !important;
    border-color: #e5841e !important;
    background-color: #e5841e !important;
    color: white !important;
}


.spinner-overlay {
    position: fixed; /* Position relative to the viewport, not the parent container */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center it horizontally and vertically */
    z-index: 9999; /* Ensure it's on top of other content */
    pointer-events: none; /* Allows interaction with other page elements */
    display: flex;
    justify-content: center;
    align-items: center;
}




h1:focus {
    outline: none;
}

h4 {
    font-size: 16px;
}

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

.sidebar {
    background-color: #000 !important;
}

.nav-scrollable {
    background-color: #000 !important; 
    
}

.top-row {
    background-color: #000 !important;
    border: none !important;
    
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-pills .nav-link {
    background-color: #000 !important;
    color: white; 
    border-radius: 0.25rem; 
    padding: 0.5rem 1rem; 
    margin-right: 0.5rem; 
}

.nav-pills .nav-link:hover {
    background-color: #ffaa52 !important;
    color: white;
}

.nav-pills .nav-item .nav-link.active {
    background-color: #e5841e !important; 
    color: white; 
}

.fa, .fas {
    color: #000; 
}

.grid-link {
    color: #000; 
    text-decoration: none; 
    font-weight: bold; 
    padding: 5px;
}

.grid-link:hover {
    color: #e5841e; 
    transition: color 0.3s ease;
}

.grid-link i {
    color: #000; 
    transition: color 0.3s ease; 
}

.grid-link:hover i {
    color: #e5841e; 
}

.white-large-icon {
    color: white !important; 
    font-size: 20px; 
    margin-right: 8px;
}

.nav-link {
    display: flex; 
    align-items: center; 
    color: white; 
    text-decoration: none; 
    padding: 0 0 0 15px;
}

.nav-link .icon {
    width: 25px;
    text-align: center; 
    margin-right: 8px;
}

.nav-link .nav-text {
    flex: 1;
    text-align: left;
}

.header-link { 
    margin: 0 5px !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.header-link:hover {
    color: #e5841e !important;
}

.subheader-link {
    margin: 0 5px ;
    color: #000 ;
    text-decoration: none ;
    transition: color 0.3s ease ;
}

.subheader-link:hover {
    color: #e5841e ;
}

.form-check-input:checked {
    background-color: #e5841e !important;
    border-color: #e5841e !important;
}

.spanning-column {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    border-left: 1px solid #ddd; /* Optional: Add a border for separation */
    padding: 1rem;
    box-sizing: border-box;
}

.spanning-column .content {
    width: 100%;
    text-align: center;
}

/* SYNCFUSION CALENDAR CSS */
.event-blue {
    background-color: #6C8EBF !important; /* Muted Blue */
}

.event-brown {
    background-color: #BFA07B !important; /* Muted Brown */
}

.event-coral {
    background-color: #BF746B !important; /* Muted Coral */
}

.event-dark-green {
    background-color: #5F8F5B !important; /* Muted Dark Green */
}

.event-gray {
    background-color: #A0A0A0 !important; /* Muted Gray */
}

.event-green {
    background-color: #8ABF84 !important; /* Muted Green */
}

.event-lavender {
    background-color: #BFA1D6 !important; /* Muted Lavender */
}

.event-light-blue {
    background-color: #A3C6D6 !important; /* Muted Light Blue */
}

.event-mustard {
    background-color: #D6B86A !important; /* Muted Mustard */
}

.event-navy {
    background-color: #5B6B8F !important; /* Muted Navy */
}

.event-olive {
    background-color: #8A8F5B !important; /* Muted Olive */
}

.event-orange {
    background-color: #BF8E6B !important; /* Muted Orange */
}

.event-peach {
    background-color: #D6A387 !important; /* Muted Peach */
}

.event-pink {
    background-color: #BF6B93 !important; /* Muted Pink */
}

.event-purple {
    background-color: #8E6BBF !important; /* Muted Purple */
}

.event-red {
    background-color: #BF6B6B !important; /* Muted Red */
}

.event-rose {
    background-color: #D6A3A3 !important; /* Muted Rose */
}

.event-slate {
    background-color: #6B7A8F !important; /* Muted Slate */
}

.event-yellow {
    background-color: #BFB76B !important; /* Muted Yellow */
}

.event-teal {
    background-color: #6BBFB7 !important; /* Muted Teal */
}


/* SYNCFUSION GRID CSS */
.e-row:nth-child(even) {
    background-color: #f2f2f2 !important;
}

.e-row:nth-child(odd) {
    background-color: #ffffff !important;
}

.e-grid .e-row:hover > .e-rowcell {
    background-color: #cccccc !important;
}

.e-grid .e-selectionbackground {
    background-color: #cccccc !important;
}

.sf-grid .e-pager .e-prev,
.sf-grid .e-pager .e-next,
.sf-grid .e-pager .e-first,
.sf-grid .e-pager .e-last,
.sf-grid .e-pager .e-link {
    background-color: #fff !important;
    border-color: #fff !important;
    color: black !important;
    outline: none !important;
    box-shadow: none !important;
}

.sf-grid .e-pager .e-prev:hover,
.sf-grid .e-pager .e-next:hover,
.sf-grid .e-pager .e-first:hover,
.sf-grid .e-pager .e-last:hover,
.sf-grid .e-pager .e-link:hover {
    background-color: #ffaa52 !important;
    border-color: #ffaa52 !important;
    color: black !important;
    outline: none !important;
    box-shadow: none !important;
}

.sf-grid .e-pager .e-link {
    background-color: #000 !important;
    border-color: #fff !important;
    color: white !important;
}

.sf-grid .e-pager .e-link.e-active,
.sf-grid .e-pager .e-link.e-active:first-child,
.sf-grid .e-pager .e-link.e-active:last-child,
.sf-grid .e-pager .e-link.e-active:nth-child(2n+1) {
    background-color: #e5841e !important;
    border-color: #e5841e !important;
    color: white !important;
}

.sf-grid .e-pager .e-link.e-active:hover,
.sf-grid .e-pager .e-link:focus,
.sf-grid .e-pager .e-link:active,
.sf-grid .e-pager .e-link:focus-visible {
    background-color: #e5841e !important;
    border-color: #e5841e !important;
    color: white !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Delete Confirmation Pop-up*/
#deleteConfirmationModal .modal-dialog {
    margin-top: 20vh; /* This will move the modal down 20% of the viewport height */
}

.form-floating .e-ddt {
    padding-top: 26px;
    padding-left: 10px;
}

.sfcontrol-border-off input:focus,
.sfcontrol-border-off textarea:focus,
.sfcontrol-border-off select:focus {
    outline: none !important;
    box-shadow: none !important;
}

.form-floating label {
    font-size: 15px !important;
    font-family: Arial !important;
    color: GrayText !important;
}

.form-floating .e-multiselect {
    padding-top: 26px;
    padding-left: 10px;
}

.sfcontrol-border-off label {
    margin-top: -10px;
    pointer-events: none;
}

.form-control {
    margin-top: -5px !important;
    font-size: 16px !important;
    color: GrayText !important;
}


/* Make sure text editor is on-top*/
.e-rte-full-screen {
z-index: 1050 !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}