body,
html {
    height: 100%;
}

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

.identity-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.identity-box {
    width: 30%;
    min-width: 320px;
    height: auto;
    border: 1px solid #05164D;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 20px;
}

.h-100 {
    height: 100%;
}

.w-100 {
    width: 100%;
}

.skyhub-logo {
    width: 280px;
}

/* DarkMode Theme Configurations  */
body {
    --logo-filter: none;
}

body:has(.mud-layout.dark-mode),
body.dark-mode {
    --logo-filter: contrast(40%) brightness(130%) saturate(2);
}

.skyhub-logo,
#components-reconnect-modal::before {
    filter: var(--logo-filter);
    transition: filter 0.3s ease;
}

/*
dark-mode-preferred class is used to set the initial theme before applying the appropriate theme for the page.
This helps avoid a light flash on pages that should most likely be in dark mode, for example, for EFB systems.
in system that light theme is selected, pages with '.dark-mode-preferred' class has also '.light-mode'  that override all pallet to light mode.
*/
body.dark-mode,
body:has(.dark-mode-preferred) {
    --mud-palette-black: rgba(39, 39, 47, 1);
    --mud-palette-white: rgba(255, 255, 255, 1);
    --mud-palette-primary: rgba(121, 134, 203, 1);
    --mud-palette-primary-rgb: 121, 134, 203;
    --mud-palette-primary-text: rgba(255, 255, 255, 1);
    --mud-palette-primary-darken: rgb(97, 113, 194);
    --mud-palette-primary-lighten: rgb(152, 163, 215);
    --mud-palette-primary-hover: rgba(121, 134, 203, 0.058823529411764705);
    --mud-palette-secondary: rgba(255, 189, 50, 1);
    --mud-palette-secondary-rgb: 255, 189, 50;
    --mud-palette-secondary-text: rgba(255, 255, 255, 1);
    --mud-palette-secondary-darken: rgb(255, 177, 10);
    --mud-palette-secondary-lighten: rgb(255, 203, 92);
    --mud-palette-secondary-hover: rgba(255, 189, 50, 0.058823529411764705);
    --mud-palette-tertiary: rgba(83, 125, 108, 1);
    --mud-palette-tertiary-rgb: 83, 125, 108;
    --mud-palette-tertiary-text: rgba(255, 255, 255, 1);
    --mud-palette-tertiary-darken: rgb(69, 104, 90);
    --mud-palette-tertiary-lighten: rgb(98, 147, 127);
    --mud-palette-tertiary-hover: rgba(83, 125, 108, 0.058823529411764705);
    --mud-palette-info: rgba(50, 153, 255, 1);
    --mud-palette-info-rgb: 50, 153, 255;
    --mud-palette-info-text: rgba(255, 255, 255, 1);
    --mud-palette-info-darken: rgb(10, 133, 255);
    --mud-palette-info-lighten: rgb(92, 173, 255);
    --mud-palette-info-hover: rgba(50, 153, 255, 0.058823529411764705);
    --mud-palette-success: rgba(129, 199, 132, 1);
    --mud-palette-success-rgb: 129, 199, 132;
    --mud-palette-success-text: rgba(255, 255, 255, 1);
    --mud-palette-success-darken: rgb(104, 187, 108);
    --mud-palette-success-lighten: rgb(156, 211, 159);
    --mud-palette-success-hover: rgba(129, 199, 132, 0.058823529411764705);
    --mud-palette-warning: rgba(255, 168, 0, 1);
    --mud-palette-warning-rgb: 255, 168, 0;
    --mud-palette-warning-text: rgba(255, 255, 255, 1);
    --mud-palette-warning-darken: rgb(214, 143, 0);
    --mud-palette-warning-lighten: rgb(255, 182, 36);
    --mud-palette-warning-hover: rgba(255, 168, 0, 0.058823529411764705);
    --mud-palette-error: rgba(239, 83, 80, 1);
    --mud-palette-error-rgb: 239, 83, 80;
    --mud-palette-error-text: rgba(255, 255, 255, 1);
    --mud-palette-error-darken: rgb(236, 53, 50);
    --mud-palette-error-lighten: rgb(242, 117, 115);
    --mud-palette-error-hover: rgba(239, 83, 80, 0.058823529411764705);
    --mud-palette-dark: rgba(39, 39, 47, 1);
    --mud-palette-dark-rgb: 39, 39, 47;
    --mud-palette-dark-text: rgba(255, 255, 255, 1);
    --mud-palette-dark-darken: rgb(23, 23, 28);
    --mud-palette-dark-lighten: rgb(56, 56, 67);
    --mud-palette-dark-hover: rgba(39, 39, 47, 0.058823529411764705);
    --mud-palette-text-primary: rgba(232, 234, 246, 1);
    --mud-palette-text-secondary: rgba(255, 255, 255, 0.4980392156862745);
    --mud-palette-text-disabled: rgba(255, 255, 255, 0.2);
    --mud-palette-action-default: rgba(173, 173, 177, 1);
    --mud-palette-action-default-hover: rgba(173, 173, 177, 0.058823529411764705);
    --mud-palette-action-disabled: rgba(255, 255, 255, 0.25882352941176473);
    --mud-palette-action-disabled-background: rgba(255, 255, 255, 0.11764705882352941);
    --mud-palette-surface: rgba(55, 55, 64, 1);
    --mud-palette-background: rgba(50, 51, 61, 1);
    --mud-palette-background-gray: rgba(39, 39, 47, 1);
    --mud-palette-drawer-background: rgba(39, 39, 47, 1);
    --mud-palette-drawer-text: rgba(255, 255, 255, 0.4980392156862745);
    --mud-palette-drawer-icon: rgba(255, 255, 255, 0.4980392156862745);
    --mud-palette-appbar-background: rgba(39, 39, 47, 1);
    --mud-palette-appbar-text: rgba(255, 255, 255, 0.6980392156862745);
    --mud-palette-lines-default: rgba(255, 255, 255, 0.11764705882352941);
    --mud-palette-lines-inputs: rgba(255, 255, 255, 0.2980392156862745);
    --mud-palette-table-lines: rgba(255, 255, 255, 0.11764705882352941);
    --mud-palette-table-striped: rgba(255, 255, 255, 0.047058823529411764);
    --mud-palette-table-hover: rgba(0, 0, 0, 0.0392156862745098);
    --mud-palette-divider: rgba(255, 255, 255, 0.11764705882352941);
    --mud-palette-divider-light: rgba(255, 255, 255, 0.058823529411764705);
    --mud-palette-skeleton: rgba(255, 255, 255, 0.10980392156862745);
    --mud-palette-gray-default: #9E9E9E;
    --mud-palette-gray-light: #BDBDBD;
    --mud-palette-gray-lighter: #E0E0E0;
    --mud-palette-gray-dark: #757575;
    --mud-palette-gray-darker: #616161;
    --mud-palette-overlay-dark: rgba(33, 33, 33, 0.4980392156862745);
    --mud-palette-overlay-light: rgba(255, 255, 255, 0.4980392156862745);
}

