:root {
   scroll-behavior:smooth;
   --app-dark-backgroundColor:#1e1e1e;
   --dot-gathering-bg-color:var(--mud-palette-surface);
}
body {
   -webkit-font-smoothing:antialiased; /* Smoother text rendering on macOS */
   -moz-osx-font-smoothing:grayscale;  /* Smoother text on Firefox/macOS */
}
:root.appDarkTheme, body.appDarkTheme {color:var(--mud-palette-text-primary);background-color:var(--app-dark-backgroundColor);}

.app-hidden {visibility:hidden;overflow:hidden;height:0;width:0;}
.appHeader, .appHeaderGrondverf {width:100%;height:48px;border-bottom:1px dashed;border-color:var(--mud-palette-divider);}
.appHeaderGrondverf {color:var(--mud-palette-white);background-color:rebeccapurple;}
.appBody, .appBodyGrondverf {flex: 1 1 auto;border-left:1px dashed;border-color:var(--mud-palette-divider);height:calc(100vh - 144px);} /* 144 = Magic offset */
.appBodyGrondverf {background-color:darkmagenta;}
.appChildBody, .appChildBodyGrondverf {flex:0 0 auto;}
.appChildBodyGrondverf {background-color:midnightblue;}
.appFooter, .appFooterGrondverf, .appFooterGrondverfLight {width:100%;height:32px;border-top:1px dashed;border-color:var(--mud-palette-divider);}
.appFooterGrondverf, .appFooterGrondverfLight {background-color:rebeccapurple;}
.appFooterGrondverfLight {color:var(--mud-palette-white);}
.appDivider, .appDividerDark {background-color:#E0E0E0;margin:0;padding:0;margin-left:3px;padding-right:3px;}     /* Name: "Very light gray" */
.appDividerDark {background-color:#4A4A4A;} /* Name: "Very dark gray"  */
.appToolBar, .appToolBarSlim {color:var(--mud-palette-text-primary);background-color:var(--mud-palette-background-gray);user-select:text;height:48px;}
.appToolBarSlim {height:32px !important;}
.appBarIcon {color:var(--mud-palette-text-primary);filter:drop-shadow(1px 1px 1px #000000);}
.appChildGrondverf {background-color: midnightblue !important;}
.appChildGrondverfLight {background-color: dodgerblue !important;}

.noSelection {user-select:none;}
.noFlex {flex-shrink:0;flex-grow:0;}
.listStyleNone {list-style-type:none;}
.dashedTopBorder {width:100%;border-top:1px dashed;border-color:var(--mud-palette-divider);}
.dashedBottomBorder {width:100%;border-bottom:1px dashed;border-color:var(--mud-palette-divider);}
.dashedRightBorder {border-right:1px dashed;border-color:var(--mud-palette-divider);}
.menuItemWidth {width:220px;}
.verticalAlignMiddle {vertical-align:middle;}
.whiteSpacePrewrapWordBreakAll {white-space:pre-wrap;word-break:break-all}
.whiteSpaceNowrap, .ellipsis, .mud-expand-panel-text {white-space:nowrap;}
.ellipsis, .mud-expand-panel-text {overflow:hidden;text-overflow:ellipsis;}
.underline {text-decoration-line:underline;text-underline-offset:3px;}
.bold {font-weight:bold;}

.compareAreEqualHover {color:var(--mud-palette-text-primary);background-color:var(--mud-palette-success-hover);}
.compareNotEqualHover {color:var(--mud-palette-text-primary);background-color:var(--mud-palette-secondary-hover);}
.compareErrorHover {color:var(--mud-palette-text-primary);background-color:var(--mud-palette-error-hover);}
.compareError {color:var(--mud-palette-black);background-color:var(--mud-palette-error);}
.compareAreEqualChipWhiteText {color:var(--mud-palette-white);background-color:var(--mud-palette-success);}
.compareAreEqualChipWhiteTextDark {color:var(--mud-palette-white);background-color:var(--mud-palette-success-darken);}
.compareNotEqualChipWhiteText {color:var(--mud-palette-white);background-color:var(--mud-palette-secondary);}
.compareNotEqualChipWhiteTextDark {color:var(--mud-palette-white);background-color:var(--mud-palette-secondary-darken);}

/*
mark {background-color:var(--mud-palette-tertiary);color:var(--mud-palette-text-primary);}
markText {background-color:var(--mud-palette-error);color:var(--mud-palette-text-primary);}
*/
.textWhiteColor {color:var(--mud-palette-white);}
.textPrimaryColor {color:var(--mud-palette-text-primary);}
.transparentBackground {background-color:transparent;}
.whiteOnBlackTransparentMudChipColors {color:var(--mud-palette-white);background-color:rgba(0, 0, 0, 0.2);}
.mudPaletteBackground {background-color:var(--mud-palette-background);}
.mudPaletteBackgroundGray {background-color:var(--mud-palette-background-gray);}
.errorBackground {background-color:var(--mud-palette-error);}
.surfaceBackground {background-color:var(--mud-palette-surface);}

/* TextSearch */
/* .search-glyph {background-color:orange;} */
/* .search-highlight {background-color: rgba(255, 255, 0, 0.3);border: 1px solid rgba(255, 165, 0, 0.5);} */

/* Make the MudAutoComplete Headers Sticky */
.mud-header {
   color: #FFFFFF !important;
   border: thin solid black !important;
   border-radius: 0 !important;
   background-color: var(--mud-palette-primary) !important;
}

.mud-popover .mudAutocompleteList .mud-autocomplete-before-items {position:sticky;top:0;z-index:2;background-color:var(--mud-palette-background);}
.stickyTableHeader {z-index:1;height:38px;top:38px;position:sticky;}
.stickyExpansionPanelHeader {z-index:10;top:0;position:sticky !important;background-color:var(--mud-palette-background-gray);}
.comboBoxHighlight {color:var(--mud-palette-success-hover);}
.dropShadowFilterBlack {filter:drop-shadow(1px 1px 1px black);}
.dropShadowFilterWhite {filter:drop-shadow(1px 1px 1px white);}

/* Reset so that a vertical-scroll handler is reachable (MudDataGrid) */
.mud-split-panel .divider::before {position:unset;}

.consolasFont {font-family:Consolas, monospace;font-size:0.8rem;overflow-y:auto;scroll-behavior:smooth;}
div.console-container {font-family:Consolas, monospace;font-size:0.8rem;overflow-y:auto;scroll-behavior:smooth;}
div.console-light {background-color:#012456;color:var(--mud-palette-text-primary);}
div.console-dark {background-color:var(--mud-palette-background-gray);color:var(--mud-palette-gray-light);}

.fadeIn {opacity:0;animation:fadeIn 0.5s forwards;}
.fadeInFast {opacity:0;animation:fadeIn 0.3s forwards;}
@keyframes fadeIn {
   from {opacity:0;}
   to {opacity:1;}
}
.slideInLeft {animation:slideInLeft 0.5s forwards;}
@keyframes slideInLeft {
   from {transform:translateX(-100%);}
   to {transform:translateX(0);}
}
.slideInRight {animation:slideInRight 0.5s forwards;}
@keyframes slideInRight {
   from {transform:translateX(100%);}
   to {transform:translateX(0);}
}


.selectedRowLightTheme {background-color:#aaeeaa !important;} /* KPN_Kleurenpalet_Groen_3 */
.selectedRowDarkTheme {background-color:#008800 !important;} /* KPN_Kleurenpalet_Groen_1 */
.selectedRemovalRow {text-decoration:line-through;background-color:#ff3366 !important;} /* KPN_PrimairAanvullendpalet_Rood */

/* Patch: Disable all uppercase button text */
.mud-tab, .mud-button-label {text-transform:none;}

/* Less space between checkbox and first column */
.mud-table-row .mud-table-cell {padding-inline-end:6px !important;}

/* Prevent unwanted component shrink/stretch */
.mud-button, .mud-icon-button, .mud-switch {flex-shrink:0;flex-grow:0;}

/* 2022-10-09: Prevent cutting of a MudTabPanel Badge on the right side */
/* .mud-badge {padding:4px 0px;} */


/* Blinks an element */
.blink {animation:blinkVisibility 3s steps(1, end) 3s infinite;}
.fastBlink {animation:blinkOpacity 1s steps(1, end) infinite;}
.slowBlink {animation:blinkVisibility 7s steps(1, end) infinite;}
@keyframes blinkVisibility {96%, 100% {visibility:hidden;}}
@keyframes blinkOpacity {50% {opacity: 0;transform:translateZ(0);}} /* This triggers hardware acceleration */

.pulsate {animation: pulsate 2s ease-in-out infinite;}
@keyframes pulsate {
   0% {opacity: 1; transform: scale(1);}
   50% {opacity: 0.5; transform: scale(1.1);}
   100% {opacity: 1; transform: scale(1);}
}

.dot-gathering {
   width: 16px;
   height: 16px;
   border-radius: 9px;
   background-color: var(--dot-gathering-bg-color);
   color: transparent;
   filter: blur(2px);
}
.dot-gathering::before, .dot-gathering::after {
   content: "";
   display: inline-block;
   position: absolute;
   top: 3px;
   left: -47px;
   width: 12px;
   height: 12px;
   border-radius: 6px;
   background-color: var(--dot-gathering-bg-color);
   color: transparent;
   opacity: 0;
   filter: blur(1px);
   animation: dot-gathering 2s infinite ease-in reverse;
}
.dot-gathering::after {animation-delay:0.5s;}
@keyframes dot-gathering {
   0% {opacity:0;transform:translateX(0);}
   35%, 60% {opacity:1;transform:translateX(50px);}
   100% {opacity:0;transform:translateX(100px);}
}

.scrollingClouds {
   background-image: url("/img/Clouds.webp");
   background-blend-mode: multiply;
   animation-name: slide, fadeIn;
   animation-duration: 60s, 0.5s;
   animation-direction: alternate, normal;
   animation-iteration-count: infinite, 1;
   animation-fill-mode: none, forwards;
   transform: translateZ(0);
}
@keyframes slide {from {background-position:0 0;} to {background-position:100% 0;} }