body.light-mode {
    --mud-palette-black: rgba(39, 44, 52, 1);
    --mud-palette-white: rgba(255, 255, 255, 1);
    --mud-palette-primary: rgba(5, 22, 77, 1);
    --mud-palette-primary-rgb: 5, 22, 77;
    --mud-palette-primary-text: rgba(255, 255, 255, 1);
    --mud-palette-primary-darken: rgb(2, 11, 38);
    --mud-palette-primary-lighten: rgb(7, 32, 115);
    --mud-palette-primary-hover: rgba(5, 22, 77, 0.058823529411764705);
    --mud-palette-secondary: rgba(255, 189, 50, 1);
    --mud-palette-secondary-rgb: 255, 189, 50;
    --mud-palette-secondary-text: rgba(255, 255, 255, 1);
    --mud-palette-secondary-darken: rgb(255, 177, 10);
    --mud-palette-secondary-lighten: rgb(255, 203, 92);
    --mud-palette-secondary-hover: rgba(255, 189, 50, 0.058823529411764705);
    --mud-palette-tertiary: rgba(83, 125, 108, 1);
    --mud-palette-tertiary-rgb: 83, 125, 108;
    --mud-palette-tertiary-text: rgba(255, 255, 255, 1);
    --mud-palette-tertiary-darken: rgb(69, 104, 90);
    --mud-palette-tertiary-lighten: rgb(98, 147, 127);
    --mud-palette-tertiary-hover: rgba(83, 125, 108, 0.058823529411764705);
    --mud-palette-info: rgba(33, 150, 243, 1);
    --mud-palette-info-rgb: 33, 150, 243;
    --mud-palette-info-text: rgba(255, 255, 255, 1);
    --mud-palette-info-darken: rgb(12, 128, 223);
    --mud-palette-info-lighten: rgb(71, 167, 245);
    --mud-palette-info-hover: rgba(33, 150, 243, 0.058823529411764705);
    --mud-palette-success: rgba(0, 200, 83, 1);
    --mud-palette-success-rgb: 0, 200, 83;
    --mud-palette-success-text: rgba(255, 255, 255, 1);
    --mud-palette-success-darken: rgb(0, 163, 68);
    --mud-palette-success-lighten: rgb(0, 235, 98);
    --mud-palette-success-hover: rgba(0, 200, 83, 0.058823529411764705);
    --mud-palette-warning: rgba(255, 152, 0, 1);
    --mud-palette-warning-rgb: 255, 152, 0;
    --mud-palette-warning-text: rgba(255, 255, 255, 1);
    --mud-palette-warning-darken: rgb(214, 129, 0);
    --mud-palette-warning-lighten: rgb(255, 167, 36);
    --mud-palette-warning-hover: rgba(255, 152, 0, 0.058823529411764705);
    --mud-palette-error: rgba(244, 67, 54, 1);
    --mud-palette-error-rgb: 244, 67, 54;
    --mud-palette-error-text: rgba(255, 255, 255, 1);
    --mud-palette-error-darken: rgb(242, 28, 13);
    --mud-palette-error-lighten: rgb(246, 96, 85);
    --mud-palette-error-hover: rgba(244, 67, 54, 0.058823529411764705);
    --mud-palette-dark: rgba(66, 66, 66, 1);
    --mud-palette-dark-rgb: 66, 66, 66;
    --mud-palette-dark-text: rgba(255, 255, 255, 1);
    --mud-palette-dark-darken: rgb(46, 46, 46);
    --mud-palette-dark-lighten: rgb(87, 87, 87);
    --mud-palette-dark-hover: rgba(66, 66, 66, 0.058823529411764705);
    --mud-palette-text-primary: rgba(66, 66, 66, 1);
    --mud-palette-text-secondary: rgba(0, 0, 0, 0.5372549019607843);
    --mud-palette-text-disabled: rgba(0, 0, 0, 0.3764705882352941);
    --mud-palette-action-default: rgba(0, 0, 0, 0.5372549019607843);
    --mud-palette-action-default-hover: rgba(0, 0, 0, 0.058823529411764705);
    --mud-palette-action-disabled: rgba(0, 0, 0, 0.25882352941176473);
    --mud-palette-action-disabled-background: rgba(0, 0, 0, 0.11764705882352941);
    --mud-palette-surface: rgba(255, 255, 255, 1);
    --mud-palette-background: rgba(255, 255, 255, 1);
    --mud-palette-background-gray: rgba(245, 245, 245, 1);
    --mud-palette-drawer-background: rgba(255, 255, 255, 1);
    --mud-palette-drawer-text: rgba(66, 66, 66, 1);
    --mud-palette-drawer-icon: rgba(97, 97, 97, 1);
    --mud-palette-appbar-background: rgba(5, 22, 77, 1);
    --mud-palette-appbar-text: rgba(255, 255, 255, 1);
    --mud-palette-lines-default: rgba(0, 0, 0, 0.11764705882352941);
    --mud-palette-lines-inputs: rgba(189, 189, 189, 1);
    --mud-palette-table-lines: rgba(224, 224, 224, 1);
    --mud-palette-table-striped: rgba(0, 0, 0, 0.0196078431372549);
    --mud-palette-table-hover: rgba(0, 0, 0, 0.0392156862745098);
    --mud-palette-divider: rgba(224, 224, 224, 1);
    --mud-palette-divider-light: rgba(0, 0, 0, 0.8);
    --mud-palette-skeleton: rgba(0, 0, 0, 0.10980392156862745);
    --mud-palette-gray-default: #9E9E9E;
    --mud-palette-gray-light: #BDBDBD;
    --mud-palette-gray-lighter: #E0E0E0;
    --mud-palette-gray-dark: #757575;
    --mud-palette-gray-darker: #616161;
    --mud-palette-overlay-dark: rgba(33, 33, 33, 0.4980392156862745);
    --mud-palette-overlay-light: rgba(255, 255, 255, 0.4980392156862745);
}